<template>
  <div class="container ranking-overview-content">
    <div class="select-box">
      <el-cascader
        v-model="sales"
        placeholder="请选择销售"
        style="width: 220px"
        :options="salesArr"
        :props="defaultSalesProps"
        :show-all-levels="false"
        collapse-tags
        clearable
        filterable
        @change="changeHandle"
      >
      </el-cascader>
      <el-select style="width: 220px; margin: 0 20px" v-model="valueLocation" multiple placeholder="请选择城市" @change="changeHandle">
        <el-option v-for="item in locationOptions" :key="item.name" :label="item.name" :value="item.name"> </el-option>
      </el-select>
      <a :href="exportUser" download>
        <el-button type="primary" style="width: 80px">导出</el-button>
      </a>
    </div>
    <div class="table-cont">
      <template v-if="tableTheadColumns.length">
        <table class="thead-sticky thead-box">
          <thead>
            <tr>
              <td class="'head-column'"></td>
              <td v-for="item in tableTheadColumns" :key="item" :class="['head-column']">
                {{ item.CompanyName }}
              </td>
            </tr>
          </thead>
          <tbody v-for="(item, index) in datalist" :key="index">
            <tr>
              <td class="thead-rs">{{ item.Quarter }}</td>
              <td v-for="key in item.ProportionListText" :key="key">{{ key }}</td>
            </tr>
          </tbody>
        </table>
        <template v-if="!datalist.length"> <div class="not-text">暂无数据</div> </template>
      </template>
      <template v-else> <div class="not-text">暂无数据</div> </template>
    </div>
  </div>
</template>

<script>
import { customInterence, xClassCustomApi } from "@/api/api.js";

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      sales: "",
      salesArr: [], //销售
      defaultSalesProps: {
        multiple: true,
        label: "RealName",
        children: "ChildrenList",
        value: "AdminId",
      }, //销售级联配置
      valueLocation: [], //地址
      tableTheadColumns: [],
      datalist: [],
      listGroup: [],
      locationOptions: [{ name: "北京市" }, { name: "上海市" }, { name: "深圳市" }],
    };
  },
  computed: {
    exportUser() {
      let baseUrl = process.env.API_ROOT + "/cygx/enterScore/rankingOverview";
      let token = localStorage.getItem("auth") || "";
      let paramStr = "";
      let params = this.paramsHandler();
      params.IsExport = true;
      for (let key in params) {
        paramStr = `${paramStr}&${key}=${params[key]}`;
      }
      return `${baseUrl}?${token}${paramStr}`;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getSale();
    this.getDataList();
  },
  methods: {
    /* 获取销售 */
    getSale() {
      let status = 0;
      if (this.act_status == "流失") {
        status = 1;
      }
      customInterence.getSale({ Status: status }).then((res) => {
        if (res.Ret === 200) {
          this.salesArr = res.Data.List;
        }
      });
    },
    async getDataList() {
      let params = this.paramsHandler();
      const res = await xClassCustomApi.enterScoreRankingOverview(params);
      if (res.Ret === 200) {
        this.tableTheadColumns = res.Data.ListCompany || [];
        this.datalist = res.Data.ListQuarterDate || [];
      }
    },
    // 处理数据， 获取数据
    paramsHandler() {
      let salesArr = [];
      if (this.sales.length) {
        salesArr = this.sales.map((item) => {
          return item[item.length - 1];
        });
      }
      let params = {
        City: this.valueLocation.join(","),
        AdminId: salesArr.join(","),
      };
      return params;
    },
    changeHandle() {
      this.getDataList();
    },
  },
};
</script>
<style scoped lang="scss">
.ranking-overview-content {
  .select-box {
    display: flex;
  }

  .top-select {
    display: flex;
    justify-content: space-between;
  }
  .select-box {
    display: flex;
    margin-bottom: 30px;
  }
  .table-cont {
    overflow: auto;
    max-height: calc(100vh - 400px);
    table {
      font-size: 14px;
      color: #666;
      thead {
        position: sticky;
        top: 0;
        left: 0;
        border-left: 1px solid #dcdfe6;
        border-right: 1px solid #dcdfe6;
        td,
        th {
          min-width: 100px;
          word-break: break-all;
          border: 1px solid #dcdfe6;
          outline-color: #dcdfe6;
          outline-style: solid;
          outline-width: 0.5px;
        }
      }
      td,
      th {
        min-width: 100px;
        word-break: break-all;
        border: 1px solid #dcdfe6;
        height: 45px;
        text-align: center;
        background-color: #fff;
      }

      .head-column {
        background-color: #f0f2f5;
      }

      .data-cell {
        color: #409eff;
        cursor: pointer;
      }

      .thead-sticky {
        position: sticky;
        top: 0;
      }
    }
    .content-ul {
      .association {
        color: #409eff;
        cursor: pointer;
      }
    }
  }
  .not-text {
    height: 300px;
    line-height: 300px;
    text-align: center;
  }
  .thead-box {
    position: sticky;
    top: 0;
    z-index: 9;
  }
}
</style>
