<template>
  <div id="newbi-bigdata-previeww" v-if="nowBigdata.chartList.length > 0">
    <div class="top-wrapper">
      <div class="toggle-btn" @click="topSwitch = !topSwitch">
        <i class="el-icon-arrow-down" v-show="!topSwitch"></i>
        <i class="el-icon-arrow-up" v-show="topSwitch"></i>
        {{ topSwitch ? "收起" : "展开" }}
      </div>
      <div class="btns" v-show="!topSwitch">
        <el-button
          v-for="(item, i) of bigdataList"
          :key="item.id"
          size="mini"
          type="primary"
          :plain="index != item.id"
          @click="index = item.id"
        >
          {{ i + 1 }}
        </el-button>
      </div>
      <div class="grids" v-show="topSwitch">
        <div
          class="item"
          v-for="item of bigdataList"
          :key="item.id"
          :class="{ active: index == item.id }"
          @click="index = item.id"
        >
          <img :src="baseUrl + '/' + item.backgroundUrl" alt="" class="bg" />
          <div class="name">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="main-wrapper">
      <template v-if="!isMobile">
        <div class="wrapper-arrow left-arrow" title="上一页" @click="goPrev">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="wrapper-arrow right-arrow" title="下一页" @click="goNext">
          <i class="el-icon-arrow-right"></i>
        </div>
      </template>
      <div id="bigdata-wrapper">
        <div id="wrapper" :style="countStyle(nowBigdata)">
          <template v-if="nowBigdata.content.type === 'quick'">
            <smart-widget-grid
              :layout="nowBigdata.content.layout"
              :resizable="false"
              :draggable="false"
              :colNum="24"
              :row-height="48"
            >
              <smart-widget
                v-for="chart of nowBigdata.chartList"
                :padding="[0, 0]"
                :title="chart.title"
                :header-height="36"
                :simple="
                  chart.name === 'new-filter' ||
                  chart.name === 'new-datetime' ||
                  chart.name === 'new-special-time'
                "
                :slot="chart.key"
              >
                <template v-if="!chart.site.isSimple" slot="title">
                  <div
                    style="margin: 0 12px"
                    :style="`color:${chart.site.titleFontColor};font-size:${chart.site.titleFontSize}px;font-weight:${chart.site.fontWeight}`"
                  >
                    {{ chart.title }}
                  </div>
                </template>
                <template slot="toolbar">
                  <div style="margin: 0 12px">
                    <div>
                      <el-button
                        size="mini"
                        v-if="chart.name === 'new-table'"
                        @click.native.stop="jiegou(chart.key)"
                        >结构筛选</el-button
                      >
                      <el-button
                        size="mini"
                        v-if="chart.name === 'new-table'"
                        @click.native.stop="exportExcel(chart.key)"
                        >导出</el-button
                      >
                      <!--                      <el-button size="mini">筛选</el-button>-->
                      <!--                      <el-button size="mini">查看sql</el-button>-->
                      <el-button
                        size="mini"
                        @click.native.stop="handleFullScreen(chart.key)"
                        >全屏</el-button
                      >
                    </div>
                  </div>
                </template>
                <div :id="`chartfull${chart.key}`">
                  <preview-grid-chart
                    v-bind="chart"
                    :isQucik="nowBigdata.content.type || ''"
                    :key="chart.key"
                    :ref="chart.key"
                    :config="chart.dataconfig"
                    :index="chart.key"
                    :nowChart="nowChart"
                    :isEdit="false"
                    :now="index == nowBigdata.id"
                    :charts="nowBigdata.chartList"
                  ></preview-grid-chart>
                </div>
              </smart-widget>
            </smart-widget-grid>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  bigdataList,
  bigdataDetail,
  chartDetail,
  optionList,
} from "../../../api/newbi/bigdata";
import website from "../../../config/website";
import chartLib from "../../../newCharts/loadCharts";
import { fieldDateFormats, dateTypeMap, defaultFieldExtJson } from "../dict";
import util from "../../../util/wey";
import previewGridChart from "../comps/previewGridChart";
export default {
  components: { previewGridChart },
  data() {
    return {
      bigdataList: [],
      index: 0,
      showLeft: true,
      baseUrl: website.url.replace("/dev", ""),
      chartLib,
      fieldDateFormats,
      dateTypeMap,
      nowChart: null,
      topSwitch: false,
      isMobile: XEUtils.browse().isMobile,
      nowBigdata: {
        chartList: [],
      },
    };
  },
  computed: {
    // nowBigdata() {
    //   console.log(this.bigdataList.find((i) => i.id == this.index))
    //   return this.bigdataList.find((i) => i.id == this.index);
    // },
  },
  watch: {
    index(id) {
      if (!id) return;
      let nowBigdata = this.bigdataList.find((i) => i.id == id);
      this.nowBigdata = nowBigdata;
      if (!nowBigdata) return;
      if (nowBigdata.done) return;
      bigdataDetail({ id }).then((res) => {
        let tasks = res.data.data.componentIds.map((id) =>
          this.chartBackfill(id, nowBigdata.chartList)
        );
        Promise.all(tasks).then((_) => {
          nowBigdata.done = true;
          this.initPreview();
        });
      });
    },
    showLeft() {
      this.$nextTick(this.resize);
    },
  },
  created() {
    let { category, id } = this.$route.query;
    bigdataList({ category }).then((res) => {
      this.bigdataList = res.data.data.map((i) => {
        let content = JSON.parse(i.content);
        if (content.type === "quick" && XEUtils.browse().isMobile) {
          content.layout.map((v) => {
            return (v.w = 24);
          });
        }
        return {
          ...i,
          chartList: [],
          content: content,
          scale: 1,
          done: false,
        };
      });
      this.resize();
      let pastPreviewId = localStorage.getItem("pastPreviewId");
      if (
        !pastPreviewId ||
        !this.bigdataList.find((i) => i.id == pastPreviewId)
      ) {
        this.index = id;
      } else {
        this.index = pastPreviewId;
      }
    });
    window.addEventListener("resize", this.resize);
  },
  mounted() {
    this.$bus.$on("previewAll", this.previewAll);
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    jiegou(index) {
      this.$refs[index][0].isjiegou();
    },
    exportExcel(index) {
      this.$refs[index][0].exportExcel();
    },
    initPreview() {
      this.nowBigdata.chartList.forEach((i) => {
        if (!this.$refs[i.key]) return;
        this.$refs[i.key][0].initPreview();
      });
    },
    // 全部组件预览
    previewAll(list) {
      this.nowBigdata.chartList.forEach((i) => {
        let has = list.find((j) =>
          j.chartList.find((k) => k.chartKey == i.key)
        );
        if (has) {
          if (!this.$refs[i.key]) return;
          this.$refs[i.key][0].preview(true, false, list);
        }
      });
    },
    goPrev() {
      let nowSort = this.bigdataList.findIndex((i) => i.id == this.index);
      if (nowSort > 0) {
        this.index = this.bigdataList[nowSort - 1].id;
      }
    },
    goNext() {
      let nowSort = this.bigdataList.findIndex((i) => i.id == this.index);
      if (nowSort < this.bigdataList.length - 1) {
        this.index = this.bigdataList[nowSort + 1].id;
      }
    },
    // 组件配置回填
    chartBackfill(id, chartList) {
      return new Promise((resolve, reject) => {
        chartDetail({ id }).then((res) => {
          let {
            columnJson,
            filterJson,
            sortJson,
            limitVal,
            content,
            id,
            name,
            title,
            cubeDataId,
            useType,
            extJson,
          } = res.data.data;
          let { option, site, params, key } = JSON.parse(content);
          site.hiddened = site.hiddened || false;
          let charts = this.chartLib.reduce((r, i) => r.concat(i.charts), []);
          let chartSet = charts.find((i) => i.name == name);
          let nowChart = {
            name,
            title: title || chartSet.title,
            option,
            site,
            id,
            select: false,
            key: key || util.getRandomStr(10),
            ext: JSON.parse(extJson || "{}"),
          };
          if (chartSet.dataconfig) {
            let { modalSet } = chartSet;
            nowChart.dataconfig = {
              dataType: useType,
              category: "",
              dataId: cubeDataId,
              limit: limitVal,
              params: params || [],
              zuanFlag: nowChart.ext.zuanFlag || false,
              zuan: nowChart.ext.zuanList || [],
              zuanLevel: 0,
              zuanStack: [],
            };
            nowChart.modalSet = modalSet;
            columnJson = JSON.parse(columnJson);
            columnJson.forEach((i) => {
              i.zuan = i.zuan || false;
              let ext = JSON.parse(i.extJson || "{}");
              i.extJson = Object.assign({}, defaultFieldExtJson, ext);
            });
            modalSet.forEach((set) => {
              nowChart.dataconfig[set.key] = columnJson.filter(
                (i) => i.type == set.key
              );
            });
            nowChart.dataconfig.filter = JSON.parse(filterJson).map((field) => {
              let {
                column,
                conditions,
                connectTime,
                connectType,
                asFilter,
                enumSource,
                enumId,
              } = field;
              let r = {
                conditions,
                connectTime,
                connectType,
                ...column,
                options: [],
                asFilter: asFilter === undefined ? true : asFilter,
                enumSource,
                enumId,
                loading: false,
              };
              if (r.viewDataType == "DATETIME") {
                r.dateType = this.dateTypeMap[r.timeDataFormat];
                r.dateFormat = this.fieldDateFormats.find(
                  (i) => i.value == r.timeDataFormat
                ).label;
              }
              if (["in", "notIn"].includes(r.conditions[0].function)) {
                let { tableName, columnName } = r;
                optionList({
                  tableName,
                  columnName,
                  cubeDataId: nowChart.dataconfig.dataId,
                }).then((res) => {
                  r.options = res.data.data.map((i) => i[columnName]);
                });
              }
              return r;
            });
            nowChart.dataconfig.sort = JSON.parse(sortJson).map((i) => {
              return {
                orderType: i.orderType,
                ...i.column,
              };
            });
          }
          chartList.push(nowChart);
          resolve();
        });
      });
    },
    countStyle(bigdata) {
      let { bgColor, bgImg, width, height } = bigdata.content;
      let flag = this.index == bigdata.id;
      if (bigdata.content.type === "quick") {
        return {
          backgroundColor: bgColor,
          width: "100%",
          backgroundImage: bgImg ? `url(${bgImg})` : "none",
          top: flag ? "0" : "-100%",
          opacity: flag ? 1 : 0,
        };
      } else {
        // return {
        //   backgroundColor: bgColor,
        //   width: width + "px",
        //   height: height + "px",
        //   transform: `scale(${bigdata.scale}) translateX(-50%)`,
        //   backgroundImage: bgImg ? `url(${bgImg})` : "none",
        //   top: flag ? "0" : "-100%",
        //   zIndex: flag ? 1 : 0,
        //   opacity: flag ? 1 : 0,
        // };
      }
    },
    resize() {
      // let domWidth = document.getElementById("bigdata-wrapper").clientWidth;
      // this.bigdataList.forEach((item) => {
      //   let scale = domWidth / parseInt(item.content.width);
      //   item.scale = Math.floor(scale * 100) / 100;
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
#newbi-bigdata-previeww {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .btn-wrapper-simple {
    height: auto !important;
  }
  .el-dropdown-link {
    cursor: pointer;
    height: 48px;
    width: 100px;
  }
  .top-wrapper {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid #ccc;

    .toggle-btn {
      flex: 0 0 80px;
      text-align: center;
      line-height: 50px;
      font-size: 14px;
      cursor: pointer;
      color: #666;
      transition: all 0.2s;

      &:hover {
        color: #409eff;
      }
    }

    .btns,
    .grids {
      flex: 1;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 10px;
      align-items: center;

      &::-webkit-scrollbar {
        height: 3px;
      }
    }

    .goedit {
      padding: 10px;
    }

    .grids {
      .item {
        width: 220px;
        margin: 0 5px;
        cursor: pointer;
        border: 1px solid #ccc;

        .bg {
          width: 220px;
          height: 130px;
          display: block;
        }

        .name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          height: 30px;
          line-height: 30px;
          text-align: center;
          padding: 0 5px;
          font-size: 14px;
          background-color: #fff;
          color: #999;
        }

        &.active {
          .name {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }
  }

  .main-wrapper {
    flex: 1;
    box-sizing: border-box;
    padding: 0px;
    position: relative;

    .wrapper-arrow {
      width: 24px;
      height: 100px;
      line-height: 100px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 34px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      color: #409eff;
      background-color: #ecf5ff;
      border-radius: 4px;

      i {
        margin-left: -5px;
      }

      &:hover {
        color: #fff;
        background-color: #409eff;
      }

      &.left-arrow {
        left: 3px;
      }

      &.right-arrow {
        right: 3px;
      }
    }

    #bigdata-wrapper {
      height: 100%;
      position: relative;
      overflow-y: auto;

      .bigdata {
        position: absolute;
        left: 0px;
        transform-origin: 0 0;
        background-size: cover;
        background-position: center center;
      }
    }
  }
}
</style>
