<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">
        <el-row :gutter="36">
          <el-col :span="8" v-for="item in data_typeArr" :key="item.label">
            <el-card :class="['base-card', { 'main-card': filterObj.data_type === item.label }]" shadow="hover" @click.native="toggleType(item.label)">
              <div slot="header" class="clearfix">
                <span>
                  {{ item.label }}
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      item.label === '行业新签'
                        ? '行业合同开始时间在查询时间段内，且该行业在历史上没有转正记录'
                        : item.label === '行业续约'
                        ? '行业合同开始时间在查询时间段内，且该行业历史上有过正式到期记录'
                        : '行业合同到期时间在查询时间段内，且该行业当前状态是非正式状态'
                    "
                    placement="top"
                  >
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                </span>
              </div>
              <div class="card-cont">
                {{ item.label === "行业新签" ? NewCompanyTotal : item.label === "行业续约" ? RenewalCompanyTotal : item.label === "行业未续约" ? NotRenewalCompanyTotal : "" }}
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="tabs-content-box">
        <span v-for="item in listPermissionName" :key="item.ChartPermissionId" @click="tabsBoxBtn(item)" :class="item.PermissionName == tabsPitchon ? 'pitch' : ''">
          {{ item.PermissionName }} （{{ item.Total }}）
        </span>
      </div>
      <el-table :data="tableData" border style="margin-top: 20px; min-height: 400px" v-loading="isShowloadding" element-loading-text="数据加载中...">
        <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 width="100" label="所属销售" prop="SellerName" align="center"> </el-table-column>
        <el-table-column label="合同金额" prop="Money" align="center"> </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>
        <template v-if="filterObj.data_type == '行业未续约'">
          <el-table-column width="118" label="当前行业状态" prop="PermissionNameStatus" align="center"> </el-table-column>
          <el-table-column width="118" label="当前客户状态" prop="CompanyProductStatus" align="center"> </el-table-column>
        </template>
      </el-table>
      <el-col :span="24" class="toolbar" v-if="total">
        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </div>
  </div>
</template>

<script>
import { equityTableColums } from "./configdata.js";
import { dataMainInterface, customInterence } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
var moment = require("moment");
moment().format();
export default {
  name: "",
  components: { mPage },
  computed: {
    exportExcel() {
      let baseUrl = process.env.API_ROOT + "/statistic_report/merge_company/company_contract_permission/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 = {
        IsExport: true,
        Keyword: this.searchVal,
        AdminId: salesArr.join(","),
        EndDate: this.end_date,
        StartDate: this.start_date,
        DataType: this.filterObj.data_type,
        PermissionName: this.tabsPitchon,
      };
      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);
    },
  },
  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, //行业续约数
      listPermissionName: [],
      tabsPitchon: "医药",
    };
  },
  /* 页面跳转前记录参数 */
  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();
    },
    /* 获取表格 */
    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,
        PermissionName: this.tabsPitchon,
      };
      dataMainInterface.incrementalCompanyContractPermissionList(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.isShowloadding = false;
          this.listPermissionName = res.Data.ListPermissionName;
        }
      });
    },
    /* 获取销售 */
    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) {
      this.tabsPitchon = "医药";
      this.filterObj.data_type = label;
      this.page_no = 1;
      this.getTableData();
    },
    /* 筛选改变时 */
    changeFilter() {
      this.page_no = 1;
      this.searchVal = "";
      this.getTableData();
    },
    /* 切换页码 */
    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();
      }
    },
    tabsBoxBtn(item) {
      this.tabsPitchon = item.PermissionName;
      this.changeFilter();
    },
    // 去往公司详情
    goCompanyHandle(row) {
      let { href } = this.$router.resolve({
        path: "/customDetail",
        query: {
          id: row.CompanyId,
        },
      });
      window.open(href, "_blank");
    },
  },
  created() {},
  mounted() {
    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;
}
.tabs-content-box {
  margin-top: 20px;
  span {
    display: inline-block;
    padding: 9px 24px;
    background-color: #e9f4ff;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    margin-right: 30px;
    color: #409eff;
    cursor: pointer;
  }
  .pitch {
    background-color: #409eff;
    border: none;
    color: #fff;
  }
}
</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>
