<template>
  <!-- 营运数据概览页面! -->

  <div class="operational">
    <!-- <div class="echartsOne">
      <div class="title">
        <div class="left">用户活动趋势</div>
        <div class="right">
          <img src="../../assets/svg/export.png" alt="" />
          <span>导出活动详情</span>
        </div>
      </div>
      <div class="search">
        <div class="left">
          <div class="leftItem">
            <a-select
              style="width: 100%"
              placeholder="请选择模块"
              allowClear
            ></a-select>
          </div>
          <div class="leftItem">
            <a-select
              style="width: 100%"
              placeholder="请选择日期格式"
              allowClear
            ></a-select>
          </div>
          <div class="leftItem">
            <a-range-picker
              style="width: 100%"
              format="YYYY-MM-DD"
              separator="至"
              :placeholder="['      开始时间', '        结束时间']"
            />
          </div>
          <div class="leftItem">
            <a-select
              style="width: 100%"
              placeholder="请选择入口"
              allowClear
            ></a-select>
          </div>
        </div>
      </div>
      <div class="echarts" ref="surfaceRef"></div>
      <div class="msg">
        <div class="item">
          <div class="start" />
          <div class="radio" />
          <div class="end" />
          <div class="text">停留时长</div>
        </div>
        <div class="item1">
          <div class="start" />
          <div class="radio" />
          <div class="end" />
          <div class="text">访问人数</div>
        </div>
        <div class="item2">
          <div class="start" />
          <div class="radio" />
          <div class="end" />
          <div class="text">访问次数</div>
        </div>
      </div>
    </div> -->
    <div class="echartsTwo">
      <div class="title">
        <div class="left">学习情况</div>
        <div v-if="1 == towParmasn.type || 2 == towParmasn.type || 3 == towParmasn.type"  class="right" @click="exportTwoData">
          <img src="../../assets/images/coursewareManage/export1.png" alt="" />
          <span>导出学习情况</span>
        </div>
      </div>
      <div class="search">
        <div class="left">
          <div class="leftItem">
            <a-select
              style="width: 112px"
              placeholder="请选择模块"
              v-model:value="towParmasn.type"
              @change="modalChange"
              :options="[
                {
                  label: '项目',
                  value: 1,
                },
                {
                  label: '学习路径图',
                  value: 2,
                },
                {
                  label: '课程',
                  value: 3,
                },
                {
                  label: '案例',
                  value: 4,
                },
                {
                  label: '文章',
                  value: 5,
                },
                {
                  label: '问答',
                  value: 6,
                },
              ]"
            ></a-select>
          </div>
          <div class="leftItem">
            <a-select
              style="width: 112px"
              placeholder="请选择日期格式"
              @change="twoSelectChange"
              :options="[
                { label: '按日查找', value: 0 },
                { label: '按月查找', value: 1 },
              ]"
              v-model:value="towParmasn.dateType"
            ></a-select>
          </div>
          <div class="leftItem">
            <div class="timeItemSearch">
              <a-range-picker
                v-if="towParmasn.dateType == 0"
                style="width: 100%"
                format="YYYY-MM-DD"
                v-model:value="towParmasn.day"
                separator="至"
                @change="twoDatChange"
                :placeholder="['      开始时间', '        结束时间']"
              />
              <a-range-picker
                v-if="towParmasn.dateType == 1"
                style="width: 100%"
                v-model:value="towParmasn.time"
                @change="twoMonthChange"
                format="YYYY-MM"
                separator="至"
                :placeholder="['      开始时间', '        结束时间']"
                picker="month"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="echarts" ref="surface1Ref"></div>
      <div class="msg">
        <div class="item">
          <div class="start" />
          <div class="radio" />
          <div class="end" />
          <div class="text">总学习人数</div>
        </div>
        <div class="item1">
          <div class="start" />
          <div class="radio" />
          <div class="end" />
          <div class="text">人均学习时长</div>
        </div>
        <div class="item2">
          <div class="start" />
          <div class="radio" />
          <div class="end" />
          <div class="text">总学习时长</div>
        </div>
      </div>
    </div>
    <div class="echartsThree">
      <div class="left">
        <div class="title">
          <div class="leftTile">
            学习内容 <span @click="eChartClickLeft"><img src="../../assets/all.png" alt="" style="width:14px;height:14px;cursor: pointer;"></span>
          </div>
          <div class="rightTile" @click="exportThree">
            <img
              src="../../assets/images/coursewareManage/export1.png"
              alt=""
            />
            <span>导出学习内容</span>
          </div>
        </div>
        <div class="searchThree">
          <div class="leftSearch">
            <div class="leftItemSearch">
              <a-select
                style="width: 100%"
                placeholder="请选择日期格式"
                @change="selectChange"
                :options="[
                  { label: '按日查找', value: 0 },
                  { label: '按月查找', value: 1 },
                ]"
                v-model:value="threeLeftType"
              ></a-select>
            </div>
            <div class="timeItemSearch">
              <a-range-picker
                v-if="threeLeftType == 0"
                style="width: 100%"
                format="YYYY-MM-DD"
                v-model:value="threeDay"
                separator="至"
                @change="leftDayChange"
                :placeholder="['      开始时间', '        结束时间']"
                @openChange="onOpenChange"
                @calendarChange="onCalendarChange"
              />
              <a-range-picker
                v-if="threeLeftType == 1"
                style="width: 100%"
                v-model:value="threeTime"
                @change="leftMonthChange"
                format="YYYY-MM"
                separator="至"
                :placeholder="['      开始时间', '        结束时间']"
                picker="month"
              />
            </div>
          </div>
        </div>
        <div class="leftEacharts" ref="surface2Ref"></div>
        <div class="threeMsg">
          <div class="threeMsgItem">
            <div class="classNum" />
            <div class="MsgItemText">课程数</div>
          </div>
          <div class="threeMsgItem">
            <div class="projectNum" />
            <div class="MsgItemText">项目数</div>
          </div>
          <div class="threeMsgItem">
            <div class="study" />
            <div class="MsgItemText">学习路径图</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          <div class="leftTile">
            学习内容 <span @click="eChartClickRight"><img src="../../assets/all.png" alt="" style="width:14px;height:14px;cursor: pointer;"></span>
          </div>
          <div class="rightTile" @click="exportRight">
            <img
              src="../../assets/images/coursewareManage/export1.png"
              alt=""
            />
            <span>导出学习内容</span>
          </div>
        </div>
        <div class="searchThree">
          <div class="leftSearch">
            <div class="leftItemSearch">
              <a-select
                style="width: 100%"
                placeholder="请选择日期格式"
                @change="rightChange"
                :options="[
                  { label: '按日查找', value: 0 },
                  { label: '按月查找', value: 1 },
                ]"
                v-model:value="forRightType"
              ></a-select>
            </div>
            <div class="timeItemSearch">
              <a-range-picker
                v-if="forRightType == 0"
                style="width: 100%"
                format="YYYY-MM-DD"
                v-model:value="forDay"
                @change="rightDayChange"
                separator="至"
                :placeholder="['      开始时间', '        结束时间']"
              />
              <a-range-picker
                v-if="forRightType == 1"
                style="width: 100%"
                v-model:value="forTime"
                format="YYYY-MM"
                separator="至"
                @change="rightMonthChange"
                :placeholder="['      开始时间', '        结束时间']"
                picker="month"
              />
            </div>
          </div>
        </div>
        <div class="leftEacharts" ref="surface3Ref"></div>
        <div class="threeMsg">
          <div class="threeMsgItem">
            <div class="classNum" />
            <div class="MsgItemText">案例</div>
          </div>
          <div class="threeMsgItem">
            <div class="projectNum" />
            <div class="MsgItemText">文章</div>
          </div>
          <div class="threeMsgItem">
            <div class="study" />
            <div class="MsgItemText">问答</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <a-modal v-model:visible="modalFlag" title="学习内容" style="width: 1100px">
      <div style="height: 500px" ref="surface4Ref"></div>
    </a-modal>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "dayjs/locale/zh-cn";
import { onMounted, ref, reactive, toRefs } from "vue";
import * as api from "../../api/indexProject";
import dayjs from "dayjs";
import axios from "axios";
import Cookies from "vue-cookies";
import downLoad from "../../utils/downLoad";
import { message } from "ant-design-vue";
export default {
  name: "OperationaL",
  setup() {
    const state = reactive({
      threeLeftType: 1,
      threeTime: [],
      threeDay: [],
      threeXData: [],
      forRightType: 1,
      forTime: [],
      forDay: [],
      towParmasn: {
        type: 1,
        dateType: 1,
        time: [],
        day: [],
      },
      modalFlag: false,
    });
    const surfaceRef = ref(null);
    const surface1Ref = ref(null);
    const surface2Ref = ref(null);
    const surface3Ref = ref(null);
    const surface4Ref = ref(null);
    const dates = ref();
    const hackValue = ref();

    const datess = ref();
    const hackValues = ref();
    const eChartClickRight = async () => {
      state.modalFlag = true;

      if (state.forRightType == 0) {
        if (state.forDay?.length > 0) {
          const dayStart = dayjs(state.forDay[0])
            .startOf("day")
            .format("YYYY-MM-DD 00:00:01");
          const dayEnd = dayjs(state.forDay[1])
            .endOf("day")
            .format("YYYY-MM-DD hh:mm:ss");
          const res = await api.dataStatisticsSelectV2({
            startTime: dayStart,
            endTime: dayEnd,
            dateType: state.forRightType,
          });
          if (res) {
            const xData = [];
            const course = [];
            const project = [];
            const router = [];
            res?.data?.forEach((item) => {
              xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
              item?.list?.forEach((iten) => {
                if (iten.name == "case") {
                  course.push(iten.value);
                } else if (iten.name == "article") {
                  project.push(iten.value);
                } else if (iten.name == "question") {
                  router.push(iten.value);
                }
              });
            });
            optionsBig.value.xAxis.data = xData;
            optionsBig.value.series[0].data = course;
            optionsBig.value.series[1].data = project;
            optionsBig.value.series[2].data = router;
            const myChart5 = echarts.init(surface4Ref.value);
            optionsBig.value && myChart5.setOption(optionsBig.value);
          }
        }
      } else if (state.forRightType == 1) {
        if (state.forTime?.length > 0) {
          const monthEnd = dayjs(state.forTime[1])
            .endOf("month")
            .format("YYYY-MM-DD hh:mm:ss");
          const res = await api.dataStatisticsSelectV2({
            startTime: dayjs(state.forTime[0]).format("YYYY-MM-01 00:00:01"),
            endTime: monthEnd,
            dateType: state.forRightType,
          });
          if (res) {
            const xData = [];
            const course = [];
            const project = [];
            const router = [];
            res?.data?.forEach((item) => {
              xData.push(item.xdata);
              item?.list?.forEach((iten) => {
                if (iten.name == "case") {
                  course.push(iten.value);
                } else if (iten.name == "article") {
                  project.push(iten.value);
                } else if (iten.name == "question") {
                  router.push(iten.value);
                }
              });
            });
            optionsBig.value.xAxis.data = xData;
            optionsBig.value.series[0].data = course;
            optionsBig.value.series[1].data = project;
            optionsBig.value.series[2].data = router;
            const myChart5 = echarts.init(surface4Ref.value);
            optionsBig.value && myChart5.setOption(optionsBig.value);
          }
        }
      }
    };
    const eChartClickLeft = async () => {
      state.modalFlag = true;
      if (state.threeLeftType == 1) {
        if (state.threeTime?.length > 0) {
          const monthEnd = dayjs(state.threeTime[1])
            .endOf("month")
            .format("YYYY-MM-DD hh:mm:ss");
          const res = await api.dataStatisticsSelectV1({
            startTime: dayjs(state.threeTime[0]).format("YYYY-MM-01 00:00:01"),
            endTime: monthEnd,
            dateType: state.threeLeftType,
          });
          if (res) {
            const xData = [];
            const course = [];
            const project = [];
            const router = [];
            res?.data?.forEach((item) => {
              xData.push(item.xdata);
              item?.list?.forEach((iten) => {
                if (iten.name == "course") {
                  course.push(iten.value);
                } else if (iten.name == "project") {
                  project.push(iten.value);
                } else if (iten.name == "router") {
                  router.push(iten.value);
                }
              });
            });
            options1Big.value.xAxis.data = xData;
            options1Big.value.series[0].data = course;
            options1Big.value.series[1].data = project;
            options1Big.value.series[2].data = router;
            const myChart5 = echarts.init(surface4Ref.value);
            optionsBig.value && myChart5.setOption(options1Big.value);
          }
        }
      } else if (state.threeLeftType == 0) {
        if (state.threeDay?.length > 0) {
          const dayStart = dayjs(state.threeDay[0])
            .startOf("day")
            .format("YYYY-MM-DD 00:00:01");
          const dayEnd = dayjs(state.threeDay[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
          const res = await api.dataStatisticsSelectV1({
            startTime: dayStart,
            endTime: dayEnd,
            dateType: state.threeLeftType,
          });
          if (res) {
            const xData = [];
            const course = [];
            const project = [];
            const router = [];
            res?.data?.forEach((item) => {
              xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
              item?.list?.forEach((iten) => {
                if (iten.name == "course") {
                  course.push(iten.value);
                } else if (iten.name == "project") {
                  project.push(iten.value);
                } else if (iten.name == "router") {
                  router.push(iten.value);
                }
              });
            });
            options1Big.value.xAxis.data = xData;
            options1Big.value.series[0].data = course;
            options1Big.value.series[1].data = project;
            options1Big.value.series[2].data = router;
            const myChart5 = echarts.init(surface4Ref.value);
            optionsBig.value && myChart5.setOption(options1Big.value);
          }
        }
      }
    };
    const exportTwoData = async () => {
      if (state.towParmasn.dateType == 0) {
        if (!state.towParmasn.day?.length || state.towParmasn.day?.length < 1) {
          message.error("请选择要导出的时间日期后再进行导出");
        } else {
          const dayStart = dayjs(state.towParmasn.day[0])
            .startOf("day")
            .format("YYYY-MM-DD 00:00:01");
          const dayEnd = dayjs(state.towParmasn.day[1])
            .endOf("day")
            .format("YYYY-MM-DD hh:mm:ss");
          axios({
            method: "post",
            url: "/report/boeu/studyData/exportDetailAll",
            data: {
              beginTime: dayStart,
              endTime: dayEnd,
              dateType: state.towParmasn.dateType,
              type: state.towParmasn.type,
            },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then(
            (res) => {
              downLoad(res.data, "学习情况.xlsx");
            },
            (err) => {
              message.error(err);
            }
          );
        }
      } else if (state.towParmasn.dateType == 1) {
        if (
          !state.towParmasn.time?.length ||
          state.towParmasn.time?.length < 1
        ) {
          message.error("请选择要导出的月份后再进行导出");
        } else {
          const monthEnd = dayjs(state.towParmasn.time[1])
            .endOf("month")
            .format("YYYY-MM-DD hh:mm:ss");
          axios({
            method: "post",
            url: "/report/boeu/studyData/exportDetailAll",
            data: {
              beginTime: dayjs(state.towParmasn.time[0]).format(
                "YYYY-MM-01 00:00:01"
              ),
              endTime: monthEnd,
              dateType: state.towParmasn.dateType,
              type: state.towParmasn.type,
            },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then(
            (res) => {
              downLoad(res.data, "学习情况.xlsx");
            },
            (err) => {
              message.error(err);
            }
          );
        }
      }
    };
    const modalChange = async () => {
      if (state.towParmasn.dateType == 1) {
        twoMonthChange(state.towParmasn.time);
      } else if (state.towParmasn.dateType == 0) {
        twoDatChange(state.towParmasn.day);
      }
    };
    const onCalendarChange = (val) => {
      dates.value = val;
    };
    const onOpenChange = (open) => {
      if (open) {
        dates.value = [];
        hackValue.value = [];
      } else {
        hackValue.value = undefined;
      }
    };
    const disabledDate = (current) => {
      if (!dates.value || dates.value.length === 0) {
        return false;
      }
      const tooLate =
        dates.value[0] && current.diff(dates.value[0], "days") > 60;
      const tooEarly =
        dates.value[1] && dates.value[1].diff(current, "days") > 60;
      return tooEarly || tooLate;
    };
    const onCalendarChanges = (val) => {
      datess.value = val;
    };
    const onOpenChanges = (open) => {
      if (open) {
        datess.value = [];
        hackValues.value = [];
      } else {
        hackValues.value = undefined;
      }
    };
    const disabledDates = (current) => {
      if (!datess.value || datess.value.length === 0) {
        return false;
      }
      const tooLate =
        datess.value[0] && current.diff(datess.value[0], "days") > 60;
      const tooEarly =
        datess.value[1] && datess.value[1].diff(current, "days") > 60;
      return tooEarly || tooLate;
    };
    const twoSelectChange = async (e) => {
      if (e == 1) {
        twoMonthChange(state.towParmasn.time);
      } else if (e == 0) {
        twoDatChange(state.towParmasn.day);
      }
    };
    // 获取图表2月份数据
    const twoMonthChange = async (e) => {
      if (e?.length > 0) {
        const monthEnd = dayjs(e[1])
          .endOf("month")
          .format("YYYY-MM-DD hh:mm:ss");
        const res = await api.boeuStudyDataGetStudyStaisticsList({
          beginTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
          endTime: monthEnd,
          dateType: state.towParmasn.dateType,
          type: state.towParmasn.type,
        });
        if (res) {
          if (
            state.towParmasn.type == 4 ||
            state.towParmasn.type == 5 ||
            state.towParmasn.type == 6
          ) {
            const xData = [];
            const avgDuration = [];
            const count = [];
            const duration = [];
            res?.data?.forEach((item) => {
              xData.push(item.month);
              avgDuration.push(item.viewCount);
              count.push(item.count);
              duration.push(item.duration);
            });
            option.value.xAxis.data = xData;
            // 右侧坐标轴数据
            option.value.series[0].data = count;
            //左侧坐标轴数据
            option.value.series[1].data = avgDuration;
            option.value.series[2].data = duration;
            createEcharts2();
          } else {
            const xData = [];
            const avgDuration = [];
            const count = [];
            const duration = [];
            res?.data?.forEach((item) => {
              xData.push(item.month);
              avgDuration.push(item.avgDuration);
              count.push(item.count);
              duration.push(item.duration);
            });
            option.value.xAxis.data = xData;
            // 右侧坐标轴数据
            option.value.series[0].data = count;
            //左侧坐标轴数据
            option.value.series[1].data = avgDuration;
            option.value.series[2].data = duration;
            createEcharts2();
          }
        }
      }
    };
    const twoDatChange = async (e) => {
      if (e?.length > 0) {
        const dayStart = dayjs(e[0])
          .startOf("day")
          .format("YYYY-MM-DD 00:00:01");
        const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
        const res = await api.boeuStudyDataGetStudyStaisticsList({
          beginTime: dayStart,
          endTime: dayEnd,
          dateType: state.towParmasn.dateType,
          type: state.towParmasn.type,
        });
        if (res) {
          if (
            state.towParmasn.type == 4 ||
            state.towParmasn.type == 5 ||
            state.towParmasn.type == 6
          ) {
            const xData = [];
            const avgDuration = [];
            const count = [];
            const duration = [];
            res?.data?.forEach((item) => {
              xData.push(item.day);
              avgDuration.push(item.viewCount);
              count.push(item.count);
              duration.push(item.duration);
            });
            option.value.xAxis.data = xData;
            // 右侧坐标轴数据
            option.value.series[0].data = count;
            //左侧坐标轴数据
            option.value.series[1].data = avgDuration;
            option.value.series[2].data = duration;
            createEcharts2();
          } else {
            const xData = [];
            const avgDuration = [];
            const count = [];
            const duration = [];
            res?.data?.forEach((item) => {
              xData.push(item.day);
              avgDuration.push(item.avgDuration);
              count.push(item.count);
              duration.push(item.duration);
            });
            option.value.xAxis.data = xData;
            // 右侧坐标轴数据
            option.value.series[0].data = count;
            //左侧坐标轴数据
            option.value.series[1].data = avgDuration;
            option.value.series[2].data = duration;
            createEcharts2();
          }
        }
      }
    };
    // 获取第第三排第一个柱状图的数据
    const leftMonthChange = async (e) => {
      if (e?.length > 0) {
        const monthEnd = dayjs(e[1])
          .endOf("month")
          .format("YYYY-MM-DD hh:mm:ss");
        const res = await api.dataStatisticsSelectV1({
          startTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
          endTime: monthEnd,
          dateType: state.threeLeftType,
        });
        if (res) {
          const xData = [];
          const course = [];
          const project = [];
          const router = [];
          res?.data?.forEach((item) => {
            xData.push(item.xdata);
            item?.list?.forEach((iten) => {
              if (iten.name == "course") {
                course.push(iten.value);
              } else if (iten.name == "project") {
                project.push(iten.value);
              } else if (iten.name == "router") {
                router.push(iten.value);
              }
            });
          });
          options1.value.xAxis.data = xData;
          options1.value.series[0].data = course;
          options1.value.series[1].data = project;
          options1.value.series[2].data = router;
          createEcharts3();
        }
      }
    };
    const leftDayChange = async (e) => {
      if (e?.length > 0) {
        const dayStart = dayjs(e[0])
          .startOf("day")
          .format("YYYY-MM-DD 00:00:01");
        const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
        const res = await api.dataStatisticsSelectV1({
          startTime: dayStart,
          endTime: dayEnd,
          dateType: state.threeLeftType,
        });
        if (res) {
          const xData = [];
          const course = [];
          const project = [];
          const router = [];
          res?.data?.forEach((item) => {
            xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
            item?.list?.forEach((iten) => {
              if (iten.name == "course") {
                course.push(iten.value);
              } else if (iten.name == "project") {
                project.push(iten.value);
              } else if (iten.name == "router") {
                router.push(iten.value);
              }
            });
          });
          options1.value.xAxis.data = xData;
          options1.value.series[0].data = course;
          options1.value.series[1].data = project;
          options1.value.series[2].data = router;
          createEcharts3();
        }
      }
    };
    const selectChange = async (e) => {
      if (e == 1) {
        leftMonthChange(state.threeTime);
      } else if (e == 0) {
        leftDayChange(state.threeDay);
      }
    };
    //第三排第一个柱状图导出数据
    const exportThree = () => {
      if (state.threeLeftType == 0) {
        if (!state.threeDay.length || state.threeDay.length < 1) {
          message.error("请选择要导出的时间日期后再进行导出");
        } else {
          const dayStart = dayjs(state.threeDay[0])
            .startOf("day")
            .format("YYYY-MM-DD 00:00:01");
          const dayEnd = dayjs(state.threeDay[1])
            .endOf("day")
            .format("YYYY-MM-DD hh:mm:ss");
          axios({
            method: "post",
            url: "/report/data/statistics/export/v1",
            data: {
              startTime: dayStart,
              endTime: dayEnd,
              dateType: state.threeLeftType,
            },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then(
            (res) => {
              downLoad(res.data, "学习内容.xlsx");
            },
            (err) => {
              message.error(err);
            }
          );
        }
      } else if (state.threeLeftType == 1) {
        if (!state.threeTime.length || state.threeTime.length < 1) {
          message.error("请选择要导出的月份后再进行导出");
        } else {
          const monthEnd = dayjs(state.threeTime[1])
            .endOf("month")
            .format("YYYY-MM-DD hh:mm:ss");
          axios({
            method: "post",
            url: "/report/data/statistics/export/v1",
            data: {
              startTime: dayjs(state.threeTime[0]).format(
                "YYYY-MM-01 00:00:01"
              ),
              endTime: monthEnd,
              dateType: state.threeLeftType,
            },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then(
            (res) => {
              downLoad(res.data, "学习内容.xlsx");
            },
            (err) => {
              message.error(err);
            }
          );
        }
      }
    };
    const rightChange = (e) => {
      if (e == 1) {
        rightMonthChange(state.forTime);
      } else if (e == 0) {
        rightDayChange(state.forDay);
      }
    };
    // 获取第三排第二个柱状图的数据
    const rightMonthChange = async (e) => {
      if (e?.length > 0) {
        const monthEnd = dayjs(e[1])
          .endOf("month")
          .format("YYYY-MM-DD hh:mm:ss");
        const res = await api.dataStatisticsSelectV2({
          startTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
          endTime: monthEnd,
          dateType: state.forRightType,
        });
        if (res) {
          const xData = [];
          const course = [];
          const project = [];
          const router = [];
          res?.data?.forEach((item) => {
            xData.push(item.xdata);
            item?.list?.forEach((iten) => {
              if (iten.name == "case") {
                course.push(iten.value);
              } else if (iten.name == "article") {
                project.push(iten.value);
              } else if (iten.name == "question") {
                router.push(iten.value);
              }
            });
          });
          options2.value.xAxis.data = xData;
          options2.value.series[0].data = course;
          options2.value.series[1].data = project;
          options2.value.series[2].data = router;
          createEcharts4();
        }
      }
    };
    const rightDayChange = async (e) => {
      if (e?.length > 0) {
        const dayStart = dayjs(e[0])
          .startOf("day")
          .format("YYYY-MM-DD 00:00:01");
        const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
        const res = await api.dataStatisticsSelectV2({
          startTime: dayStart,
          endTime: dayEnd,
          dateType: state.forRightType,
        });
        if (res) {
          const xData = [];
          const course = [];
          const project = [];
          const router = [];
          res?.data?.forEach((item) => {
            xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
            item?.list?.forEach((iten) => {
              if (iten.name == "case") {
                course.push(iten.value);
              } else if (iten.name == "article") {
                project.push(iten.value);
              } else if (iten.name == "question") {
                router.push(iten.value);
              }
            });
          });
          options2.value.xAxis.data = xData;
          options2.value.series[0].data = course;
          options2.value.series[1].data = project;
          options2.value.series[2].data = router;
          createEcharts4();
        }
      }
    };
    // right 导出
    const exportRight = () => {
      if (state.forRightType == 0) {
        if (!state.forDay.length || state.forDay.length < 1) {
          message.error("请选择要导出的时间日期后再进行导出");
        } else {
          const dayStart = dayjs(state.forDay[0])
            .startOf("day")
            .format("YYYY-MM-DD 00:00:01");
          const dayEnd = dayjs(state.forDay[1])
            .endOf("day")
            .format("YYYY-MM-DD hh:mm:ss");
          axios({
            method: "post",
            url: "/report/data/statistics/export/v2",
            data: {
              startTime: dayStart,
              endTime: dayEnd,
              dateType: state.forRightType,
            },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then(
            (res) => {
              downLoad(res.data, "学习内容.xlsx");
            },
            (err) => {
              message.error(err);
            }
          );
        }
      } else if (state.forRightType == 1) {
        if (!state.forTime.length || state.forTime.length < 1) {
          message.error("请选择要导出的月份后再进行导出");
        } else {
          const monthEnd = dayjs(state.forTime[1])
            .endOf("month")
            .format("YYYY-MM-DD hh:mm:ss");
          axios({
            method: "post",
            url: "/report/data/statistics/export/v2",
            data: {
              startTime: dayjs(state.forTime[0]).format("YYYY-MM-01 00:00:01"),
              endTime: monthEnd,
              dateType: state.forRightType,
            },
            responseType: "blob",
            headers: {
              token: Cookies.get("token"),
            },
          }).then(
            (res) => {
              downLoad(res.data, "学习内容.xlsx");
            },
            (err) => {
              message.error(err);
            }
          );
        }
      }
    };
    // 折线图配置项
    const option = ref({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        top: "6%",
        left: "0%",
        right: "0%",
        bottom: "2%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [],
      },
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "总学习人数",
          type: "line",
          data: [],
          normal: {
            color: "#387df7", //改变折线点的颜色
            lineStyle: {
              color: "#387df7", //改变折线颜色
            },
          },
        },
        {
          name: "人均学习时长",
          type: "line",
          data: [],
          yAxisIndex: 1,
          normal: {
            color: "#00cecb", //改变折线点的颜色
            lineStyle: {
              color: "#00cecb", //改变折线颜色
            },
          },
        },
        {
          name: "总学习时长",
          type: "line",
          data: [],
          yAxisIndex: 1,
          normal: {
            color: "#ffa71a", //改变折线点的颜色
            lineStyle: {
              color: "#ffa71a", //改变折线颜色
            },
          },
        },
      ],
    });
    // 柱状图1配置项
    const options1 = ref({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        top: "6%",
        left: "0%",
        right: "0%",
        bottom: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          interval: 0,
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "课程数",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#1487F9", //改变折线点的颜色
            },
          },
        },
        {
          name: "项目数",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#00CECB", //改变折线点的颜色
            },
          },
        },
        {
          name: "学习路径图",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#FFA71A", //改变折线点的颜色
            },
          },
        },
      ],
      dataZoom: [
        {
          type: "slider",
          show: true,
          xAxisIndex: [0],
          // start: 1,
          // end: 35,
          startValue: 0,
          endValue: 5,
          brushSelect: false,
          showDetail: false,
          zoomLock: true,
        },
      ],
    });
    // 柱状图2 配置项
    const options2 = ref({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        top: "6%",
        left: "0%",
        right: "0%",
        bottom: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
        axisLabel: {
          interval: 0,
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "案例",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#1487F9", //改变折线点的颜色
            },
          },
        },
        {
          name: "文章",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#00CECB", //改变折线点的颜色
            },
          },
        },
        {
          name: "问答",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#FFA71A", //改变折线点的颜色
            },
          },
        },
      ],
      dataZoom: [
        {
          type: "slider",
          show: true,
          xAxisIndex: [0],
          // start: 1,
          // end: 35,
          startValue: 0,
          endValue: 5,
          brushSelect: false,
          showDetail: false,
          zoomLock: true,
        },
      ],
    });

    const optionsBig = ref({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        top: "6%",
        left: "0%",
        right: "0%",
        bottom: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
        // axisLabel: {
        //   interval: 0,
        // },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "案例",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#1487F9", //改变折线点的颜色
            },
          },
        },
        {
          name: "文章",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#00CECB", //改变折线点的颜色
            },
          },
        },
        {
          name: "问答",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#FFA71A", //改变折线点的颜色
            },
          },
        },
      ],
      dataZoom: [
        {
          type: "slider",
          show: true,
          xAxisIndex: [0],
          // start: 1,
          // end: 35,
          // startValue: 0,
          // endValue: 5,
          // brushSelect: false,
          showDetail: false,
          // zoomLock: true,
        },
      ],
    });
    const options1Big = ref({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        top: "6%",
        left: "0%",
        right: "0%",
        bottom: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: [],
        // axisLabel: {
        //   interval: 0,
        // },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "课程数",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#1487F9", //改变折线点的颜色
            },
          },
        },
        {
          name: "项目数",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#00CECB", //改变折线点的颜色
            },
          },
        },
        {
          name: "学习路径图",
          data: [],
          type: "bar",
          itemStyle: {
            normal: {
              color: "#FFA71A", //改变折线点的颜色
            },
          },
        },
      ],
      dataZoom: [
        {
          type: "slider",
          show: true,
          xAxisIndex: [0],
          // start: 1,
          // end: 35,
          // startValue: 0,
          // endValue: 5,
          // brushSelect: false,
          showDetail: false,
          // zoomLock: true,
        },
      ],
    });
    // 生成echarts的方法
    // const createEcharts1 = () => {
    //   // 图表1
    //   const myChart = echarts.init(surfaceRef.value);
    //   option.value && myChart.setOption(option.value);
    // };
    // 生成echarts的方法
    const createEcharts2 = () => {
      // 图表2
      const myChart1 = echarts.init(surface1Ref.value);
      option.value && myChart1.setOption(option.value);
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    };
    // 生成echarts的方法
    const createEcharts3 = () => {
      // 图表3左侧图表
      const myChart2 = echarts.init(surface2Ref.value);
      options1.value && myChart2.setOption(options1.value);
      window.addEventListener("resize", () => {
        myChart2.resize();
      });
    };
    // 生成echarts的方法
    const createEcharts4 = () => {
      // 图表3 右侧图表
      const myChart3 = echarts.init(surface3Ref.value);
      options2.value && myChart3.setOption(options2.value);
      window.addEventListener("resize", () => {
        myChart3.resize();
      });
    };
    const initTime = () => {
      const monthEnd = dayjs(new Date()).endOf("year").format("YYYY-MM");
      const start = dayjs(new Date()).startOf("year").format("YYYY-MM");
      state.threeTime = [dayjs(start), dayjs(monthEnd)];
      state.forTime = [dayjs(start), dayjs(monthEnd)];
      state.towParmasn.time = [dayjs(start), dayjs(monthEnd)];
      leftMonthChange([dayjs(start), dayjs(monthEnd)]);
      rightMonthChange([dayjs(start), dayjs(monthEnd)]);
      twoMonthChange([dayjs(start), dayjs(monthEnd)]);
    };
    // 挂载完成
    onMounted(() => {
      // createEcharts1();
      createEcharts2();
      createEcharts3();
      createEcharts4();
      initTime();
    });
    return {
      ...toRefs(state),
      eChartClickRight,
      rightMonthChange,
      rightChange,
      exportThree,
      disabledDate,
      onCalendarChange,
      onOpenChange,
      surfaceRef,
      surface1Ref,
      surface2Ref,
      surface3Ref,
      leftMonthChange,
      leftDayChange,
      selectChange,
      rightDayChange,
      exportRight,
      onCalendarChanges,
      onOpenChanges,
      disabledDates,
      twoMonthChange,
      twoDatChange,
      twoSelectChange,
      modalChange,
      exportTwoData,
      surface4Ref,
      eChartClickLeft,
    };
  },
};
</script>
<style lang="scss">
.operational {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 38px;
  .echartsOne,
  .echartsTwo {
    width: 100%;
    height: 600px;
    border: 1px solid rgba(232, 236, 239, 1);
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    .search {
      margin-top: 20px;
      width: 100%;
      height: 40px;
      .left {
        display: flex;
        .leftItem {
          margin-right: 10px;
        }
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .left {
        font-size: 18px;
        color: black;
        font-weight: 600;
      }
      .right {
        padding: 0 15px;
        background: white;
        background: #4ea6ff;
        height: 32px;
        line-height: 34px;
        border-radius: 4px;
        color: white;
        // border: 1px solid #387df7;
        cursor: pointer;
        img {
          margin-top: -3px;
          margin-right: 5px;
        }
      }
      .right:hover {
        background: rgba(64, 158, 255, 0.76);
      }
    }
    .echarts {
      height: 400px;
      width: 100%;
    }
    .msg {
      margin-left: calc(50% - 135px);
      width: 330px;
      display: flex;
      margin-top: 20px;
      .item {
        display: flex;
        align-items: center;
        margin-right: 15px;
        .start,
        .end {
          width: 5px;
          height: 2px;
          background: #387df7;
          // margin-top: 4px;
        }
        .radio {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 2px solid #387df7;
        }
        .text {
          margin-left: 3px;
        }
      }
      .item1 {
        margin-right: 15px;
        display: flex;
        align-items: center;
        .start,
        .end {
          width: 5px;
          height: 2px;
          background: #00cecb;
          // margin-top: 4px;
        }
        .radio {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 2px solid #00cecb;
        }
        .text {
          margin-left: 3px;
        }
      }
      .item2 {
        display: flex;
        align-items: center;
        .start,
        .end {
          width: 5px;
          height: 2px;
          background: #ffa71a;
          // margin-top: 4px;
        }
        .radio {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 2px solid #ffa71a;
        }
        .text {
          margin-left: 3px;
        }
      }
    }
  }
  .echartsThree {
    width: 100%;
    height: 600px;
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
    .left {
      width: calc(50% - 5px);
      height: 100%;
      border: 1px solid rgba(232, 236, 239, 1);
      border-radius: 4px;
      padding: 15px;
      .leftEacharts {
        width: 100%;
        height: 400px;
        margin-top: 20px;
      }
      .title {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .leftTile {
          font-size: 18px;
          color: black;
          font-weight: 600;
        }
        .rightTile {
          padding: 0 15px;
          background: #4ea6ff;
          height: 32px;
          line-height: 34px;
          border-radius: 4px;
          color: white;
          cursor: pointer;
          img {
            margin-top: -3px;
            margin-right: 5px;
          }
        }
        .rightTile:hover {
          background: rgba(64, 158, 255, 0.76);
        }
      }
      .searchThree {
        margin-top: 20px;
        width: 100%;
        height: 40px;
        .leftSearch {
          display: flex;
          .leftItemSearch {
            margin-right: 10px;
          }
        }
        .timeItemSearch {
          width: 400px;
        }
      }
      .threeMsg {
        display: flex;
        width: 275px;
        margin-left: calc(50% - 133px);
        margin-top: 10px;
        .threeMsgItem {
          display: flex;
          align-items: center;
          margin-right: 10px;
          .classNum {
            width: 24px;
            height: 14px;
            background: #1487f9;
            border-radius: 2px;
          }
          .projectNum {
            width: 24px;
            height: 14px;
            background: #00cecb;
            border-radius: 2px;
          }
          .study {
            width: 24px;
            height: 14px;
            background: #ffa71a;
            border-radius: 2px;
          }
          .MsgItemText {
            margin-left: 5px;
            font-weight: 600;
          }
        }
      }
    }
    .right {
      margin-left: 10px;
      width: calc(50% - 5px);
      height: 100%;
      border: 1px solid rgba(232, 236, 239, 1);
      border-radius: 4px;
      padding: 15px;
      .leftEacharts {
        width: 100%;
        height: 400px;
        margin-top: 20px;
      }
      .title {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .leftTile {
          font-size: 18px;
          color: black;
          font-weight: 600;
        }
        .rightTile {
          padding: 0 15px;
          background: #4ea6ff;
          height: 32px;
          line-height: 34px;
          border-radius: 4px;
          color: white;
          cursor: pointer;
          img {
            margin-top: -3px;
            margin-right: 5px;
          }
        }
        .rightTile:hover {
          background: rgba(64, 158, 255, 0.76);
        }
      }
      .searchThree {
        margin-top: 20px;
        width: 100%;
        height: 40px;
        .leftSearch {
          display: flex;
          .leftItemSearch {
            margin-right: 10px;
          }
        }
        .timeItemSearch {
          width: 400px;
        }
      }
      .threeMsg {
        display: flex;
        margin-top: 10px;
        width: 275px;
        margin-left: calc(50% - 133px);
        .threeMsgItem {
          display: flex;
          align-items: center;
          margin-right: 10px;
          .classNum {
            width: 24px;
            height: 14px;
            background: #1487f9;
            border-radius: 2px;
          }
          .projectNum {
            width: 24px;
            height: 14px;
            background: #00cecb;
            border-radius: 2px;
          }
          .study {
            width: 24px;
            height: 14px;
            background: #ffa71a;
            border-radius: 2px;
          }
          .MsgItemText {
            margin-left: 5px;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>



