<!--业态关联-->
<template>
  <div class="customgroup-wrapper">
    <el-header>
      <span class="asis-title"
        >{{ asisName }}&nbsp;{{ $t("asis.ActivitiesRelations") }}</span
      >
    </el-header>
    <activites-option
      ref="relationsinit"
      @reportTime="reportHandler"
      @initData="initTab"
      @childByValue="childByValue"
    ></activites-option>
    <div class="element-main sr-main">
      <el-col :span="12">
        <div class="asis-table-wrapper dt-content-wrapper">
          <h3 class="asis-table-header">
            <span class="asis-table-title">{{
              i18nFormatter('CorrelationflowSort')
            }}</span>
            <span
              class="asis-table-download"
              @click="
                exportDataHandle(
                  isTabChart ? 'domDurationTimeTable' : 'activetrafficRankIo',
                  i18nFormatter('CorrelationflowSort'),
                  'formatTrafficRank'
                )
              "
              >{{ $t("allPages.load") }}</span
            >
            <span class="report-type-box">
              <span
                :class="[
                  'report-item',
                  'line-report',
                  { 'report-item-line': !isTabChart },
                ]"
                @click="selReport('bar')"
              ></span>
              <span
                :class="['report-item', { 'report-item-tab': isTabChart }]"
                @click="selReport('table')"
              ></span>
            </span>
          </h3>
          <div class="asis-table-content" v-loading="loading">
            <!-- 业态客流排行Table -->
              <activites-table
                :tableData="tableData"
                v-if="isTabChart"
                class="sort-box"
                :style="
                   {
                    height: tableHeight + 'px'
                  }
                "
              ></activites-table>
              <div  v-if="!isTabChart" :style="
                   {
                    height: tableHeight + 'px'
                  }
                "
                class="sort-box">
                <mix-charts chartId="activetrafficRankIo" class="small-rank-chart-box " :chartData="formatTrafficRankChartData" chartType="Rank" /> 
              </div><!-- <mix-charts chartId="zoneTraffic" class="zone-traffic-container" :chartData="zoneTrafficData" chartType="Sankey" /> -->
          </div>
        </div>
      </el-col>
       <el-col :span="12">
        <div class="asis-table-wrapper dt-content-wrapper">
          <h3 class="asis-table-header">
            <span class="asis-table-title">{{
              i18nFormatter('CorrelationAbout')
            }}</span>
            <span
              class="asis-table-download"
              @click="
                exportDataHandle(
                  'entermonthHeatmap2',
                  i18nFormatter('CorrelationAbout'),
                  'formatAssociationDetail'
                )
              "
              >{{ $t("allPages.load") }}</span
            >
          </h3>
          <div class="asis-table-content" v-loading="loading">
            <!-- 业态关联详情 -->
            <enter-chart
                chartId="entermonthHeatmap2"
                ref="enterchart"
                :chartgridop="gridop"
                :style="{ height: tableHeight + 'px' }"
                :chartData="mallHeatmap_ops"
                chartType="Heatmap"
              />
          </div>
        </div>
      </el-col>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import activitiesrelationsOption from "../common/option/activitiesrelationsOption";
import enterChart from "../../Mall/common/enterChart";
import activeitiestable from "./common/activeitiestable.vue";
import exportData from '../../public/exportData'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      asisName: "",
      propParams: {},
      chartIds: {},
      tableData: [],
      chartData:null,
      zoneTrafficData:[],
      formatTrafficRankChartData:[],
      isTabChart: "TAB_TABLE",
      loading: false,
      gridop: {
        left: 100,
        right: 0,
        top: 0,
        bottom: 80,
      },
      mallHeatmap_ops: {},
    };
  },
  components: {
    "activites-option": activitiesrelationsOption,
    "enter-chart": enterChart,
    "activites-table":activeitiestable,
    "export-data-dialog":exportData
  },
  created() {
    this.mallHeatmap_ops = {}
    window.addEventListener("resize", () => {
      try {
        let timeHeatEChartsUtil = {
          chart1: $("#storeRatio")[0],
        };
        for (let k in timeHeatEChartsUtil) {
          if (
            timeHeatEChartsUtil.hasOwnProperty(k) &&
            timeHeatEChartsUtil[k] != undefined
          ) {
            timeHeatEChartsUtil[k] = this.$echarts.init(timeHeatEChartsUtil[k]);
            var element = timeHeatEChartsUtil[k];
            element.resize();
          }
        }
      } catch (err) {}
    });
  },
  mounted() {
    this.getMallOpt();
  },
  computed: {
    tableHeight() {
      const windowHeight = window.innerHeight;
      const scale =
        windowHeight <= 720
          ? 0.35
          : windowHeight <= 768
          ? 0.33
          : windowHeight <= 900
          ? 0.28
          : windowHeight <= 1080
          ? 0.31
          : 0.28;
      return windowHeight - windowHeight * scale;
    },
  },
  methods: {
    childByValue(childValue) {
      this.animate(".sr-main");
    },
    getGatesFilterMall(mallStatus) {
      let params = {
        accountId: this.$cookie.get("accountId"),
        status: 1,
        type: 2,
      };
      this.gateFilterMall(mallStatus, params).then((resolveData) => {
        let { mallData, localMallId, titleName, multiMallId } = resolveData;
        let refMallId = {
          mallId: localMallId,
          multiMallId: multiMallId,
        };
        this.$refs.init.initAsis(refMallId, mallData);
      });
    },
    getMallOpt() {
      this.getCommonMalls().then(
        (resolveData) => {
          let { mallData, localMallId, titleName, multiMallId } = resolveData;
          this.$refs.relationsinit.initAsis(localMallId, mallData);
        },
        (rejectData) => {}
      );
    },
    getChartKey() {
       this.chartIds = [];
      this.$api.baseReport
        .reportChart({
          report: "FormatAssociation",
        })
        .then((res) => {
          let tableItem = res.data.data;
          let chartArr = [];
          tableItem.forEach((item, index) => {
            this.tableKeyToId[item.key] = item.id;
            chartArr.push(item.id)
          });
          this.chartIds = chartArr.join(",");
          this.getData();
        })
        .catch((err) => {
          this.$throw(err);
        });
    },
    initTab(data) {
      this.loading = true;
      this.asisName = data.asis_tit;
      this.emitData = data;
      this.tableKeyToId = {};
      this.tableIds = "";
      this.getChartKey();
    },
    //排行chart配置

    rankChartOption(){
        let yaxis = {
            data:[]
          };
          let data = [];
         this.tableData.map(ele=> {
            yaxis.data.push(ele.formatName);
            data.push(ele.trafficNum)
          })
          this.formatTrafficRankChartData = {
            otherConf:{
              grid:{
                top:-2,
              }
            },
            series:[{
              name:'',
              type:'bar',
              data:data,
            }],
            yaxis:yaxis,
            title:'店铺客流排行'
          }
    },
    selReport(reportChart){
       if (reportChart === "table") {
        if (this.isTabChart) return;
        this.isTabChart = true;
      } else {
        if (!this.isTabChart) return;
        this.isTabChart = false;
        this.rankChartOption();
      }
    },
    //数据导出
    exportDataHandle(domId, title, chartKey) {
      let chartId = this.tableKeyToId[chartKey];
      let {
            isTabChart,
            emitData: { asis_org, asis_level,asis_floorIds, asis_date, asis_time },
          } = this,
          { startTime, endTime } = this.newDateFormat(asis_date, asis_time);
      let exportNeed = {
        domId: domId,
        title: title,
        data: {
          url: "/report/formatAssociation/mall/" + chartId + "/excel",
          params:`orgIds=${ this.$cookie.get("orgId")}&startDate=${startTime}&endDate=${endTime}&floorIds=${asis_floorIds}&option=${isTabChart ? "TAB_TABLE" : "TAB_CHART"}&formats=&localLanguage=zh_CN`
        },
      };
      this.$refs.exportDialog.dialogInit(exportNeed);
    },
    dataFetch() {
      return new Promise((resolve, reject) => {
        let {
            chartIds,
            isTabChart,
            emitData: { asis_org, asis_level,asis_floorIds, asis_date, asis_time },
          } = this,
          { startTime, endTime } = this.newDateFormat(asis_date, asis_time);

    
        let parameter = {
          orgIds: asis_org,
          startDate: startTime,
          endDate: endTime,
           floorIds:asis_floorIds,
          // chartIds: chartIds,
          chartIds: this.chartIds,
          option: isTabChart ? "TAB_TABLE" : "TAB_CHART",
        };

        this.$api.analysisReport
          .getformatAssociation(parameter)
          .then((res) => {
            let { data } = res.data;
            resolve(data);
          })
          .catch((err) => {
            this.catchErrorHandle(err);
          });
        // let url ="http://192.168.9.206:17070/report/formatAssociation/mall"
        //   window.axios.get(url,{
        //     params:parameter,
        //     heasers:{Authorization:Cookies.get('atoken')}
        //   }).then(res => {
        //     console.log("=====",res)
        //     let { data } = res.data;
        //     resolve(data);
        //   })
        });
    },
    async getData() {
      if (!this.chartIds) return;
      this.loading = false;
      let result = await this.dataFetch();
      let {
          isTabChart,
          autoComplateHead,
          dealData,
          emitData: { asis_date },
        } = this,
        { formatAssociationDetail,formatTrafficRank } = result.body;

      this.columnData = [];
      this.tableData = [];
      this.chartData = {};
      if (formatTrafficRank) {
          this.tableData = formatTrafficRank.series[0].data;
          this.mallHeatmap_ops = formatAssociationDetail;
          this.formatTrafficRankChart = formatTrafficRank;
          // this.tableData = dealData(residenceTimeChart.series, this.columnData);
      }
      this.loading = false;
    },
    reportHandler(emitData) {
      this.emitData = emitData;
      this.asisName = emitData.asis_tit;

      if (this.chartIds) {
        this.getData();
      } else {
        this.getChartKey();
      }
      // switch (emitData.asis_date) {
      //     case 'month':
      // this.$router.push("/analysis/storerate/storeratio");
      // this.propParams = {
      //   dateType: "/storerate/storeratio",
      //   data: emitData,
      // };
      //         break;
      //     default:
      //         break;
      // }
      // setTimeout(() => {
      //     this.$refs.takeTime.refreshHandle(emitData);
      // }, 200);
    },
  },
};
</script>

<style scoped>
.seq-analysis {
  width: 100%;
  height: 100%;
}
.sort-box{
  overflow: hidden;
}
</style>