<template>
  <view class="">

    <block v-for="(item, index) in formData">
      <u--form labelPosition="left" :model="item" :rules="rules" ref="breedingForm">
        <u-form-item labelWidth="auto" label="耕地总面积" required prop="cultivated_area" borderBottom>
          <u--input v-model="item.cultivated_area" placeholder="请输入耕地总面积"></u--input>
        </u-form-item>
        <picker :range="landPlanList" mode="selector" @change="changeLanPlan" :data-index="index">
          <u-form-item labelWidth="auto" label="土地规划" required prop="planning" borderBottom>
            <u--input :value="landPlanList[item.planning]" placeholder="请选择规划" disabled disabledColor="#fff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </picker>
        <u-form-item labelWidth="auto" label="有无种养殖培训" required prop="breeding_training" borderBottom>
          <u-radio-group v-model="item.breeding_training" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无注册成立种植公司" required prop="planting_company" borderBottom>
          <u-radio-group v-model="item.planting_company" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" labelPosition="top" label="备注" required prop="notes" borderBottom>
          <u--textarea v-model="item.notes" autoHeight placeholder="请输入备注" border="surround" count></u--textarea>
        </u-form-item>
        <u-form-item labelWidth="auto" label="种养殖类型" required prop="breeding_type" borderBottom>
          <u--input v-model="item.breeding_type" placeholder="请输入种养殖类型"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="面积" required prop="area" borderBottom>
          <u--input v-model="item.area" placeholder="请输入面积"></u--input>
        </u-form-item>
        <picker mode="date" @change="changeDate" :data-index="index" :data-value="'breeding_time'">
          <u-form-item labelWidth="auto" label="种养殖开始时间" required prop="breeding_time" borderBottom>
            <u--input :value="item.breeding_time" placeholder="请选择种养殖开始时间" disabled disabledColor="#fff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </picker>
        <picker mode="date" @change="changeDate" :data-index="index" :data-value="'mature_time'">
          <u-form-item labelWidth="auto" label="上市时间" required prop="mature_time" borderBottom>
            <u--input :value="item.mature_time" placeholder="请选择上市时间" disabled disabledColor="#fff"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </picker>
        <u-form-item labelWidth="auto" label="产量" required prop="yield" borderBottom>
          <u--input v-model="item.yield" placeholder="请输入产量"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="预计收益" required prop="estimated_income" borderBottom>
          <u--input v-model="item.estimated_income" placeholder="请输入预计收益"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" labelPosition="top" label="农资农具收益情况" required prop="farm_tools" borderBottom>
          <u--textarea v-model="item.farm_tools" autoHeight placeholder="请输入农资农具收益情况" border="surround"
            count></u--textarea>
        </u-form-item>
        <u-form-item labelWidth="auto" label="是否生态种养殖" required prop="ecological_farming" borderBottom>
          <u-radio-group v-model="item.ecological_farming" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="现代化程度" required prop="modernization" borderBottom>
          <u--input v-model="item.modernization" placeholder="请输入现代化程度"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="预售卖价格" required prop="pre_price" borderBottom>
          <u--input v-model="item.pre_price" placeholder="请输入预售卖价格"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="销售方式" required prop="method_sales" borderBottom>
          <u-radio-group v-model="item.method_sales" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'自销'},{value:0,label:'定点销售'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无加工仓储" required prop="processing_storage" borderBottom>
          <u-radio-group v-model="item.processing_storage" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无宣传推广" required prop="promote" borderBottom>
          <u-radio-group v-model="item.promote" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无运输" required prop="transportation" borderBottom>
          <u-radio-group v-model="item.transportation" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'有'},{value:0,label:'无'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" label="是否有扩大经营需求" required prop="expand_business_needs" borderBottom>
          <u-radio-group v-model="item.expand_business_needs" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item labelWidth="auto" labelPosition="top" label="种养殖需求描述" required prop="demand" borderBottom>
          <u--textarea v-model="item.demand" autoHeight placeholder="请输入种养殖需求描述" border="surround" count></u--textarea>
        </u-form-item>
        <u-form-item labelWidth="auto" labelPosition="top" label="政策补助" required prop="policy_subsidies" borderBottom>
          <u--textarea v-model="item.policy_subsidies" autoHeight placeholder="请输入政策补助" border="surround"
            count></u--textarea>
        </u-form-item>
        <button type="primary" v-if="formData.length>1" class="delete"
          @click="removeBreedingList(index)">删除以上种养殖信息</button>
      </u--form>
    </block>
    <button type="primary" class="plus" @click="pushBreedingList">+</button>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        landPlanList: ['自己种养', '出租', '代种养', '租更多地扩大种植'],
        formData: [{
          "category_id": "1",
          "category_child": "0",
          "cultivated_area": "20", //耕地总面积
          "planning": 66, //土地规划
          "breeding_training": 1, //有无种养殖培训
          "planting_company": 0, //有无注册成立种殖公司
          "notes": "试试备注", //备注
          "breeding_type": 22, //种养殖类型
          "area": 20, //面积
          "breeding_time": "2022-07-22", //种养殖开始时间
          "mature_time": "2022-07-22", //上市时间
          "yield": 600, //产量
          "estimated_income": 1500, //预计收益
          "farm_tools": "收割机一台,打米机一台", //农资农具使用情况
          "ecological_farming": 1, //是否生态种养殖
          "modernization": 30, //现代化程度
          "pre_price": "30.00", //预售卖价格
          "method_sales": 1, //销售方式
          "processing_storage": 0, //有无加工仓储
          "promote": 0, //有无宣传推广
          "transportation": 0, //有无运输
          "expand_business_needs": 0, //是否有扩大经营需求
          "demand": "没有述求", //种养殖述求
          "policy_subsidies": "无补助" //政策补助
        }],
        rules: {
          
        }
      }
    },
    created() {
      this.initRules()
    },
    methods: {
      // 初始化校验
      initRules(){
        let arr = Object.keys(this.formData[0]);
        arr.forEach(key=>{
          this.rules[key] = {
            validator: (rule, value, callback )=>{
              if(Array.isArray(this.$refs.breedingForm)) for(let i = 0;i<this.$refs.breedingForm.length;i++){
                this.$refs.breedingForm[i].clearValidate(rule.field);
              }
              value.trim()!==''?callback():callback('不能为空');
            },
            trigger: ['change', 'blur']
          }
        })
      },
      // 校验
      async validate(){
        let flag = true;
        if(Array.isArray(this.$refs.breedingForm)) for(let i = 0;i<this.$refs.breedingForm.length;i++){
          let res = await this.$refs.breedingForm[i].validate();
          if(!res) {
            flag = false;
            break;
          }
        }
        return flag;
      },
      // 选择土地规划
      changeLanPlan(e) {
        let index = e.currentTarget.dataset.index;
        this.formData[index].planning = e.detail.value;
      },
      // 选择时间
      changeDate(e){
        let data = e.currentTarget.dataset;
        this.formData[data.index][data.value] = e.detail.value;
      },
      // 新增种养殖
      pushBreedingList() {
        this.formData.push({
          "category_id": "",
          "category_child": "",
          "cultivated_area": "", //耕地总面积
          "planning": "", //土地规划
          "breeding_training": "", //有无种养殖培训
          "planting_company": "", //有无注册成立种殖公司
          "notes": "", //备注
          "breeding_type": "", //种养殖类型
          "area": "", //面积
          "breeding_time": "", //种养殖开始时间
          "mature_time": "", //上市时间
          "yield": "", //产量
          "estimated_income": "", //预计收益
          "farm_tools": "", //农资农具使用情况
          "ecological_farming": "", //是否生态种养殖
          "modernization": "", //现代化程度
          "pre_price": "", //预售卖价格
          "method_sales": "", //销售方式
          "processing_storage": "", //有无加工仓储
          "promote": "", //有无宣传推广
          "transportation": "", //有无运输
          "expand_business_needs": "", //是否有扩大经营需求
          "demand": "", //种养殖述求
          "policy_subsidies": "" //政策补助
        })
      },
      // 删除种养殖
      removeBreedingList(index) {
        uni.showModal({
          confirmColor: '#f56c6c',
          content: '确定删除吗?',
          success: (res) => {
            if (res.confirm) {
              this.formData.splice(index, 1);
            }
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  .delete {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 54rpx;
    line-height: 54rpx;
    background: #f56c6c;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .plus {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 54rpx;
    line-height: 54rpx;
    background: $theme-oa-color;
    border-radius: 14rpx;
    color: #fff;
    text-align: center;
  }
</style>