hz_crm_web/src/views/dataReport_manage/equityCustomStatistics.vue

<template>
  <div class="dataReport-container" id="dataReport-container">
    <div class="dataReport-top">
      <a :href="exportExcel" download>
        <button class="button-sty act">导出EXCEL</button>
      </a>
      <button :class="['button-sty', { act: filterObj.month === item.label }]" v-for="item in monthLabel" @click="toggleMonth(item.label)" :key="item.label">
        {{ item.label }}
      </button>
      <date-picker v-model="filterObj.date" type="date" range value-type="format" placeholder="自定义时间段" :clearable="false" :editable="false" @change="dateChange" />
      <el-input placeholder="请输入客户名称" v-model="searchVal" style="width: 400px; margin-left: auto" @input="handleSearch" clearable>
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="dataReport-main">
      <div class="main-top">
        <el-cascader
          v-if="Role == 'finance' || Role == 'admin' || Role == 'ficc_admin' || Role == 'rai_admin' || ManageType != 0"
          v-model="filterObj.sale"
          placeholder="请选择销售"
          style="min-width: 250px; margin-right: 10px; margin-bottom: 8px"
          :options="salesArr"
          :props="defaultSalesProps"
          :show-all-levels="false"
          collapse-tags
          clearable
          filterable
          @change="changeFilter"
        >
        </el-cascader>
      </div>
      <div class="main-section">
        <div v-for="item in data_typeArr" :key="item.label">
          <el-card style="margin-right: 50px" :class="['base-card', { 'main-card': filterObj.data_type === item.label }]" shadow="hover" @click.native="toggleType(item.label)">
            <div slot="header" class="clearfix">
              <span>
                {{ lableTextDisplay(item.label) }}数
                <el-tooltip class="item" effect="dark" :content="item.label === '新签客户' ? '<br />' : item.label === '续约客户' ? '起始时间在所选时间段内的续约合同' : ''" placement="top">
                  <template slot="content">
                    <div v-if="item.label === '新签客户'">
                      <p>起始时间在所选时间段内的新签合同</p>
                      <p>（第一份合同起始时间一年内的再次签约仍属于新签合同）</p>
                    </div>
                    <div v-else-if="item.label === '续约客户'">
                      <p>起始时间在所选时间段内的续约合同</p>
                      <p>（第一份合同起始时间一年以后的再次签约均属于续约合同）</p>
                    </div>
                    <p v-else>合同截止时间在所选时间段内的非正式、非永续客户</p>
                  </template>
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </span>
            </div>
            <div class="card-cont">
              {{
                item.label === "新签客户"
                  ? NewCompanyTotal
                  : item.label === "续约客户"
                  ? RenewalCompanyTotal
                  : item.label === "未续约客户"
                  ? NotRenewalCompanyTotal + " / " + NotRenewalCompanyToBeConfirmTotal
                  : ""
              }}
            </div>
          </el-card>
        </div>
        <div class="annual-select-content">
          <div class="select-content">
            <div class="lable-text">
              不续约率
              <el-tooltip style="margin-right: 16px" class="item" effect="dark" content="所选年度的续约合同/所选年度的到期合同" placement="top-start">
                <template slot="content">
                  <div>
                    <p>所选时间段的已确认不续约的合同金额/所选时间段的到期的合同金额</p>
                    <p>（剔除非业务不续约的金额）</p>
                  </div>
                </template>
                <i class="el-icon-info" style="color: #999"></i>
              </el-tooltip>
            </div>
            <el-date-picker
              v-model="yearValue"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :clearable="false"
              @change="getIncrementalCompanyContractPercentageList"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div class="select-content">
            <span class="editsty" v-if="RenewalDataForm.RenewalRateMoney" @click="renewalRateLableHandler">&nbsp;&nbsp;{{ RenewalDataForm.RenewalRateMoney }}&nbsp;&nbsp;</span>
            {{ RenewalDataForm.RenewalRateTotalContent ? `(${RenewalDataForm.RenewalRateTotalContent})` : " -  -" }}
          </div>
        </div>
      </div>
      <div class="tabs-box">
        <div class="tabs-box-confirm" v-if="filterObj.data_type =='续约客户'">
          <div style="margin-bottom: 0px" class="tabs-box-confirm" v-for="(item, index) in packageTypeList" :key="item">
            <div :class="['confirm-box-li', PackageDifference == item && 'active']" @click="notPackageDifferenceChange(item)">{{ item }}</div>
            <div v-if="index != 2" class="center-line"></div>
          </div>
        </div>
      </div>
      <div class="tabs-box" v-if="filterObj.data_type == '未续约客户'">
        <el-radio-group v-model="isNotRenewedConfirm" class="tabs-box-confirm" @change="notRenewedConfirmChange">
          <el-radio-button :label="1">已确认</el-radio-button>
          <div class="center-line"></div>
          <el-radio-button :label="0">待确认</el-radio-button>
        </el-radio-group>
        <div class="tabs-box-status" v-show="isNotRenewedConfirm">
          <el-select v-model="noRenewalReasonId" placeholder="请选择不续约归因" clearable @change="getTableData" style="width: 240px; margin-right: 50px">
            <el-option :label="item.AscribeContent" :value="item.CompanyAscribeId" v-for="item in noRenewalReasonList" :key="item.reasonId"></el-option>
          </el-select>
          <el-select v-model="tabsActiveName" placeholder="当前状态" clearable @change="getTableData" style="width: 240px; margin-right: 50px">
            <el-option :label="item.name" :value="item.value" v-for="item in tabsList" :key="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <el-table :data="tableData" border style="margin-top: 20px; min-height: 400px" v-loading="isShowloadding" element-loading-text="数据加载中...">
        <template v-for="item in incrementTableColums">
          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" align="center" v-if="item.key != 'AscribeContent'">
            <template slot-scope="scope">
              <span :style="item.textsty" @click="jumpHandle(scope.row, item)" v-if="item.key === 'CreateTime'">
                {{ scope.row[item.key] | formatTime }}
              </span>
              <span v-else-if="item.label == '未续约说明'">
                <span style="display: block" v-if="scope.row[item.key]">最新情况：{{ scope.row[item.key] }}</span>
                <span v-if="scope.row.RenewalTodo">To Do 事项：{{ scope.row.RenewalTodo }}</span>
                <span v-if="scope.row[item.key] || scope.row.RenewalTodo" style="color: #409eff; cursor: pointer" @click="renewalReasonMore(scope.row)">&emsp;更多>></span>
              </span>
              <div v-else-if="item.key == 'CompanyName'" style="padding: 4px 0">
                <el-tooltip effect="dark" placement="top-start" content="过去4周，kp均未覆盖服务" v-if="scope.row.IsUserMaker == -1">
                  <span class="deletesty" @click="jumpHandle(scope.row, item)">{{ scope.row[item.key] }}</span>
                </el-tooltip>
                <span v-else class="editsty" @click="jumpHandle(scope.row, item)">{{ scope.row[item.key] }}</span>
                <div class="package-difference" v-if="scope.row.PackageDifference && filterObj.data_type == '续约客户'" @click="previousDetailHadler(scope.row)">
                  {{ scope.row.PackageDifference }}
                </div>
              </div>
              <div v-else-if="item.key === 'Remark'" class="remark-row">
                <span class="remark-text" @click="viewHistoryRemarkFun(scope.row)" v-if="scope.row.IsShowNoRenewedNote">...</span>
                <span class="operation-button" v-show="canConfirmNotRenewed && !isNotRenewedConfirm" style="margin-right: 0" @click="addRemarkFun(scope.row)">添加</span>
              </div>
              <div v-else-if="item.key == 'AscribeContent'">
                <span style="color: #409eff; cursor: pointer" @click="editReasonLabel(scope.row)">
                  {{ scope.row[item.key] }}
                </span>
              </div>
              <div v-else-if="item.key == 'PermissionName'">
                <template v-if="scope.row.PermissionName.length">
                  <el-tag size="mini" style="margin: 0 10px 10px 0" v-for="key in scope.row.PermissionName.split(',')" :key="key">{{ key }}</el-tag>
                </template>
              </div>
              <div v-else-if="item.key == 'StartDate'">
                <span> {{ scope.row[item.key] }} ~ {{ scope.row.EndDate }} </span>
              </div>
              <span v-else :style="item.textsty" @click="jumpHandle(scope.row, item)">
                {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column :key="item.label" :label="item.label" :width="item.widthsty" align="center" v-else-if="item.key == 'AscribeContent' && isNotRenewedConfirm == 1">
            <template slot-scope="scope">
              <span style="color: #409eff; cursor: pointer" @click="editReasonLabel(scope.row)">
                {{ scope.row[item.key] }}
              </span>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="canConfirmNotRenewed && !isNotRenewedConfirm && filterObj.data_type == '未续约客户'" class="editsty" @click="confirmedNoRenewalFun(scope.row)">确认不续约</span>

              <span v-if="isRoleType == 'admin' || isRoleType == '权益'" @click="historicalNotesClickHandler(scope.row)" class="editsty">历史备注</span>
            </div>
          </template>
        </el-table-column>
        <div slot="empty" style="line-height: 44px; margin: 60px 0; color: #999">
          <img src="~@/assets/img/cus_m/nodata.png" alt="" style="display: block; width: 160px; height: 128px; margin: auto" />
          <span>暂无数据</span>
        </div>
      </el-table>
      <el-col :span="24" class="toolbar" v-if="total">
        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </div>
    <!-- 未续约说明列表弹窗 -->
    <renewalListDia :isShow.sync="isRenewalShow" :rowInfo="rowInfo" />
    <!-- 添加备注弹窗 -->
    <addRemark :isShow.sync="isAddRemarkShow" @saveRemark="saveRemark" />
    <!-- 历史备注弹窗 -->
    <viewRemark :isShow.sync="isViewRemarkShow" :tableData="historyRemarkList" />
    <!-- 确认不续约弹窗 -->
    <confirmedNoRenewal
      :isShow.sync="isConfirmNoRenewalShow"
      :dataForm="confirmNoRenewalForm"
      :noRenewalReasonList="noRenewalReasonList"
      @refreshReasonList="getNORenewalReasonList"
      @saveLabel="saveLabel"
      equityType="权益客户统计"
    />
    <previous-detail :previousDetailDlg.sync="previousDetailDlg" :rowInfo="rowInfo" />
    <RenewalRateDetail :showRenewalRateDetailDlg.sync="showRenewalRateDetailDlg" :renewalRateDetailForm.sync="renewalRateDetailForm" :noRenewalReasonListSon="noRenewalReasonList" />
    <historical-notes-dlg :historicalNotesDlgVisible.sync="historicalNotesDlgVisible" :CompanyId.sync="historicalNotesId" />
  </div>
</template>

<script>
import { equityTableColums } from "./configdata.js";
import { dataMainInterface, customInterence } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
import renewalListDia from "./components/renewalListDia.vue";
import addRemark from "./components/noRenewalReasonDia/addRemark.vue";
import viewRemark from "./components/noRenewalReasonDia/viewRemark.vue";
import confirmedNoRenewal from "./components/noRenewalReasonDia/confirmedNoRenewal.vue";
import PreviousDetail from "./components/previousDetail.vue";
import RenewalRateDetail from "./components/renewalRateDetail.vue";
import HistoricalNotesDlg from "@/components/historicalNotesDlg.vue";

var moment = require("moment");
moment().format();
export default {
  name: "",
  components: { mPage, renewalListDia, addRemark, viewRemark, confirmedNoRenewal, PreviousDetail, RenewalRateDetail, HistoricalNotesDlg },
  computed: {
    exportExcel() {
      let baseUrl = process.env.API_ROOT + "/statistic_report/merge_company_list";
      let token = localStorage.getItem("auth") || "";
      let paramStr = "";
      // 处理销售筛选
      let salesArr = [];
      if (this.filterObj.sale.length) {
        salesArr = this.filterObj.sale.map((item) => {
          return item[item.length - 1];
        });
      }
      let obj = {
        AdminId: salesArr.join(","),
        EndDate: this.end_date,
        StartDate: this.start_date,
        DataType: this.filterObj.data_type == "新增试用客户" ? "新增试用" : this.filterObj.data_type,
        Keyword: this.searchVal,
        IsExport: true,
        IsConfirm: this.filterObj.data_type == "未续约客户" ? this.isNotRenewedConfirm : -1,
        CompanyAscribeId: this.noRenewalReasonId,
      };
      for (let key in obj) {
        paramStr = `${paramStr}&${key}=${obj[key]}`;
      }
      return `${baseUrl}?${token}${paramStr}`;
    },
    Role() {
      let role = localStorage.getItem("Role") || "";
      return role;
    },
    //管理权限
    ManageType() {
      return localStorage.getItem("ManageType") || "";
    },
    //确认未续约权限
    canConfirmNotRenewed() {
      return ["admin", "rai_admin"].includes(this.Role);
    },
    // crm 15.9.1 区分权益FICC的展示
    isRoleType() {
      return localStorage.getItem("RoleType") || "";
    },
  },
  data() {
    return {
      searchVal: sessionStorage.getItem("incrementBack") ? JSON.parse(sessionStorage.getItem("incrementBack")).searchVal : "",
      tableData: [],
      isShowloadding: false,
      start_date: "",
      end_date: "",
      /* 筛选条件 */
      filterObj: {
        month: "近1个月",
        date: [],
        sale: "",
        data_type: "新签客户",
      },
      monthLabel: [
        {
          label: "近1个月",
        },
        {
          label: "近2个月",
        },
        {
          label: "近3个月",
        },
      ],
      salesArr: [], //销售列表
      defaultSalesProps: {
        multiple: true,
        label: "RealName",
        children: "ChildrenList",
        value: "AdminId",
      }, //销售级联配置
      pageSize: 10,
      page_no: sessionStorage.getItem("incrementBack") ? JSON.parse(sessionStorage.getItem("incrementBack")).page_no : 1,
      total: 0,
      data_typeArr: [
        {
          label: "新签客户",
        },
        {
          label: "续约客户",
        },
        {
          label: "未续约客户",
        },
      ], //数据类型
      NewCompanyTotal: 0, //新签客户数
      NotRenewalCompanyTotal: 0, //未续约客户数
      RenewalCompanyTotal: 0, //续约客户数
      NotRenewalCompanyToBeConfirmTotal: 0,
      isRenewalShow: false, //未续约说明列表弹框是否显示
      rowInfo: null, // 未续约说明更多行信息
      tabsList: [
        { name: "试用", value: "试用" },
        { name: "冻结/流失", value: "非试用" },
      ],
      tabsActiveName: "",
      NotRenewalNotTryOut: 0, //冻结流失的人数
      NotRenewalTryOut: 0, //试用的人数
      isNotRenewedConfirm: 1, //未续约的是否已确认
      noRenewalReasonList: [],
      noRenewalReasonId: "",
      selectItemRow: {}, // 当前选中的row
      // 添加备注
      isAddRemarkShow: false,
      //历史备注
      isViewRemarkShow: false,
      historyRemarkList: [],
      //确认不续约
      isConfirmNoRenewalShow: false,
      confirmNoRenewalForm: {
        reason: "",
        detailReason: "",
      },
      incrementTableColums: [],
      PackageDifference: "",
      previousDetailDlg: false,
      packageTypeList: ["增加套餐", "减少套餐", "维持套餐"],
      yearValue: "",
      showRenewalRateDetailDlg: false,
      renewalRateDetailForm: {},
      RenewalDataForm: {},

      historicalNotesDlgVisible: false, //历史备注的弹框
      historicalNotesId: 0,
    };
  },
  /* 页面跳转前记录参数 */
  beforeRouteLeave(to, form, next) {
    let backData = {
      page_no: this.page_no,
      end_date: this.end_date,
      start_date: this.start_date,
      filterObj: this.filterObj,
    };
    sessionStorage.setItem("incrementBack", JSON.stringify(backData));
    next();
  },
  /* 页面进入前是否清除参数 */
  beforeRouteEnter(to, from, next) {
    if (from.path != "/customDetail") {
      sessionStorage.removeItem("incrementBack");
    }
    next();
  },
  methods: {
    // 搜索
    handleSearch() {
      if (!this.searchVal) {
        this.page_no = 1;
        this.filterObj = {
          month: "近1个月",
          date: [],
          sale: "",
          data_type: this.filterObj.data_type,
        };
        let date_before = moment().subtract(1, "M").format("YYYY-MM-DD");
        let date_now = moment().format("YYYY-MM-DD");
        let date = [date_before, date_now];
        this.start_date = date_before;
        this.end_date = date_now;
        this.filterObj.date = date;
        this.getTableData();
        return;
      }
      this.page_no = 1;
      this.filterObj = {
        month: "",
        date: [],
        sale: "",
        data_type: this.filterObj.data_type,
      };
      this.start_date = "";
      this.end_date = "";
      this.getTableData();
    },
    //tabs 的点击事件
    // tabsHandler(item) {
    //   this.tabsActiveName = item.value;
    //   this.noRenewalReasonId = "";
    //   this.page_no = 1;
    //   this.getTableData();
    // },
    notRenewedConfirmChange() {
      this.tabsActiveName = "";
      this.noRenewalReasonId = "";
      this.page_no = 1;
      this.getTableData();
    },
    notPackageDifferenceChange(type) {      
      if (this.PackageDifference == type) {
        this.PackageDifference = "";
      } else {
        this.PackageDifference = type;
      }
      this.page_no = 1;
      this.getTableData();
    },
    /* 获取表格 */
    getTableData() {
      this.isShowloadding = true;
      // 处理销售筛选
      let salesArr = [];
      if (this.filterObj.sale.length) {
        salesArr = this.filterObj.sale.map((item) => {
          return item[item.length - 1];
        });
      }
      let params = {
        Keyword: this.searchVal,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        AdminId: salesArr.join(","),
        EndDate: this.end_date,
        StartDate: this.start_date,
        DataType: this.filterObj.data_type == "新增试用客户" ? "新增试用" : this.filterObj.data_type,
        TryOutType: this.filterObj.data_type == "未续约客户" && this.isNotRenewedConfirm == 1 ? this.tabsActiveName : "",
        IsConfirm: this.filterObj.data_type == "未续约客户" ? this.isNotRenewedConfirm : -1,
        CompanyAscribeId: this.noRenewalReasonId,
        PackageDifference: this.PackageDifference,
      };
      dataMainInterface.incrementalEquityList(params).then((res) => {
        if (res.Ret === 200) {
          this.tableData = res.Data.List || [];
          this.total = res.Data.Paging.Totals;
          this.NewCompanyTotal = res.Data.NewCompanyTotal;
          this.RenewalCompanyTotal = res.Data.RenewalCompanyTotal;
          this.NotRenewalCompanyTotal = res.Data.NotRenewalCompanyTotal;
          this.NotRenewalCompanyToBeConfirmTotal = res.Data.NotRenewalCompanyToBeConfirmTotal;
          this.NotRenewalTryOut = res.Data.NotRenewalTryOut;
          this.NotRenewalNotTryOut = res.Data.NotRenewalNotTryOut;
          this.isShowloadding = false;
        }
      });
    },
    /* 获取销售 */
    getSale() {
      customInterence.getSalesRaiData().then((res) => {
        if (res.Ret === 200) {
          this.salesArr = res.Data.List;
        }
      });
    },
    /* 切换月份 */
    toggleMonth(label) {
      this.filterObj.month = label;
      let days = label == "近1个月" ? 1 : label == "近2个月" ? 2 : label == "近3个月" ? 3 : 0;
      this.filterDate(days);
    },
    /* 选择服务日期 */
    dateChange(e) {
      if (e[0]) {
        this.start_date = e[0];
        this.end_date = e[1];
      } else {
        this.start_date = "";
        this.end_date = "";
      }
      this.filterObj.month = "";
      this.page_no = 1;
      this.searchVal = "";
      this.getTableData();
    },
    /* 切换数据类型 */
    toggleType(label) {
      console.log(this.filterObj.data_type);
      
      this.filterObj.data_type = label;
      this.incrementTableColums = equityTableColums(this.filterObj.data_type);
      this.noRenewalReasonId = "";
      if (label == "未续约客户") {
        this.getNORenewalReasonList();
      }
      this.tabsActiveName = "";
      this.page_no = 1;
      this.getTableData();
    },
    /* 筛选改变时 */
    changeFilter() {
      this.page_no = 1;
      this.searchVal = "";
      this.getTableData();
      if (this.yearValue.length > 0) {
        this.getIncrementalCompanyContractPercentageList();
      }
    },
    /* 切换页码 */
    handleCurrentChange(page) {
      this.page_no = page;
      this.getTableData();
    },
    /* 获取近几个月的日期范围 */
    filterDate(month) {
      if (month) {
        let date_before = moment().subtract(month, "M").format("YYYY-MM-DD");
        let date_now = moment().format("YYYY-MM-DD");
        let date = [date_before, date_now];
        this.start_date = date_before;
        this.end_date = date_now;
        this.filterObj.date = date;
        this.page_no = 1;
        this.searchVal = "";
        this.getTableData();
      }
    },
    /* 跳转 */
    jumpHandle(row, item) {
      if (item.link) {
        let { href } = this.$router.resolve({
          path: "/customDetail",
          query: {
            id: row.CompanyId,
          },
        });
        window.open(href, "_blank");
      }
    },
    getNORenewalReasonList() {
      dataMainInterface.getAscribList().then((res) => {
        if (res.Ret == 200) {
          this.noRenewalReasonList = res.Data.List || [];
        }
      });
    },
    // 未续约说明更多按钮
    renewalReasonMore(row) {
      this.rowInfo = {
        CompanyId: row.CompanyId,
        ProductId: row.ProductId,
      };
      this.isRenewalShow = true;
    },
    // 添加备注
    addRemarkFun(row) {
      this.selectItemRow = row;
      this.isAddRemarkShow = true;
    },
    // 添加备注 保存
    saveRemark(remark) {
      // console.log(remark);
      let params = {
        CompanyId: this.selectItemRow.CompanyId,
        ProductId: this.selectItemRow.ProductId,
        Content: remark,
      };
      dataMainInterface.addNotRenewedRemark(params).then((res) => {
        if (res.Ret == 200) {
          this.$message.success("添加成功");
          this.getTableData();
          this.isAddRemarkShow = false;
          this.selectItemRow = {};
        }
      });
    },
    // 查看历史备注
    viewHistoryRemarkFun(row) {
      dataMainInterface.getNotRenewedRemarkList({ CompanyId: row.CompanyId, ProductId: row.ProductId }).then((res) => {
        if (res.Ret == 200) {
          this.historyRemarkList = res.Data.List || [];
          this.isViewRemarkShow = true;
        }
      });
    },
    confirmedNoRenewalFun(row) {
      this.confirmNoRenewalForm.reason = "";
      this.confirmNoRenewalForm.detailReason = "";
      this.selectItemRow = row;
      this.isConfirmNoRenewalShow = true;
    },
    editReasonLabel(row) {
      dataMainInterface.contractInfoNoRenewedAscribe({ CompanyContractId: row.CompanyContractId }).then((res) => {
        if (res.Ret == 200) {
          this.confirmNoRenewalForm.reason = res.Data.Detail ? res.Data.Detail.CompanyAscribeId || "" : "";
          this.confirmNoRenewalForm.detailReason = res.Data.Detail ? res.Data.Detail.Content || "" : "";
          this.selectItemRow = row;
          this.isConfirmNoRenewalShow = true;
        }
      });
    },
    saveLabel(item) {
      let params = {
        CompanyContractId: this.selectItemRow.CompanyContractId,
        CompanyAscribeId: item.CompanyAscribeId,
        Content: item.Content,
      };
      dataMainInterface.addAscribContract(params).then((res) => {
        if (res.Ret == 200) {
          this.$message.success("确认成功");
          this.isConfirmNoRenewalShow = false;
          this.selectItemRow = {};
          this.getTableData();
        }
      });
    },
    previousDetailHadler(row) {
      this.rowInfo = row;
      this.previousDetailDlg = true;
    },
    lableTextDisplay(text) {
      let str = text == "新签客户" ? "新签合同" : text == "续约客户" ? "续约合同" : "未续约客户";
      return str;
    },
    // 年度续约的标签点击事件
    annualSelectHandler(item) {
      this.annualSelectActivue = item.name;
      this.getIncrementalCompanyContractPercentageList();
    },
    // 点击了续约率
    renewalRateLableHandler() {
      this.showRenewalRateDetailDlg = true;
      this.renewalRateDetailForm = this.initCompanyContractPercentageList();
    },
    // 获取年度续约的数据
    async getIncrementalCompanyContractPercentageList() {
      let params = this.initCompanyContractPercentageList();
      const res = await dataMainInterface.incrementalCompanyContractPercentageListV2(params);
      if (res.Ret === 200) {
        this.RenewalDataForm = res.Data;
      }
    },
    // 处理年度续约的数据
    initCompanyContractPercentageList() {
      let salesArr = [];
      if (this.filterObj.sale.length) {
        salesArr = this.filterObj.sale.map((item) => {
          return item[item.length - 1];
        });
      }
      let params = {
        EndDate: this.yearValue.length > 0 ? this.yearValue[1] : "",
        StartDate: this.yearValue.length > 0 ? this.yearValue[0] : "",
        AdminId: salesArr.join(","),
      };
      return params;
    },
    // 点击了历史留言
    historicalNotesClickHandler(item) {
      this.historicalNotesDlgVisible = true;
      this.historicalNotesId = item.CompanyId;
    },
  },
  created() {},
  mounted() {
    this.incrementTableColums = equityTableColums(this.filterObj.data_type);
    this.getSale();
    if (sessionStorage.getItem("incrementBack")) {
      let backData = JSON.parse(sessionStorage.getItem("incrementBack"));
      this.page_no = backData.page_no;
      this.end_date = backData.end_date;
      this.start_date = backData.start_date;
      this.filterObj = backData.filterObj;
      this.searchVal = backData.searchVal;
    }
    /* 默认选中近1个月 */
    this.filterDate(this.filterObj.month === "近1个月" ? 1 : this.filterObj.month === "近2个月" ? 2 : this.filterObj.month === "近3个月" ? 3 : 0);
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
.tabs-box {
  flex-direction: column;
  .tabs-box-confirm {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .center-line {
      width: 1px;
      height: 21px;
      background-color: #333333;
      margin: 0 20px;
    }
    .confirm-box-li {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      width: 120px;
      height: 40px;
      border-radius: 4px;
    }
    .active {
      background-color: #409eff;
      color: #fff;
    }
  }
}
.operation-button {
  color: #409eff;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
}
.remark-row {
  display: flex;
  justify-content: center;
  .remark-text {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    font-size: 18px;
    color: #409eff;
    cursor: pointer;
  }
}
.operation-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  .operation-button {
    &:last-child {
      margin-right: 0;
    }
  }
}
.package-difference {
  cursor: pointer;
}
.annual-select-content {
  .select-content {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .lable-text {
      flex-shrink: 0;
    }
    .select-lable {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      margin-left: 10px;
      width: 92px;
      height: 40px;
      color: #409eff;
      background-color: #ecf5ff;
      border: 1px solid #b3d8ff;
      border-radius: 4px;
      cursor: pointer;
    }
    .act-select-lable {
      color: #fff;
      background-color: #409eff;
      border: none;
    }
  }
}
</style>
<style lang="scss">
#dataReport-container {
  .tabs-box {
    .el-radio-button {
      margin-right: 0;
    }
    .el-radio-button .el-radio-button__inner {
      border: none;
      width: 120px;
      height: 40px;
      border-radius: 4px;
    }
  }
}
</style>