<template>
  <div>
    <el-form :model="formData" :rules="formRules" ref="formRef" label-width="120px">
      <el-form-item label="规格类型" props="haveSpec" :rules="formRules.haveSpec">
        <el-radio-group v-model="formData.haveSpec" :disabled="skuDisabled">
          <el-radio :label="false">无规格</el-radio>
          <el-radio :label="true">有规格</el-radio>
        </el-radio-group>
        <span style="font-size: 12px;color: #606266;margin-left: 30px;"></span>
      </el-form-item>
      <el-form-item label="序列号" >
        <el-radio-group v-model="formData.haveSn">
          <el-radio :label="false">无</el-radio>
          <el-radio :label="true">有</el-radio>
        </el-radio-group>
      </el-form-item>
    <!--   <el-form-item label="是否为租赁商品" >
        <el-radio-group v-model="formData.hire_or_sail">
          <el-radio label="sail">否</el-radio>
          <el-radio label="hire">是</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="SKU信息" prop="product_list">
        <template slot="label">
          <span style="color: #F56C6C;margin-right: 1px">*</span>SKU信息
        </template>
        <sku-editor
          ref="skuEditor"
          :show-label="false"
          :goodsInfo="formData"
          :categoryId="category_id"
          :have-spec="formData.haveSpec"
          :have-sn="formData.haveSn"
          :hireOrSail="hire_or_sail"
          :sku_sn="skuSn"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import SkuEditor from '@/components/SkuEditor'
import { mapState } from 'vuex';
export default {
  name: 'goodsEditFormSku',
  components: {
    [SkuEditor.name]: SkuEditor
  },
  props: {
    propFormData: {
      type: Object,
      default: () => {}
    },
    category_id: {
      type: String
    },
    hire_or_sail:{
      type:String
    },
    skuSn:{
      type: String
    },
    props: {
    basicInfoData: String
  },
  },
  data() {
    return {
      // 表单数据
      formData: {
        haveSpec:false,
        haveSn:false,
      },
      formRules: {
        haveSpec: [this.MixinRequired('请选择规格类型', 'change')],
      },
      skuDisabled:false
    }
  },
  computed: {
    ...mapState({
      basicInfoData: state => state.basicInfoData
    })
  },
  mounted() {
    if(this.$route.params.id){
      this.skuDisabled=true
    }
  },
  methods: {
    updateInternalStateBasedOnBasicInfo(data) {
      // 更新逻辑
      console.log(data);
    },
    /** 表单校验 */
    async validateForm() {
      try {
        // 表单校验
        await this.$refs.formRef.validate()
        // skuEditor校验
        this.formData.product_list = await this.$refs.skuEditor.submit()
        // 校验通过更新数据
        Object.assign(this.propFormData, this.formData)
      } catch (e) {
        this.$message.error('【价格成本】不完善，请填写相关信息')
        this.$emit('updateActiveTab', 'sku')
        // 截断父组件后面的代码
        throw e
      }
    }
  },
  watch: {
    propFormData: {
      handler(newVal) {
        this.formData = newVal
      }
    },
    basicInfoData: {
      handler(newVal) {
        this.updateInternalStateBasedOnBasicInfo(newVal);
      }

    }
  }
}
</script>
