<template>
  <div class="big-data-right-wrapper">
    <div class="big-data2 big-data">
      <div class="big-data-title-wrapper">
          报警信息卡
          <div class="big-data-title-dec"></div>
        </div>
        <div class="big-data-chart2">
          <div class="big-data-chart2-alarm-sum2">
            <div class="big-data-chart2-sum">
              <span>报警数量</span>
              <span>{{sensorAlarmSum}}次</span>
            </div>
            <div class="big-data-chart2-sum">
              <span>解除报警数量</span>
              <span>{{sensorNoAlarmSum}}次</span>
            </div>
          </div>
          <div class="big-data-chart2-table-wrapper">
            <div class="big-data-chart2-table-title">
              <span class="big-data-chart2-table-title1">设备名称</span>
              <span class="big-data-chart2-table-title2">报警状态</span>
              <span class="big-data-chart2-table-title3">时间</span>
            </div>
            <div class="big-data-chart2-table-content-wrapper" style="height:20vh">
              <div>
                <div v-for="item in alarmContent" :key="item.alarmContent" class="big-data-chart2-table-content-item">
                  <span>{{item.alarmContent}}</span>
                  <span>{{item.canceled}}</span>
                  <span>{{item.alarmTime}}</span>
                </div>
              </div>
              
              <!-- <div class="big-data-chart2-table-content-item">
                <span>监视模块</span>
                <span>已解除</span>
                <span>2021-11-21</span>
              </div>
              <div class="big-data-chart2-table-content-item">
                <span>控制模块</span>
                <span style="color: red;">报警</span>
                <span>2021-11-11</span>
              </div> -->
            </div>
          </div>
        </div>
    </div>
    <div class="big-data4 big-data">
      <div class="big-data-title-wrapper">
        重大安全隐患统计
        <div class="big-data-title-dec"></div>
      </div>
      <div class="big-data-chart4"></div>
    </div>
    <div class="big-data6 big-data" style="display: flex; position: relative;">
      <div class="big-data-title-wrapper">
        生产风险统计
        <div class="big-data-title-dec"></div>
        
      </div>
      <div class="to-right-top-select">
        <el-select
          v-model="curChosenEnter"
          size="mini"
        >
          <el-option
            v-for="item in curEnterprises"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </div>
      <div class="big-data-chart6"></div>
    </div>
    <div class="big-data8 big-data">
      <div class="big-data-title-wrapper">
        区域生产风险统计
        <div class="big-data-title-dec"></div>
      </div>
      <div class="big-data-chart8"></div>
    </div>
  </div>
</template>

<script>
import { dept } from '@/api/index.js'
import { createInfoCard, analyzeEachMonthNum, analyzeEnterRiskNum, analyzeRegionRiskNum } from '@/api/operatePortrait.js'
export default {
  data() {
    return {
      curEnterprises: [],
      curChosenEnter: '山金白音呼布',
      isShowCurSelect: false,
      sensorAlarmSum: 0,
      sensorNoAlarmSum: 0,
      alarmContent: []
    }
  },
  async mounted() {
    await dept().then(res => {
      const toIndex = res.content.map(item => item.name).indexOf('测试企业')
      if (toIndex >= -1) {
        res.content.splice(toIndex, 1)
      }
      this.curEnterprises = [...res.content]
    })
    createInfoCard(this.$store.state.compony_info.id).then(res => {
      this.sensorAlarmSum = res.notCanceledNum
      this.sensorNoAlarmSum = res.canceledNum
      this.alarmContent = [...res.infoCardDtoAlarmDtos]
    })
    this.init4()
    this.init6()
    this.init8()
  },
  methods: {
    async init4() {
      let normalHD = []
      let majorHD = []
      let xAxisTime = []
      await analyzeEachMonthNum('一般隐患').then(res => {
        normalHD = [...res]
      })
      await analyzeEachMonthNum('重大隐患').then(res => {
        majorHD = [...res]
      })
      if (normalHD.length > majorHD.length) {
        xAxisTime = normalHD.map(item => item.ym)
      } else if (normalHD.length < majorHD.length) {
        xAxisTime = majorHD.map(item => item.ym)
      } else {
        xAxisTime = [...new Set([...normalHD.map(item => item.ym), ...majorHD.map(item => item.ym)])]
      }
      const targetDom = document.querySelector('.big-data-chart4');
      const mychart = echarts.init(targetDom)
      const option = {
        color: ["#E74C3C", "#F39C12", "#ECF0F1", "#9B59B6", "#2ECC71"],
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: '10%',
          top: '15%',
          bottom: '10%',
          right: '10%'
        },
        xAxis: {
          type: "category",
          name: '时间',
          nameTextStyle: {
            color: '#ffffff'
          },
          axisLabel: {
            color: "#FFF"
          },
          data: xAxisTime
        },
        yAxis: {
          type: "value",
          name: '隐患总量',
          axisLine: {
            show: false
          },
          nameTextStyle: {
            color: '#ffffff'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          },
          axisLabel: {
            color: "#fff"
          }
        },
        series: [
          {
            name: '一般隐患',
            type: 'bar',
            stack: 'total',
            data: normalHD.map(item => item.num)
          },
          {
            name: '重大隐患',
            type: 'bar',
            stack: 'total',
            data: majorHD.map(item => item.num)
          }
        ]
      }
      mychart.setOption(option)
    },
    async init6() {
      await analyzeEnterRiskNum(this.curEnterprises.filter(item => item.name === this.curChosenEnter)[0].id).then(res => {
        console.log(res, 'ananlyzeEnterRiskNum _____________ analyzeEnterRiskNum')
        let lowNum = res.riskBlueNum
        let generalNum = res.riskYellowNum
        let greaterNum = res.riskOrangeNum
        let majorNum = res.riskRedNum
        let totalNum = res.totalNum
        
        const targetDom = document.querySelector('.big-data-chart6')
        const mychart = echarts.init(targetDom)
        mychart.clear();
        const option = {
          title: {
              text: "总数量",
              subtext: "" + totalNum,
              left: "center",
              top: "40%",
              textStyle: {
                color: "#F88F12",
                fontSize: "20"
              },
              subtextStyle: {
                color: "#F88F12",
                fontSize: "20"
              }
            },
            tooltip: {
              trigger: "item"
            },
            legend: {
              show: false
            },
            series: [
              {
                type: "pie",
                radius: ["40%", "78%"],
                avoidLabelOverLap: true,
                data: [
                  {
                    value: lowNum,
                    name: "低风险",
                    itemStyle: {
                      color: "#057AFD"
                    }
                  },
                  {
                    value: generalNum,
                    name: "一般风险",
                    itemStyle: {
                      color: "#FEFA03"
                    }
                  },
                  {
                    value: greaterNum,
                    name: "较大风险",
                    itemStyle: {
                      color: "#F88F12"
                    }
                  },
                  {
                    value: majorNum,
                    name: "重大风险",
                    itemStyle: {
                      color: "#FF414B"
                    }
                  },
                ],
                label: {
                  align: "left",
                  normal: {
                    formatter(v) {
                      return `${v.name}\n${v.value}`;
                    },
                    textStyle: {
                      fontSize: 16
                    }
                  }
                },
                labelLine: {
                  length: 3,
                  length2: 10
                }
              }
            ]
        }
        mychart.setOption(option)
      })
      console.log(this.curChosenEnter, 'this.curChosenEnter this.curChosenEnter')
      console.log(this.curEnterprises, 'this.curEnterprises this.curEnterprises')

    },
    async init8() {
      await analyzeRegionRiskNum().then(res => {
        console.log(res, 'analyzeRegionRiskNum _____ annlyzeRegionRiskNum')
        let lowNum = res.riskBlueNum
        let generalNum = res.riskYellowNum
        let greaterNum = res.riskOrangeNum
        let majorNum = res.riskRedNum
        let totalNum = res.totalNum
        const targetDom = document.querySelector('.big-data-chart8')
        const mychart = echarts.init(targetDom)
        const option = {
          title: {
              text: "总数量",
              subtext: "" + totalNum,
              left: "center",
              top: "40%",
              textStyle: {
                color: "#F88F12",
                fontSize: "20"
              },
              subtextStyle: {
                color: "#F88F12",
                fontSize: "20"
              }
            },
            tooltip: {
              trigger: "item"
            },
            legend: {
              show: false
            },
            series: [
              {
                type: "pie",
                radius: ["40%", "78%"],
                avoidLabelOverLap: true,
                data: [
                  {
                    value: lowNum,
                    name: "低风险",
                    itemStyle: {
                      color: "#057AFD"
                    }
                  },
                  {
                    value: generalNum,
                    name: "一般风险",
                    itemStyle: {
                      color: "#FEFA03"
                    }
                  },
                  {
                    value: greaterNum,
                    name: "较大风险",
                    itemStyle: {
                      color: "#F88F12"
                    }
                  },
                  {
                    value: majorNum,
                    name: "重大风险",
                    itemStyle: {
                      color: "#FF414B"
                    }
                  },
                ],
                label: {
                  align: "left",
                  normal: {
                    formatter(v) {
                      return `${v.name}\n${v.value}`;
                    },
                    textStyle: {
                      fontSize: 16
                    }
                  }
                },
                labelLine: {
                  length: 3,
                  length2: 10
                }
              }
            ]
        }
        mychart.setOption(option)
      })
    }
  },
  watch: {
    curChosenEnter(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init6()
      }
    }
  }
}
</script>

<style scoped>
/* /deep/ .el-input__inner {
  border: none;
  background: rgba(0, 182, 255, 0);
  color: #00ffff;
  font-size: 20px;
  font-family: "SourceHanSansCN-Regular";
}
/deep/ input.el-input__inner::-webkit-input-placeholder {
  padding-left: 1px;
  color: #00ffff;
  font-size: 20px;
  font-family: "SourceHanSansCN-Regular";
} */
</style>
<style lang="scss">
.big-data2 {
  height: 33.33%;
  overflow: hidden;
}
  .to-right-top-select {
    position: absolute;
    right: 0;
    top: 0;
    width:118px;
    height: 56px;
  }

  .big-data-right-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 21vw;;
    height: 90vh;
    display: flex;
    flex-direction: column;
    color: #05D6EC;
    z-index: 1000;
    background: #040624;
    > div {
      flex-basis: 25%;
    }
  }
  .big-data-title-wrapper {
    position: relative;
    font-family: "SourceHanSansCN-Medium";
    color: aqua;
    font-size: 16px;
    font-weight: bold;
    /* background: -webkit-gradient(linear, left bottom, left top, color-stop(23.583984375%, #3fffea), to(#007eff)); */
    background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 80px;
    padding-top: 5px;
    .big-data-title-dec {
      position: absolute;
      left: 5px;
      top: 5px;
      width: 53px;
      height: 21px;
      background-repeat: no-repeat;
      background-image: url('../../assets/images/dec4.png');
      transform: scale(0.75);
    }
  }
  .big-data {
  display: flex;
  flex-direction: column;
  .big-data-chart1 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    .alarm-sum-wrapper {
      display: flex;
      justify-content: space-around;
      border: 1px solid #3FFFEA;
      box-shadow: inset 0 8px 19px -7px #3fffea;
      padding: 5px;
      margin: 3px 10px;
      font-size: 18px;
    }
    .big-data-chart1-alarm1 {
      flex-grow: 1;
    }
  }
  .big-data-chart2 {
    .big-data-chart2-alarm-sum2 {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      border: 1px solid #3FFFEA;
      box-shadow: inset 0 8px 19px -7px #3fffea;
      padding: 5px;
      margin: 3px 10px;
      .big-data-chart2-sum {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        span {
          &:first-child {
            color: #7BB8C2;
            font-size: 14px;
          }
          &:last-child {
            color: #00FCFF;
            font-size: 18px;
            margin-left: 20px;
          }
        }
      }
    }
    .big-data-chart2-table-wrapper {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      text-align: center;
      .big-data-chart2-table-title {
        display: flex;
        color: #019AEF;
        .big-data-chart2-table-title1 {
          flex-basis: 42%;
        }
        .big-data-chart2-table-title2 {
          flex-basis: 26%;
        }
        .big-data-chart2-table-title3 {
          flex-basis: 32%;
        }
      }
      .big-data-chart2-table-content-wrapper {
        flex-grow: 1;
        overflow-y: scroll;
        &::-webkit-scrollbar {
          display: none;
        }
        .big-data-chart2-table-content-item {
          display: flex;
          color: white;
          background-color: rgba(32, 47, 88, .8);
          padding: 2px;
          margin: 2px 10px;
          span {
            &:nth-child(1) {
              flex-basis: 42%;
            }
            &:nth-child(2) {
              flex-basis: 26%;
            }
            &:nth-child(3) {
              flex-basis: 32%;
            }
          }
        }
      }
    }
  }
  .big-data-chart3 {
    flex-grow: 1;
  }
  .big-data-chart4 {
    flex-grow: 1;
  }
  .big-data-chart5 {
    flex-grow: 1;
  }
  .big-data-chart6 {
    flex-grow: 1;
  }
  .big-data-chart7 {
    flex-grow: 1;
  }
  .big-data-chart8 {
    flex-grow: 1;
  }
  }
  .showEnters {
    position: relative;
    background: #05145B;
    max-height: 20px;
    max-width: 56px;
    overflow: visible;
    .show-enter-result {
      font-size: 14px;
      color: #00ffff;
      cursor: pointer;
      background: #05145B;
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        pointer-events: none;
        background-image: url('../../assets/images/三角下.png');
        background-position: center;
      }
    }
    .show-enters-drop-down {
      position: absolute;
      top: 20px;
      left: 5px;
      border: 1px solid black;
      background: white;
      color: black;
      .show-enters-item-wrapper {
        margin: 3px auto;
        font-size: 14px;
      }
    }
  }
</style>