<template>
  <div class="ps-echarts">
    <div :class="['ps-echarts--view', isFull && 'is-full']">
      <div class="ps-echarts-head" v-if="isShowHead">
        <div class="ps-echarts-h--l">
          <div>
            <ps-title :title="title" :size="titleSize"></ps-title>
          </div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="iconDesc"
            placement="top-start"
            v-if="iconDesc"
          >
            <i class="el-icon-info"></i>
          </el-tooltip>
          <p v-if="tips" class="ps-echarts-tips">{{ tips }}</p>
        </div>
        <div class="ps-echarts-h--r">
          <div
            class="ps-echarts-search-small"
            v-if="searchPlacement === 'middle'"
          >
            <slot name="search"></slot>
          </div>
          <div class="ps-echarts-icon" v-if="toolbox.length > 0">
            <li
              v-for="(item, index) in toolbox"
              :key="index"
              :class="[checkIcon === item && 'on']"
              @click="operaChangeTool(item)"
            >
              <i
                class="ps-tubiao"
                v-if="item === 'line' || item === 'multiple'"
              ></i>
              <i class="ps-zhuzhuangtu1" v-if="item === 'bar'"></i>
              <i class="ps-biaoge" v-if="item === 'table'"></i>
              <i class="ps-xiazai" v-if="item === 'export'"></i>
              <i class="ps-fangda" v-if="item === 'scale' && !isFull"></i>
              <i class="ps-suoxiao1" v-if="item === 'scale' && isFull"></i>
            </li>
          </div>
        </div>
      </div>
      <div class="ps-echarts-search-small" v-if="searchPlacement === 'bottom'">
        <slot name="search"></slot>
      </div>
      <div
        :class="[
          'ps-echarts-body',
          (!isShowFooter || !isShowHead) && 'only-none',
          !isShowFooter && !isShowHead && 'all-none',
        ]"
      >
        <div class="ps-echart-main" v-loading="loading">
          <div
            class="ps-echarts-no-data"
            v-if="
              (!option.xAxis || option.xAxis.data.length < 1) &&
              checkIcon !== 'table'
            "
          ></div>
          <table-echarts
            v-if="checkIcon === 'table'"
            :ref="refs"
            :model="tableObj"
            @pageNumSizeChange="operaTableSizeChange"
          ></table-echarts>
          <line-echarts
            v-if="checkIcon === 'line'"
            :ref="refs"
            :model="option"
          ></line-echarts>
          <bar-echarts
            v-if="checkIcon === 'bar'"
            :ref="refs"
            :model="option"
            @change="operaEchartsDrillDown"
          ></bar-echarts>
          <pie-echarts
            v-if="option.type === 'pie'"
            :ref="refs"
            :model="option"
          ></pie-echarts>
          <line-multiple-echarts
            v-if="checkIcon === 'multiple'"
            :ref="refs"
            :model="option"
          ></line-multiple-echarts>
        </div>
      </div>
      <div
        class="ps-echarts-lenged"
        v-if="checkIcon !== 'table' && isShowFooter"
      >
        <li v-for="(item, index) in lengend" :key="index">
          <span :style="item.color"></span><label>{{ item.name }}</label>
        </li>
      </div>
    </div>
    <div class="full-modal" v-if="isFull"></div>
  </div>
</template>

<script>
import lineEcharts from "./differentTypes/lineEcharts.vue";
import barEcharts from "./differentTypes/barEcharts.vue";
import pieEcharts from "./differentTypes/pieEcharts.vue";
import lineMultipleEcharts from "./differentTypes/lineMultipleEcharts.vue";
import tableEcharts from "./differentTypes/tableEcharts.vue";
import psTitle from "../../../businessComponent/title/src/title";
export default {
  name: "PsCharts",
  components: {
    psTitle,
    lineEcharts,
    barEcharts,
    pieEcharts,
    lineMultipleEcharts,
    tableEcharts,
  },
  props: {
    isShowHead: {
      type: Boolean,
      default: true,
    },
    isShowFooter: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: null,
    },
    titleSize: {
      type: String,
      default: "small",
    },
    iconDesc: {
      type: String,
    },
    tips: {
      type: String,
    },
    toolbox: {
      type: Array,
      default: () => {
        return ["line", "table", "export", "scale"];
      },
    },
    isSearch: {
      type: Boolean,
      default: true,
    },
    searchPlacement: {
      type: String,
      default: "middle",
    },
    option: {
      type: Object,
      default: () => {},
    },
    tableObj: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkIcon: "",
      isFull: false,
      lengend: [],
      refs: null,
      toolboxObj: {
        line: () => this.operaInitEcharts(),
        bar: () => this.operaInitEcharts(),
        table: () => this.operaInitTable(),
        export: () => this.operaExport(),
        scale: () => this.operaInitScale(),
        multiple: () => this.operaInitEcharts(),
      },
      isEchartsDown: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 初始化echarts方法
    init() {
      this.refs = this.option.id + "ref";
      if (this.checkIcon === "table") {
        this.operaInitTable();
        return false;
      }
      let lengedArr = [];
      let backList =
        this.option.type === "pie"
          ? this.option.series[0].data
          : this.option.series;
      backList.forEach((el) => {
        lengedArr.push({
          color: el.itemStyle
            ? `background:${el.itemStyle.color};`
            : `background:${el.color};`,
          name: el.name,
        });
      });
      this.lengend = lengedArr;
      this.checkIcon = this.toolbox[0];
      setTimeout(() => {
        this.$refs[this.refs].operaEchartsInit();
      });
    },
    operaChangeTool(item) {
      if (item !== "scale" && item !== "export") {
        this.checkIcon = item;
      }
      this.$emit("change", { type: item });
      this.toolboxObj[item]();
    },
    operaInitEcharts() {
      this.init();
    },
    operaInitTable() {
      setTimeout(() => {
        this.$refs[this.refs].operaTableInit();
      });
    },
    operaTableSizeChange(pageObj) {
      this.$emit("change", { type: "table", pageObj: pageObj });
    },
    operaExport() {
      this.$emit("export", true);
    },
    operaInitScale() {
      this.isFull = !this.isFull;
      if (this.checkIcon === "table") {
        this.operaInitTable();
        return false;
      }
      this.$refs[this.refs].operaEchartsInit();
    },
    operaEchartsDrillDown(e) {
      this.isEchartsDown = e ? true : false;

      this.$emit("drillDown", e);
    },
  },
};
</script>

<style>
.ps-echarts {
  width: 100%;
  height: 100%;
}

.ps-echarts--view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ps-echarts--view.is-full {
  position: absolute;
  top: 10%;
  right: 10%;
  padding-left: 24px;
  padding-right: 24px;
  width: 80%;
  height: 80%;
  background: #ffffff;
  border-radius: 16px;
  z-index: 101;
}

.full-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
}

.ps-echarts-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  flex: 0 0 auto;
}

.ps-echarts-head .ps-echarts-h--l {
  display: flex;
  align-items: flex-end;
}

.ps-echarts-head .ps-echarts-h--ll .ps-echarts-tips {
  margin-left: 10px;
  font-size: 13px;
  color: #999;
}

.ps-echarts-head .ps-echarts-h--r {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ps-echarts-head .ps-echarts-h--r .ps-echarts-search-small {
  flex: 0 0 auto;
}

.ps-echarts-head .ps-echarts-h--r .ps-echarts-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ps-echarts-head .ps-echarts-h--r .ps-echarts-icon li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  width: 32px;
  height: 32px;
  color: #999999;
  background-color: #f6f6f6;
  border-radius: 4px 4px 4px 4px;
  cursor: pointer;
}

.ps-echarts-head .ps-echarts-h--r .ps-echarts-icon li:hover,
.ps-echarts-head .ps-echarts-h--r .ps-echarts-icon li.on {
  color: #0075ff;
  background-color: #ebf4ff;
}

.ps-echarts-search {
}

.ps-echarts-body {
  position: relative;
  width: 100%;
  height: calc(100% - 120px);
  flex: 1 1 auto;
}

.ps-echarts-body.only-none {
  height: calc(100% - 60px);
}

.ps-echarts-body.all-none {
  height: 100% !important;
}

.ps-echart-main {
  width: 100%;
  height: 100%;
}

.ps-echarts-lenged {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  flex: 0 0 auto;
}

.ps-echarts-lenged li {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
  cursor: pointer;
}

.ps-echarts-lenged li span {
  display: inline-block;
  width: 8px;
  height: 8px;
  /* background: #0e42d2; */
  border-radius: 4px;
}

.ps-echarts-lenged li label {
  padding-left: 8px;
  font-size: 14px;
  color: #617088;
  cursor: pointer;
}

/* echarts彈層 */
.echart--mouse {
  margin: -10px;
  padding: 8px;
  background: linear-gradient(322deg, #fdfeff 100%, #f4f7fc 100%);
  border-radius: 0.06rem;
  border: 1px solid;
  border-image: linear-gradient(
      337deg,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    )
    1 1;
  box-sizing: border-box;
}

.echart--default-w-small {
  width: 180px;
}

.echart--default-w {
  width: 240px;
}

.echart--mouse li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  float: left;
  margin-top: 4px;
  min-width: 180px;
  color: #1d2129;
}

.echart--mouse li.echart-span-bg {
  padding-left: 8px;
  padding-right: 8px;
  width: 100%;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);
  border-radius: 4px 4px 4px 4px;
  box-sizing: border-box;
}

.echart--mouse li.echart-span-bg span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.echart--mouse li.echart-span-bg font {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
  width: calc((100% - 10px) / 2);
  color: #666666;
  box-sizing: border-box;
}

.echart--mouse li.echart-span-bg font:last-child {
  justify-content: flex-end;
  color: #1d2129;
}
.ps-echarts-no-data {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20% auto;
  z-index: 10;
}
</style>
