<template>
  <div>
    <BaseDialog
      width="1100px"
      :isShow.sync="isShow"
      :title="activeData.type == 1 ? '单据打印' : '明细打印'"
      @submit="submitForm"
      @close="close"
      :confirmStatus="false"
    >
      <div id="print">
        <h3 style="text-align: center">
          {{ activeData.type == 1 ? "费用支出单据" : "费用支出明细" }}
        </h3>
        <template v-if="activeData.type == 1">
          <table border cellspacing="0" cellpadding="5" width="100%">
            <tr>
              <td>款项用途：供应商结算</td>
              <td>付款日期：{{ $methodsTools.onlyForma(formData.payTime) }}</td>
              <td>付款金额：￥{{ formData.settleMoney }}</td>
            </tr>
            <tr>
              <td>
                <p>用途详细：</p>
                <p>供应商：{{ formData.instName }}</p>
                <p>标题：{{ formData.title }}</p>
                <p>备注：{{ formData.remark }}</p>
                <p>成本分类：{{ formData.costCatName }}</p>
                <p>教育类型：{{ formData.educationName }}</p>
                <p>培训项目：{{ formData.businessName }}</p>
              </td>
              <td>
                <p>收款信息：</p>
                <p>收款方式：账号支付</p>
                <p>收款账户：{{ formData.bankName }}</p>
                <p>收款银行：{{ formData.bank }}</p>
                <p>收款账号：{{ formData.bankAccount }}</p>
              </td>
              <td>
                <p>款项明细：</p>
                <p>
                  结算方式：{{
                    formData.settleType == 1 ? "数量结算" : "时间结算"
                  }}
                </p>
                <p v-if="formData.settleType !== 1">
                  签约时间：{{
                    $methodsTools.onlyForma(formData.signStartTime, false) +
                    " 至 " +
                    $methodsTools.onlyForma(formData.signEndTime, false)
                  }}
                </p>
                <p v-if="formData.settleType == 1">
                  结算数量：{{ formData.settleNum }}
                </p>
                <p>结算金额：￥{{ formData.settleMoney }}</p>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <p>审核进度：</p>
                <el-steps
                  :space="200"
                  :active="formData.checkRoles.length"
                  finish-status="success"
                  align-center
                >
                  <el-step
                    v-for="(item, index) in formData.checkRoles"
                    :title="item"
                    :key="index"
                  ></el-step>
                </el-steps>
              </td>
            </tr>
          </table>
        </template>
        <template v-if="activeData.type == 2">
          <table
            border
            width="100%"
            cellspacing="0"
            cellpadding="5"
            class="table2"
          >
            <thead>
              <tr>
                <td width="50">序号</td>
                <td
                  v-for="(item, index) in tableSet"
                  :key="index"
                  :width="item.width"
                >
                  {{ item.label }}
                </td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ index + 1 }}</td>
                <td v-for="(items, indexs) in tableSet" :key="indexs">
                  <span v-if="items.scope === 'time'">{{
                    $methodsTools.onlyForma(item[items.prop])
                  }}</span>
                  <div v-else-if="items.scope === 'businessList'">
                    <div v-for="item in item[items.prop]">{{ item }}</div>
                  </div>
                  <span v-else>
                    {{ items.leftCh }}{{ item[items.prop]
                    }}{{ items.prop1 ? item[items.prop1] : "" }}
                  </span>
                </td>
              </tr>
              <tr>
                <td colspan="9">合计</td>
                <td>￥{{ computedMoney(tableData) }}</td>
              </tr>
            </tbody>
          </table>
        </template>
      </div>

      <template slot="slotBtnRight">
        <el-button v-print="'#print'" type="primary">打印</el-button>
      </template>
    </BaseDialog>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      formData: {
        checkRoles: [],
      },
      tableSet: [
        { label: "订单号", prop: "orderSn" },
        { label: "业务员", prop: "createUsername", width: "80" },
        { label: "业务号", prop: "createNo", width: "80" },
        { label: "下单客户", prop: "clientName" },
        {
          label: "业务类型",
          prop: "businessNames",
          scope: "businessList",
          width: "180",
        },
        { label: "姓名", prop: "userName", width: "60" },
        { label: "身份证号", prop: "userCard" },
        { label: "交资料日期", prop: "submitDataTime", scope: "time" },
        { label: "结算金额", prop: "settleMoney", leftCh: "￥" },
      ],
      tableData: [],
    };
  },
  methods: {
    init() {
      this.$api[
        this.activeData.type == 1
          ? "settlereceiptsdata"
          : "settlereceiptsdetaildata"
      ](this.activeData.settleId).then((res) => {
        if (this.activeData.type == 1) {
          this.formData = res.data;
        }
        if (this.activeData.type == 2) {
          this.tableData = res.data;
        }
      });
    },
    close() {},
    submitForm() {},
  },
  computed: {
    computedMoney: function () {
      return function (array) {
        let num = 0;
        array.forEach((i) => (num += i.settleMoney));
        return num.toFixed(2);
      };
    },
    isShow: {
      get() {
        if (this.dialogVisible) {
          this.init();
        }
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
#print {
  h3 {
    text-align: center;
  }
  table {
    table-layout: fixed;
  }
  td {
    vertical-align: unset;
    p:first-child {
      font-weight: bold;
    }
  }
  /deep/ .el-step__head.is-success {
    color: #000;
    border-color: #000;
  }
  /deep/ .el-step__title.is-success {
    color: #000;
  }
}
.table2 {
  td {
    text-align: center;
    word-break: break-all;
  }
}
</style>
