<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="15vh"
    width="1024px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="closeModel"
  >
    <el-card class="add" style="margin-top: -25px">
      <el-table
        max-height="550"
        stripe
        size="mini"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          fixed="left"
          prop="id"
          label="核销记录编号"
          width="100"
        >
        </el-table-column>
        <el-table-column :label="main + '信息'">
          <el-table-column prop="codeNo" label="编号" width="190">
          </el-table-column>
          <el-table-column prop="total_fee" label="总额" width="115">
          </el-table-column>
          <el-table-column prop="cancel_total" label="核销金额" width="115">
          </el-table-column>
          <el-table-column prop="balance" label="核销后余额" width="115">
          </el-table-column>
        </el-table-column>
        <el-table-column :label="vice + '信息'">
          <el-table-column prop="viceNo" label="编号" width="190">
          </el-table-column>
          <el-table-column prop="vice_total" label="总额" width="115">
          </el-table-column>
          <el-table-column prop="cancel_fee" label="核销金额" width="115">
          </el-table-column>
          <el-table-column prop="vice_fee" label="核销后余额" width="115">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="addtime" label="核销时间" width="145">
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from "@/apis/service/InvoiceSales/relationQuery";
import resToken from "@/mixins/resToken";
export default {
  name: "clients",
  props: ["showModel", "id", "isDetail", "No"],
  mixins: [resToken],
  data() {
    return {
      loading: false,
      title: "核销记录",
      showModelThis: this.showModel,
      tableData: [],
      main: "",
      vice: "",
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    async initForm() {
      this.loading = true;
      console.log(this.isDetail);
      switch (this.isDetail) {
        case "1":
          this.main = "确认单";
          this.vice = "发票";
          break;
        case "2":
          this.main = "确认单";
          this.vice = "资金";
          break;
        case "3":
          this.main = "资金";
          this.vice = "确认单";
          break;
        case "4":
          this.main = "发票";
          this.vice = "资金";
          break;
        case "5":
          this.main = "资金";
          this.vice = "发票";
          break;
        case "6":
          this.main = "发票";
          this.vice = "确认单";
          break;
      }
      console.log(this.main, this.vice);
      await this.initData();
      this.loading = false;
    },
    async initData() {
      this.tableData = [];
      const res = await asyncRequest.detail({
        codeNo: this.No !== this.id ? this.No : this.id,
        type: this.isDetail,
      });
      if (res && res.code === 0) {
        this.tableData = res.data;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      }else{
        this.$message.warning(res.message);
      }
    },
  },
};
</script>

   <style lang="scss" scoped>
.clients {
  .add {
    .survey-title {
      line-height: 35px;
      font-size: 18px;
      font-weight: bold;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .lh40 {
      line-height: 40px;
      font-size: 16px;
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
      padding: 30px;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
}
</style>
