<template>
  <div class="main">
    <div class="top-form">
      <a-row>
        <a-col class="form-box" :span="5">
          <div> 监测站点： </div>
          <div>
            <a-select
              class="custom-input sitemore"
              placeholder="监测站点"
              :maxTagCount="2"
              :maxTagTextLength="4"
              v-model:value="dataCenter.formData.stcd"
              :options="dataCenter.st_options"
            />
          </div>
        </a-col>
        <a-col class="form-box" :span="5">
          <div> 要素： </div>
          <div>
            <a-select
              class="custom-input sitemore"
              placeholder="要素"
              :maxTagCount="2"
              :maxTagTextLength="4"
              v-model:value="dataCenter.formData.pid"
              :options="dataCenter.ys_options"
              mode="multiple"
            />
          </div>
        </a-col>
        <a-col class="form-box" :span="5">
          <div> 对比年份： </div>
          <div>
            <a-select
              class="custom-input sitemore"
              v-model:value="dataCenter.formData.compare"
              :options="dataCenter.yrarOptions"
              mode="tags"
              :maxTagCount="1"
              placeholder="对比年份"
            />
          </div>
        </a-col>
        <a-col class="form-box" :span="9">
          <div> 查询时间： </div>
          <div>
            <a-range-picker
              :value="dataCenter.timeData.time"
              :show-time="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="['开始时间', '结束时间']"
              @change="onChange"
              :allowClear="true"
            />
          </div>
        </a-col>
        <a-col class="form-box" :span="8">
          <div> 时段类型： </div>
          <div>
            <a-radio-group v-model:value="dataCenter.formData.step_size">
              <a-radio
                v-for="(item, index) in dataCenter.sd_options"
                :key="index"
                :value="item.value"
                >{{ item.label }}</a-radio
              >
            </a-radio-group>
          </div>
        </a-col>
        <a-col class="form-box" :span="8">
          <div> 统计特征： </div>
          <div>
            <!-- :disabled="dataCenter.attrDisable" -->
            <a-radio-group v-model:value="dataCenter.formData.attr">
              <a-radio
                v-for="(item, index) in dataCenter.tz_options"
                :key="index"
                :value="item.value"
                >{{ item.label }}</a-radio
              >
            </a-radio-group>
          </div>
        </a-col>
        <a-col class="btn-list" :span="8">
          <a-button @click="resetting">重置</a-button>
          <a-button class="cha" type="primary" @click="queryData">查询</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="content-box">
      <div class="sub-title"
        >分析结果
        <img
          v-if="dataCenter.type == 1"
          src="../../../assets/images/sw-home/icon20-active.png"
          alt=""
        />
        <img
          @click="setBoxTable(1)"
          v-if="dataCenter.type != 1"
          src="../../../assets/images/sw-home/icon20.png"
          alt=""
        />
        <img
          v-if="dataCenter.type == 2"
          src="../../../assets/images/sw-home/icon21-active.png"
          alt=""
        />
        <img
          @click="setBoxTable(2)"
          v-if="dataCenter.type != 2"
          src="../../../assets/images/sw-home/icon21.png"
          alt=""
        />
        <img
          v-if="dataCenter.type == 3"
          src="../../../assets/images/sw-home/icon23-active.png"
          alt=""
        />
        <img
          @click="setBoxTable(3)"
          v-if="dataCenter.type != 3"
          src="../../../assets/images/sw-home/icon23.png"
          alt=""
        />
        <img
          v-if="dataCenter.type == 4"
          src="../../../assets/images/sw-home/icon22-active.png"
          alt=""
        />
        <img
          @click="setBoxTable(4)"
          v-if="dataCenter.type != 4"
          src="../../../assets/images/sw-home/icon22.png"
          alt=""
        />
      </div>
    </div>
    <div class="box-content">
      <div
        :class="{
          'one-box': dataCenter.type == 1,
          'two-box': dataCenter.type == 2,
          'therr-box': dataCenter.type == 3,
          'four-box': dataCenter.type == 4,
        }"
        v-for="(item, index) in dataCenter.chartsData"
        :key="index"
      >
        <div class="box-content-title">
          {{ item.name }}：mg/L
          <div>
            <div>
              <a-radio-group @change="itemChange(item)" name="radioGroup" :value="item.isCharts">
                <a-radio :value="true">chart图</a-radio>
                <a-radio :value="false">表格</a-radio>
              </a-radio-group>
            </div>
            <!-- <div> <img src="../../../assets/images/sw-home/download-icon.png" /> 下载 </div> -->
            <div> <img src="../../../assets/images/sw-home/all-icon.png" /> 展开 </div>
          </div>
        </div>
        <div v-show="item.isCharts" :id="`charts-box-${index}`" class="box-content-cherts"> </div>
        <div v-show="!item.isCharts" class="box-content-cherts">
          <table id="tableExcel" class="bordered">
            <thead>
              <tr> 123 </tr>
              <tr> 123 </tr>
              <tr> 123 </tr>
            </thead>
            <tbody>
              <tr><td>123</td><td>123</td><td>123</td></tr>
              <tr><td>123</td><td>123</td><td>123</td></tr>
              <tr><td>123</td><td>123</td><td>123</td></tr>
              <tr><td>123</td><td>123</td><td>123</td></tr>
              <tr><td>123</td><td>123</td><td>123</td></tr>
              <tr><td>123</td><td>123</td><td>123</td></tr>
              <tr><td>123</td><td>123</td><td>123</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import * as echarts from 'echarts';
  import {
    getRiverTree,
    getDataAllElements,
    getManyStAnalyze,
    getSingleStAnalyze,
  } from '/@/api/swHome/index';
  import { getNowTime } from '/@/utils/fnUtils.ts';
  let dataCenter = reactive({
    attrDisable: true,
    type: 2,
    st_options: [],
    ys_options: [],
    yrarOptions: [],
    tableDataModal: {
      table_head: [],
      table_value: [],
    },
    sd_options: [
      // { label: '实时', value: 'R' },
      { label: '小时', value: 'H' },
      { label: '日', value: 'D' },
      { label: '月', value: 'M' },
      { label: '年', value: 'Y' },
      
      
      
    ],
    tz_options: [
      { label: '整点值', value: 'v' },
      { label: '平均值', value: 'avgv' },
      { label: '最大值', value: 'maxv' },
      { label: '最小值', value: 'minv' },
    ],
    yearTime: {
      time: [],
    },
    timeData: {
      time: [getNowTime(2), getNowTime(1)],
    },
    chartsData: {},
    formData: {
      step_size: 'H',
      pid: [],
      attr: 'v',
      start_time: '',
      end_time: '',
      stcd: '',
      compare: [],
    },
  });
  function setBoxTable(e) {
    dataCenter.type = e;
    console.log(dataCenter.chartsData);
    dataCenter.chartsData.forEach((element) => {
      setTimeout(() => {
        element.dom.resize();
      }, 300);
    });
  }
  function onChange(value, dateString) {
    dataCenter.timeData.time = dateString;
  }
  function queryData() {
    getHistoryWaterData();
  }
  // function changeDchar({ target }) {
  // if (target.value == 'R') {
  //   dataCenter.attrDisable = true;
  //   dataCenter.formData.attr = '';
  // } else {
  //   dataCenter.attrDisable = false;
  //   dataCenter.formData.attr = 'avgv';
  // }
  // }
  // 查询展示数据
  function getHistoryWaterData() {
    dataCenter.formData.start_time = dataCenter.timeData.time[0];
    dataCenter.formData.end_time = dataCenter.timeData.time[1];
    getSingleStAnalyze(dataCenter.formData).then((res) => {
      processingData(res.data);
    });
  }
  function processingData(data) {
    // 处理表格数据
    let arr = [];
    for (const key in data) {
      let dataArr = {};
      if (Object.prototype.hasOwnProperty.call(data, key)) {
        const element = data[key];
        dataArr.name = key;
        dataArr.nameList = [];
        dataArr.value = [];
        for (const key1 in element) {
          if (Object.prototype.hasOwnProperty.call(element, key1)) {
            const element1 = element[key1];
            // console.log(element1);
            dataArr.nameList.push(key1);
            let elementObj = {
              name: key1,
              time: [],
              value: [],
            };
            element1.forEach((element2) => {
              elementObj.time.push(element2.time);
              elementObj.value.push(element2.value);
            });
            dataArr.value.push(elementObj);
          }
        }
      }
      dataArr.isCharts = true;
      arr.push(dataArr);
    }
    // console.log(arr);
    dataCenter.chartsData = arr;
    setTimeout(() => {
      chartsArrBox(dataCenter.chartsData);
    }, 300);
  }
  function itemChange(e, item) {
    console.log(e);
    e.isCharts = !e.isCharts;
  }
  // 循环渲染数据
  function chartsArrBox(arr) {
    arr.forEach((element, index) => {
      let chart = echarts.init(document.getElementById(`charts-box-${index}`));
      let fullFlag;
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: element.nameList,
        },
        grid: {
          left: '6%',
          right: '6%',
          bottom: '6%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: element.value[0].time,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          // {
          //   name: 'Email',
          //   type: 'line',
          //   stack: 'Total',
          //   data: [120, 132, 101, 134, 90, 230, 210],
          // },
        ],
      };
      element.dom = chart;
      element.value.forEach((item, indexs) => {
        option.series.push({
          name: item.name,
          type: 'line',
          stack: 'Total',
          data: item.value,
        });
      });
      option && chart.setOption(option);
    });
  }
  // 查询所有站点
  async function getDataData() {
    await getRiverTree().then((res) => {
      let arr = [];
      console.log(res.data.data_value.station);
      for (const key in res.data.data_value.station) {
        if (Object.prototype.hasOwnProperty.call(res.data.data_value.station, key)) {
          const element = res.data.data_value.station[key];
          element.forEach((element) => {
            arr.push({
              label: element.st_name,
              value: element.stcd,
            });
          });
        }
      }
      dataCenter.st_options = arr;
      dataCenter.formData.stcd = dataCenter.st_options[0].value;
    });
    await getDataAllElements().then((res) => {
      res.data.forEach((element) => {
        element.label = element.dchar_name;
        element.value = element.dchar;
      });
      dataCenter.ys_options = res.data;
      dataCenter.formData.pid = [dataCenter.ys_options[0].value];
    });
    getHistoryWaterData();
  }

  function resetting() {
    getDataData();
  }
  function checkFull() {
    //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
    //火狐浏览器
    let isFull =
      document.mozFullScreen ||
      document.fullScreen ||
      //谷歌浏览器及Webkit内核浏览器
      document.webkitIsFullScreen ||
      document.webkitRequestFullScreen ||
      document.mozRequestFullScreen ||
      document.msFullscreenEnabled;
    if (isFull === undefined) {
      isFull = false;
    }
    return isFull;
  }
  function fnResize() {
    setTimeout(() => {
      dataCenter.chartsData.forEach((element) => {
        element.dom.resize();
      });
    }, 100);
  }
  onMounted(async () => {
    let arrdaya = [];
    // 获取当前年份
    let date = new Date();
    let year = date.getFullYear();
    for (let index = year; index >= 2000; index--) {
      arrdaya.push({
        label: index,
        value: index,
      });
    }
    dataCenter.yrarOptions = arrdaya;
    dataCenter.formData.compare = [year];
    getDataData();
    window.onresize = function () {
      if (!checkFull()) {
        // 退出全屏后要执行的动作
        fnResize();
      }
    };
  });
</script>
<style scoped lang="less">
  .main {
    margin: 10px;
    height: calc(100% - 20px);
    background-color: #fff;
  }
  .top-form {
    background-color: #fff;
    padding: 12px 10px 12px 10px;
  }
  .btn-list {
    text-align: right;
  }
  .cha {
    margin-left: 10px;
  }
  .form-box {
    display: flex;
    & > div:nth-child(1) {
      width: 90px;
      text-align: right;
      line-height: 32px;
    }
    & > div:nth-child(2) {
      flex: 1;
    }
  }
  ::v-deep .top-form .ant-select {
    width: 100%;
  }
  ::v-deep .top-form .ant-radio-group {
    line-height: 32px;
  }
  .title-name {
    text-align: center;
    font-size: 18px;
    line-height: 40px;
  }
  .box-content {
    display: flex;
    height: calc(100vh - 248px);
    overflow: auto;
    width: 100%;
    flex-wrap: wrap;
    & > div {
      width: 49.9%;
      // height: 50%;
    }
    & > .one-box {
      width: 99.9%;
      // height: 100%;
      height: 100%;
    }
    & > .two-box {
      width: 49.9%;
      height: 50%;
    }
    & > .therr-box {
      width: 33.33333%;
      height: 50%;
    }
    & > .four-box {
      width: 33.33333%;
      height: 33.333333%;
    }
  }
  .right-box {
    width: 400px;
    height: 100%;
    overflow: auto;
    margin-left: 20px;
    position: relative;
    ul {
      // position: relative;
      li {
        display: flex;
        line-height: 45px;
        & > div {
          // flex: 1;
          text-align: center;
        }
        & > div:nth-child(1) {
          min-width: 180px;
        }
        & > div:nth-child(2) {
          flex: 1;
        }
        & > div:nth-child(3) {
          flex: 1;
        }
      }
      li:nth-child(1) {
        position: absolute;
        width: 100%;
      }
      li:nth-child(2) {
        padding-top: 45px;
      }
    }
  }
  .form-box {
    margin-bottom: 10px;
  }
  .content-box {
    text-align: center;
    font-size: 18px;
    border-top: 1px solid #dedede;
    position: relative;
    padding-top: 10px;
    height: 40px;
    .sub-title {
      padding-left: 10px;
      border-left: 4px solid #2d74e7;
      text-align: left;
      font-size: 10px;
      position: absolute;
      left: 0px;
      top: 15px;
      img {
        margin-left: 10px;
        font-size: 18px;
        position: relative;
        // top: -2px;
        cursor: pointer;
        display: inline-block;
      }
      .active-icon {
        color: #377dff !important;
      }
    }
  }
</style>
<style lang="less">
  table {
    cellspacing: 0;
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
  }
  .bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }

  .bordered th {
    padding: 7px;
    text-align: center;
    cellspacing: 0;
  }

  .bordered td {
    padding: 7px;
    text-align: center;
    cellspacing: 0;
  }

  .bordered th {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: linear-gradient(top, #ebf3fc, #dce9f9);
  }
  .bordered td:first-child,
  .bordered th:first-child {
    border-left: none;
  }

  .bordered tr:nth-of-type(2n) {
    background: #ffffff;
    cursor: pointer;
  }
  .bordered tr:nth-of-type(2n + 1) {
    background: #f7fafc;
    cursor: pointer;
  }

  .bordered tbody tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  .box-content-title {
    line-height: 30px;
    font-size: 14px;
    font-weight: 500;
    color: #2d74e7;
    position: relative;
    width: 100%;
  }
  .box-content-title & > div {
    position: absolute;
    right: 0px;
    top: 0px;
    & > div {
      float: left;
      cursor: pointer;
      img {
        display: inline-block;
        position: relative;
        top: -2px;
      }
      margin-right: 20px;
    }
    & > div:nth-child(1) {
      margin-right: 0px;
    }
  }
  .box-content-cherts {
    height: calc(100% - 30px);
  }
  #tableExcel {
    height: 100%;
    overflow: auto;
  }
</style>
