<template lang="pug">
el-container(style="padding: 0px; height: 77.6vh")
  el-header(
    style="height: 42px; line-height: 42px; border: 1px solid rgba(195, 195, 195, 1); background: #f4f4f4"
  )
    span.title-bold
    el-select(v-model="mapId" size="mini"  @change="handleChange")
      el-option(v-for="(item,index) in mapList" :key="index" :label="item.stationName +'-'+item.name" :value="item.id")
  el-main.box_main
    el-row(:gutter="20")
      el-col(
        :span="3 * item.list.length",
        v-for="(item, index) in dataList",
        :key="index",
        style="margin-bottom: 20px"
      )
        card-warp(:title="item.name", height="35px")
          div(slot="content")
            el-row(typr="flex", justify="center", :gutter="20")
              el-col(:span="24 / item.list.length", v-for="child in item.list")
                card-warp(
                  :title="child.leftName",
                  height="35px",
                  bgcolor="#f5f5f5"
                )
                  div(slot="right")
                    | {{ child.rightName }}
                  div(slot="content")
                    .content_warp
                      div(:class="child.type")
                      div.value(:style="{color:child.over?'red':'#10cc2e'}") {{ child.value }}
                      .scope {{ child.scope }}
</template>

<script>
export default {
  data() {
    return {
      mapId: '',
      mapList: [],
      thresholdList: [],
      dataList: []
    }
  },
  computed: {
    // 类型列表
    // typeList() {
    //   return this.$store.state.d2admin.typeList
    // },
    fsyList() {
      return this.$store.state.d2admin.typeList.typeList.fsyList
    },
    fyyList() {
      return this.$store.state.d2admin.typeList.typeList.fyyList
    },
    hjtcqList() {
      return this.$store.state.d2admin.typeList.typeList.hjtcqList
    },
    lljList() {
      return this.$store.state.d2admin.typeList.typeList.lljList
    },
    wxyljList() {
      return this.$store.state.d2admin.typeList.typeList.wxyljList
    },
    wxywyList() {
      return this.$store.state.d2admin.typeList.typeList.wxywyList
    }
  },
  watch: {
    fsyList: {
      handler(n, o) {
        if (n) {
          this.setDataList()
        }
      },
      deep: true
    },
    fyyList: {
      handler(n, o) {
        if (n) {
          this.setDataList()
        }
      },
      deep: true
    },
    hjtcqList: {
      handler(n, o) {
        if (n) {
          this.setDataList()
        }
      },
      deep: true
    },
    lljList: {
      handler(n, o) {
        if (n) {
          this.setDataList()
        }
      },
      deep: true
    },
    wxyljList: {
      handler(n, o) {
        if (n) {
          this.setDataList()
        }
      },
      deep: true
    },
    wxywyList: {
      handler(n, o) {
        if (n) {
          this.setDataList()
        }
      },
      deep: true
    }
  },
  created() {
    this.getThresholdList()
    this.getMapList()
  },
  methods: {
    getMapList() {
      this.$http({
        url: this.$http.adornUrl(`/liStationMap/list`),
        method: 'post',
        data: {}
      })
        .then((data) => {
          if (data && data.code === 0) {
            this.mapList = data.list
            console.log('111111---', this.mapList)
            this.mapId = this.mapList[0].id
            console.log('222222---', this.mapId)
          }
        })
        .then(() => {
          this.getDataList()
        })
    },
    getThresholdList() {
      this.$http({
        url: this.$http.adornUrl(`/sysThreshold/list`),
        method: 'post',
        params: this.$http.adornParams({})
      }).then((data) => {
        if (data && data.code === 0) {
          this.thresholdList = data.list
          this.thresholdList.forEach((element) => {
            if (element.unit === 1) {
              element.unit = 'MPa'
            } else if (element.unit === 2) {
              element.unit = '%RH'
            } else if (element.unit === 3) {
              element.unit = '°C'
            } else if (element.unit === 4) {
              element.unit = 'PPM'
            } else if (element.unit === 5) {
              element.unit = 'm3/h'
            } else if (element.unit === 6) {
              element.unit = 'cm'
            } else if (element.unit === 7) {
              element.unit = 'm/s'
            } else if (element.unit === 8) {
              element.unit = 'pa'
            }
          })
          console.log('3333333---', this.thresholdList)
        } else {
          this.thresholdList = []
        }
      })
    },
    handleChange(res) {
      console.log('333333---', res)
      this.mapId = res

      this.getDataList()
    },
    getDataList() {
      this.dataList = []
      this.$http({
        url: this.$http.adornUrl('/liResource/getKanBanList'),
        method: 'post',
        data: {
          tierId: this.mapId //场景id
        }
      }).then((data) => {
        if (data && data.code === 0) {
          console.log('数据', data)
          data.list.forEach((e) => {
            let item = {
              id: '',
              name: '',
              list: []
            }
            let list = []
            e.list.forEach((el) => {
              let newThresholdList = this.thresholdList.filter(
                (res) => res.dicId === e.id
              )
              newThresholdList.forEach((element) => {
                list.push({
                  id: el.id,
                  leftName: el.resourceName,
                  rightName: element.typeName,
                  type: element.code,
                  value: '无',
                  scope:
                    '参考值：' +
                    element.minValue +
                    '~' +
                    element.maxValue +
                    ' ' +
                    element.unit
                })
              })
              console.log('list:', list)
            })
            item.id = e.id
            item.name = e.name
            item.list = list
            this.dataList.push(item)
          })
          console.log('dataList:', this.dataList)
          this.setDataList()
        }
      })
    },
    setDataList() {
      // console.log('wxyljList:', this.wxyljList)
      // console.log('hjtcqList:', this.hjtcqList)
      // console.log('lljList:', this.lljList)
      // console.log('wxywyList:', this.wxywyList)
      // console.log('fsyList:', this.fsyList)
      // console.log('fyyList:', this.fyyList)
      for (var i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].id === 'b47661ca1d454f9792ba5369f3cb2bc5') {
          //无线压力计
          this.dataList[i].list.forEach((element) => {
            if (this.wxyljList) {
              this.wxyljList.forEach((e) => {
                if (element.id === e.resource_id) {
                  element.value = e.water_pressure + 'MPa'
                }
              })
            }
          })
        } else if (this.dataList[i].id === 'c788ce98c1f248f590434394da485ce4') {
          //4合1环境探测器
          this.dataList[i].list.forEach((element) => {
            if (this.hjtcqList) {
              this.hjtcqList.forEach((e) => {
                if (element.id === e.resource_id) {
                  if (element.rightName === '温度') {
                    element.value = e.temperature + '°C'
                  } else if (element.rightName === '湿度') {
                    element.value = e.humidity + '%RH'
                  } else if (element.rightName === '一氧化碳') {
                    element.value = e.carbon_monoxide + 'PPM'
                  } else if (element.rightName === '二氧化碳') {
                    element.value = e.carbon_dioxide + 'PPM'
                  }
                }
              })
            }
          })
        } else if (this.dataList[i].id === 'b45827c068254695864ee3c1d42573cb') {
          //流量计
          this.dataList[i].list.forEach((element) => {
            if (this.lljList) {
              this.lljList.forEach((e) => {
                if (element.id === e.resource_id) {
                  element.value = e.flow_rate + 'm3/h'
                }
              })
            }
          })
        } else if (this.dataList[i].id === '303310efddb34a2e9bf269bdff8a7dc5') {
          //无线液位仪
          this.dataList[i].list.forEach((element) => {
            if (this.wxywyList) {
              this.wxywyList.forEach((e) => {
                if (element.id === e.resource_id) {
                  element.value = e.gauge_height + 'cm'
                }
              })
            }
          })
        } else if (this.dataList[i].id === 'f4c840711eae4bcb9536a890cdfda493') {
          //风速仪
          this.dataList[i].list.forEach((element) => {
            if (this.fsyList) {
              this.fsyList.forEach((e) => {
                if (element.id === e.resource_id) {
                  element.value = e.wind_speed + 'm/s'
                }
              })
            }
          })
        } else if (this.dataList[i].id === '5b26f6c8f2a143048bd0e327ca5c186d') {
          //风压仪
          this.dataList[i].list.forEach((element) => {
            if (this.fyyList) {
              this.fyyList.forEach((e) => {
                if (element.id === e.resource_id) {
                  element.value = e.wind_pressure + 'pa'
                }
              })
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content_warp {
  display: flex;
  flex-direction: column;
  align-items: center;
  .value {
    margin: 5px;
  }
  .scope {
    color: #a0a0a0;
    font-size: 13px;
  }
  .co2 {
    width: 100px;
    height: 75px;
    background: url('~@/assets/images/imgs/co2.png') no-repeat;
    background-size: 100% 100%;
  }
  .co2h {
    width: 100px;
    height: 75px;
    background: url('~@/assets/images/imgs/co2h.png') no-repeat;
    background-size: 100% 100%;
  }
  .co {
    width: 73px;
    height: 75px;
    background: url('~@/assets/images/imgs/co.png') no-repeat;
    background-size: 100% 100%;
  }
  .coh {
    width: 73px;
    height: 75px;
    background: url('~@/assets/images/imgs/coh.png') no-repeat;
    background-size: 100% 100%;
  }
  .swgd {
    width: 65px;
    height: 75px;
    background: url('~@/assets/images/imgs/swgd.png') no-repeat;
    background-size: 100% 100%;
  }
  .swgdh {
    width: 65px;
    height: 75px;
    background: url('~@/assets/images/imgs/swgdh.png') no-repeat;
    background-size: 100% 100%;
  }
  .wd {
    width: 57px;
    height: 75px;
    background: url('~@/assets/images/imgs/wd.png') no-repeat;
    background-size: 100% 100%;
  }
  .wdh {
    width: 57px;
    height: 75px;
    background: url('~@/assets/images/imgs/wdh.png') no-repeat;
    background-size: 100% 100%;
  }
  .slll {
    width: 65px;
    height: 75px;
    background: url('~@/assets/images/imgs/slll.png') no-repeat;
    background-size: 100% 100%;
  }
  .slllh {
    width: 65px;
    height: 75px;
    background: url('~@/assets/images/imgs/slllh.png') no-repeat;
    background-size: 100% 100%;
  }
  .slyl {
    width: 65px;
    height: 75px;
    background: url('~@/assets/images/imgs/slyl.png') no-repeat;
    background-size: 100% 100%;
  }
  .slylh {
    width: 65px;
    height: 75px;
    background: url('~@/assets/images/imgs/slylh.png') no-repeat;
    background-size: 100% 100%;
  }
  .sd {
    width: 65px;
    height: 75px;
    background: url('~@/assets/images/imgs/sd.png') no-repeat;
    background-size: 100% 100%;
  }
  .sdh {
    width: 65px;
    height: 75px;
    background: url('~@/assets/images/imgs/sdh.png') no-repeat;
    background-size: 100% 100%;
  }
  .fs {
    width: 61px;
    height: 75px;
    background: url('~@/assets/images/imgs/fs.png') no-repeat;
    background-size: 100% 100%;
  }
  .fsh {
    width: 61px;
    height: 75px;
    background: url('~@/assets/images/imgs/fsh.png') no-repeat;
    background-size: 100% 100%;
  }
  .fy {
    width: 72px;
    height: 75px;
    background: url('~@/assets/images/imgs/fy.png') no-repeat;
    background-size: 100% 100%;
  }
  .fyh {
    width: 72px;
    height: 75px;
    background: url('~@/assets/images/imgs/fyh.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>
