<script setup>
import { reactive, watch } from "vue"
import { useRouter } from "vue-router";

const router = useRouter()

const showRenewalRateDetailDlg = defineModel('showRenewalRateDetailDlg', { type: Boolean, default: false })
const renewalRateDetailForm = defineModel('renewalRateDetailForm', { type: String, default: '' })

const pageState = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
  tableData: [],
  activeName: "确认不续约合同",
  RenewalDataFormSon: {},
  confirmNoRenewalFormSon: {},
  isConfirmNoRenewalShowSon: false,
})

watch(() => showRenewalRateDetailDlg.value, (val) => {
  if (val) {
    getTableData();
  }
})

function cancelHandle() {
  pageState.pageNo = 1;
  pageState.activeName = "确认不续约合同";
  pageState.tableData = [];
  pageState.pageNo = 1;
  pageState.pageSize = 10;
  pageState.total = 0;
  showRenewalRateDetailDlg.value = false
  renewalRateDetailForm.value = {}
}
async function getTableData() {
  let params = {
    ...pageState.renewalRateDetailForm,
    PageSize: pageState.pageSize,
    CurrentIndex: pageState.pageNo,
    ContractDataType: pageState.activeName,
  };
  const res = await dataMainInterface.incrementalCompanyContractPercentageListV2(params);
  if (res.Ret === 200) {
    pageState.RenewalDataFormSon = res.Data;
    pageState.total = res.Data.Paging.Totals;
  }
}
// 分页
function handleCurrentChange(page) {
  pageState.pageNo = page;
  getTableData();
}
// 去往公司详情
function goCompanyHandle(row) {
  let { href } = router.resolve({
    path: "/customDetail",
    query: {
      id: row.CompanyId,
    },
  });
  window.open(href, "_blank");
}
// 头部的点击事件
function handleClick() {
  pageState.pageNo = 1;
  getTableData();
}
function cancelHandleSon() {
  pageState.confirmNoRenewalFormSon = {};
  pageState.isConfirmNoRenewalShowSon = false;
}
function editReasonLabel(row) {
  dataMainInterface.contractInfoNoRenewedAscribe({ CompanyContractId: row.CompanyContractId }).then((res) => {
    if (res.Ret == 200) {
      pageState.confirmNoRenewalFormSon = res.Data.Detail;
      pageState.isConfirmNoRenewalShowSon = true;
    }
  });
}

</script>

<template>
  <div class="renewal-rate-detail-content">
    <el-dialog
      v-model="showRenewalRateDetailDlg"
      title="不续约率详情"
      top="5vh"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      @close="cancelHandle"
      width="1000px"
      draggable
      center
      custom-class="renewal-rate-detail-content-dlg"
    >
      <div>
        <el-tabs v-model="pageState.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="pageState.activeName === '确认不续约合同'">
        共有确认不续约合同
        {{ pageState.RenewalDataFormSon.RenewalContractTotal }} 份，不续约总金额
        {{ pageState.RenewalDataFormSon.RenewalContractMoney }} 元
      </p>
      <p v-if="pageStateactiveName === '到期合同'">
        共有到期合同
        {{
          pageState.RenewalDataFormSon.ExpireRenewalContractTotal
        }}
        份，到期总金额
        {{ pageState.RenewalDataFormSon.ExpireRenewalContractMoney }} 元
      </p>
      <div class="table-wrap">
        <el-table
          :data="pageState.RenewalDataFormSon.List"
          max-height="600"
          border
          style="width: 100%; margin-bottom: 20px"
        >
          <el-table-column label="公司名称" prop="CompanyName" align="center">
            <template #default="{ 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 #default="{ row }">
              <span>{{ row.StartDate }} ~ {{ row.EndDate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="签约套餐"
            prop="PermissionName"
            align="center"
          >
            <template #default="{ 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 #default="{ 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="pageState.pageNo"
          @current-change="handleCurrentChange"
          :page-size="pageState.pageSize"
          :total="pageState.total"
          style="text-align: right; padding: 20px 0"
        >
        </el-pagination>
      </div>
    </el-dialog>
    <el-dialog
      v-model="pageState.isConfirmNoRenewalShowSon"
      title="确认不续约"
      top="5vh"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      @close="cancelHandleSon"
      width="652px"
      draggable
      center
      custom-class="custom-class-confirm-no-renewal-show-dlg"
    >
      <div class="user-title">
        {{ pageState.confirmNoRenewalFormSon.AscribeContent }}
      </div>
      <div class="content-reason">
        {{ pageState.confirmNoRenewalFormSon.Content }}
      </div>
    </el-dialog>
  </div>
</template>

<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>
