<template>
  <div class="lzTarget-container">
    <div class="left-cont minHeight">
      <div class="left-top">
        <el-button
          v-permission="permissionBtn.dataSourcePermission.longzhongData_export"
          style="width: 100%;margin-bottom: 10px;"
          type="primary"
          plain
          size="medium"
          @click="exportClick"
          :loading="btnload"
          >导出Excel</el-button
        >
        <el-autocomplete
          style="margintop: 20px; width: 100%"
          prefix-icon="el-icon-search"
          v-model="leftSearchVal"
          :fetch-suggestions="handleLeftSearch"
          :trigger-on-focus="false"
          placeholder="指标名称/指标ID"
          @select="handleSelectLeftSearchval"
          popper-class="el-autocomplete-suggestion-data-entry"
          clearable
        >
          <template slot-scope="scope">
            <div v-if="scope.item.nodata" style="text-align: center">
              暂无数据
            </div>
            <div v-else>
              {{ scope.item.QuotaName }}
              {{ frequencyType.get(scope.item.Frequency) }}
            </div>
          </template>
        </el-autocomplete>
      </div>
      <ul class="classify-list">
        <li
          :class="['classify-item', { act: select_classify === item.BreedId }]"
          v-for="item in classifyList"
          :key="item.BreedId"
          @click="changeClassify(item)"
        >
          {{ item.BreedName }}
        </li>
      </ul>
    </div>
    <div
      class="right-cont minHeight"
      v-loading="dataloading"
      element-loading-text="获取数据中..."
    >
      <div class="right-box" v-if="rightShow">
        <div class="data-header">
          <lz-table
            :tableOption="tableOption"
            tableType="header"
            ref="table"
            source="lz"
          />
        </div>
        <div class="data-cont" v-if="dateArr.length">
          <lz-table
            :tableOption="tableOption"
            tableType="data"
            :dateArr="dateArr"
            source="lz"
          />
        </div>
        <div v-else class="nodata"></div>
      </div>
      <div class="frequency-list" v-if="rightShow">
        <el-button
          type="primary"
          class="frequency-btn"
          :plain="select_frequency !== item.key"
          v-for="item in frequencyList"
          :key="item.key"
          @click="changeFrequency(item.key)"
          >{{ item.label }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import lzTable from "@/components/lzTable.vue";
import { lzDataInterface } from "@/api/api.js";
export default {
  name: "",
  components: { lzTable },
  watch: {
    select_classify(newval) {
      if (!this.isAuto) return;
      this.select_frequency = "";
      newval && this.getFrequency();
    },
    select_frequency(newval) {
      if (!this.isAuto) return;
      newval && this.getDataList();
    },
  },
  data() {
    return {
      dataloading: false,
      rightShow: false,
      exportBase: process.env.VUE_APP_API_ROOT + "/datamanage/export/lzList", //隆众数据导出接口
      // exportLzapi:process.env.VUE_APP_API_ROOT+'/entry/export/longzhong/survey',//老隆众数据导出接口
      select_classify: "",
      classifyList: [],
      select_frequency: "",
      frequencyType: new Map([
        [1, "日度"],
        [2, "周度"],
        [3, "月度"],
        [4, "季度"],
        [5, "年度"],
        [99, "无固定频率"],
      ]),
      frequencyList: [],
      tableOption: [],
      dateArr: [], //最长的日期数组
      btnload: false,

      leftSearchVal: "", //左侧搜索值
      leftSearchTradeCode: "", //如果是搜索选择的 则有此code
      select_quota: "", // 选中的指标名称
      select_Unit: "", // 选中的单位
      select_ModifyTime: "", //选中的更新时间
      select_breed: "", // 选中的分类名称
      isAuto: true, // 改变分类时是否自动获取数据
    };
  },
  methods: {
    /* 获取分类 */
    getClassify() {
      lzDataInterface.classifyList().then((res) => {
        if (res.Ret !== 200) return;
        this.classifyList = res.Data || [];
        this.select_classify =
          this.select_classify || this.classifyList[0].BreedId;
        this.select_breed = this.classifyList[0].BreedName;
      });
    },
    /* 获取频度 */
    getFrequency(defaultSelect) {
      lzDataInterface
        .frequencyList({
          BreedId: Number(this.select_classify),
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.frequencyList =
            res.Data &&
            res.Data.map((item) => {
              return {
                label: this.frequencyType.get(item.Frequency),
                key: item.Frequency,
              };
            });
          //设置当前选中的频度,若传入有默认选项则选中默认频度,否则选中列表第一个
          this.select_frequency = defaultSelect || this.frequencyList[0].key;
          //如果有默认频度,结束后恢复watcher
          this.$nextTick(() => {
            if (defaultSelect) this.isAuto = true;
          });
        });
    },
    /* 获取数据 */
    getDataList() {
      this.dataloading = true;
      lzDataInterface
        .dataList({
          BreedId: Number(this.select_classify),
          Frequency: this.select_frequency,
        })
        .then((res) => {
          this.rightShow = true;
          if (res.Ret !== 200) return;
          // 设置表格数据
          this.setDataList(res.Data);
          // this.tableOption = res.Data;
          // /* 不满6个追加6个空的显示一排 别问 问就是为了美观  */
          // if(res.Data.length < 6) for( let i = 0; i < 6;i++ ) {
          // 	this.tableOption.push({
          // 		DataList:[]
          // 	})
          // 	if(this.tableOption.length >= 6) break;
          // }
          // // 找出所有指标中数据的日期做多的那个 拆出日期数组 用来遍历表格行 ---错误逻辑
          // // 合并所有指标中的日期 作为日期数组
          // let arr = res.Data.map((item) => {
          // 	return item.DataList;
          // });
          // // let obj = arr.sort((a, b) => b.length - a.length)[0];
          // // console.log(arr,obj)
          // // this.dateArr = obj.map((item) => item.DataTime);
          // // let obj = arr.map((item) => item.DataTime);
          // let obj = [];
          // for(let i of arr) {
          // 	for(let j of i) {
          // 		obj.push(j.DataTime)
          // 	}
          // }
          // let arr2 = [...new Set(obj)].sort().reverse()
          // this.dateArr = arr2;

          // //数据最大长度小于12个 追加数据满12个 别问 问就是为了美观
          // if(this.dateArr.length < 12) for( let i = 0; i < 12;i++ ) {
          // 	this.dateArr.push('')
          // 	if(this.dateArr.length >= 12) break;
          // }

          this.$nextTick(() => {
            this.initWidth();
            this.dataloading = false;
          });
        });
    },
    /* 改变品种 */
    changeClassify(item) {
      this.select_classify = item.BreedId;
      this.select_breed = item.BreedName;
      this.leftSearchVal = "";
      (this.leftSearchTradeCode = ""),
        (this.select_quota = ""),
        (this.select_Unit = ""),
        (this.select_ModifyTime = "");
    },
    /* 改变频度 */
    changeFrequency(key) {
      this.select_frequency = key;
      this.leftSearchVal = "";
    },
    initWidth() {
      $(".right-box")[0].style.width =
        this.$refs.table.$el.clientWidth + 2 + "px";
      $(".right-box")[0].scrollTop = 0;
      $(".right-box")[0].scrollLeft = 0;
    },
    /* 隆众数据导出 */
    exportClick() {
      this.btnload = true;
      // var iframe = document.createElement("iframe")
      // iframe.style.display = "none";
      // iframe.src = this.exportLzapi;
      // document.body.appendChild(iframe);

      const link = document.createElement("a");
      link.href = this.exportLzapi;
      console.log({
        QuotaName: this.select_quota,
        LzCode: this.leftSearchTradeCode,
        BreedName: this.select_breed,
        Frequency: this.select_frequency,
        UnitName: this.select_Unit,
        ModifyTime: this.select_ModifyTime,
        url: this.exportLzapi,
      });
      link.download = "";
      link.click();
      setTimeout(() => {
        this.btnload = false;
      }, 5000);
    },

    //左侧搜索
    async handleLeftSearch(query, cb) {
      cb([]);
      if (!query) return;
      const res = await lzDataInterface.getTargetListByName({
        Keyword: query,
      });
      if (res.Ret === 200) {
        let arr = res.Data || [];
        if (!arr.length) {
          cb([{ nodata: true }]);
        } else {
          cb(arr);
        }
      }
    },
    // 选中左侧搜索值
    handleSelectLeftSearchval(e) {
      if (!e.LzCode) return;
      this.rightShow = false;
      this.leftSearchTradeCode = e.LzCode;
      this.leftSearchVal = e.QuotaName;
      this.select_quota = e.QuotaName;
      this.select_Unit = e.UnitName;
      this.select_ModifyTime = e.ModifyTime;
      this.select_classify = this.classifyList.find(
        (item) => item.BreedName === e.BreedName
      ).BreedId;
      this.select_breed = "";
      // 关闭watcher
      this.isAuto = false;
      this.getFrequency(e.Frequency);
      this.setDataList([e]);
      // this.getDataList()
      this.$nextTick(() => {
        this.rightShow = true;
        this.handleScrollLeftWrap();
      });
    },
    // 左侧滚动
    handleScrollLeftWrap() {
      let top = $(".act")[0].offsetTop;
      $(".classify-list").animate({
        scrollTop: top - 200,
      });
    },
    // 设置表格数据
    setDataList(tableOption) {
      this.tableOption = tableOption;
      /* 不满6个追加6个空的显示一排 别问 问就是为了美观  */
      if (tableOption.length < 6)
        for (let i = 0; i < 6; i++) {
          this.tableOption.push({
            DataList: [],
          });
          if (this.tableOption.length >= 6) break;
        }
      // 合并所有日期
      let arr = tableOption.map((item) => item.DataList);
      let obj = [];
      arr.forEach((dataList) => {
        obj.push(...dataList.map((item) => item.DataTime));
      });
      // 日期去重倒序排序
      this.dateArr = [...new Set(obj)].sort().reverse();
      //数据最大长度小于12个 追加数据满12个 别问 问就是为了美观
      if (this.dateArr.length < 12)
        for (let i = 0; i < 12; i++) {
          this.dateArr.push("");
          if (this.dateArr.length >= 12) break;
        }
    },
    // 对[#,;]转义
    escapeStr(str) {
      return str.replace(/#/g, escape("#")).replace(/;/g, escape(";"));
    },
  },
  computed: {
    exportLzapi() {
      // 隆众数据导出接口
      let urlStr = this.exportBase;
      // token
      urlStr += `?${localStorage.getItem("auth") || ""}`;
      // 指标名称参数
      urlStr += `&QuotaName=${this.select_quota}`;
      // 指标id
      urlStr += `&LzCode=${this.leftSearchTradeCode}`;
      // 分类名称
      urlStr += `&BreedName=${this.select_breed}`;
      // 频度
      urlStr += `&Frequency=${this.select_frequency}`;
      // 单位
      urlStr += `&UnitName=${this.select_Unit}`;
      // 修改时间
      urlStr += `&ModifyTime=${this.select_ModifyTime}`;
      return this.escapeStr(urlStr);
    },
  },
  created() {},
  mounted() {
    this.getClassify();
  },
};
</script>
<style lang="scss" scoped>
.lzTarget-container {
  display: flex;
  * {
    box-sizing: border-box;
  }
  .minHeight {
    height: calc(100vh - 120px);
    background-color: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  div::-webkit-scrollbar {
    width: 5px !important;
  }
  .left-cont {
    min-width: 140px;
    margin-right: 20px;
    padding: 30px 0;
    overflow: hidden;
    .left-top {
      padding: 0 20px;
    }
    .classify-list {
      padding: 0 20px;
      margin-top: 20px;
      height: calc(100vh - 280px);
      overflow-y: auto;
      .classify-item {
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
        &:hover {
          cursor: pointer;
          color: #409eff;
        }
        &.act {
          color: #409eff;
        }
      }
    }
  }
  .right-cont {
    width: 86%;
    padding: 30px;

    .right-box {
      max-width: 100%;
      max-height: calc(100vh - 230px);
      border-left: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
      overflow: auto;
      .data-header {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 2;
      }
      .data-cont {
        height: calc(100vh - 444px);
      }
      .nodata {
        height: calc(100vh - 460px);
        border: 1px solid #dcdfe6;
        font-size: 16px;
        color: #999;
      }
    }
    .frequency-list {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      .frequency-btn {
        width: 112px;
        margin: 0 30px 10px 0;
      }
    }
  }
}
</style>
