<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partNumber">
              <a-input v-model="model.partNumber" placeholder="请输入编号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="品名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName">
              <a-input v-model="model.productName" placeholder="请输入品名"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <a-input v-model="model.type" placeholder="请输入型号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="规格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spec">
              <a-input v-model="model.spec" placeholder="请输入规格"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="采购性质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buyingClassify">
              <j-dict-select-tag type="radio" v-model="model.buyingClassify" dictCode="buying_classify"
                placeholder="请选择采购性质" @change="onClassifyChange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="!showState">
            <a-form-model-item label="供应商名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierName">
              <a-input v-model="model.supplierName" placeholder="请输入供应商名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="!showState">
            <a-form-model-item label="产品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pics">
              <j-image-upload isMultiple v-model="model.pics"></j-image-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs" v-show="false">
      <a-tab-pane tab="零件表" :key="refKeys[0]" :forceRender="true">
        <j-vxe-table keep-source :ref="refKeys[0]" :loading="tblPartSemifinishedTable.loading"
          :columns="tblPartSemifinishedTable.columns" :dataSource="tblPartSemifinishedTable.dataSource" :maxHeight="300"
          :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" />
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>
  import {getAction} from '@/api/manage'
  import {JVxeTableModelMixin} from '@/mixins/JVxeTableModelMixin.js'
  import {JVXETypes} from '@/components/jeecg/JVxeTable'
  import {getRefPromise,VALIDATE_FAILED} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
  import {validateDuplicateValue} from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import { duplicateCheck } from '@/api/api'

  export default {
    name: 'TblMaterialForm',
    mixins: [JVxeTableModelMixin],
    components: {
      JFormContainer,
    },
    data() {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        model: {
          meterialType: "1",
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          partNumber: [
            {required: true,message: '请输入编号!'}, 
            {validator: this.validatePartNumber}
          ],
          productName: [{required: true,message: '请输入品名!'}, ],
          type: [{required: true,message: '请输入型号!'}, ],
          spec: [{required: true,message: '请输入规格!'}, ],
          buyingClassify: [{required: true,message: '请输入采购性质!'}, ],
        },
        refKeys: ['零件表', ],
        tableKeys: ['零件表', ],
        activeKey: '零件表',
        // tbl_part_semifinished
        tblPartSemifinishedTable: {
          loading: false,
          dataSource: [],
          columns: [{
              title: '零件编号',
              key: 'partNumber',
              type: JVXETypes.popup,
              popupCode: "part_list",
              field: "part_number,product_name,type,spec,buying_classify",
              orgFields: "part_number,product_name,type,spec,buying_classify",
              destFields: "partNumber,productName,type,spec,buyingClassify",
              width: "16%",
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{
                required: true,
                message: '请输入${title}'
              }],
            },
            {
              title: '品名',
              key: 'productName',
              type: JVXETypes.input,
              disabled: true,
              width: "16%",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '型号',
              key: 'type',
              type: JVXETypes.input,
              disabled: true,
              width: "16%",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '规格',
              key: 'spec',
              type: JVXETypes.input,
              disabled: true,
              width: "14%",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '采购性质',
              key: 'buyingClassify',
              type: JVXETypes.input,
              disabled: true,
              width: "12%",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '数量',
              key: 'count',
              type: JVXETypes.input,
              width: "10%",
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{
                required: true,
                message: '请输入${title}'
              }],
            },

            {
              title: 'part_number',
              key: 'part_number',
              type: "hidden"
            },

            {
              title: 'product_name',
              key: 'product_name',
              type: "hidden"
            },



            {
              title: 'buying_classify',
              key: 'buying_classify',
              type: "hidden"
            },
          ]
        },
        url: {
          add: "/meterial/tblMaterial/add",
          edit: "/meterial/tblMaterial/edit",
          queryById: "/meterial/tblMaterial/queryById",
          tblPartSemifinished: {
            list: '/meterial/tblMaterial/queryTblPartSemifinishedByMainId'
          },
        },
        showState: true
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      this.$nextTick(() => {
        console.log(this.$refs['零件表'])
        if (this.model.buyingClassify === 'M') {
          // 加工
          this.showState = true;
        } else if(this.model.buyingClassify === 'P'){
          // 采购
          this.validatorRules.supplierName = [{
            required: true,
            message: '请输入供应商名称!'
          }]
          this.validatorRules.pics = [{
            required: true,
            message: '请上传图片!'
          }]
          this.showState = false;
        }
      })
      
    },
    methods: {
      addBefore() {
        this.tblPartSemifinishedTable.dataSource = []
      },
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {})
        // 加载子表数据
        if (this.model.id) {
          let params = {
            id: this.model.id
          }
          this.requestSubTableData(this.url.tblPartSemifinished.list, params, this.tblPartSemifinishedTable)
        }
      },
      //校验所有一对一子表表单
      validateSubForm(allValues) {
        return new Promise((resolve, reject) => {
          Promise.all([]).then(() => {
            resolve(allValues)
          }).catch(e => {
            if (e.error === VALIDATE_FAILED) {
              // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
              this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
            } else {
              console.error(e)
            }
          })
        })
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // 展开
          tblPartSemifinishedList: allValues.tablesValue[0].tableData,
        }
      },
      validateError(msg) {
        this.$message.error(msg)
      },
      onClassifyChange(value) {
        console.log(value)
        console.log(this.$refs['零件表'])
        this.$refs['零件表'].removeRows()
        this.$refs.form.clearValidate()
        if (value === 'M') {
          // 加工
          this.showState = true;
          this.model.supplierName = null;
          this.model.pics = null;
        } else {
          // 采购
          this.validatorRules.supplierName = [{
            required: true,
            message: '请输入供应商名称!'
          }]
          this.validatorRules.pics = [{
            required: true,
            message: '请上传图片!'
          }]
          this.showState = false;
        }
      },
      validatePartNumber(rule, value, callback){
        var params = {
          tableName: "tbl_material",
          fieldName: "part_number",
          fieldVal: value,
          dataId: this.model.id
        };
        duplicateCheck(params).then((res)=>{
          if(res.success){
            callback();
          }else{
            callback('编号已存在');
          }
        })
      },
    }
  }
</script>

<style scoped>
</style>