<template>
  <!-- 土壤弹窗 -->
  <el-dialog
      width="75%"
      top="130px"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="trzddialogTableVisible"
      @close="closeDialog"
  >
    <div class="xintc">
      <div class="tz_cov_chanye" style="height: 770px">
        <img
            src="@/assets/image/zhwl/guanbi.png"
            class="guanbiann"
            @click="closeDialog"
            alt=""
        />
        <div class="tz_cov_topchanye">
          <span class="tz_cov_top_tit">土壤环境监测</span>
        </div>
        <el-row class="tz_cov_topyqjs">
          <el-col :span="9">
            <div class="grid-content bg-purple ycboxlt4">
              <span class="tcxitit">实时监测信息</span>
              <div class="qxsjssjcTc" >
                <div class="qxsjssjc_left">
                  <el-col :span="24" :class="`showTitle ${index > 7?'showTitle2':''}`" style="padding: 0px;width: 146px;"
                          v-for="(item, index) in tableHead" :key="index" :data-item="JSON.stringify(item)">
                    <div class="jcsjtclist" style="overflow: hidden"  @click="switchData(item)">
                      <el-row :gutter="20">
                        <el-col :span="7">
                          <img :src="urlimg2+item.bsIcon" alt="" class="jcsjicon1"/>
                        </el-col>
                        <el-col :span="17">
                          <span class="jcsjicon1_tit">{{ item.name }}   </span>
                          <button type="button" @click="startAnimate()" style="display: none"></button>
                          <span class="jcsjicon1_num" >
                                      <span v-if="item.value == undefined || item.value == '0' || item.value == '0.0' ">0</span>
                                      <span v-else>
                                        <animate-number :ref="`animateNumber$index`" from="0" :to="item.value"
                                                        :key="item.deployId" duration="3000"></animate-number>
                                      </span>
                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
                                    </span>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </div>
                <div class="qxjcimg2">
                  <img src="@/assets/image/zhwl/tcditr.png" class="tctrimg" alt="">
                  <video width="620" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg" >
                    <source src="@/assets/image/zhwl/tcdidizuo.webm" type="video/webm">
                  </video>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="15">
            <span class="tcxitit">土壤环境监测历史记录</span>
            <div class="bianqianlist">
              <el-radio-group v-model="postParam.summrayMode" @input="formParamChange(1)" size="small" fill="#1783C6">
                <el-radio-button label="dayhours">小时</el-radio-button>
                <el-radio-button label="monthDays">日均</el-radio-button>
                <el-radio-button label="yearMonth">月均</el-radio-button>
              </el-radio-group>
              <el-date-picker v-model="formParam.date" class="custom-date-picker" style="margin-left: 20px; width: 130px;"  size="small"
                              :type="postParam.summrayMode=='dayhours'?'date':postParam.summrayMode=='monthDays'?'month':'year'"
                              :format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
                              :value-format="postParam.summrayMode=='dayhours'?'yyyy-MM-dd':postParam.summrayMode=='monthDays'?'yyyy-MM':'yyyy'"
                              @change="formParamChange" placeholder="选择日期"
                              start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
              <!--              <div class="xiaoshiHover" @click="formParamChange">查询</div>-->
              <div class="zsfsList">
                <span>展示方式：</span>
                <el-radio-group v-model="echartOrTable" size="small" fill="#1783C6">
                  <el-radio-button label="1">折线</el-radio-button>
                  <el-radio-button label="0">表格</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div id="columnTrEchart" v-show="(echartOrTable=='1')" style="width: 100%; height: 480px;"></div>
            <el-table v-if="allData" v-show="!(echartOrTable=='1')" :data="allData.tableData" default-sort="{ prop: 'dates', order: 'descending' }"
                      row-class-name="tableRowClassName" cell-class-name="tableRowClassName" header-row-class-name="tableRowClassName" header-cell-class-name="tableRowClassName"
                      height="580" border size="mini">
              <el-table-column :prop="`dates`" label="日期" width="92" ></el-table-column>
              <el-table-column :prop="item2.survItem" :label="item2.name+'('+item2.unit+')'"  v-for="(item2, index2) in allData.realTimeData"
                               :key="item2.name">
              </el-table-column>
            </el-table>
            <div class="loader" v-show="false">
              <div class="loader-inner ball-grid-pulse">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
              <span class="lodingspan">加载中......</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
</template>

<script>

import {
  getSoilSummry
} from '@/api';
import { _colors } from '@/utils/color.js'

export default {
  props: {
    soilDataId: String
  },
  components: {},
  data() {
    return {
      urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
      urlimg2: 'https://farm.ilhzn.cn/jeecg-boot/sys/common/static/',
      deployType: 'soil',
      allData: null,
      tableHead: [],
      trzddialogTableVisible: true,
      tableListData: [],
      unitValue: true,
      echartOrTable: '1',
      formParam: {
        date: '',
        summrayMode: 'monthDays'
      },
      postParam: {
        deployIds: [this.soilDataId],
        startTime: null,
        endTime: null,
        summrayMode: 'monthDays',
      },
      myChartObj: null
    }
  },
  mounted() {
    console.log('土壤弹窗显示拉!', this.soilDataId)
    this.deviceSummaryApi();
  },
  methods: {
    // 历史数据曲线
    deviceSummaryApi() {
      let that = this
      this.tableHead = [];
      getSoilSummry(that.postParam).then(res => {
        if (res.code === 200) {
          this.allData = res.result
          if(this.allData){
            this.tableHead = res.result.realTimeData
            this.tableIndex = res.result.tableIndex
          }
          this.initEchartDom();
        }
      })
    },
    // 切换参数
    switchData(e) {
      let that = this
      console.log('切换参数switchData', e)
      // this.$nextTick(() => {
      //   this.$refs.myNum1?.map(res => {
      //     res.start()
      //   })
      // })
    },
    initEchartDom() {
      console.log('initEchart')
      if(!this.allData) {
        console.error('数据未获取到')
        return ;
      }
      if(this.myChartObj){
        this.myChartObj.dispose();
      }
      this.myChartObj = this.$echarts.init(document.getElementById("columnTrEchart"));
      // 绘制图表
      let legendData = this.allData.realTimeData.map(item =>  item.name+'('+item.unit+')');
      let xAxisData = this.allData.tableIndex;
      let seriesData = this.allData.realTimeData.map((item,index) => {
        let subdata = this.allData.objResults[item.survItem]
        return {
          name: item.name+'('+item.unit+')',
          data: subdata,
          type: "line",
          symbol: "circle", //设定为实心点
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          areaStyle: {
            //新版渐变色实现
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: _colors[index],
                },
                {
                  offset: 1,
                  color: "rgba(255, 223, 4, 0.1)",
                },
              ],
            },
          },
          lineStyle: {
            //线的颜色
            color: _colors[index],
            width: 1.5,
          },
          itemStyle: {
            color: _colors[index],
          },
        }

      }) ;
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legendData,
          icon: "rect",
          itemWidth: 7, // 设置宽度
          itemHeight: 7, // 设置高度
          itemGap: 15, // 设置间距
          top: "0",
          textStyle: {
            //图例文字的样式
            color: "#fff",
            // fontSize: 14,
          },
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "14%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          data: xAxisData,
          lineStyle: {
            color: "rgba(117, 168, 202, 0.9)",
          },
          axisLine: {
          },
        },
        yAxis: [
          {
            name: '',
            type: "value",
          },
        ],
        series: seriesData,
      };
      option && this.myChartObj.setOption(option);
    },
    formParamChange(f) {
      console.log(this.formParam)
      if(f === 1){
        this.formParam.date = null;
      }
      if(this.formParam.date) {
        this.postParam.startTime = this.formParam.date
        this.postParam.endTime = null
      } else {
        this.postParam.startTime = null
        this.postParam.endTime = null
      }
      this.deviceSummaryApi();
    },
    tableClassName(){},
    closeDialog() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.xintc {
  /* 不可删除弹出开始，以气象为主 */

  :deep .el-dialog {
    position: relative;
    margin: 0 auto;
    background: none;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    box-sizing: border-box;
    width: 50%;
    /* margin-left: 22%; */
  }

  :deep .el-dialog__header {
    display: none;
  }

  .tz_cov_chanye {
    width: 100%;
    height: 42vw;
    /* background: url(../../assets/images/tccovbak.png) no-repeat;
      background-size: 100% 100%; */
    background: rgba(1, 17, 26, 0.9);
    border-radius: 10px;
    border: 1px solid #33739d;
    //text-align: center;
    overflow: hidden;
    box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
    position: relative;
  }

  .guanbiann {
    width: 28px;
    height: 28px;
    position: absolute;
    right: 2%;
    top: 0.5vw;
    z-index: 9999999999;
    cursor: pointer;
  }

  .tz_cov_topchanye {
    width: 100%;
    height: 48px;
    background: url(@/assets/image/tctopback.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 48px;
    margin-bottom: 20px;
  }

  .tz_cov_top_tit {
    font-size: 20px;
    font-family: douyuFont;
    color: #fff;
    text-align: center;
  }

  .tcgldw {
    font-size: 18px;
    color: #fff;
    width: 98%;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 38px;
    text-align: left;
    text-indent: 2em;
    height: 576px;
    overflow: auto;
    /* text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 15; */
  }

  /* 定义滚动条样式 */

  .tcgldw::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: rgba(240, 240, 240, 0.1);
  }

  /*定义滚动条轨道 内阴影+圆角*/

  .tcgldw::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
    border-radius: 10px;
    background-color: rgba(240, 240, 240, .0);
  }

  /*定义滑块 内阴影+圆角*/

  .tcgldw::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
    background-color: rgba(36, 132, 109, .8);
  }

  .ycboxlt {
    width: 94%;
    margin-left: 2%;
    background: url(@/assets/image/tckuang.png) no-repeat;
    background-size: 100% 100%;
    padding: 10px;
  }

  .ycboxlt4 {
    width: 94%;
    margin-left: 2%;
    background-size: 100% 100%;
    padding: 10px;
  }

  .tz_cov_topyqjs {
    width: 100%;
    height: 600px;
    padding: 5px;
  }

  .tz_cov_top {
    width: 100%;
    height: 600px;
    overflow: auto;
    animation: fadeInLeft 1s 0.02s ease backwards;
  }

  .in1con_lf_imglf_num_jix {
    color: #12CCFA;
    font-size: 24px;
    font-family: "UnidreamLED";
  }

  .qxjcCon {
    height: 506px;

  }

  .qxsjssjc {
    width: 100%;
    height: 506px;
    overflow: hidden;
  }

  .qxsjssjc_left {
    //width: 873px;
    /* float: left; */
    /* margin-left: 40px; */
    margin-top:70px;
    display: flex;
    align-items: flex-start;
    height: 400px;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;
    width: 100%;
  }

  .qxsjssjc_leftTc {
    width: 10%;
    position: absolute;
    left: 2%;
    top: 40px;
    z-index: 33;
  }

  .qxsjssjc_leftTc2 {
    width: 10%;
    position: absolute;
    left: 30%;
    top: 40px;
    z-index: 33;
  }

  .qxjcimg2 {
    width: 40%;
    float: left;
    margin-left: 40px;

    .qiyename {
      width: 304px;
      height: 40px;
      margin-left: 40px;
      margin-top: 20px;
      overflow: hidden;

      .qynammeLf {
        float: left;
        width: 34px;
        margin-top: 3px;
        cursor: pointer;
      }

      .qynammeCon {
        float: left;
        width: 234px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: url(@/assets/image/qiyename.png) no-repeat 100% 100%;
        font-size: 16px;
        color: #fff;
      }

      .qynammeRt {
        float: right;
        width: 34px;
        margin-top: 3px;
        cursor: pointer;
      }
    }
  }

  .qxsjssjc_left_list {
    width: 175px;
    height: 86px;
    background: url(@/assets/image/zhwl/qxbg.png) no-repeat 100% 100%;
    border-radius: 6px;
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
  }

  .qxsjssjc_left_list_tit {
    width: 100%;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    font-size: 14px;
    border-radius: 6px 6px 0 0;
    margin-top: 4px;
  }

  .qxsjssjc_left_list_show {
    font-size: 16px;
    color: #12CCFA;
    display: inline-block;
    padding-top: 18px;
  }

  .qxsjssjcTc {
    width: 100%;
    height: 580px;
    overflow: hidden;
  }

  .tcyqimg {
    width: 14%;
    position: absolute;
    left: 14%;
    bottom: 80px;
    z-index: 2;
  }

  .tcdzimg {
    width: 40%;
    margin-left: 5%;
    position: absolute;
    left: -4%;
    bottom: -40px;
    z-index: -100;
  }

  .tcxitit {
    display: block;
    text-align: left;
    font-size: 14px;
    color: #fff;
    margin-left: 2%;
  }

  .bianqianlist {
    width: 100%;
    height: 40px;
    overflow: hidden;
    margin-top: 10px;

    .xiaoshi {
      width: 48px;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      border: 1px solid #D6D6D6;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      float: left;
      margin-left: 10px;
      cursor: pointer;
    }

    .xiaoshiHover {
      width: 48px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #1783C6;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      float: left;
      margin-left: 10px;
      cursor: pointer;
    }

    .zsfsList {
      float: right;
      color: #fff;
      font-size: 14px;
      margin-right: 20px;
    }
  }
  .jcsjtclist {
    width: 138px;
    height: 60px;
    background: #1D4C82;
    border-radius: 6px;
    margin-top: 14px;
    cursor: pointer;

    .jcsjicon1 {
      width: 46px;
      margin-top: 10px;
    }

    .jcsjicon1_tit {
      font-size: 12px;
      color: #fff;
      display: block;
      margin-top: 8px;
      text-align: left;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .jcsjicon1_num {
      color: #e7f47b;
      font-size: 24px;
      text-align: center;
      font-family: "UnidreamLED";
      font-family: HYChangLiSongKeBen;
      text-align: left;
      display: block;
    }

    .jcsjicon1_dan {
      font-size: 12px;
      color: #fff;
      margin-left: 6px;
      text-align: center;
    }
  }

  .qxsjssjc_right {
    width: 12%;
    height: 500px;
    overflow: auto;
    z-index: 3;
    position: absolute;
    left: 470px;
    top: 20px;
  }

  /* 定义滚动条样式 */

  .qxsjssjc_right::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: rgba(240, 240, 240, 0.1);
  }

  /*定义滚动条轨道 内阴影+圆角*/

  .qxsjssjc_right::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
    border-radius: 10px;
    background-color: rgba(240, 240, 240, .0);
  }

  /*定义滑块 内阴影+圆角*/

  .qxsjssjc_right::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
    background-color: rgba(36, 132, 109, .8);
  }

  .tctrimg {
    width: 16%;
    height: 450px;;
    position: absolute;
    left: 11%;
    top: 120px;
    z-index: 1;
  }

  .tcscdimg {
    width: 10%;
    height: 500px;
    position: absolute;
    left: 16%;
    top: 20px;
    z-index: 1;
  }

  .tcchimg {
    width: 115px;
    height: 446px;
    position: absolute;
    left: 17.5%;
    top: 60px;
    z-index: 1;
  }



  .tcccqhimg {
    width: 115px;
    height: 446px;
    position: absolute;
    left: 17.5%;
    top: 60px;
    z-index: 1;
  }

  .tcdidizuoimg {
    width: 40%;
    position: absolute;
    left: 2%;
    bottom: -30px;
    z-index: 0;
  }

  .tcdijtimg {
    width: 34%;
    position: absolute;
    left: 4%;
    top: -40px;
    z-index: 0;
  }

  @keyframes continuous-rotation {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

  .xiaoshiHover {
    width: 48px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #1783C6;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    float: left;
    margin-left: 10px;
  }

  .timeStty {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;

    .tcxitit {
      text-align: left;
      font-size: 14px;
      color: #fff;
      float: left;
    }

    .timeright {
      float: right;
      margin-right: 3%;
    }
  }

  .tcxitit {
    display: block;
    text-align: left;
    font-size: 14px;
    color: #fff;
    margin-left: 2%;
  }

  .cqimgTcList {
    width: 100%;
    height: 480px;
    overflow: auto;

    .cqimg {
      width: 32%;
      float: left;
      margin-top: 10px;
      margin-right: 1%;
      overflow: hidden;
      position: relative;
      border-radius: 10px;

      img {
        width: 100%;
        border-radius: 10px;
        border: 1px solid rgb(0, 95, 65);
      }
    }

    .cqTime {
      color: #1090D4;
      font-size: 16px;
      display: block;
      margin-top: 10px;
    }
  }

  /* 定义滚动条样式 */

  .cqimgTcList::-webkit-scrollbar {
    width: 2px;
    height: 2px;
    background-color: rgba(240, 240, 240, 0.1);
  }

  /*定义滚动条轨道 内阴影+圆角*/

  .cqimgTcList::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .0);
    border-radius: 10px;
    background-color: rgba(240, 240, 240, .0);
  }

  /*定义滑块 内阴影+圆角*/

  .cqimgTcList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(36, 132, 109, .8);
    background-color: rgba(36, 132, 109, .8);
  }


  .tz_cov_zaip {
    width: 100%;
    height: 1000px;
    /* background: url(../../assets/images/tccovbak.png) no-repeat;
      background-size: 100% 100%; */
    background: rgba(15, 36, 69, 0.7);
    border-radius: 0.5vw;
    border: 1px solid #33739d;
    text-align: center;
    overflow: hidden;
    box-shadow: 0px 0px 30px 0px rgba(14, 147, 255, 0.8);
    position: relative;
  }

  .tz_cov_zaip .el-tabs--border-card {
    background: none;
    border: none;
    box-shadow: none;
  }

  .tz_cov_zaip .el-tabs--border-card > .el-tabs__header {
    background: none;
    border: none;
    box-shadow: none;
    margin-left: 15px;
    /* padding-left: 15px; */
  }

  .tz_cov_zaip .el-tabs__item {
    background: #0F5474;
    border: 1px solid #0089AE !important;
    margin-right: 1% !important;
    color: #C9C9C9 !important;
    font-size: 16px;
    padding: 0px 15px !important;
    box-sizing: border-box;
    /* height: 40px !important; */
  }

  .tz_cov_zaip .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background: #0089AE;
    border: 1px solid #1A848F !important;
    margin-right: 1% !important;
    color: #fff !important;
    font-size: 16px;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .tz_cov_zaip .el-tabs--border-card > .el-tabs__content {
    padding: 0;
    margin-top: 20px;
  }
}
.tableRowClassName{
  background-color: rgb(216, 19, 19);
  color: #fff;
}
</style>