<template>
  <div>
    <el-form :model="inputQuery" :rules="formRules" ref="dataForm" label-width="120px" border>
      <el-row type="flex">
        <el-col :span="11">
          <el-form-item label="扫码单据类型" prop="name">
            <el-input v-model="inputQuery.name" size="small" style="width: 90%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="单据类型代码" prop="action">
            <el-input v-model="inputQuery.action" :disabled="true" size="small"
                      style="width: 90%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="11" type="flex">
          <el-form-item label="出入库类型" prop="mainAction">
            <el-select v-model="inputQuery.mainAction"
                       size="small"
                       style="width: 90%"
                       placeholder="出入库类型"
                       @change="getOrderType">
              <el-option label="入库" value="WareHouseIn"></el-option>
              <el-option label="出库" value="WareHouseOut"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="往来信息类型" prop="corpType">
            <el-select v-model="inputQuery.corpType"
                       size="small"
                       style="width: 90%"
                       placeholder="往来信息"
                       @change="corpTypeChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="11">
          <el-form-item label="内部进出平衡补单" prop="supplementOrderType">
            <el-select :disabled="inputQuery.corpType !=3"
                       size="small"
                       style="width: 90%"
                       v-model="inputQuery.supplementOrderType"
                       clearable
                       placeholder="单据类型">
              <el-option
                v-for="item in orderTypeList"
                :key="item.name"
                :label="item.name"
                :value="item.action">
                <span style="float: left">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="特殊单据往来" prop="defaultUnit">
            <el-select
              v-model="inputQuery.defaultUnit"
              filterable
              remote
              size="small"
              style="width: 90%"
              :disabled="inputQuery.corpType!=4"
              clearable="true"
              reserve-keyword
              :remote-method="findSpecialMethod"
            >
              <el-option
                v-for="item in fromSpecialOptions"
                :key="item.name"
                :label="item.name"
                :value="item.erpId"
              >
                <span style="float: left">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="11">
          <el-form-item label="单据前缀" prop="prefix">
            <el-input v-model="inputQuery.prefix" size="small" style="width: 90%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" class="el-col">
          <el-form-item label="单据详情展示方式" prop="orderVisibleType">
            <el-select v-model="inputQuery.orderVisibleType"
                       size="small"
                       style="width: 90%"
                       placeholder="单据详情展示方式"
            >
              <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 type="flex">-->
      <!--        <el-col :span="11">-->
      <!--          <el-form-item label="第三方单据类型" prop="prefix">-->
      <!--            <el-select v-model="inputQuery.originAction"-->
      <!--                       size="small"-->
      <!--                       clearable-->
      <!--                       style="width: 90%"-->
      <!--                       filterable-->
      <!--                       placeholder="请选择第三方系统单据类型"-->
      <!--            >-->
      <!--              <el-option-->
      <!--                v-for="item in originTypes"-->
      <!--                :key="item.id"-->
      <!--                :label="item.name"-->
      <!--                :value="item.action">-->
      <!--                <span style="float: left;font-size: 13px">{{ item.name }}</span>-->
      <!--                <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 10px">{{-->
      <!--                    item.thirdSysName-->
      <!--                  }}</span>-->
      <!--              </el-option>-->
      <!--            </el-select>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

      <el-row type="flex">
        <el-col :span="23" type="flex">
          <el-form-item prop="remark">
            <label slot="label">备&emsp;&emsp;注</label>
            <el-input v-model="inputQuery.remark" size="small" style="width: 90%" type="textarea"
                      row="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="23" type="flex">
          <el-button type="text" size="large" style="margin-left: 10px;" @click="advancedSettings">高级设置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog
      title="单据类型高级设置"
      :visible.sync="settingDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="settingDialogVisible"
      class="dialog-two"
      width="60%"
      top="5vh"
      append-to-body
    >
      <busTypeAdvancedSettings :inputQuery="inputQuery"></busTypeAdvancedSettings>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="saveSettings"
        >提交
        </el-button
        >
        <el-button size="small" @click="cancelDialog"
        >取消
        </el-button
        >
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {candidateBusType} from "@/api/basic/busType";
import busTypeAdvancedSettings from "@/views/basic/busType/busTypeAdvancedSettings.vue";
import {isBlank} from "@/utils/strUtil";
import {getOriginBusType} from "@/api/basic/busOriginType";
import {getBasicUnitMaintains2} from "@/api/basic/basicUnitMaintain";

export default {
  name: "BussinessTypeModify",
  props: {
    inputQuery: {
      type: Object,
      required: true,
    },
    modifySubmit: {
      type: Function,
      required: true,
    }
  },

  data() {
    return {
      formRules: {},
      filterQuery: {
        enabled: true,
        isBuType: true,
        isFilterBind: true,
      },
      orderTypeList: [],
      fromSpecialOptions: [],
      originTypes: [],
      value: "",
      options: [{
        value: 1,
        label: '客户信息'
      }, {
        value: 2,
        label: '供应商信息'
      },
        {
          value: 3,
          label: '内部科室'
        }, {
          value: 4,
          label: '特殊往来'
        }],
      twoCheck: false,
      settingDialogVisible: false,
      oldData: {}
    }
  },
  methods: {
    getList() {
      let originQuery = {
        onlyMain: true,
      };
      getOriginBusType(originQuery)
        .then((response) => {
          this.originTypes = response.data.list || [];
        })
        .catch(() => {
        });
    },
    findSpecialMethod() {
      let query = {
        corpType: 4,
      };
      getBasicUnitMaintains2(query).then((response) => {
        this.fromSpecialOptions = response.data.list || [];
      }).catch(() => {

      })
    },
    corpTypeChange(type) {
      if (type != 2) {
        this.inputQuery.genUnit = false;
      }
      if (this.inputQuery.corpType === 4) {
        this.findSpecialMethod();
      } else {
        this.inputQuery.defaultUnit = null;
      }

      if (this.inputQuery.corpType !== 1) {
        this.inputQuery.genUnit = false;
        this.inputQuery.useDyCount = false;
      } else {
        this.inputQuery.genUnit = this.oldData.genUnit;
        this.inputQuery.useDyCount = this.oldData.useDyCount;
      }
    },

    //获取单据类型
    getOrderType() {
      this.orderTypeList = [];
      let query = {
        mainAction: this.inputQuery.mainAction,
        curAction: this.inputQuery.supplementOrderType,
      };
      candidateBusType(query).then((response) => {
        this.orderTypeList = response.data || [];
      }).catch(() => {

      })
    },

    // 单据类型高级设置弹窗
    advancedSettings() {
      if (isBlank(this.inputQuery.id)) {
        this.$message.warning("请先保存当前单据类型！");
      } else {
        this.settingDialogVisible = true;
      }
    },

    // 高级设置保存
    saveSettings() {
      this.modifySubmit(this.inputQuery);
    },

    // 高级设置弹窗关闭
    cancelDialog() {
      this.settingDialogVisible = false;
    },
  },
  computed: {
    corpType() {
      return this.inputQuery.corpType;
    }
  },
  components: {
    busTypeAdvancedSettings
  },
  watch: {
    corpType: function (val) {
      if (val != 1) {
        this.inputQuery.orderTypeEnable = true;
        this.inputQuery.supplementOrderType = null;
      } else {
        this.inputQuery.orderTypeEnable = false;
      }
    }
  },

  created() {
    if (this.inputQuery.mainAction != null && this.inputQuery.mainAction != "") {
      this.getOrderType();
    }
    this.getList();
    this.findSpecialMethod();
    this.oldData = Object.assign({}, this.inputQuery);
  },
};
</script>

<style scoped>

.text {
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

</style>
