<template>
  <div class="container rating-overview-content">
    <div class="top-select">
      <div class="select-box">
        <el-date-picker style="width: 220px" v-model="yearValue" value-format="yyyy" type="year" placeholder="请选择年份" :clearable="false" @change="changeHandle"> </el-date-picker>
        <el-select style="width: 220px; margin: 0 20px" v-model="selectedQuarter" placeholder="请选择季度" @change="changeHandle">
          <el-option v-for="item in quarterOptions" :key="item.label" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-input style="width: 220px" placeholder="请输入券商名称" prefix-icon="el-icon-search" v-model="brokerName" @input="inputHandle"> </el-input>
        <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>
        <el-button @click="enterScoreType = !enterScoreType" type="primary">{{ enterScoreType ? "原始值显示" : "百分比显示" }} </el-button>
      </div>
    </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.ChartPermissionName }}</td>
              <td v-for="key in item.ProportionListText" :key="key">{{ key }}</td>
            </tr>
            <tr v-for="rs in item.List" :key="rs.RealName" class="content-ul">
              <td>{{ rs.RealName }}</td>
              <td v-for="pr in rs.ProportionListText" :key="pr">{{ pr }}</td>
            </tr>
          </tbody>
          <tbody v-for="(item, index) in listGroup" :key="index">
            <tr>
              <td class="thead-rs">{{ item.GroupName }}</td>
              <td v-for="key in item.ProportionListText" :key="key">{{ key }}</td>
            </tr>
          </tbody>
        </table>
        <template v-if="!datalist.length && !listGroup.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 {
      yearValue: new Date().getFullYear().toString(), // 年份
      selectedQuarter: [], // 季度
      quarterOptions: [
        {
          label: "Q1",
          value: ["01-01", "03-31"],
        },
        {
          label: "Q2",
          value: ["04-01", "06-30"],
        },
        {
          label: "Q3",
          value: ["07-01", "09-30"],
        },
        {
          label: "Q4",
          value: ["10-01", "12-31"],
        },
      ],
      brokerName: "", // 券商名
      valueLocation: [], //地址
      tableTheadColumns: [],
      datalist: [],
      listGroup: [],
      enterScoreType: false,
      locationOptions: [{ name: "北京市" }, { name: "上海市" }, { name: "深圳市" }],
    };
  },
  computed: {
    exportUser() {
      let baseUrl = process.env.API_ROOT + "/cygx/enterScore/scoreOverview";
      let token = localStorage.getItem("auth") || "";
      const cityArr = [];
      let paramStr = "";
      let params = this.paramsHandler();
      params.IsExport = true;
      for (let key in params) {
        paramStr = `${paramStr}&${key}=${params[key]}`;
      }
      return `${baseUrl}?${token}${paramStr}`;
    },
  },
  watch: {
    enterScoreType: {
      handler() {
        this.getDataList();
      },
    },
  },
  mounted() {
    this.setDefaultQuarter();

    this.getDataList();
  },
  methods: {
    setDefaultQuarter() {
      const currentDate = new Date();
      const month = currentDate.getMonth() + 1; // 获取当前月份（0-11，所以加1）

      let currentQuarterIndex;
      if (month >= 1 && month <= 3) {
        // Q1
        currentQuarterIndex = 0;
      } else if (month >= 4 && month <= 6) {
        // Q2
        currentQuarterIndex = 1;
      } else if (month >= 7 && month <= 9) {
        // Q3
        currentQuarterIndex = 2;
      } else if (month >= 10 && month <= 12) {
        // Q4
        currentQuarterIndex = 3;
      }

      // 获取上一个季度索引
      const previousQuarterIndex = currentQuarterIndex === 0 ? this.quarterOptions.length - 1 : currentQuarterIndex - 1;

      // 设置v-model绑定的值为上一个季度的value数组
      this.selectedQuarter = this.quarterOptions[previousQuarterIndex].value;
    },

    getPreviousYear(currentYear, currentQuarter) {
      // 如果当前季度是第一个季度，则上个季度应该是去年的最后一个季度
      return currentQuarter === "Q1" ? currentYear - 1 : currentYear;
    },
    changeHandle() {
      this.getDataList();
    },
    inputHandle: _.debounce(async function () {
      this.getDataList();
    }, 500),
    async getDataList() {
      this.tableTheadColumns = [];
      this.datalist = [];
      this.listGroup = [];
      let params = this.paramsHandler();
      const res = await xClassCustomApi.enterScoreScoreOverview(params);
      if (res.Ret === 200) {
        this.tableTheadColumns = res.Data.ListCompany || [];
        this.datalist = res.Data.ListPermission || [];
        this.listGroup = res.Data.ListGroup || [];
      }
    },
    // 处理数据， 获取数据
    paramsHandler() {
      let params = {
        StartDate: this.yearValue + "-" + this.selectedQuarter[0],
        EndDate: this.yearValue + "-" + this.selectedQuarter[1],
        KeyWord: this.brokerName,
        City: this.valueLocation.join(","),
        EnterScoreType: this.enterScoreType ? 2 : 1,
      };
      return params;
    },
  },
};
</script>
<style scoped lang="scss">
.rating-overview-content {
  .top-select {
    display: flex;
    justify-content: space-between;
  }
  .select-box {
    display: flex;
    margin-bottom: 30px;
  }
  .table-cont {
    max-height: calc(100vh - 400px);
    overflow: auto;
    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>
