<template>
  <div>
    <el-form :model="formData" style="width: 100%;" ref="dataForm" :rules="formRules"
             label-width="auto"
    >
      <el-row :gutter="24" class="el-row">
        <el-col :span="12" class="el-col">
          <el-form-item label="是否配套系统:" prop="isMatching" class="query-form-item">
            <el-select v-model="formData.isMatching" style="width: 80%" placeholder="是否配套系统"
                       @change="change"
            >
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="单据类型:" prop="documentTypeCode" class="query-form-item">
            <el-select v-model="formData.documentTypeCode" placeholder="请选择单据类型"
                       style="width: 80%"
                       @change="documentTypeChange"
            >
              <el-option
                v-for="item in busTypes"
                :key="item.name"
                :label="item.name"
                :value="item.code"
              >
                <span style="float: left">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="24" class="el-row">
        <el-col :span="12" class="el-col">
          <el-form-item label="业务名称:" prop="busName" class="query-form-item">
            <el-input
              v-model="formData.busName" style="width: 80%"
              auto-complete="off"
              placeholder="请输入业务名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="计量单位:" prop="orderCirType" class="query-form-item">
            <el-select v-model="formData.orderCirType" style="width: 80%" placeholder="选择计量单位">
              <el-option label="流通计量单位" :value="1"></el-option>
              <el-option label="使用计量单位" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="el-row">
        <el-col :span="12" class="el-col">
          <el-form-item label="队列管理:" prop="autoTag" class="query-form-item">
            <el-select v-model="formData.autoTag" style="width: 80%" placeholder="请选择是否队列设备"
            >
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="el-col">
          <el-form-item label="独占库存:" prop="monopoly" class="query-form-item">
            <el-select v-model="formData.monopoly" style="width: 80%" placeholder="独占库存"
                       :disabled="formData.autoTag == 0">
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="el-row">
        <el-col :span="12" class="el-col">
          <el-form-item label="常用业务:" prop="isPopular" class="query-form-item">
            <el-select v-model="formData.isPopular" style="width: 80%" placeholder="业务类型是否常用">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="顺序号:" prop="number" class="query-form-item">

            <el-input-number :min="0" v-model="formData.number" style="width: 80%"
                             placeholder="顺序号"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="el-row">
        <el-col :span="12" class="el-col">
          <el-form-item label="出入库方式:" prop="inAndOutType" class="query-form-item">
            <el-select v-model="formData.inAndOutType" style="width: 80%" placeholder="出入库方式">
              <el-option label="入库" :value="1"></el-option>
              <el-option label="出库" :value="2"></el-option>
              <el-option label="流转" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <!--<el-col :span="12" class="el-col">-->
      <!--  <el-form-item label="作业类型:" prop="workplaceType" class="query-form-item">-->
      <!--    <el-select v-model="formData.workplaceType" style="width: 80%" placeholder="作业类型">-->
      <!--      <el-option label="全部" :value="3"></el-option>-->
      <!--      <el-option label="拆零" :value="1"></el-option>-->
      <!--      <el-option label="取整" :value="2"></el-option>-->

      <!--    </el-select>-->
      <!--  </el-form-item>-->
      <!--</el-col>-->
      <el-row :gutter="24" class="el-row">
        <el-col :span="12" class="el-col">
          <el-form-item label="扫码方式:" prop="scanType" class="query-form-item">
            <el-select v-model="formData.scanType" style="width: 80%" placeholder="选择扫码方式"
                       @change="changeCheckInsert"
            >
              <el-option label="扫码生成业务单" :value="1"></el-option>
              <el-option label="按单校验三期" :value="2"></el-option>
              <el-option label="按单不校验三期" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="结果处理:" prop="checkInsert" class="query-form-item">
            <el-select v-model="formData.checkInsert" style="width: 80%" placeholder="结果处理"
                       :disabled="formData.scanType == 1"
            >
              <el-option label="自动添加" :value="1"></el-option>
              <el-option label="自动不添加" :value="2"></el-option>
              <el-option label="根据提醒决定" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="el-row">
        <el-col :span="12" class="el-col">
          <el-form-item label="发货方:" prop="shipper" class="query-form-item">
            <el-select v-model="formData.shipper" style="width: 80%" placeholder="选择发货方"
                       @change="changeShipper" :disabled="formData.shipper == 3"
            >
              <el-option label="原始单据的发货方" :value="1" v-if="formData.scanType != 1"></el-option>
              <el-option label="原始单据的收货方" :value="2" v-if="formData.scanType != 1"></el-option>
              <el-option label="用户所属仓库" :value="3" v-if="formData.scanType == 1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="收货方:" prop="consignee" class="query-form-item">
            <el-select v-model="formData.consignee" style="width: 80%" placeholder="选择收货方"
                       @change="changeConsignee"
            >
              <div v-if="formData.shipper != 3">
                <el-option label="原始单据的收货方" :value="1"></el-option>
                <el-option label="原始单据的发货方" :value="2"></el-option>
              </div>
              <div v-else>
                <el-option label="供应商" :value="3"></el-option>
                <el-option label="客户" :value="4"></el-option>
                <el-option label="特殊往来" :value="5"></el-option>
                <el-option label="内部科室" :value="6"></el-option>
                <!--<el-option label="填写" :value="7"></el-option>-->
              </div>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!--<el-divider></el-divider>-->
      <!--<el-row :gutter="24" class="el-row">-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="往来单位类型:" prop="corpType" class="query-form-item">-->
      <!--      <el-select v-model="formData.corpType" style="width: 80%" placeholder="选择往来单位类型"-->
      <!--                 @change="corpTypeChange"-->
      <!--      >-->
      <!--        <el-option label="供应商" :value="2"></el-option>-->
      <!--        <el-option label="客户" :value="1"></el-option>-->
      <!--        <el-option label="特殊往来" :value="4"></el-option>-->
      <!--        <el-option label="内部科室" :value="3"></el-option>-->
      <!--        <el-option label="填写" :value="5"></el-option>-->
      <!--      </el-select>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="往来类型标题:" prop="unitTittle" class="query-form-item">-->
      <!--      <el-input-->
      <!--        v-model="formData.unitTittle" style="width: 80%"-->
      <!--        auto-complete="off"-->
      <!--        placeholder="请输入往来类型标题"-->
      <!--      ></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->
      <!--<el-row :gutter="24" class="el-row">-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="默认仓库:" prop="invCode" class="query-form-item">-->
      <!--      <el-select v-model="formData.invCode" placeholder="请选择仓库"-->
      <!--                 style="width: 80%"-->
      <!--                 clearable-->
      <!--      >-->
      <!--        <el-option-->
      <!--          v-for="item in invList"-->
      <!--          :key="item.name"-->
      <!--          :label="item.name"-->
      <!--          :value="item.code"-->
      <!--        >-->
      <!--          <span style="float: left">{{ item.name }}</span>-->
      <!--        </el-option>-->
      <!--      </el-select>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->
      <el-row :gutter="24" class="el-row">
        <el-col class="el-col">
          <el-form-item label="备注:" prop="remark" class="query-form-item">
            <el-input
              v-model="formData.remark"
              style="width: 91%"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-col :span="12" class="el-col">-->
      <!--  <el-form-item label="往来单位类型:" prop="corpType" class="query-form-item">-->
      <!--    <el-select v-model="formData.corpType" style="width: 80%" placeholder="选择往来单位类型" clearable>-->
      <!--      <el-option label="客户" :value="1"></el-option>-->
      <!--      <el-option label="供应商" :value="2"></el-option>-->
      <!--      <el-option label="内部科室" :value="3"></el-option>-->
      <!--      <el-option label="特殊往来" :value="4"></el-option>-->
      <!--    </el-select>-->
      <!--  </el-form-item>-->
      <!--</el-col>-->
      <!--    <el-row :gutter="24" class="el-row">
            <el-col :span="22" class="el-col">
              <el-form-item label="备注:" prop="remake" class="query-form-item">
                <el-input
                  v-model="formData.remake" style="width: 100%"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>-->

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="hideForm">取消</el-button>
      <el-button
        type="primary"
        @click.native="formSubmit()"
      >提交
      </el-button
      >
    </div>
  </div>
</template>

<script>
import {getInvListByUser} from '@/api/system/invWarehouse'
import {getCollectBusType} from '@/api/basic/collectPoint/gatherOrderType'
import {getBusTypeList} from '@/api/basic/busType'
import {addBusType, updateType} from '@/api/basic/workPlace/sysWorkplaceDocuments'
import {getOriginBusType} from '@/api/thrsys/busOriginType'
import {isBlank} from '@/utils/strUtil'

export default {
  props: {
    closeDialog: {
      type: Function,
      required: true
    },
    workplaceId: {
      type: Object,
      required: true
    },
    busData: {
      type: Object,
      required: true
    },
    upData: {
      type: Object,
      required: true
    },
    //判断类型 编辑 || 新增
    busName: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formData: {
        scanType: 2,
        checkInsert: 2,
        isMatching: 1,
        inoutType: null,
        documentTypeCode: null,
        orderCirType: 1,
        warnType: 2,
        workplaceType: 3,
        autoTag: 0,
        monopoly: 0,
        orderFinishVerify: 0,
        isPopular: 1,
        invCode: '',
        overCount: 1,
        checkBatchInsert: 2,
        number: 1,
        shipper: 1,
        consignee: 1,
      },
      invList: [],
      busTypes: [],
      formRules: {
        busName: [
          {required: true, message: '请输入业务名称', trigger: 'blur'}
        ],
        isMatching: [
          {required: true, message: '请选择是否配套系统', trigger: 'blur'}
        ],
        documentTypeCode: [
          {required: true, message: '请选择单据类型', trigger: 'blur'}
        ],
        scanType: [
          {required: true, message: '请选择扫码方式', trigger: 'blur'}
        ],
        checkInsert: [
          {required: true, message: '处理结果不能为空', trigger: 'blur'}
        ],
        warnType: [
          {required: true, message: '请选择异常方式提醒', trigger: 'blur'}
        ],
        orderCirType: [
          {required: true, message: '请选择单据流通方式', trigger: 'blur'}
        ],
        workplaceType: [
          {required: true, message: '请选择作业类型', trigger: 'blur'}
        ],
        inAndOutType: [
          {required: true, message: '请选择出入库方式', trigger: 'blur'}
        ],
        invCode: [],
        corpType: [
          // { required: true, message: '请选择往来单位类型', trigger: 'blur' }
        ],
        unitTittle: [
          // { required: true, message: '请输入往来类型标题', trigger: 'blur' }
        ],
        consignee: []
      }
    }
  },
  methods: {
    getInvList() {
      let query = {
        // advanceType: 1,
        // deptCode: this.busData.deptCode
      }
      getInvListByUser(query)
        .then((response) => {
          this.invList = response.data || []
        })
        .catch(() => {
        })
    },
    getBusType() {
      let query = {
        thirdSys: null,
        key: "",
        page: 1,
        limit: 50
      }
      getOriginBusType(query)
        .then((response) => {
          let busTypeList = response.data.list || []
          let busTypes = busTypeList.map(busType => {
            return {
              code: busType.action,
              name: busType.name
            }
          })
          this.busTypes = busTypes
        })
        .catch(() => {
        })
    },
    change() {
      this.formData.documentTypeCode = null
      if (this.formData.isMatching == 0) {
        this.getBusType()
      } else {
        this.getBusTypeList()
      }
    },

    documentTypeChange(val) {
      if (this.formData.isMatching == 0) {

        let matchingItem = this.busTypes.find(item => item.code == val);
        this.formData = {...this.formData, busName: matchingItem.name}
      } else {
        let matchingItem = this.busTypes.find(item => item.code == val);
        this.formData = {...this.formData, busName: matchingItem.name}
      }
    },
    corpTypeChange(value) {
      switch (value) {
        case 1:
          this.formData = {...this.formData, unitTittle: "客户"}
          break;
        case 2:
          this.formData = {...this.formData, unitTittle: "供应商"}
          break;
        case 3:
          this.formData = {...this.formData, unitTittle: "内部科室"}
          break;
        case 4:
          this.formData = {...this.formData, unitTittle: "特殊往来"}
          break;
        case 5:
          this.formData = {...this.formData, unitTittle: ""}
          break;
      }
    },
    getBusTypeList() {
      let query = {
        enable: 1,
        page: 1,
        limit: 50
      }
      getBusTypeList(query).then(res => {
        if (res.code == 20000) {
          this.busTypes = res.data.list || []
          let busTypeList = res.data.list || []
          // _this.options.getWorkPlace = res.data.list || [];
          let busTypes = busTypeList.map(busType => {
            return {
              code: busType.action,
              name: busType.name
            }
          })
          this.busTypes = busTypes
        } else {
          this.$message.error('获取错误')
        }
      })
    }
    ,
    formSubmit() {
      this.formData.workplaceCode = this.workplaceId
      if (this.formData.scanType == 1) {
        this.formData.orderFinishVerify = null
      }
      this.$refs['dataForm'].validate((rules) => {
        if (rules) {
          if (this.upData != null) {
            updateType(this.formData).then(res => {
              if (res.code == 20000) {
                this.closeDialog()
                this.$message.success('更新成功')
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            addBusType(this.formData).then(res => {
              if (res.code == 20000) {
                this.$message.success('新增成功')
                this.closeDialog()
              } else {
                this.$message.error(res.message)
              }
            })
          }
        }

      })
    },
    hideForm() {
      this.closeDialog()
    }
    ,
    // 当scanType改变时调用此方法来更新校验规则
    updateFormRules() {
      if (this.formData.scanType === 1) {
        // 设置校验规则
        // this.$set(this.formRules.corpType, 0, {required: true, message: '请选择往来单位类型', trigger: 'blur'});
        // this.$set(this.formRules.unitTittle, 0, {required: true, message: '请输入往来类型标题', trigger: 'blur'});
        // this.$set(this.formRules.invCode, 0, {required: true, message: '请选择仓库', trigger: 'blur'});
        this.$set(this.formRules.consignee, 0, {required: true, message: '请选择收收货方', trigger: 'blur'});
      } else {
        // this.$set(this.formRules.corpType, 0, {required: false});
        // this.$set(this.formRules.unitTittle, 0, {required: false});
        this.$set(this.formRules.consignee, 0, {required: false});
      }
    }
    ,
    changeCheckInsert() {
      this.formData.shipper = ""
      this.formData.consignee = ""
      if (this.formData.scanType == 1) {
        this.formData.checkInsert = 1
        this.formData.shipper = 3
      } else {
        this.formData.consignee = 1
        this.formData.shipper = 1
        this.formData.checkInsert = 2
      }
    },
    changeShipper() {
      if (this.formData.shipper == 1) {
        this.formData.consignee = 1
      } else {
        this.formData.consignee = 2
      }
    },
    changeConsignee() {
      if (this.formData.consignee == 1) {
        this.formData.shipper = 1
      } else if (this.formData.consignee == 2) {
        this.formData.shipper = 2
      }
    }
  },
  watch: {
    // 监听scanType的变化，以更新校验规则
    'formData.scanType': function (newVal, oldVal) {
      this.updateFormRules();
    }
  },
  created() {
    if (this.upData != null) {
      console.log(this.upData)
      this.formData = this.upData
      if (this.formData.invCode != 0) {
        this.formData.invCode = this.upData.invCode + ''
      }
      if (this.formData.invCode == 0) {
        this.formData.invCode = ''
      }
      if (this.formData.orderFinishVerify == 4) {
        this.formData.orderFinishVerify = null
      }
      if (isBlank(this.formData.invCode) || this.formData.invCode == null) {
        this.formData.invCode = ''
      }
      if (this.formData.isMatching == 0) {
        this.getBusType()
      } else {
        this.getBusTypeList()
      }
    } else {
      this.getBusTypeList()
    }
    this.getInvList()
    this.updateFormRules()
  }

}
</script>

<style scoped>

</style>
