<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="showState">
      <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: 'TblSemiFinishedForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
  },
  props: ['excludeIds', 'disabled'],
  data() {
    return {
      popParam: { ids: '0' },
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      model: {
        buyingClassify: 'M',
        meterialType: '2',
      },
      // 新增时子表默认添加几行空数据
      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
      // tbl_material
      tblPartSemifinishedTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '零件编号',
            key: 'partNumber',
            type: JVXETypes.popup,
            popupCode: 'material_list',
            field: 'id,part_number,product_name,type,spec,buying_classify',
            orgFields: 'id,part_number,product_name,type,spec,buying_classify',
            destFields: 'id,partNumber,productName,type,spec,buyingClassify',
            width: '20%',
            placeholder: '请输入${title}',
            param: { ids: this.excludeIds },
            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: 'id',
            key: 'id',
            type: 'hidden',
          },
          {
            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/tblSemiFinished/add',
        edit: '/meterial/tblSemiFinished/edit',
        queryById: '/meterial/tblSemiFinished/queryById',
        tblPartSemifinished: {
          list: '/meterial/tblSemiFinished/queryTblPartSemifinishedByMainId',
        },
      },
      showState: false,
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    this.$nextTick(() => {
      if (this.model.buyingClassify === 'M') {
        // 加工
        this.showState = true
      } else {
        // 采购
        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) {
      this.$refs.form.clearValidate()
      if (value === 'M') {
        // 加工
        this.$refs['零件半成品表'].addRows()
        this.showState = true
        this.model.supplierName = null
        this.model.pics = null
      } else {
        // 采购
        this.$refs['零件半成品表'].removeRows()
        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>