<template>
  <div class="container researcher-statistics">
    <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 :editable="false" :disabled-date="disabledBeforeToday" @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>
    <el-card style="margin-top: 20px">
      <div class="table-cont">
        <table>
          <thead>
            <tr>
              <td v-for="(item, index) in tableTheadColumns" :key="item" :class="['head-column', index > 0 && 'head-column-item']">
                {{ item }}
              </td>
            </tr>
          </thead>
        </table>

        <div class="table-body-wrapper">
          <table>
            <tbody v-for="(item, index) in datalist" :key="index">
              <tr>
                <td :rowspan="item.List.length + 1" class="thead-rs">{{ item.ChartPermissionName }}</td>
              </tr>
              <tr v-for="rs in item.List" :key="rs.RealName" class="content-ul">
                <td>{{ rs.RealName }}</td>
                <td @click="lookDetailsHadelr(rs)" :class="[rs.RealName == '合计' || rs.RealName == '平均' ? '' : 'association']">{{ rs.TotalRelatedContract }}</td>
                <td>{{ rs.TotalDispatchPoint }}</td>
                <td>{{ rs.GroupProportion }}</td>
                <td>{{ rs.DepartmentProportion }}</td>
              </tr>
            </tbody>

            <tfoot>
              <tr>
                <td colspan="2">部门合计</td>
                <td>{{ TotalContract }}</td>
                <td>{{ TotalMoney }}</td>
                <td>--</td>
                <td>100%</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </el-card>
    <related-contract :isShowDlg.sync="isShowDlg" :listDlg.sync="listDlg" />
  </div>
</template>

<script>
import { dataMainInterface, customInterence, contractInterface } from "@/api/api.js";
import RelatedContract from "./components/relatedContract.vue";
var moment = require("moment");
moment().format();
export default {
  name: "",
  components: { RelatedContract },
  props: {},
  data() {
    return {
      /* 筛选条件 */
      filterObj: {
        month: "",
        date: [],
        type: "",
        sale: "",
        area: "",
      },
      searchVal: "",
      monthLabel: [
        {
          label: "近1个月",
        },
        {
          label: "近2个月",
        },
        {
          label: "近3个月",
        },
      ],
      tableTheadColumns: ["组别", "研究员", "关联合同", "总派点", "组内占比", "部门占比"],
      datalist: [],
      isShowDlg: false,
      listDlg: {},
      TotalMoney: "",
      TotalContract: "",
    };
  },
  computed: {
    exportExcel() {
      let baseUrl = process.env.API_ROOT + "/cygx/allocation/statistics";
      let token = localStorage.getItem("auth") || "";
      let paramStr = "";
      let obj = {
        StartDate: this.filterObj.date[0] ? this.filterObj.date[0] : "",
        EndDate: this.filterObj.date[1] ? this.filterObj.date[1] : "",
        Keyword: this.searchVal,
        IsExport: true,
      };
      for (let key in obj) {
        paramStr = `${paramStr}&${key}=${obj[key]}`;
      }
      return `${baseUrl}?${token}${paramStr}`;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getTableData();
  },
  methods: {
    /* 切换月份 */
    toggleMonth(label) {
      this.filterObj.month = label;
      let days = label == "近1个月" ? 1 : label == "近2个月" ? 2 : label == "近3个月" ? 3 : 0;
      this.filterDate(days);
    },
    /* 获取近几个月的日期范围 */
    filterDate(month) {
      if (month) {
        let date_now = moment().format("YYYY-MM-DD");
        let date_after = moment().add(-month, "M").format("YYYY-MM-DD");
        let date = [date_after, date_now];
        this.start_date = date_now;
        this.end_date = date_after;
        this.filterObj.date = date;
        this.page_no = 1;
        this.searchVal = "";
        this.getTableData();
      }
    },
    async getTableData() {
      const res = await contractInterface.getAllocationStatistic({
        Keyword: this.searchVal,
        StartDate: this.filterObj.date[0] ? this.filterObj.date[0] : "",
        EndDate: this.filterObj.date[1] ? this.filterObj.date[1] : "",
      });
      if (res.Ret === 200) {
        this.datalist = res.Data.List;
        this.TotalContract = res.Data.TotalContract;
        this.TotalMoney = res.Data.TotalMoney;
      }
    },
    /* 选择日期 */
    dateChange(e) {
      this.page_no = 1;
      this.getTableData();
    },
    // 查看关联合同数
    lookDetailsHadelr(item) {
      if (item.RealName == "合计" || item.RealName == "平均") return;
      this.isShowDlg = true;
      this.listDlg = {
        ...item,
        date: this.filterObj.date,
        searchVal: this.searchVal,
      };
    },
    handleSearch() {
      this.getTableData();
    },
  },
};
</script>
<style scoped lang="scss">
.researcher-statistics {
  * {
    box-sizing: border-box;
  }
  .dataReport-top {
    display: flex;
    align-items: center;
    border: 1px solid #ececec;
    padding: 20px 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    .button-sty {
      margin-right: 20px;
      border: none;
      padding: 6px 12px;
      background: #e0eefd;
      color: #2d8cf0;
      cursor: pointer;
      border-radius: 4px;
      &.act {
        background: #409eff;
        color: #fff;
      }
    }
  }
  .table-cont {
    .table-body-wrapper {
      max-height: calc(100vh - 340px);
      margin-right: -6px;
      overflow-y: scroll;
      overflow-x: auto;
      border-bottom: 1px solid #dcdfe6;
      border-top: 1px solid #dcdfe6;
    }
    .head-column-item {
      width: 15%;
    }
    table {
      width: 100%;
      font-size: 14px;
      color: #666;
      thead {
        position: sticky;
        top: 0;
        left: 0;
        border-left: 1px solid #dcdfe6;
        border-right: 1px solid #dcdfe6;
        td {
          border: none;
          outline-color: #dcdfe6;
          outline-style: solid;
          outline-width: 0.5px;
        }
      }
      td,
      th {
        min-width: 35px;
        // 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 {
      td {
        width: 15%;
      }
      .association {
        color: #409eff;
        cursor: pointer;
      }
    }
  }
}
</style>
