<template>
  <div class="main">
    <div class="main-content">
      <div class="left-box">
        <div class="left-title"> 测站列表 </div>
        <ul>
          <!-- <li v-for="(item, index) in dataCenter.riverTreeData" :key="index" class="active-list">测站1</li> -->
          <li
            @click="setTableList(item)"
            :class="{ 'active-list': item.stcd === dataCenter.activeStcd }"
            v-for="(item, index) in dataCenter.stListData"
            :key="index"
            >{{ setTetx(item.st_name) }}</li
          >
        </ul>
      </div>
      <div class="center-box">
        <div class="center-box-title"> 水位流量关系线({{ setTetx(dataCenter.senidName) }}) </div>
        <div class="query-box">
          <a-row>
            <a-col class="form-box" :span="8">
              <div> 查询方式： </div>
              <div>
                <a-radio-group @change="changeGroup" v-model:value="dataCenter.formData.method">
                  <a-radio value="q">根据水位查流量</a-radio>
                  <a-radio value="z">根据流量查水位</a-radio>
                </a-radio-group>
              </div>
            </a-col>
            <a-col class="form-box" :span="5">
              <div> 输入参数： </div>
              <div>
                <a-input
                  class="custom-input"
                  v-model:value="dataCenter.formData.value"
                  :placeholder="dataCenter.titlePlaceholder"
                />
              </div>
            </a-col>
            <a-col class="form-box" :span="8">
              <a-button @click="getHistoryRain" class="marg-left" type="primary">查询</a-button>
              <span>{{dataCenter.formData.method == 'q'?'流量':'水位'}}查询结果：{{ dataCenter.chartsData.result }}{{dataCenter.formData.method == 'q'?'m³/s':'m'}}</span>
            </a-col>
          </a-row>
        </div>
        <div class="charts-list">
          <div id="echarts-box1"></div>
          <div>
            <div class="charts-list-top">
              <div @click="exportExcel" class="left-mg mg-text">模版下载</div>
              <ImpExcel @success="loadDataSuccess">
                <a-button type="primary" class="m-3 left-mg">数据导入</a-button>
              </ImpExcel>
            </div>
            <div class="right-box">
              <ul>
                <li>
                  <div>水位(m)</div>
                  <div>流量(m³/s)</div>
                </li>
                <li v-for="(item, index) in dataCenter.chartsData.value" :key="index">
                  <div>{{ item.z }}</div>
                  <div>{{ item.q }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { message } from 'ant-design-vue';
  import { defineComponent, ref, watch, onMounted, reactive } from 'vue';
  import { getRiverTree, getRelationData, getTableUpload, getStList } from '/@/api/swHome/index';
  import { ImpExcel, ExcelData, jsonToSheetXlsx } from '/@/components/Excel';
  import * as echarts from 'echarts';
  let dataCenter = reactive({
    titlePlaceholder:'请输入水位查询',
    riverTreeData: [],
    activeStcd: '',
    senidName: '',
    formData: {
      method: 'q',
      value: '',
      stcd: '',
    },
    stListData: [],
    chartsData: {},
    chartsArr: {
      q: [],
      z: [],
    },
    activeItem:{},
  });
  function changeGroup(e){
    console.log()
    if(e.target.value == 'z'){
      dataCenter.titlePlaceholder = '请输入流量查询'
    }else{
      dataCenter.titlePlaceholder = '请输入水位查询'
    }
  }
  function loadDataSuccess(excelDataList: ExcelData[]) {
    let list = excelDataList[0];
    let header = list.header;
    let q = [];
    let z = [];
    header.forEach((element) => {
      list.results.forEach((elements) => {
        if (element == '水位(m)') {
          z.push(elements[element]);
        }
        if (element == '流量(m³/s)') {
          q.push(elements[element]);
        }
      });
    });
    console.log(q);
    console.log(z);
    getTableUpload({
      z,
      q,
      stcd: dataCenter.activeStcd,
      st_name: dataCenter.senidName,
    }).then((res) => {
      if (res.code == 200) {
        message.success(res.msg);
      } else {
        message.warning(res.msg);
      }
      getRiverTreeData2();
    });
  }
  function setRiverList(data) {
    dataCenter.riverTreeData = [...dataCenter.riverTreeData, ...data];
  }
  function setTetx(text) {
    return text.split('_')[0];
  }
  function setTableList(item) {
    dataCenter.activeItem = JSON.parse(JSON.stringify(item))
    dataCenter.chartsData.value = item.datail;
    dataCenter.chartsArr.q = [];
    dataCenter.chartsArr.z = [];
    item.datail.forEach((element) => {
      //z水位，q流量
      dataCenter.chartsArr.q.push(element.q);
      dataCenter.chartsArr.z.push(element.z);
    });
    echarts1();
    dataCenter.formData.value = '';
    dataCenter.formData.method = 'q';
    dataCenter.formData.stcd = item.stcd;
    dataCenter.activeStcd = item.stcd;
    dataCenter.senidName = item.st_name;

    getHistoryRain();
  }
  function exportExcel() {
    let name = `${setTetx(dataCenter.senidName)}-水位流量关系曲线.xlsx`;
    let data = [];
    dataCenter.chartsData.value.forEach((element) => {
      let obj = {
        water: element.z,
        flow: element.q,
      };
      data.push(obj);
    });

    jsonToSheetXlsx({
      data,
      header: {
        water: '水位(m)',
        flow: '流量(m³/s)',
      },
      filename: name,
    });
  }
  function getHistoryRain() {
    getRelationData(dataCenter.formData).then((res) => {
      dataCenter.chartsData.result = res.data.result;
    });
  }
  //获取所有的测站
  // function getRiverTreeData() {
  //   getRiverTree().then((res) => {
  //     setRiverList(res.data.data_value.station['水位站']);
  //     setRiverList(res.data.data_value.station['水文站']);
  //     dataCenter.activeStcd = res.data.data_value.station['水位站'][0].stcd;
  //     dataCenter.formData.stcd = res.data.data_value.station['水位站'][0].stcd;
  //     dataCenter.senidName = res.data.data_value.station['水位站'][0].st_name;
  //     getHistoryRain();
  //   });
  // }
  let chart;
  function echarts1() {
    chart = echarts.init(document.getElementById('echarts-box1'));
    let dataArr = []
    dataCenter.chartsArr.z.forEach((element,index) => {
      dataArr.push([dataCenter.chartsArr.q[index],element])
    });
    console.log(dataArr)
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        // formatter(params) {
        //   var relVal = '流量：'+params[0].name;
        //   for (var i = 0, l = params.length; i < l; i++) {
        //       // console.log('tooltip数据值',params[i].value)
        //       //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
        //       relVal += '<br/>' +  '水位：' + Number(params[i].value)
        //   }
        //   return relVal;
        // },
      },
      toolbox: {
        feature: {
          saveAsImage: {
            name:`水位流量关系线(${ setTetx(dataCenter.senidName) })`
          }, //图片下载功能
        },
      },
      xAxis: {
        name: '流量(m³/s)',
        type: 'value',
        // data: dataCenter.chartsArr.q,
        // min:0
        scale: true,
        axisLabel: {
          textStyle: {
            fontSize: 14
          }
        }
      },
      yAxis: {
        name: '水位(m)',
        type: 'value',
        scale: true,
        axisLabel: {
          textStyle: {
            fontSize: 14
          }
        }
      },
      series: [
        {
          data: dataArr,
          type: 'line',
          smooth: true,
          showSymbol: false
        },
        // {
        //   data: dataCenter.chartsArr.q,
        //   type: 'line',
        //   smooth: true,
        //   showSymbol: false
        // },
      ],
    };

    option && chart.setOption(option);
  }
  function getRiverTreeData2() {
    getStList().then((res) => {
      console.log(res);
      dataCenter.stListData = res.data;
      dataCenter.activeStcd = res.data[0].stcd;
      dataCenter.formData.stcd = res.data[0].stcd;
      dataCenter.senidName = res.data[0].st_name;
      setTableList(res.data[0]);
      getHistoryRain();
    });
  }
  onMounted(() => {
    // getRiverTreeData();
    getRiverTreeData2();
  });
</script>
<style scoped lang="less">
  .main {
    height: 100%;
  }
  .main-content {
    display: flex;
    height: 100%;
    background-color: #fff;
    .left-box {
      width: 200px;
      background-color: #f4f4f4;
      overflow: auto;
      ul {
        li {
          line-height: 35px;
          padding-left: 20px;
          margin-left: 10px;
          border-left: 4px solid transparent;
          cursor: pointer;
        }
        .active-list {
          border-left: 4px solid #2083e8;
          color: #2083e8;
          background-color: #DAE7FF;
        }
        li:hover {
          color: #2083e8;
        }
      }
    }
    .center-box {
      flex: 1;
      padding-left: 20px;
      .center-box-title {
        padding-left: 20px;
        border-left: 4px solid #2083e8;
        margin-top: 10px;
      }
    }
    .right-box {
      height: calc(100vh - 210px);
      ul {
        // position: relative;
        height: calc(100vh - 230px);
        overflow: auto;
        li {
          display: flex;
          line-height: 45px;
          width: 393px !important;
          & > div {
            // flex: 1;
            text-align: center;
            width: 50%;
          }
        }
        li:nth-child(1) {
          position: absolute;
          width: 100%;
          background-color: #fff;
        }
        li:nth-child(2) {
          padding-top: 45px;
        }
      }
    }
  }
  .left-title {
    line-height: 44px;
    text-align: center;
    font-size: 16px;
  }
  .form-box {
    display: flex;
    margin-top: 10px;
    & > div:nth-child(1) {
      width: 90px;
      text-align: right;
      line-height: 32px;
    }
    & > div:nth-child(2) {
      flex: 1;
    }
    span {
      margin-left: 20px;
      margin-top: 5px;
    }
    .custom-input{
      width: 200px;
    }
  }
  ::v-deep .form-box .ant-radio-group {
    line-height: 32px;
  }
  .marg-left {
    margin-left: 10px;
  }
  .charts-list {
    height: 100%;
    display: flex;
    height: calc(100vh - 190px);
    & > div:nth-child(1) {
      flex: 1;
      height: calc(100vh - 190px);
      margin-right: 10px;
    }
    & > div:nth-child(2) {
      width: 400px;
      height: calc(100vh - 190px);
    }
  }
  .charts-list-top {
    display: flex;
    justify-content: flex-end;
    .left-mg {
      margin: 0 20px 0 0px !important;
    }
    .mg-text {
      line-height: 32px;
      cursor: pointer;
      color: #0671dd;
    }
  }
</style>
