<template>
  <div class="statistic-container">
    <div class="statistic-select">
      <div v-if="Role == 'admin' || Role == 'ficc_admin'">
        <el-cascader
          v-model="sales"
          placeholder="请选择研究员"
          style="width: 230px"
          :options="researcherList"
          :props="defaultSalesProps"
          :show-all-levels="false"
          :key="cascaderIdx"
          @remove-tag="removeTagChange"
          collapse-tags
          clearable
          filterable
          @change="changeSales"
        >
        </el-cascader>
      </div>
      <div class="name-list">
        <div class="select-ok">已选择研究员：</div>
        <div class="sales-name">
          <span class="box-name" :class="Role == 'admin' || Role == 'ficc_admin' ? '' : 'box-right'" v-for="(item, index) in salesNameList" :key="item.id">
            {{ item.name }}
            <img v-if="Role == 'admin' || Role == 'ficc_admin'" @click="removeSalesName(item, index)" src="../../../assets/img/icons/remove-select.png" alt="" />
          </span>
        </div>
      </div>
    </div>
    <div class="table-cont">
      <!-- <table>
        <thead>
          <tr>
            <td rowspan="2" class="thead-rs">组别</td>
            <td rowspan="2" class="thead-rs">销售</td>
            <td :colspan="['周度统计表', '月度统计表'].includes(default_tab) ? 3 : 1" v-for="item in tableTheadColumns" :key="item" class="head-column">
              {{ item }}
            </td>
          </tr>
          <tr v-if="['月度统计表'].includes(default_tab)">
            <template v-for="(item, index) in new Array(4)">
              <td :key="index + '_0'">试用路演</td>
              <td :key="index + '_1'">正式路演</td>
              <td :key="index + '_2'">公开会议</td>
            </template>
          </tr>
          <tr v-if="['周度统计表'].includes(default_tab)">
            <template v-for="(item, index) in new Array(3)">
              <td :key="index + '_0'">试用路演</td>
              <td :key="index + '_1'">正式路演</td>
              <td :key="index + '_2'">公开会议</td>
            </template>
          </tr>
        </thead>
      </table>   -->
      <div class="table-body-wrapper">
				<table>
          <thead>
            <tr>
              <td rowspan="2" class="thead-rs">组别</td>
              <td rowspan="2" class="thead-rs">销售</td>
              <td :colspan="['周度统计表', '月度统计表'].includes(default_tab) ? 3 : 1" v-for="item in tableTheadColumns" :key="item" class="head-column">
                {{ item }}
              </td>
            </tr>
            <tr v-if="['月度统计表'].includes(default_tab)">
              <template v-for="(item, index) in new Array(4)">
                <td :key="index + '_0'">试用路演</td>
                <td :key="index + '_1'">正式路演</td>
                <td :key="index + '_2'">公开会议</td>
              </template>
            </tr>
            <tr v-if="['周度统计表'].includes(default_tab)">
              <template v-for="(item, index) in new Array(3)">
                <td :key="index + '_0'">试用路演</td>
                <td :key="index + '_1'">正式路演</td>
                <td :key="index + '_2'">公开会议</td>
              </template>
            </tr>
          </thead>
          <tbody v-for="item in datalist" :key="item.Name">
            <template v-if="item.Item.length">
              <tr>
                <td :rowspan="item.Item.length + 1" class="thead-rs">{{ item.Name }}</td>
              </tr>

              <tr v-for="rs in item.Item" :key="rs.AdminId">
                <td class="thead-rs">{{ rs.Name }}</td>

                <td class="data-cell" v-for="(data, data_key) in rs.dataArr" :key="data_key" @click="openDiaHandle(data)">
                  {{ data.value !== 0 ? data.value : "" }}
                </td>
              </tr>
            </template>

            <tr>
              <td colspan="2">{{ `${item.Name}合计` }}</td>
              <td v-for="(group_data, group_data_key) in item.subGroupArr" :key="group_data_key">
                {{ group_data.value !== 0 ? group_data.value : "" }}
              </td>
            </tr>
          </tbody>

          <tfoot v-show="dataLoading && totalGroupArr.length">
            <tr>
              <td colspan="2">ficc总合计</td>
              <td v-for="(total_data, total_data_key) in totalGroupArr" :key="total_data_key">
                {{ total_data.value !== 0 ? total_data.value : "" }}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <actiyityDetailDia :isShow.sync="isShowDia" :title="diaTitle" :form="dialogForm" fromType="special" />
  </div>
</template>

<script>
import { roadshowInterence } from "@/api/api.js";
import mixin from "./mixin";
import actiyityDetailDia from "../compononts/activityDetailDia.vue";
export default {
  name: "",
  mixins: [mixin],
  components: { actiyityDetailDia },
  data() {
    return {
      Role: localStorage.getItem("Role") || "",
      researcherList: [], // 研究员列表
      defaultSalesProps: {
        multiple: true,
        children: "ResearcherList",
        value: "AdminId",
        emitPath: false,
      }, //销售级联配置
      sales: [],
      salesNameList: [], //
      cascaderIdx: 1,
    };
  },
  methods: {
    // 获取研究员列表
    async getResearcherList() {
      // 发送请求
      const res = await roadshowInterence.getResearcherList();
      if (res.Ret === 200) {
        // this.researcherList=res.Data
        //this.researcherList = this.formatResearcherList(res.Data);
        const ficcList = this.formatResearcherList(res.Data.find(i=>i.GroupName==='ficc').ResearcherList||[]);
        const raiList = this.formatResearcherList(res.Data.find(i=>i.GroupName==='权益').ResearcherList||[]);
        this.researcherList = [{
            label:'ficc',
            ResearcherList:ficcList
        },{
            label:'权益',
            ResearcherList:raiList
        }]
      }
    },
    // 对获取到的研究员列表做处理
    formatResearcherList(list) {
      list.forEach((group) => {
        // 对组做处理
        group.label = group.GroupName;
        // 如果有列表
        group.ResearcherList &&
          group.ResearcherList.forEach((item) => {
            // 对研究员做处理
            item.label = item.RealName;
            item.value = {
              ResearcherId: item.AdminId,
              ResearcherName: item.RealName,
            };
          });
      });
      // 去掉ficc全体选项
      return list.filter((group) => group.GroupName !== "ficc全体");
    },
    //选择后的研究员的处理
    changeSales() {
      let arr = [];
      this.researcherList.forEach((item) => {
        item.ResearcherList &&
          item.ResearcherList.forEach((key) => {
            if (this.sales.includes(key.AdminId)) {
              arr.push({
                id: key.AdminId,
                name: key.label,
              });
            }
          });
      });
      this.salesNameList = arr;
      this.roadshowChoiceResearcher();
    },
    //删除选择后的研究员
    removeSalesName(item, index) {
      this.salesNameList.splice(index, 1);
      this.sales = this.sales.filter((key) => {
        if (key != item.id) {
          return key;
        }
      });
      this.cascaderIdx++;
      this.roadshowChoiceResearcher();
    },
    //选择的研究员接口
    async roadshowChoiceResearcher() {
      const res = await roadshowInterence.roadshowChoiceResearcher({
        AdminIds: this.sales.join(","),
      });
      if (res.Ret === 200) {
        this.getTableData();
      }
    },
    //获取选择的研究员列表
    async roadshowAdminList() {
      const res = await roadshowInterence.roadshowAdminList();
      if (res.Ret === 200) {
        let arr = [];
        res.Data &&
          res.Data.forEach((item) => {
            this.salesNameList.push({
              id: item.AdminId,
              name: item.RealName,
            });
            arr.push(item.AdminId);
          });
        this.sales = arr;
        if (this.sales.length > 0) {
          this.getTableData();
        }
      }
    },
    removeTagChange(val){
     this.sales = this.sales.filter((key) => {
        if (key != val) {
          return key;
        }
      });
      this.cascaderIdx++;
      this.changeSales()
    },
    /* 获取表格数据 */
    getTableData() {
      this.dataLoading = false;
      roadshowInterence.roadshowSpecialList().then((res) => {

        const { Data, Ret } = res;

        if (Ret !== 200) return;

        //总合计数据处理
        this.totalGroupArr = this.filterTableData(Data.RsReportRecordNumList);

        //处理数据结构
        let data = _.cloneDeep(Data.List);
        data.forEach((item) => {
          let groupDataArr = this.filterTableData(item.RsReportRecordNumList);
          this.$set(item, "subGroupArr", groupDataArr);

          item.Item &&
            item.Item.forEach((sub_item) => {
              let dataArr = this.filterTableData(sub_item.RsReportRecordNumList, sub_item.AdminId);

              this.$set(sub_item, "dataArr", dataArr);
            });
        });

        this.datalist = data;
        this.dataLoading = true;

        // const dynamic_width = {
        //   周度统计表: "9%",
        //   月度统计表: "7%",
        // };
        // this.$nextTick(() => {
        //   this.dataLoading = true;
        //   $("table")
        //     .find("td")
        //     .css({ width: dynamic_width[this.default_tab] && dynamic_width[this.default_tab] });
        //   $("table")
        //     .find(".thead-rs")
        //     .css({ width: dynamic_width[this.default_tab] ? dynamic_width[this.default_tab] : "120px" });
        // });
      });
    },
  },
  mounted() {
    if (this.Role == "admin" || this.Role == "ficc_admin") {
      this.getResearcherList();
    }
    this.$nextTick(() => {
      this.roadshowAdminList();
    });
  },
};
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
@import "./index.scss";
.statistic-container {
  min-height: calc(100vh - 120px);
  height: auto;
  .statistic-select {
    display: flex;
    margin-bottom: 30px;
    .name-list {
      flex: 1;
      display: flex;
      margin-left: 19px;
      .select-ok {
        flex-shrink: 0;
        margin-top: 13px;
      }
      .box-name {
        display: inline-block;
        padding: 3px 5px 2px 17px;
        border-radius: 4px 4px 4px 4px;
        background: #e9ebee;
        color: #666666;
        font-size: 14px;
        margin: 10px 10px 10px 0;
        cursor: pointer;
        img {
          width: 15px;
          height: 15px;
          vertical-align: text-top;
        }
      }
      .box-right {
        padding-right: 17px !important;
      }
    }
  }
}
</style>
