<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="请输入编号" :disabled="this.excludeIds !== ''">
              </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="unit">
              <j-dict-select-tag type="selectUnit" placeholder="请选择单位" v-model="model.unit"/>
            </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 { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
import { duplicateCheck } from '@/api/api'

export default {
  name: 'TblMaterialForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
  },
  props: ['excludeIds', 'disabled'],
  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: '请输入规格!' },],
        unit: [{ 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
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    this.$nextTick(() => {
      console.log(this.model.buyingClassify)
      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) {
      console.log(allValues)
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        tblPartSemifinishedList: allValues.tablesValue[0].tableData,
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    onClassifyChange(value) {
      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>