<template>
  <div class="home">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户行为数据统计" name="behavior">
        <el-card>
          <div slot="header" class="clearfix">
            <div style="float: left">
              <CustomTitle title="综合点击率Top20" />
            </div>
          </div>
          <div style="height: 500px">
            <Echart
              :options="allOptions"
              id="可选"
              height="100%"
              width="100%"
              v-if="allOptions"
            ></Echart>
          </div>
        </el-card>
        <el-card style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <div style="float: left; font-weight: bold">
              <CustomTitle title="各类排名Top5" />
            </div>
          </div>

          <el-row>
            <el-col :span="12">
              <div style="height: 250px">
                <Echart
                  :options="displayOptions"
                  height="100%"
                  width="100%"
                  v-if="displayOptions"
                ></Echart>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="height: 250px">
                <Echart
                  :options="crOptions"
                  height="100%"
                  width="100%"
                  v-if="crOptions"
                ></Echart>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="margin-top: 20px">
          <div slot="header" class="clearfix">
            <div style="float: left; font-weight: bold">
              <CustomTitle title="展览/文物数据统计明细" />
            </div>
            <el-radio-group v-model="currentSortPage" style="float: right">
              <el-radio :label="2">展览</el-radio>
              <el-radio :label="1">文物</el-radio>
            </el-radio-group>
          </div>
          <TablePage :data="list.records" :tableTitle="tableTitle"> </TablePage>
          <el-pagination
            style="margin: 16px 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(list.current)"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="Number(list.size)"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(list.total)"
            class="pagination"
          >
          </el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="展览及文物数量统计" name="amount">
        <el-card>
          <div
            slot="header"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <CustomTitle title="展览数量统计" />
            <el-radio-group v-model="displayRadio" style="float: right">
              <el-radio :label="1">按地区</el-radio>
              <el-radio :label="2">按博物馆</el-radio>
              <el-radio :label="3">按类型</el-radio>
            </el-radio-group>
          </div>
          <CombinationChart
            ref="displayChart"
            v-if="activeName == 'amount'"
            :pieData="displayAmountData"
          />
        </el-card>
        <el-card style="margin-top: 20px">
          <div
            slot="header"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <CustomTitle title="文物数量统计" />
            <el-radio-group v-model="crRadio" style="float: right">
              <el-radio :label="1">按地区</el-radio>
              <el-radio :label="2">按博物馆</el-radio>
              <el-radio :label="3">按类型</el-radio>
              <el-radio :label="4">按年代</el-radio>
            </el-radio-group>
          </div>
          <CombinationChart
            ref="crChart"
            v-if="activeName == 'amount'"
            :pieData="crAmountData"
          />
        </el-card>
        <el-card style="margin-top: 20px">
          <div
            slot="header"
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <CustomTitle title="虚拟展厅数量统计" />
            <el-radio-group v-model="virtualRadio" style="float: right">
              <el-radio :label="1">按地区</el-radio>
              <el-radio :label="2">按博物馆</el-radio>
            </el-radio-group>
          </div>
          <CombinationChart
            ref="virtualChart"
            v-if="activeName == 'amount'"
            :pieData="virtualAmountData"
          />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TablePage from "@/components/Table/TablePage.vue";
import { title } from "./config";
import Echart from "@/components/Echarts"; //引入echatrs组件
import { getListByPageSort, getBarMap } from "@/api/user";
import { getCulturalRelicStatistic } from "@/api/culturalRelic";
import { getExhibitionStatistic } from "@/api/display";
import { getVirtualStatistic } from "@/api/vitual";
import CombinationChart from "./components/CombinationChart";
import CustomTitle from "./components/CustomTitle";

export default {
  name: "Home",
  components: {
    TablePage,
    Echart,
    CombinationChart,
    CustomTitle,
  },
  computed: {
    ...mapGetters(["name"]),
    tableTitle() {
      let tableTitle = title;
      switch (this.currentSortPage) {
        case 2:
          tableTitle[0].prop = "title";
          break;
        default:
          tableTitle[0].prop = "name";
          break;
      }
      return tableTitle;
    },
  },

  data() {
    return {
      activeName: "behavior",
      displayRadio: 1,
      crRadio: 1,
      virtualRadio: 1,
      list: {
        records: [],
        current: 1,
        size: 10,
      },
      allOptions: null,
      displayOptions: null,
      crOptions: null,
      virtualOptions: null,
      currentSortPage: 2, //1-文物；2-展览；3-虚拟展厅；4-精品展览，0-所有。默认0
      displayAmountData: null,
      crAmountData: null,
      virtualAmountData: null,
    };
  },
  watch: {
    currentSortPage(value) {
      this.currentSortPage = value;
      this.list.current = 1;
      this.loadListByPageSort();
    },
    activeName(value) {
      if (value == "amount") {
        if (this.displayPieData == null) {
          this.getDisplayAmountData();
        }
        if (this.crAmountData == null) {
          this.getCrAmountData();
        }
        if (this.crAmountData == null) {
          this.getVirtualAmountData();
        }
      }
    },
    displayRadio() {
      this.getDisplayAmountData();
    },
    crRadio() {
      this.getCrAmountData();
    },
    virtualRadio() {
      this.getVirtualAmountData();
    },
  },
  mounted() {
    this.getBehaviorData();
    this.loadListByPageSort();
  },
  methods: {
    // 获取行为数据统计图数据
    async getBehaviorData() {
      var pie_color = [
        "#00A5B9",
        "#FFD71D",
        "#F76464",
        "#56A3FF",
        "#32D790",
        "#F4B561",
        "#7080DB",
        "#DF7A90",
        "#3CC4EF",
        "#EF7F3C",
        "#EF3C81",
        "#0DBF8C",
        "#2F73C0",
        "#C55E18",
        "#C899FF",
        "#C6D727",
        "#FF688F",
        "#87A0DC",
        "#00D9F7",
        "#A24EED",
      ];
      let barListAll = [];
      var legendList = [];
      let displaySource = []; //展览的数据集
      let virtualSource = []; //虚拟展的数据集
      let crSource = []; //文物的数据集
      let res = await getBarMap();
      const {
        allBrowseSortList,
        culturalRelicSortList,
        exhibitionSortList,
        virtualSortList,
      } = res.data;
      allBrowseSortList.map((item) => {
        let obj = {};
        // if (item.data > 0) {
        obj.name = item.name;
        obj.value = item.data;
        barListAll.push(obj);
        // }
      });
      culturalRelicSortList.map((item) => {
        let obj = {
          name: item.name,
          浏览量: item.browseCount,
          收藏量: item.collectCount,
          点赞量: item.loveCount,
        };
        crSource.push(obj);
      });

      exhibitionSortList.map((item) => {
        let obj = {
          name: item.name,
          浏览量: item.browseCount,
          收藏量: item.collectCount,
          点赞量: item.loveCount,
        };
        displaySource.push(obj);
      });

      virtualSortList.map((item) => {
        let obj = {
          name: item.name,
          浏览量: item.browseCount,
          收藏量: item.collectCount,
          点赞量: item.loveCount,
        };
        virtualSource.push(obj);
      });

      for (var i = 0; i < barListAll.length; i++) {
        legendList.push(barListAll[i].name);
      }
      this.allOptions = {
        color: pie_color,
        title: {
          show: false,
          text: "",
          textStyle: {
            color: "#333333",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: [
          {
            show: false,
            left: "2%",
            right: "10%",
            bottom: 0,
            top: "2%",
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            gridIndex: 0,
            name: "次",
            nameTextStyle: {
              color: "#9B9B9B",
              fontSize: 14,
            },
            axisLabel: {
              color: "#727272",
              fontSize: 14,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#333333",
                opacity: 0.35,
              },
            },
            axisTick: {
              show: true,
              inside: true,
              lineStyle: {
                color: "#333333",
                opacity: 0.35,
              },
            },
            splitLine: {
              show: false,
            },
            show: false,
          },
        ],
        yAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: legendList,
            inverse: true,
            axisLabel: {
              color: "#727272",
              fontSize: 14,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#333333",
                opacity: 0.35,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "浏览量",
            type: "bar",
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: barListAll,
            label: {
              show: true,
              position: "right", // 位置
              color: "#303133",
              fontSize: 14,
              distance: 15, // 距离
              formatter: "{c} 次", // 这里是数据展示的时候显示的数据
            }, // 柱子上方的数值
            barWidth: 20,
            itemStyle: {
              color: "#52A8FF",
              normal: {
                borderRadius: [0, 8, 8, 0],
                color: function (params) {
                  // 定义一个颜色集合
                  let colorList = [
                    "#c065e7",
                    "#765deb",
                    "#3862d8",
                    "#6a89E2",
                    "#219CF9",
                    "#6efbbf",
                    "#40c057",
                    "#ffd351",
                    "#ff8e43",
                    "#f56b6d",
                    "#c065e7",
                    "#765deb",
                    "#3862d8",
                    "#6a89E2",
                    "#219CF9",
                    "#6efbbf",
                    "#40c057",
                    "#ffd351",
                    "#ff8e43",
                    "#f56b6d",
                  ];
                  // 对每个bar显示一种颜色
                  return colorList[params.dataIndex];
                },
              },
              barBorderRadius: [0, 10, 10, 0],
            },
          },
        ],
      };

      this.crOptions = {
        title: {
          text: "文物排行Top5",
          left: "5%",
          top: "15",
          textStyle: {
            fontWeight: "400",
            color: "#000",
            fontSize: 14,
          },
        },
        legend: { top: "10", right: "60" },
        tooltip: {},
        color: ["#5470c6", "#73c0de", "#fac858", "#ee6666", "#91cc75"],
        dataset: {
          dimensions: ["name", "浏览量", "收藏量", "点赞量"],
          source: crSource,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: -18,
            color: "#606266",
            interval: 0,
            margin: 20,
            align: "center",
            textStyle: {
              fontSize: 10,
            },
          },
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
        ],
      };
      this.displayOptions = {
        title: {
          text: "展览排行Top5",
          left: "5%",
          top: "15",
          textStyle: {
            fontWeight: "400",
            color: "#000",
            fontSize: 14,
          },
        },
        tooltip: {},
        color: ["#5470c6", "#73c0de", "#fac858", "#ee6666", "#91cc75"],
        dataset: {
          dimensions: ["name", "浏览量", "收藏量", "点赞量"],
          source: displaySource,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: -18,
            color: "#606266",
            interval: 0,
            margin: 20,
            align: "center",
            textStyle: {
              fontSize: 10,
            },
          },
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
          // {
          //   type: 'bar',
          //   barWidth: '10%',
          //   itemStyle: {
          //     normal: {
          //       barBorderRadius: 6,
          //     },
          //   },
          // },
        ],
      };
      this.virtualOptions = {
        // legend: { "top": "20", right: "60" },
        title: {
          text: "虚拟展排行TOP5",
          left: "5%",
          top: "15",
          textStyle: {
            fontWeight: "400",
            color: "#000",
            fontSize: 14,
          },
        },
        tooltip: {},
        color: ["#5470c6", "#73c0de", "#fac858", "#ee6666", "#91cc75"],
        dataset: {
          dimensions: ["name", "浏览量", "收藏量", "点赞量"],
          source: virtualSource,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            rotate: -18,
            color: "#606266",
            interval: 0,
            margin: 20,
            align: "center",
            textStyle: {
              fontSize: 10,
            },
          },
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
          {
            type: "bar",
            barWidth: "10",
            itemStyle: {
              normal: {
                barBorderRadius: 6,
              },
            },
          },
        ],
      };
    },
    // 获取行为数据明细
    async loadListByPageSort() {
      const params = {
        type: this.currentSortPage,
        page: this.list.current,
        limit: this.list.size,
      };
      let res = await getListByPageSort(params);
      let data = res.data;
      switch (this.currentSortPage) {
        case 1:
          // 文物
          this.list = data.culturalRelicPageVos;
          break;
        case 2:
          // 展览
          this.list = data.exhibitionPageVos;
          break;
        case 3:
          // 虚拟展厅
          this.list = data.virtualPageVos;
          break;
        case 4:
          // 精品展览
          this.list = {
            records: [],
            size: 10,
            current: 1,
          };
          this.$message.info("精品展览明细正在开发中，敬请期待");
          break;
      }
      // console.log(111, res);
    },

    // 获取展览数量统计图数据
    async getDisplayAmountData() {
      const params = {
        statisticWord: this.displayRadio,
      };
      let res = await getExhibitionStatistic(params);
      let data =
        res.data.exhibitionByRegion ||
        res.data.exhibitionByDept ||
        res.data.exhibitionByType;
      this.displayAmountData = data || [];
    },

    // 获取文物数量统计图数据
    async getCrAmountData() {
      const params = {
        statisticWord: this.crRadio,
      };
      let res = await getCulturalRelicStatistic(params);
      let data =
        res.data.culturalByRegion ||
        res.data.culturalByDept ||
        res.data.culturalByType ||
        res.data.culturalByYears;
      this.crAmountData = data || [];
    },

    // 获取虚拟展览数量统计统计图数据
    async getVirtualAmountData() {
      const params = {
        statisticWord: this.virtualRadio,
      };
      let res = await getVirtualStatistic(params);
      // console.log(res);
      let data = res.data.virtualByRegion || res.data.virtualByDept;
      this.virtualAmountData = data || [];
    },

    // 改变页容量
    handleSizeChange(value) {
      this.list.size = value;
      this.loadListByPageSort();
    },

    // 改变当前显示页
    handleCurrentChange(value) {
      // debugger;
      this.list.current = value;
      this.loadListByPageSort();
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  padding: 16px;
}

.el-tabs--card {
  height: calc(100vh - 110px);
  /* overflow-y: auto; */
}

.el-tab-pane {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
</style>
