<template>
  <!-- 土壤弹窗 -->
  <el-dialog
      width="45%"
      top="160px"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="trzddialogTableVisible"
  >
    <div class="xintc">
      <div class="tz_cov_chanye" style="height: 670px">
        <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="10">
            <div class="grid-content bg-purple ycboxlt4">
              <span class="tcxitit">实时监测信息</span>
              <div class="qxsjssjcTc" @click.stop="trzxshow($event)">
                <div class="qxsjssjc_left" style="margin-top:20px;">
                  <el-col :span="24" class="tcgd2" style="padding: 0px" v-for="(item, index) in airDataListHome1"
                          :key="index" :data-item="JSON.stringify(item)">
                    <div class="jcsjtclist" style="overflow: hidden">
                      <el-row :gutter="20">
                        <el-col :span="10">
                          <img :src="urlimg+item.bsIcon" alt="" class="jcsjicon1"/>
                        </el-col>
                        <el-col :span="14">
                          <span class="jcsjicon1_tit">{{ item.name }}   </span>
                          <button type="button" @click="startAnimate()" style="display: none"></button>
                          <span class="jcsjicon1_num"
                                v-if="item.value == '0' || item.value == '0.0'|| item.value == undefined">
                                      <span>0</span>
                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
                                    </span>
                          <span class="jcsjicon1_num" v-else>
                                      <animate-number style="display:none;" ref="myNum1" from="0" :to="item.value"
                                                      :key="item.value" duration="3000"></animate-number>
                                      <span>{{ item.value }}</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="720" height="376" autoplay="autoplay" muted="muted" loop="loop" class="tcdzimg">
                    <source src="@/assets/image/zhwl/tcdidizuo.webm" type="video/webm">
                  </video>
                </div>
                <div class="qxsjssjc_right" style="margin-top:20px;">
                  <el-col :span="24" class="tcgd2" style="padding: 0px" v-for="(item, index) in airDataListHome2"
                          :key="index" :data-item="JSON.stringify(item)">
                    <div class="jcsjtclist" style="overflow: hidden">
                      <el-row :gutter="20">
                        <el-col :span="10">
                          <img :src="urlimg+item.bsIcon" alt="" class="jcsjicon1"/>
                        </el-col>
                        <el-col :span="14">
                          <span class="jcsjicon1_tit">{{ item.name }}   </span>
                          <button type="button" @click="startAnimate()" style="display: none"></button>
                          <span class="jcsjicon1_num"
                                v-if="item.value == '0' || item.value == '0.0'|| item.value == undefined">
                                      <span>0</span>
                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
                                    </span>
                          <span class="jcsjicon1_num" v-else>
                                      <animate-number style="display:none;" ref="myNum1" from="0" :to="item.value"
                                                      :key="item.value" duration="3000"></animate-number>
                                      <span>{{ item.value }}</span>
                                      <span class="jcsjicon1_dan">{{ item.unit }}</span>
                                    </span>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <span class="tcxitit">土壤环境监测历史记录</span>
            <div class="bianqianlist">
              <div :class="time==1?'xiaoshiHover':'xiaoshi'" @click="timeqieh('xiao')">小时</div>
              <div :class="time==2?'xiaoshiHover':'xiaoshi'" @click="timeqieh('ri')">日均</div>
              <div :class="time==3?'xiaoshiHover':'xiaoshi'" @click="timeqieh('yue')">月均</div>
              <el-date-picker
                  v-model="value1"
                  class="custom-date-picker"
                  type="date"
                  size="small"
                  @blur="timetrpicker"
                  style="float:left;margin-left:10px;"
                  placeholder="选择日期">
              </el-date-picker>
              <div class="xiaoshiHover" @click="tanchuangshuj">查询</div>
              <div class="zsfsList">
                展示方式：
                <el-radio-group v-model="radio1" @input="numtab" size="small" fill="#1783C6">
                  <el-radio-button label="折线"></el-radio-button>
                  <el-radio-button label="表格"></el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div ref="columnTrEchart" v-if="tabnum==true" style="width: 100%; height: 480px;"></div>
            <el-table
                v-else
                :data="formListVlaue"
                height="480"
                border
                style="width: 100%;">
              <el-table-column
                  prop="date"
                  label="时间"
                  width="360">
              </el-table-column>
              <el-table-column
                  prop="name"
                  :label="'数值单位：' + unitValue">
              </el-table-column>
            </el-table>
            <div class="loader" v-if="lodshow==true">
              <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';

export default {
  props: {
    soilDataId: String
  },
  components: {},
  data() {
    return {
      airDataListHome1: [],
      airDataListHome2: [],
      trzddialogTableVisible: true,
      itemValue: {},
      timeout8: null,
      timeout9: null,
      timeout18: null,
      deployType: 'soil',
      trListVlaue: true,
      formListVlaue: [],
      unitValue: true,
      lodshow: false,
      tabnum: true,
      radio1: '',
      value1: '',
      urlimg: 'https://fxnsp.zgzhny.com/lh-api/sys/common/static/',
      time: 1,
    }
  },
  mounted() {
    console.log('土壤弹窗显示拉!', this.soilDataId)
  },
  methods: {
    // 土壤弹窗
    trzxshow(e) {
      let that = this
      const lisst = e.target.closest(".tcgd2"); // 定位元素
      if (lisst) { // 是否是滚动组件的某一行/列
        let itemlist = lisst.dataset.item
        let value = JSON.parse(itemlist)
        this.deployId = value.deployId
        this.itemValue = value.item
        this.summrayMode = 'dayhours'
        this.deviceSummaryApi()
      }
      this.trzddialogTableVisible = true;
      that.lodshow = true
      this.timeout8 = setTimeout(() => {
        that.echrtTrCkick()
      }, 1500);
      this.timeout9 = setTimeout(() => {
        that.lodshow = false
      }, 2000);
    },
    startAnimate() {
      this.$nextTick(() => {
        this.$refs.myNum1.map(res => {
          res.start()
        })
      })
    },

    // 历史数据曲线
    deviceSummaryApi() {
      let obj = {
        deployId: this.deployId,
        startTime: this.startTime,
        survItem: this.itemValue,
        auths: this.auths,
        summrayMode: this.summrayMode,
      }
      getSoilSummry(obj).then(res => {
        let that = this
        this.trListVlaue = res.result
        this.dataListVlaue = res.result.dataList
        this.timeListVlaue = res.result.timeList
        this.formListVlaue = res.result.formList
        this.descriptionValue = res.result.itemInfo.description
        this.unitValue = res.result.itemInfo.unit
        if (res.code === 200) {
          this.timeout18 = setTimeout(() => {
            that.lodshow = false
            that.$nextTick(() => {
              if (this.deployType == 'soil') {
                this.echrtTrCkick();
              }
            })
          }, 1000);
        }
      })
    },
    echrtTrCkick() {
      console.log('initEchart')
    },
    timeqieh() {
    },
    timetrpicker() {
    },
    tanchuangshuj() {
    },
    numtab() {
    },
    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, .3);
    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.7);
    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;
  }

  .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: 160px;
    float: left;
    margin-left: 40px;
  }

  .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: 45%;
    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: 0;
  }

  .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: 14px;
    }

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

    .jcsjicon1_num {
      color: #4FBFF9;
      font-size: 18px;
      font-family: "UnidreamLED";
      text-align: left;
      display: block;
    }

    .jcsjicon1_dan {
      font-size: 14px;
      color: #fff;
      margin-left: 3%;
    }
  }

  .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: 20%;
    height: 400px;
    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;
  }


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

  .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;
  }
}
</style>