<!-- 深加工 -->
<template>
  <view class="card">
    <view class="title">深加工</view>
    <u--form labelPosition="left" :model="formData" :rules="rules" ref="breedingForm">
      <u-form-item labelWidth="auto" label="是否在经营" required prop="shop_front" borderBottom>
        <u-radio-group v-model="formData.shop_front" 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>
      <block v-if="formData.shop_front">
        <u-form-item labelWidth="auto" label="有无建设用地" required prop="shop_front" borderBottom>
          <u-radio-group v-model="formData.shop_front" 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="cultivated_area" borderBottom>
          <u--input v-model="formData.cultivated_area" placeholder="请输入面积"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="经营地点" required prop="cultivated_area" borderBottom>
          <u--input v-model="formData.cultivated_area" placeholder="请输入经营地点"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="材料来源" required prop="notes" borderBottom>
          <u--input v-model="formData.cultivated_area" placeholder="请输入门面环境"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无销售渠道" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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" label="有无技术指导" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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" label="有无品牌" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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" label="有无宣传推广" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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" label="有无运输" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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="farm_tools" borderBottom>
          <u--textarea v-model="formData.farm_tools" autoHeight placeholder="请输入经营诉求" border="surround"
            count></u--textarea>
        </u-form-item>
      </block>
      <block v-else>
        <u-form-item labelWidth="auto" label="有无建设用地" required prop="shop_front" borderBottom>
          <u-radio-group v-model="formData.shop_front" 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>
        <picker :range="storeTypeList" mode="selector" @change="changeLanPlan">
          <u-form-item labelWidth="auto" label="经营类型" required prop="planning" borderBottom>
            <u--input :value="storeTypeList[formData.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="cultivated_area" borderBottom>
          <u--input v-model="formData.cultivated_area" placeholder="请输入经营地点"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="人数" required prop="cultivated_area" borderBottom>
          <u--input v-model="formData.cultivated_area" placeholder="请输入经营地点"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无食堂" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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" label="材料来源" required prop="notes" borderBottom>
          <u--input v-model="formData.cultivated_area" placeholder="请输入门面环境"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="自动化办公程度" required prop="notes" borderBottom>
          <u--input v-model="formData.cultivated_area" placeholder="请输入门面环境"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无用工需求" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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" label="有无品牌" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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" label="有无宣传推广" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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" label="库存情况" required prop="notes" borderBottom>
          <u--input v-model="formData.cultivated_area" placeholder="请输入门面环境"></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="有无运输" required prop="planting_company" borderBottom>
          <u-radio-group v-model="formData.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="farm_tools" borderBottom>
          <u--textarea v-model="formData.farm_tools" autoHeight placeholder="请输入经营诉求" border="surround"
            count></u--textarea>
        </u-form-item>
      </block>
    </u--form>

  </view>
</template>

<script>
  export default {
    props:{
      readonly: {
        type: Boolean,
        default: false
      },
      datas:{
        type: Object,
        default: null
      }
    },
    data() {
      return {
        storeTypeList: ['超市', '生鲜', '饭店', '五金', '杂货', '服装', '文具', '其他'],
        formData: {
          shop_front: '', //有无门面
          manage: '',
          // construction_land
          // type
          // area
          // count
          // canteen
          
        },
        rules: {

        }
      }
    },
    created() {
      this.initRules()
    },
    methods: {
      // 初始化校验
      initRules() {
        let arr = Object.keys(this.formData);
        arr.forEach(key => {
          this.rules[key] = {
            validator: (rule, value, callback) => {
              this.$refs.breedingForm.clearValidate(rule.field);
              value.trim() !== '' ? callback() : callback('不能为空');
            },
            trigger: ['change', 'blur']
          }
        })
      },
      // 校验
      async validate() {
        return await this.$refs.breedingForm.validate();;
      },
      // 选择土地规划
      changeLanPlan(e) {
        let index = e.currentTarget.dataset.index;
        this.formData.planning = e.detail.value;
      },
      // 选择时间
      changeDate(e) {
        let data = e.currentTarget.dataset;
        this.formData[data.value] = e.detail.value;
      },
      // 新增开设店铺
      pushBreedingList() {
        this.formData.push({})
      },
      // 删除开设店铺
      removeBreedingList(index) {
        uni.showModal({
          confirmColor: '#f56c6c',
          content: '确定删除吗?',
          success: (res) => {
            if (res.confirm) {
              this.formData.splice(index, 1);
            }
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  .card{
    background-color: #fff;
    margin: 28rpx;
    padding: 28rpx;
    border-radius: 14rpx;
  }
  .title {
    font-weight: 500;
    font-size: 34rpx;

    &::before {
      width: 8rpx;
      height: 26rpx;
      border-radius: 4rpx;
      background-color: #3175f9;
      content: "";
      display: inline-block;
      margin-right: 8rpx;
    }
  }

  .delete {
    margin: 22rpx 0;
    // margin-bottom: 40rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: #f56c6c;
    border-radius: 14rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .plus {

    margin: 22rpx 0;

    // margin-bottom: 40rpx;

    width: 100%;

    height: 64rpx;

    line-height: 64rpx;

    background: $theme-oa-color;

    border-radius: 14rpx;

    font-size: 28rpx;

    color: #fff;

    text-align: center;

  }
</style>