<template>
  <div>
    <BaseDialog
      width="1100px"
      :isShow.sync="isShow"
      :title="getTypeName(activeData.type)"
      @submit="submitForm(0)"
      @close="close"
      :confirmStatus="activeData.type !== 0"
      :confirmName="activeData.type == 3 ? '通过' : '保存草稿'"
    >
      <div class="topBox">
        <span
          >标题：<strong>{{ formData.title }}</strong></span
        >
        <span
          >备注：<strong>{{ formData.remark }}</strong></span
        >
        <span
          >成本分类：<strong>{{ formData.costCatName }}</strong></span
        >
        <span
          >教育类型：<strong>{{ formData.educationName }}</strong></span
        >
        <span
          >培训项目：<strong>{{ formData.businessName }}</strong></span
        >
      </div>

      <table-list
        rowKey="id"
        ref="tableList"
        :tableSets="tableSet"
        :tableData="formData.settleOrderVos"
        :navText="navText"
        :loading="loading"
      >
        <template slot="customize">
          <input v-show="false" id="file" type="file" @change="exportFunc" />
          <el-button
            size="small"
            type="primary"
            v-if="activeData.type == 1"
            @click="lastStep"
            >上一步</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="modifyData(-1)"
            v-if="activeData.type == 1 || activeData.type == 2"
            >添加</el-button
          >
          <el-button
            size="small"
            type="primary"
            @click="exportFuncClick"
            v-if="activeData.type == 1 || activeData.type == 2"
            >批量导入</el-button
          >
          <el-button
            @click="dowmFunc"
            size="small"
            v-if="activeData.type == 1 || activeData.type == 2"
            >导入模板</el-button
          >
          <el-button
            size="small"
            v-if="activeData.type == 0"
            v-hasRole="derivePermission"
            >导出excel</el-button
          >
        </template>
        <template slot="btn" slot-scope="props">
          <el-button
            type="text"
            @click="modifyData(props.scope.$index, props.scope.row)"
            v-if="activeData.type == 1 || activeData.type == 2"
            >修改</el-button
          >
          <el-button
            type="text"
            @click="formData.settleOrderVos.splice(props.scope.$index, 1)"
            v-if="activeData.type == 1 || activeData.type == 2"
            >删除</el-button
          >
        </template>
      </table-list>
      <div class="footerBox">
        <p>
          供应商：<strong>{{ formData.instName }}</strong>
        </p>
        <p>
          结算数量：<strong>{{
            formData.settleOrderVos ? formData.settleOrderVos.length : 0
          }}</strong>
        </p>
        <p>
          结算金额：<strong style="color: red; font-size: 16px"
            >￥{{ getOrderAllMoney(formData.settleOrderVos) }}</strong
          >
        </p>
        <p>
          收款信息：<strong>{{
            formData.bankName + "/" + formData.bank + "/" + formData.bankAccount
          }}</strong>
        </p>
        <p>
          审核状态：<strong>{{ getCheckStatus(formData.checkStatus) }}</strong>
        </p>
        <p>
          审核意见：<strong>{{ formData.checkReason }}</strong>
        </p>
      </div>
      <changeSupplier
        :dialogVisible.sync="changeSupplier"
        :activeData="changeSupplierActiveData"
        :nowFatherActiveData="nowFatherActiveData"
        @backData="backData"
      />
      <template slot="slotBtn" v-if="activeData.type !== 0">
        <el-button @click="submitForm(1)">{{
          activeData.type == 3 ? "不通过" : "提交审核"
        }}</el-button>
      </template>
    </BaseDialog>
  </div>
</template>

<script>
import { downFn } from "@/utils/index.js";
import tableList from "@/components/tableList";
import changeSupplier from "./changeSupplier.vue";
export default {
  components: {
    tableList,
    changeSupplier,
  },
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formData: {
        settleOrderVos: [],
      },
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "供应商结算",
        index: 0,
        ch: "条",
        num: true,
        choice: false,
        addHide: true,
        openCheckMore: false,
        changeWidth: "120px",
        custom: false,
        tableHide: true,
        backFatherBtn: {
          status: false,
          title: "配置下单填选模板",
        },
      },
      // 表单
      tableSet: [
        {
          label: "订单号",
          prop: "orderSn",
          hidden: true,
        },
        {
          label: "业务号",
          prop: "createNo",
          hidden: true,
        },
        {
          label: "业务员",
          prop: "createUsername",
          hidden: true,
        },
        {
          label: "下单客户",
          prop: "clientName",
          hidden: true,
        },
        {
          label: "姓名",
          prop: "userName",
          hidden: true,
        },
        {
          label: "身份证",
          prop: "userCard",
          hidden: true,
        },
        {
          label: "交资料日期",
          prop: "submitDataTime",
          hidden: true,
          scope: "aTimeList",
        },
        {
          label: "结算金额",
          prop: "settleMoney",
          hidden: true,
          scope: "leftCh",
          ch: "￥",
        },
      ],
      tableData: [], //表单数据
      total: 0, //一共多少条
      changeSupplier: false,
      changeSupplierActiveData: {},
      nowFatherActiveData: {},
    };
  },
  methods: {
    init() {
      if (this.activeData.type == 1 || this.activeData.type == 2) {
        this.navText.tableHide = false;
      } else {
        this.navText.tableHide = true;
      }
      if (this.activeData.type == 1) {
        this.formData = Object.assign({}, this.activeData);
        this.formData.settleOrderVos = [];
        this.navText.index = 0;
        this.nowFatherActiveData = {
          costCatId: this.formData.costCatId,
          instId: this.formData.instId,
          educationTypeId: this.formData.educationTypeId,
          projectId: this.formData.projectId,
          businessId: this.formData.businessId,
        };
      } else {
        this.$api.settlenumdetaildata(this.activeData.settleId).then((res) => {
          this.formData = res.data;
          res.data.settleOrderVos = res.data.settleOrderVos || [];
          this.navText.index = res.data.settleOrderVos?.length || 0;
          this.nowFatherActiveData = {
            costCatId: this.formData.costCatId,
            instId: this.formData.instId,
            educationTypeId: this.formData.educationTypeId,
            projectId: this.formData.projectId,
            businessId: this.formData.businessId,
          };
        });
      }
    },
    //index索引 -1添加 其他为替换splice
    modifyData(index, data) {
      this.changeSupplierActiveData =
        Object.assign({ index: index }, data) || {};
      this.changeSupplier = true;
    },
    //返回数据
    backData(data) {
      console.log(data, "data");
      if (data.index == -1) {
        this.formData.settleOrderVos.unshift(data);
      } else {
        this.formData.settleOrderVos.splice(data.index, 1, data);
      }
      this.navText.index = this.formData.settleOrderVos?.length || 0;
    },
    //上一步
    lastStep() {
      this.$emit("lastStep", this.activeData);
      this.isShow = false;
    },
    close() {},
    submitForm(type) {
      var self = this;
      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 {
        if (type == 1 && this.formData.settleOrderVos?.length == 0) {
          this.$message.warning("请添加供应商结算数据");
          return;
        }
        let data = Object.assign({}, this.formData);
        data.settleType = 1;
        data.status = type;
        data.settleMoney = this.getOrderAllMoney(this.formData.settleOrderVos);
        this.$api[
          this.activeData.settleId ? "settlenumupdate" : "settlenumsave"
        ](data).then((res) => {
          this.$message.success("操作成功");
          this.isShow = false;
          this.$emit("search");
        });
      }
    },
    exportFuncClick() {
      document.getElementById("file").click();
    },
    //批量导入
    exportFunc(e) {
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      formData.append(
        "param",
        JSON.stringify({
          instId: this.formData.instId,
          costCatId: this.formData.costCatId,
          educationTypeId: this.formData.educationTypeId,
          projectId: this.formData.projectId,
          businessId: this.formData.businessId,
        })
      );
      this.$api
        .settleorderimport(formData)
        .then((res) => {
          this.formData.settleOrderVos.unshift(...res.data);
          this.navText.index = this.formData.settleOrderVos?.length || 0;
          this.$forceUpdate();
        })
        .finally(() => {
          e.target.value = "";
        });
    },
    //导出/下载方法
    dowmFunc() {
      downFn("oss/images/file/20230815/1692066440379.xls", ".xls");
    },
  },
  computed: {
    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;
      };
    },
    getOrderAllMoney: function () {
      return function (array) {
        var money = 0;
        array?.forEach((i) => {
          money += parseFloat(i.settleMoney);
        });
        return money.toFixed(2);
      };
    },
    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;
      };
    },
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.topBox {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  & > span {
    margin-right: 40px;
  }
}
</style>
