<template>
  <div class="security">
    <Panel class="statistics" title="监测统计" height="100%">
      <div class="chart-box">
        <div class="chart-left">
          <animate-number
            class="animate-number"
            from="0"
            to="129"
            duration="1000"
            easing="easeOutQuad"
            :formatter="(num) => num.toFixed(0)"
          />
          <p>总监测点</p>
        </div>
        <div class="chart-right">
          <div class="normal mess">
            <div class="icon">
              <div class="s-icon"></div>
            </div>
            <div class="txt">
              <p>正常测点</p>
              <animate-number
                class="animate-number"
                from="0"
                to="129"
                duration="1000"
                easing="easeOutQuad"
                :formatter="(num) => num.toFixed(0)"
              />
            </div>
          </div>
          <div class="warm mess">
            <div class="icon">
              <div class="s-icon"></div>
            </div>
            <div class="txt">
              <p>异常测点</p>
              <span>0</span>
            </div>
          </div>
        </div>
      </div>
      <div class="message-box">
        <div
          class="message"
          :class="{ messageActive: messageIndex === index }"
          v-for="(item, index) in messageList"
          :key="index"
          @click="messageBtn(index)"
        >
          <div class="message-title">
            <div class="icon-txt">
              <div class="icon"></div>
              <span>{{ item.title }}</span>
            </div>
          </div>
          <div class="txt">
            <p class="p1">
              监测点：<span>{{ item.num }}</span>
            </p>
            <p class="p2">
              异常：<span>{{ item.warm }}</span>
            </p>
          </div>
          <div
            class="right-icon"
            :class="[
              { blue_bg: Math.floor((1 - item.warm / item.num) * 100) >= 90 },
              {
                yellow_bg:
                  Math.floor((1 - item.warm / item.num) * 100) >= 80 &&
                  Math.floor((1 - item.warm / item.num) * 100) < 90,
              },
              { red_bg: Math.floor((1 - item.warm / item.num) * 100) < 80 },
            ]"
          >
            <p
              :class="[
                { blue: Math.floor((1 - item.warm / item.num) * 100) >= 90 },
                {
                  yellow:
                    Math.floor((1 - item.warm / item.num) * 100) >= 80 &&
                    Math.floor((1 - item.warm / item.num) * 100) < 90,
                },
                { red: Math.floor((1 - item.warm / item.num) * 100) < 80 },
              ]"
            >
              <span>{{ Math.floor((1 - item.warm / item.num) * 100) }}</span
              >%
            </p>
          </div>
        </div>
      </div>
    </Panel>
    <div class="right">
      <el-row class="header">
        <el-form ref="form" label-position="left" :model="form" :rules="rules">
          <el-form-item label="测点选择：" prop="spot">
            <el-select
              v-model="form.spot"
              multiple
              placeholder="请选择"
              size="small"
              collapse-tags
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <img @click="imgBtn" src="@/assets/images/engineering/map.png" />
          </el-form-item>
          <el-form-item label="时间选择：" prop="selectTime">
            <el-date-picker
              :editable="false"
              @change="timeChange"
              size="small"
              class="security-select-time"
              popper-class="security-date"
              v-model="form.selectTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
              <!-- :default-time="[
                dayjs().subtract(7, 'month').format(),
                dayjs().format(),
              ]" -->
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <button @click="btn(1)" :class="{ ok13: btnIndex === 1 }">
              过程线
            </button>
            <button @click="btn(2)" :class="{ ok2: btnIndex === 2 }">
              特征值
            </button>
            <button @click="daoBtn">导出</button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="main">
        <el-table
          v-if="btnIndex === 1"
          header-cell-class-name="t"
          border
          :data="tableData"
          :header-row-style="{
            background: 'rgba(15, 58, 117)',
            color: '#fff',
          }"
          :header-cell-style="{
            background: 'transparent',
            borderColor: '#5484BD',
          }"
          :row-style="{
            background: 'rgba(12, 48, 97, 1)',
            color: '#fff',
          }"
          :cell-style="{
            background: 'transparent',
            borderColor: '#5484BD',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="time"
            label="监测时间"
          >
          </el-table-column>

          <el-table-column header-align="center" align="center" label="ZD-01">
            <el-table-column header-align="center" align="center" label="X">
              <template #default="{ row }">
                {{ row.zd1.x }}
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="Y">
              <template #default="{ row }">
                {{ row.zd1.z }}
              </template></el-table-column
            >
          </el-table-column>

          <el-table-column header-align="center" align="center" label="ZD-02">
            <el-table-column header-align="center" align="center" label="X">
              <template #default="{ row }">
                {{ row.zd2.x }}
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="Y">
              <template #default="{ row }">
                {{ row.zd2.z }}
              </template></el-table-column
            >
          </el-table-column>

          <el-table-column header-align="center" align="center" label="ZD-03">
            <el-table-column header-align="center" align="center" label="X">
              <template #default="{ row }">
                {{ row.zd3.x }}
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="Y">
              <template #default="{ row }">
                {{ row.zd3.z }}
              </template></el-table-column
            >
          </el-table-column>

          <el-table-column header-align="center" align="center" label="ZD-04">
            <el-table-column header-align="center" align="center" label="X">
              <template #default="{ row }">
                {{ row.zd4.x }}
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="Y">
              <template #default="{ row }">
                {{ row.zd4.z }}
              </template></el-table-column
            >
          </el-table-column>

          <el-table-column
            header-align="center"
            align="center"
            prop="flag"
            :render-header="renderHeader"
            width="150"
          >
          </el-table-column>
        </el-table>
        <p v-if="btnIndex === 1">
          在纵向分布上，位于上游侧的测点变化不明显，位于下游侧的测点呈中部位移大，两侧位移小的特点。符合土石坝变形一般规律。
        </p>
        <div v-if="btnIndex === 2" id="security-chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Security',
  created () {
    console.log(this.dayjs().subtract(7, 'month').format())
  },
  mounted () {
    window.addEventListener('resize', this.initSecurityChart)
  },
  destroyed () {
    window.removeEventListener('resize', this.initSecurityChart)
  },
  data () {
    return {
      tableData: [{
        time: '9月1日',
        zd1: {
          x: 5.02,
          z: 5.02
        },
        zd2: {
          x: 5.02,
          z: 5.02
        },
        zd3: {
          x: 5.02,
          z: 5.02
        },
        zd4: {
          x: 5.02,
          z: 5.02
        },
        flag: '否'
      }, {
        time: '9月2日',
        zd1: {
          x: 5.02,
          z: 5.02
        },
        zd2: {
          x: 5.02,
          z: 5.02
        },
        zd3: {
          x: 5.02,
          z: 5.02
        },
        zd4: {
          x: 5.02,
          z: 5.02
        },
        flag: '否'
      }, {
        time: '9月3日',
        zd1: {
          x: 5.02,
          z: 5.02
        },
        zd2: {
          x: 5.02,
          z: 5.02
        },
        zd3: {
          x: 5.02,
          z: 5.02
        },
        zd4: {
          x: 5.02,
          z: 5.02
        },
        flag: '否'
      }, {
        time: '9月4日',
        zd1: {
          x: 5.02,
          z: 5.02
        },
        zd2: {
          x: 5.02,
          z: 5.02
        },
        zd3: {
          x: 5.02,
          z: 5.02
        },
        zd4: {
          x: 5.02,
          z: 5.02
        },
        flag: '否'
      }],
      // 表单校验规则
      rules: {
        spot: [{ required: true, message: '请选择测点', trigger: 'blur' }],
        selectTime: [{ required: true, message: '请选择时间', trigger: 'blur' }]
      },
      // 表单
      form: {
        spot: ['SG1'],
        selectTime: [
          this.dayjs().subtract(7, 'month').format(),
          this.dayjs().format()
        ]
      },
      // 过程 特征值 退出
      btnIndex: 1,
      // 下拉多选
      options: [{
        value: 'SG1',
        label: 'SG1'
      }, {
        value: 'SG2',
        label: 'SG2'
      }, {
        value: 'SG3',
        label: 'SG3'
      }, {
        value: 'SG4',
        label: 'SG4'
      }],
      // 监测统计index
      messageIndex: 0,
      // 监测统计列表数据
      messageList: [
        {
          title: '表面水平位移',
          num: 38,
          warm: 0
        },
        {
          title: '表面垂直位移',
          num: 62,
          warm: 12
        },
        {
          title: '绕坝渗流',
          num: 94,
          warm: 50
        },
        {
          title: '坝体渗流',
          num: 4,
          warm: 0
        },
        {
          title: '防渗墙应力',
          num: 32,
          warm: 0
        },
        {
          title: '防渗墙应变',
          num: 32,
          warm: 0
        }
      ]
    }
  },
  methods: {
    initSecurityChart () {
      const myChart = this.echarts.init(document.getElementById('security-chart'))
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['UP2-1'],
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          itemStyle: {
            borderWidth: 0
          },
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        color: ['#FF8E07'],
        grid: {
          left: '90px',
          right: '80px',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            show: false
          },
          axisPointer: {
            show: true,
            type: 'line', // 'line', 'shadow', 'none'
            label: {
              show: false,
              // formatter: , // 文本格式化
              backgroundColor: '#6a7985'
            },
            lineStyle: {
              type: 'solid',
              color: 'rgba(255,255,255,0.8)'
            } // 线的样式
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: '#fff'
            } // 样式
          },
          axisLabel: {
            show: true,
            fontSize: 14,
            margin: 15
          }
        },
        yAxis: {
          type: 'value',
          name: '单位（mm）',
          nameGap: 25, // 坐标轴名称与轴线之间的距离,
          nameTextStyle: {
            fontSize: 14
          }, // 样式

          axisLabel: {
            show: true,
            fontSize: 14,
            margin: 23
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255, 0.3)'
            } // 样式
            // 坐标轴分隔线的显示间隔,在类目轴中有效,默认同 axisLabel.interval 一样,默认会采用标签不重叠的策略间隔显示标签
            // interval: 0 // 'auto', 1, 2
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'], // 轴线两边的箭头
            symbolSize: [10, 15], // 箭头大小 [上下宽度, 左右高度]
            lineStyle: {
              color: '#fff'
            } // 样式
          }
        },
        series: [
          {
            name: 'UP2-1',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
            symbol: 'circle',
            symbolSize: 9,
            itemStyle: {
              color: 'auto', // 图形的颜色。 默认从全局调色盘 option.color 获取颜色。
              borderColor: '#fff', // 图形的描边颜色
              borderWidth: 2, // 描边线宽
              borderType: 'solid' // 描边类型, 'solid', 'dashed', 'dotted'
              // shadowBlur: 10, // 图形阴影的模糊大小
              // shadowColor: 'red' // 阴影颜色
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
    },
    renderHeader (h) {
      return h('div', {
        attrs: {
          class: 'cell'
        },
        domProps: {
          innerHTML: '是否超出预警<br />（1.5cm/s）'
        }
      })
    },
    // 预警统计信息按钮
    messageBtn (i) {
      this.messageIndex = i
    },
    daoBtn () {
      console.log('导出')
    },
    async btn (num) {
      try {
        await this.$refs.form.validate()

        this.btnIndex = num
      } catch (e) {
        // 校验不通过走到这里
        console.log(e)
      }
    },
    imgBtn () {

    },
    timeChange () {

    }
  },
  watch: {
    btnIndex () {
      this.$nextTick(() => {
        this.initSecurityChart()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.security {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  .statistics ::v-deep {
    width: 420px !important;
    margin-right: 10px;
    .panel-main {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .chart-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 180px;
      margin-bottom: 37px;
      .chart-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        background: url("~@/assets/images/engineering/count_icon.png") no-repeat
          center / 100% 100%;
        span {
          margin-bottom: 9px;
          color: #fff;
          font-size: 30px;
        }
        p {
          color: rgba(255, 255, 255, 0.8);
          font-size: 14px;
        }
      }
      .chart-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        .mess {
          display: flex;
          .icon {
            display: flex;
            justify-content: center;
            width: 82px;
            height: 82px;
            margin-right: 4px;
            .s-icon {
              margin-top: 5px;
            }
          }
          .txt {
            width: 128px;
            height: 82px;
            padding: 14px 0 0 25px;
            p {
              font-size: 14px;
              margin-bottom: 13px;
            }
            span {
              font-size: 28px;
            }
          }
        }
        .normal {
          margin-bottom: 16px;
          .icon {
            background: url("~@/assets/images/engineering/normal_icon.png")
              no-repeat center / 100% 100%;
            .s-icon {
              width: 50px;
              height: 44px;
              background: url("~@/assets/images/engineering/s_icon1.gif")
                no-repeat center / 100% 100%;
            }
          }
          .txt {
            background: url("~@/assets/images/engineering/normal_bg.png")
              no-repeat center / 100% 100%;
            color: #60fff6;
          }
        }
        .warm {
          .icon {
            background: url("~@/assets/images/engineering/warm_icon.png")
              no-repeat center / 100% 100%;
            .s-icon {
              width: 50px;
              height: 44px;
              background: url("~@/assets/images/engineering/s_icon2.gif")
                no-repeat center / 100% 100%;
            }
          }
          .txt {
            background: url("~@/assets/images/engineering/warm_bg.png")
              no-repeat center / 100% 100%;
            color: #ff6969;
          }
        }
      }
    }
    .message-box {
      width: 100%;
      flex: 1;
      overflow: auto;
      &::-webkit-scrollbar {
        // 滚动条整体样式
        width: 6px; // 竖向滚动条宽度
        height: 0; // 横向滚动条高度
      }
      &::-webkit-scrollbar-thumb {
        // 滚动条内滑块样式
        background-color: #6d9dbc;
        border-radius: 2px;
      }
      &::-webkit-scrollbar-track {
        // 滚动条轨道样式
        background-color: #10202d;
      }

      .message {
        position: relative;
        height: 117px;
        margin-bottom: 10px;
        padding: 13px 11px 16px 20px;
        background: url("~@/assets/images/engineering/message_bg.png") no-repeat
          center / 100% 100%;
        cursor: pointer;
        &:hover {
          background: url("~@/assets/images/engineering/message_active.png")
            no-repeat center / 100% 100%;
        }
        .message-title {
          display: flex;
          justify-content: space-between;
          width: 100%;
          background: transparent;
          .icon-txt {
            display: flex;
            align-items: center;
            .icon {
              width: 3px;
              height: 16px;
              margin-right: 8px;
              background-color: #60fff6;
            }
            span {
              color: #60fff6;
              font-size: 16px;
            }
          }
        }
        .txt {
          display: flex;
          margin-top: 40px;
          p {
            font-size: 16px;
          }
          .p1 {
            margin-right: 38px;
            color: rgba(255, 255, 255, 0.8);
          }
          .p2 {
            color: #ff6969;
          }
        }
        .right-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 50%;
          right: 42px;
          transform: translateY(-50%);
          width: 107px;
          height: 92px;
          &.red_bg {
            background: url("~@/assets/images/engineering/right_icon_red.png")
              no-repeat center / 100% 114%;
          }
          &.yellow_bg {
            background: url("~@/assets/images/engineering/right_icon_yellow.png")
              no-repeat center / 100% 114%;
          }
          &.blue_bg {
            background: url("~@/assets/images/engineering/right_icon_blue.png")
              no-repeat center / 100% 114%;
          }
          p {
            font-size: 18px;
          }
          .blue {
            color: #45dfff;
          }
          .red {
            color: #ff6969;
          }
          .yellow {
            color: #ffc05d;
          }
        }
      }
      .message:last-child {
        margin-bottom: 0;
      }
      .messageActive {
        background: url("~@/assets/images/engineering/message_active.png")
          no-repeat center / 100% 100% !important;
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #0c3061;
    .header {
      display: flex;
      align-items: center;
      width: 1250px;
      height: 40px;
      margin: 0;
      background-color: #12407f;
      padding-left: 20px;
      .el-form ::v-deep {
        display: flex;
        width: 100%;
        height: 100%;
        .el-select .el-tag__close.el-icon-close {
          background-color: #0b3268;
        }
        .el-select .el-tag__close.el-icon-close::before {
          color: #fff;
        }
        .el-tag.el-tag--info {
          background-color: #2b809e;
          color: #fff;
          border: 1px solid #2b809e;
        }
        .el-range-editor.is-active,
        .el-range-editor.is-active:hover,
        .el-select .el-input.is-focus .el-input__inner {
          border: 1px solid rgba(125, 251, 252, 0.4);
        }
        .el-form-item {
          margin-right: 20px;
          .el-form-item__label {
            width: 90px;
            color: #60fff6;
            padding-right: 0;
          }
          .el-form-item__content {
            display: flex;
            align-items: center;
            padding-top: 4px;
            .el-select {
              width: 130px;
              margin-left: 8px;
              // .el-select__tags {
              //   .el-tag--mini {
              //     background-color: #fff;
              //   }
              // }
              input::placeholder {
                color: rgba(255, 255, 255, 0.8);
              }
              .el-popper[x-placement^="bottom"] .popper__arrow::after {
                border-color: transparent;
                border-bottom-color: #00679b;
              }
              .el-input__inner {
                color: #fff;
                background: rgba(7, 41, 88, 0.8);
                padding-left: 10px;
                padding-right: 20px;
              }
              .el-icon-arrow-up:before {
                color: #fff;
              }
              .el-input__suffix {
                right: 0;
              }
              .el-select-dropdown {
                position: absolute;
                left: 0;
                width: 130px;
                margin: 0;
                margin-top: 10px;
                padding: 10px 5px;
                background: #00679b;
                border: 0;
                span {
                  color: #fff;
                }
                .selected {
                  background-color: #39a0bb;
                  border-radius: 2px;
                }
                .hover {
                  background-color: #39a0bb;
                  border-radius: 2px;
                }
                .el-scrollbar__view {
                  padding: 0;
                }
                .el-select-dropdown__item {
                  display: flex;
                  align-items: center;
                  padding: 0 0 0 10px;
                  height: 26px;
                  margin-bottom: 5px;
                  span {
                    color: #fff;
                  }
                  &.selected span {
                    color: #60fff6;
                  }
                  &.selected {
                    color: #60fff6;
                  }
                }
                .el-select-dropdown__item:last-child {
                  margin-bottom: 0;
                }
              }
            }
            img {
              width: 26px;
              height: 28px;
              margin-left: 13px;
              cursor: pointer;
            }
          }
        }
        .el-form-item:nth-child(1) {
          .el-select .el-input__inner:focus {
            border: 1px solid rgba(125, 251, 252, 0.4);
          }
          .el-form-item__error {
            margin-left: 9px;
          }
        }
        .el-form-item:nth-child(2) {
          .el-form-item__label {
            margin-right: 8px;
          }
        }
        .el-form-item:nth-child(3) {
          .el-form-item__content {
            padding-top: 8px;
            margin-left: 30px !important;
            button {
              width: 70px;
              height: 24px;
              margin-right: 20px;
              border-radius: 4px;
              color: rgba(255, 255, 255, 0.7);

              &.ok13 {
                color: #fff !important;
                border: 1px solid #fff;
                background-color: rgba(217, 154, 88, 1) !important;
              }
              &.ok2 {
                color: #fff !important;
                border: 1px solid #fff;
                background-color: rgba(55, 204, 196, 1) !important;
              }
            }
            button:nth-child(1),
            button:nth-child(3) {
              background-color: rgba(217, 154, 88, 0.7);
            }
            button:first-child {
              &:hover {
                color: #fff !important;
                border: 1px solid #fff;
                background-color: rgba(217, 154, 88, 1) !important;
              }
            }
            button:nth-child(3) {
              color: #fff;
              background-color: rgba(217, 154, 88, 1);
            }
            button:nth-child(2) {
              &:hover {
                color: #fff !important;
                border: 1px solid #fff;
                background-color: rgba(55, 204, 196, 1) !important;
              }
              background-color: rgba(55, 204, 196, 0.7);
            }
          }
        }
      }
    }
    .main {
      position: relative;
      flex: 1;
      #security-chart {
        position: absolute;
        top: 178px;
        width: 1170px;
        height: 476px;
      }
      p {
        position: absolute;
        top: 614px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.8);
        font-size: 16px;
      }
      .el-table--border::after,
      .el-table--group::after,
      .el-table::before {
        background-color: transparent;
      }
      .el-table ::v-deep {
        width: 1016px !important;
        margin: 215px auto 0;
        font-size: 14px;
        &::before {
          height: 0;
        }
        table {
          width: 1014px !important;
        }
        .el-table__header {
          width: 1014px !important;
        }
        th,
        td {
          font-size: 14px;
        }
        thead tr {
          width: 1014px !important;
          height: 40px !important;
        }
        thead th,
        thead td {
          padding: 0;
          height: 40px !important;
        }
        thead .cell {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0;
          height: 40px !important;
        }
        // thead tr:nth-child(1) {
        //   width: 1014px !important;
        // }
        // thead tr:nth-child(1) th:nth-child(1) {
        //   width: 150px !important;
        //   height: 80px !important;
        // }
        // thead tr:nth-child(1) th:nth-child(2),
        // thead tr:nth-child(1) th:nth-child(3),
        // thead tr:nth-child(1) th:nth-child(4),
        // thead tr:nth-child(1) th:nth-child(5) {
        //   width: 180px !important;
        //   height: 40px !important;
        // }
        // thead tr:nth-child(1) th:nth-child(6) {
        //   width: 150px !important;
        //   height: 80px !important;
        // }
      }
      .el-table--border,
      .el-table--group {
        border: 1px solid rgba(84, 132, 189, 1) !important;
      }
    }
  }
}

.security-select-time ::v-deep {
  width: 270px;
  background-color: rgba(18, 48, 71, 0.4);
  border: 1px solid rgba(125, 251, 252, 0.4);
  cursor: pointer !important;

  .el-range-input {
    &::placeholder {
      color: #ccc;
    }
    color: #60fff6;
    background-color: transparent;
  }
  .el-range-separator {
    color: rgba(255, 255, 255, 0.8);
  }
  .el-range-input:nth-child(4) {
    margin-left: 15px;
  }
}
</style>
