<template>
  <div>
    <BaseDialog
      width="1000px"
      :isShow.sync="isShow"
      :title="getTypeName(activeData.type)"
      @submit="submitForm(0)"
      @close="close"
      :confirmName="activeData.type == 3 ? '通过' : '保存草稿'"
    >
      <el-form
        :disabled="activeData.type == 3"
        :model="formData"
        :rules="rules"
        ref="formData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="dis_play">
          <div>
            <el-form-item label="标题：" prop="title">
              <el-input
                clearable
                v-model="formData.title"
                placeholder="请输入标题"
              ></el-input>
            </el-form-item>
            <el-form-item label="成本分类：" prop="costCatId">
              <el-select
                v-model="formData.costCatId"
                placeholder="请选择成本分类"
              >
                <el-option
                  v-for="(item, index) in topinstcategoryList"
                  :key="index"
                  :label="item.categoryName"
                  :value="item.costCatId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="供应商：" prop="instId">
              <el-select v-model="formData.instId" placeholder="请选择供应商">
                <el-option
                  v-for="(item, index) in topinstitutionList"
                  :key="index"
                  :label="item.instName"
                  :value="item.instId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="教育类型：" prop="educationTypeId">
              <el-select
                v-model="formData.educationTypeId"
                placeholder="请选择教育类型"
              >
                <el-option
                  v-for="(item, index) in eduList"
                  :key="index"
                  :label="item.educationName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="培训项目：" prop="businessId">
              <el-select
                v-model="formData.businessId"
                placeholder="请选择培训项目"
              >
                <el-option
                  v-for="(item, index) in businessList(
                    formData.educationTypeId
                  )"
                  :key="index"
                  :label="item.businessName + item.projectName"
                  :value="item.businessId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="签约时间：" prop="time">
              <el-date-picker
                v-model="formData.time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="timestamp"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="成本分摊：" prop="settleOrderType">
              <el-select
                v-model="formData.settleOrderType"
                placeholder="请选择成本分摊"
              >
                <el-option
                  v-for="(item, index) in settleOrderList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div>
            <el-form-item label="结算金额：" prop="settleMoney">
              <el-input
                clearable
                v-model="formData.settleMoney"
                placeholder="请输入结算金额"
              ></el-input> </el-form-item
            ><el-form-item label="备注：" prop="remark">
              <el-input
                type="textarea"
                clearable
                v-model="formData.remark"
                placeholder="请输入备注"
              ></el-input> </el-form-item
            ><el-form-item label="收款信息：" prop="bankName">
              <el-input
                disabled
                clearable
                v-model="formData.bankName"
                placeholder="开户名"
              ></el-input> </el-form-item
            ><el-form-item label="" prop="bank">
              <el-input
                disabled
                clearable
                v-model="formData.bank"
                placeholder="开户行"
              ></el-input> </el-form-item
            ><el-form-item label="" prop="bankAccount">
              <el-input
                disabled
                clearable
                v-model="formData.bankAccount"
                placeholder="收款账号"
              ></el-input> </el-form-item
            ><el-form-item label="审核状态：">
              {{ getCheckStatus(formData.checkStatus) }}</el-form-item
            ><el-form-item label="审核意见：">
              {{
                formData.checkReason ? formData.checkReason : "——"
              }}</el-form-item
            >
          </div>
        </div>
      </el-form>
      <template slot="slotBtn">
        <el-button @click="submitForm(1)">{{
          activeData.type == 3 ? "不通过" : "提交审核"
        }}</el-button>
      </template>
    </BaseDialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    var checkMinValue = (rule, value, callback) => {
      var reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
      if (!reg.test(value)) {
        return callback(new Error("请输入不超过两位小数点的价格数值"));
      } else {
        callback();
      }
    };
    return {
      formData: {
        title: "",
        costCatId: "",
        instId: "",
        educationTypeId: "",
        businessId: "",
        time: [],
        settleOrderType: "",
        settleMoney: "",
        remark: "",
        checkStatus: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        costCatId: [
          { required: true, message: "请选择成本分类", trigger: "change" },
        ],
        instId: [
          { required: true, message: "请选择供应商", trigger: "change" },
        ],
        educationTypeId: [
          { required: true, message: "请选择教育类型", trigger: "change" },
        ],
        businessId: [
          { required: true, message: "请选择培训项目", trigger: "change" },
        ],
        time: [
          { required: true, message: "请选择签约时间", trigger: "change" },
        ],
        settleOrderType: [
          { required: true, message: "请选择成本分摊", trigger: "change" },
        ],
        settleMoney: [
          { required: true, validator: checkMinValue, trigger: "blur" },
        ],
        remark: [{ required: false, message: "请输入备注", trigger: "blur" }],
      },
      topinstitutionList: [], //供应商
      eduList: [], //教育类型
      settleOrderList: [
        {
          label: "不限",
          value: 3,
        },
        {
          label: "代运营订单",
          value: 1,
        },
        {
          label: "独立订单",
          value: 2,
        },
      ], //结算订单类型
      disabledChange: false,
    };
  },
  watch: {
    "formData.costCatId": {
      handler(newVal, oldVal) {
        if (!this.disabledChange && this.formData.instId) {
          this.$set(this.formData, "instId", null);
          this.$set(this.formData, "bank", null);
          this.$set(this.formData, "bankAccount", null);
          this.$set(this.formData, "bankName", null);
        }
        if (newVal) {
          this.$api
            .topinstitutionlistByCat({
              costCatId: newVal,
            })
            .then((res) => {
              this.topinstitutionList = res.rows;
            });
        } else {
          this.topinstitutionList = [];
        }
      },
    },
    "formData.instId": {
      handler(newVal, oldVal) {
        if (!this.disabledChange && this.formData.educationTypeId) {
          this.$set(this.formData, "educationTypeId", null);
        }
        if (newVal) {
          this.$api
            .topcostinsttpbusinessList({
              costCatId: this.formData.costCatId,
              instId: this.formData.instId,
            })
            .then((res) => {
              this.eduList = res.data;
            });
          const INDEX = this.topinstitutionList.findIndex(
            (i) => i.instId == newVal
          );
          if (INDEX !== -1) {
            this.$set(
              this.formData,
              "bank",
              this.topinstitutionList[INDEX].bank
            );
            this.$set(
              this.formData,
              "bankAccount",
              this.topinstitutionList[INDEX].bankAccount
            );
            this.$set(
              this.formData,
              "bankName",
              this.topinstitutionList[INDEX].bankName
            );
          }
        } else {
          this.eduList = [];
        }
      },
    },
    "formData.educationTypeId": {
      handler(newVal, oldVal) {
        if (!this.disabledChange && this.formData.businessId) {
          this.$set(this.formData, "businessId", null);
        }
      },
    },
  },
  methods: {
    init() {
      if (this.activeData.settleId) {
        this.disabledChange = true;
        this.$api.settletimedetaildata(this.activeData.settleId).then((res) => {
          res.data.time = [
            parseInt(res.data.signStartTime * 1000),
            parseInt(res.data.signEndTime * 1000),
          ];
          this.formData = res.data;
          setTimeout(() => {
            this.disabledChange = false;
          }, 300);
        });
      } else {
        this.formData = {
          title: "",
          costCatId: "",
          instId: "",
          educationTypeId: "",
          businessId: "",
          time: [],
          settleOrderType: "",
          settleMoney: "",
          remark: "",
          checkStatus: "",
        };
      }
    },
    close() {
      this.$refs["formData"].resetFields();
    },
    submitForm(type) {
      var self = this;
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          if (this.activeData.type == 3) {
            if (type == 1) {
              self
                .$prompt("确定审核不通过吗", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  inputPlaceholder: "请输入不通过原因",
                })
                .then(({ value }) => {
                  let data = {
                    settleId: self.formData.settleId,
                    checkResult: type + 1,
                    checkReason: value,
                  };
                  self.$api.settlecheck(data).then((res) => {
                    self.$message.success("操作成功");
                    this.isShow = false;
                    this.$emit("search");
                  });
                })
                .catch(() => {});
            } else {
              let data = {
                settleId: self.formData.settleId,
                checkResult: type + 1,
              };
              self.$api.settlecheck(data).then((res) => {
                self.$message.success("操作成功");
                this.isShow = false;
                this.$emit("search");
              });
            }
          } else {
            let data = Object.assign({}, this.formData);
            data.signStartTime = parseInt(data.time[0] / 1000);
            data.signEndTime = parseInt(data.time[1] / 1000);
            data.settleType = 2;
            data.status = type;
            this.$api[
              this.activeData.settleId ? "settletimeupdate" : "settletimesave"
            ](data).then((res) => {
              this.$message.success("操作成功");
              this.isShow = false;
              this.$emit("search");
            });
          }
        } else {
          return false;
        }
      });
    },
  },
  computed: {
    ...mapGetters(["topinstcategoryList"]),
    businessList: function () {
      return function (id) {
        const INDEX = this.eduList.findIndex((i) => i.id == id);
        return INDEX !== -1 ? this.eduList[INDEX].businessList || [] : [];
      };
    },
    getTypeName: function () {
      return function (i) {
        var a = "";
        switch (i) {
          case 0:
            a = "详情";
            break;
          case 1:
            a = "新增";
            break;
          case 2:
            a = "修改";
            break;
          case 3:
            a = "审核";
            break;
          default:
            break;
        }
        return a;
      };
    },
    getCheckStatus: function () {
      return function (i) {
        var a = "——";
        switch (i) {
          case 1:
            a = "待提交";
            break;
          case 7:
            a = "待审核";
            break;
          case 2:
            a = "审核中";
            break;
          case 3:
            a = "未通过";
            break;
          case 4:
            a = "待支付";
            break;
          case 5:
            a = "支付失败";
            break;
          case 6:
            a = "已结算";
            break;
          default:
            break;
        }
        return a;
      };
    },
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.dis_play {
  display: flex;
  .gz {
    flex: 1;
  }
  .el-divider {
    height: auto;
    margin: 30px;
  }
  .el-date-editor--datetimerange.el-input,
  .el-date-editor--datetimerange.el-input__inner {
    width: 368px;
  }
}
.el-input {
  width: 220px;
  margin-right: 10px;
}
.el-select {
  width: 220px;
  margin-right: 10px;
}
</style>
