<template>
  <div class="renewal-rate-detail-content">
    <el-dialog
      :visible.sync="showRenewalRateDetailDlg"
      title="不续约率详情"
      top="5vh"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      @close="cancelHandle"
      width="1000px"
      v-dialogDrag
      center
      custom-class="renewal-rate-detail-content-dlg"
    >
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="确认不续约合同" name="确认不续约合同"></el-tab-pane>
          <el-tab-pane label="到期合同" name="到期合同"></el-tab-pane>
        </el-tabs>
      </div>
      <p v-if="activeName === '确认不续约合同'">共有确认不续约合同 {{ RenewalDataFormSon.RenewalContractTotal }} 份，不续约总金额 {{ RenewalDataFormSon.RenewalContractMoney }} 元</p>
      <p v-if="activeName === '到期合同'">共有到期合同 {{ RenewalDataFormSon.ExpireRenewalContractTotal }} 份，到期总金额 {{ RenewalDataFormSon.ExpireRenewalContractMoney }} 元</p>
      <div class="table-wrap">
        <el-table :data="RenewalDataFormSon.List" max-height="600" border style="width: 100%; margin-bottom: 20px">
          <el-table-column label="公司名称" prop="CompanyName" align="center">
            <template slot-scope="{ row }">
              <span class="editsty" @click="goCompanyHandle(row)">{{ row.CompanyName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="SellerName" label="所属销售" width="100"> </el-table-column>
          <el-table-column align="center" prop="Money" label="合同金额" width="130"> </el-table-column>
          <el-table-column label="合同期限" prop="StartDate" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.StartDate }} ~ {{ row.EndDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="签约套餐" prop="PermissionName" align="center">
            <template slot-scope="{ row }">
              <template v-if="row.PermissionName.length">
                <el-tag size="mini" style="margin: 0 10px 10px 0" v-for="key in row.PermissionName.split(',')" :key="key">{{ key }}</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="Money" label="不续约归因" width="130">
            <template slot-scope="{ row }">
              <span style="color: #409eff; cursor: pointer" @click="editReasonLabel(row)">
                {{ row.AscribeContent }}
              </span>
            </template></el-table-column
          >
        </el-table>
        <el-pagination
          layout="total,prev,pager,next"
          background
          :current-page="pageNo"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
          style="text-align: right; padding: 20px 0"
        >
        </el-pagination>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="isConfirmNoRenewalShowSon"
      title="确认不续约"
      top="5vh"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      @close="cancelHandleSon"
      width="652px"
      v-dialogDrag
      center
      custom-class="custom-class-confirm-no-renewal-show-dlg"
    >
      <div class="user-title">{{ confirmNoRenewalFormSon.AscribeContent }}</div>
      <div class="content-reason">{{ confirmNoRenewalFormSon.Content }}</div>
    </el-dialog>
  </div>
</template>

<script>
import { dataMainInterface } from "@/api/api.js";
import confirmedNoRenewal from "./noRenewalReasonDia/confirmedNoRenewal.vue";

export default {
  props: {
    showRenewalRateDetailDlg: {
      default: false,
      type: Boolean,
    },
    renewalRateDetailForm: {
      default: "",
      type: String,
    },
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      activeName: "确认不续约合同",
      RenewalDataFormSon: {},
      confirmNoRenewalFormSon: {},
      isConfirmNoRenewalShowSon: false,
    };
  },
  components: {
    confirmedNoRenewal,
  },
  watch: {
    showRenewalRateDetailDlg: {
      handler(val) {
        if (val) {
          this.getTableData();
        }
      },
      deep: true,
    },
  },
  methods: {
    cancelHandle() {
      this.pageNo = 1;
      this.activeName = "确认不续约合同";
      this.tableData = [];
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.$emit("update:showRenewalRateDetailDlg", false);
      this.$emit("update:renewalRateDetailForm", {});
    },
    async getTableData() {
      let params = {
        ...this.renewalRateDetailForm,
        PageSize: this.pageSize,
        CurrentIndex: this.pageNo,
        ContractDataType: this.activeName,
      };
      const res = await dataMainInterface.incrementalCompanyContractPercentageListV2(params);
      if (res.Ret === 200) {
        this.RenewalDataFormSon = res.Data;
        this.total = res.Data.Paging.Totals;
      }
    },
    // 分页
    handleCurrentChange(page) {
      this.pageNo = page;
      this.getTableData();
    },
    // 去往公司详情
    goCompanyHandle(row) {
      let { href } = this.$router.resolve({
        path: "/customDetail",
        query: {
          id: row.CompanyId,
        },
      });
      window.open(href, "_blank");
    },
    // 头部的点击事件
    handleClick() {
      this.pageNo = 1;
      this.getTableData();
    },
    cancelHandleSon() {
      this.confirmNoRenewalFormSon = {};
      this.isConfirmNoRenewalShowSon = false;
    },
    editReasonLabel(row) {
      dataMainInterface.contractInfoNoRenewedAscribe({ CompanyContractId: row.CompanyContractId }).then((res) => {
        if (res.Ret == 200) {
          this.confirmNoRenewalFormSon = res.Data.Detail;
          this.isConfirmNoRenewalShowSon = true;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.renewal-rate-detail-content-dlg {
  .table-wrap {
    margin-top: 20px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
}

.custom-class-confirm-no-renewal-show-dlg {
  div {
    box-sizing: border-box;
  }
  .user-title {
    width: 100%;
    height: 40px;
    padding-left: 20px;
    line-height: 40px;
    border: 1px solid #dcdfe6;
  }
  .content-reason {
    padding: 20px;
    margin: 20px 0;
    width: 100%;
    height: 201px;
    border: 1px solid #dcdfe6;
  }
}
</style>
