<template>
  <div>
    <div class="fire-list">
    <!-- 火灾总数 -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">{{ staticData.hz }}</span>
          <span>起</span>
        </div>
        <div>火灾总数</div>
      </div>
      <div>
        <img v-if="staticData.hzState === 1" src="../../../../assets/images/Vector (1).png" alt="" />
        <img v-if="staticData.hzState === -1" src="../../../../assets/images/Vector (2).png" alt="" />
        <span class="num" :class="{
          up: staticData.hzState === 1,
          down: staticData.hzState === -1,
        }">{{ staticData.hzP }}</span>
      </div>
    </div>
    <!--亡人  -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">{{ staticData.wr }}</span>
          <span>人</span>
        </div>
        <div>亡人</div>
      </div>
      <div>
        <img v-if="staticData.wrState === 1" src="../../../../assets/images/Vector (1).png" alt="" />
        <img v-if="staticData.wrState === -1" src="../../../../assets/images/Vector (2).png" alt="" />
        <span class="num" :class="{
          up: staticData.wrState === 1,
          down: staticData.wrState === -1,
        }">{{ staticData.wrP }}</span>
      </div>
    </div>
    <!-- 伤人 -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">{{ staticData.ss }}</span>
          <span>人</span>
        </div>
        <div>伤人</div>
      </div>
      <div>
        <img v-if="staticData.ssState === 1" src="../../../../assets/images/Vector (1).png" alt="" />
        <img v-if="staticData.ssState === -1" src="../../../../assets/images/Vector (2).png" alt="" />
        <span class="num" :class="{
          up: staticData.ssState === 1,
          down: staticData.ssState === -1,
        }">{{ staticData.ssP }}</span>
      </div>
    </div>
    <!-- 直接经济损失 -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">{{ staticData.jjss }}</span>
          <span class="money">万元</span>
          <img v-if="staticData.jjssState === 1" src="../../../../assets/images/Vector (1).png" alt="" />
          <img v-if="staticData.jjssState === -1" src="../../../../assets/images/Vector (2).png" alt="" />
          <span class="num"  :class="{
          up: staticData.jjssState === 1,
          down: staticData.jjssState === -1,
        }" >{{ staticData.jjssP }}</span>
        </div>
        <div class="manoue">直接经济损失</div>
      </div>
      <!-- <div>
        <img src="../../../assets/images/Vector (1).png" alt="">
        <span class="num">15%</span>
      </div> -->
    </div>
    </div>
    <div class="charts">
      <div class="top_title">
        <div>{{ unitLabel }}</div>
        <ul class="options">
          <li :class="{
            item: true,
            active: activeIndexState(index)
          }"  @click="activeIndex = index" v-for="(item, index) in activeItems" :key="index">{{ item.name }}</li>
        </ul>
      </div>
      <div>
        <KeyChart :items="data[this.activeIndex]" />
      </div>
    </div>
  </div>
</template>

<script>
import KeyChart from './KeyChart.vue'
import { fireKeyIndexStaticis, fireKeyIndexChart } from '@/api/hzfx'
import { calcPercent, getState } from '@zhgkpt/utils'
export default {
  name: 'KeyIndex',
  components: {
    KeyChart
  },
  props: {
    qx: String
  },
  computed: {
    unitLabel() {
      return this.unitLabels[this.activeIndex]
    },
  },
  data() {
    return {
      activeItems: [
        {name: '火灾总数'},
        {name: '亡人'},
        {name: '伤人'},
        {name: '直接经济损失'}
      ],
      activeIndex: 0,
      unitLabels: ["起", "人", "人", "万元"],
      data: [
        [
            {
                "name": "一月",
                "value": 120
            },
            {
                "name": "二月",
                "value": 200
            },
            {
                "name": "三月",
                "value": 150
            },
            {
                "name": "四月",
                "value": 80
            },
            {
                "name": "五月",
                "value": 110
            },
            {
                "name": "六月",
                "value": 130
            },
            {
                "name": "七月",
                "value": 30
            },
            {
                "name": "八月",
                "value": 210
            },
            {
                "name": "九月",
                "value": 220
            },
            {
                "name": "十月",
                "value": 123
            },
            {
                "name": "十一月",
                "value": 234
            },
            {
                "name": "十二月",
                "value": 70
            }],
        [ {
                "name": "一月",
                "value": 1
            },
            {
                "name": "二月",
                "value": 3
            },
            {
                "name": "三月",
                "value": 2
            },
            {
                "name": "四月",
                "value": 5
            },
            {
                "name": "五月",
                "value": 5
            },
            {
                "name": "六月",
                "value": 6
            },
            {
                "name": "七月",
                "value": 7
            },
            {
                "name": "八月",
                "value": 8
            },
            {
                "name": "九月",
                "value": 3
            },
            {
                "name": "十月",
                "value": 3
            },
            {
                "name": "十一月",
                "value": 2
            },
            {
                "name": "十二月",
                "value": 1
            }],
        [ {
                "name": "一月",
                "value": 12
            },
            {
                "name": "二月",
                "value": 32
            },
            {
                "name": "三月",
                "value": 23
            },
            {
                "name": "四月",
                "value": 12
            },
            {
                "name": "五月",
                "value": 12
            },
            {
                "name": "六月",
                "value": 12
            },
            {
                "name": "七月",
                "value": 11
            },
            {
                "name": "八月",
                "value": 18
            },
            {
                "name": "九月",
                "value": 19
            },
            {
                "name": "十月",
                "value": 2
            },
            {
                "name": "十一月",
                "value": 4
            },
            {
                "name": "十二月",
                "value": 6
            }],
        [ {
                "name": "一月",
                "value": 7
            },
            {
                "name": "二月",
                "value": 54
            },
            {
                "name": "三月",
                "value": 43
            },
            {
                "name": "四月",
                "value": 23
            },
            {
                "name": "五月",
                "value": 11
            },
            {
                "name": "六月",
                "value": 12
            },
            {
                "name": "七月",
                "value": 34
            },
            {
                "name": "八月",
                "value": 56
            },
            {
                "name": "九月",
                "value": 78
            },
            {
                "name": "十月",
                "value": 98
            },
            {
                "name": "十一月",
                "value": 23
            },
            {
                "name": "十二月",
                "value": 43
            }],
        [ {
                "name": "一月",
                "value": 43
            },
            {
                "name": "二月",
                "value": 34
            },
            {
                "name": "三月",
                "value": 56
            },
            {
                "name": "四月",
                "value": 78
            },
            {
                "name": "五月",
                "value": 23
            },
            {
                "name": "六月",
                "value": 24
            },
            {
                "name": "七月",
                "value": 25
            },
            {
                "name": "八月",
                "value": 26
            },
            {
                "name": "九月",
                "value": 45
            },
            {
                "name": "十月",
                "value": 12
            },
            {
                "name": "十一月",
                "value": 11
            },
            {
                "name": "十二月",
                "value": 22
            }]
      ],
      staticData: {},
      month: {
        '01': '一',
        '02': '二',
        '03': '三',
        '04': '四',
        '05': '五',
        '06': '六',
        '07': '七',
        '08': '八',
        '09': '九',
        '10': '十',
        '11': '十一',
        '12': '十二'
      }
    }
  },
  methods: {
    activeIndexState(index) {
      return this.activeIndex === index
    },
    loadData() {
      fireKeyIndexStaticis({
        pageNum: 1,
        pageSize: 100,
        xzqy: (this.qx === '重庆市' ? "" : this.qx)
      }).then(res => {
        const data = res.data.rows[0]
        this.staticData = {
          hz: data.yn,
          wr: data.ynwrs,
          ss: data.ynsss,
          jjss: parseInt((data.ynzjccss / 10000).toFixed(2)),
          hzP: calcPercent(data.yn, data.tqyn),
          wrP: calcPercent(data.ynwrs, data.tqynwrs),
          ssP: calcPercent(data.ynsss, data.tqynsss),
          jjssP: calcPercent(data.ynzjccss, data.tqynzjccss),
          hzState: getState(data.yn, data.tqyn),
          wrState:  getState(data.ynwrs, data.tqynwrs),
          ssState:  getState(data.ynsss, data.tqynsss),
          jjssState:  getState(data.ynzjccss, data.tqynzjccss),
        }
      })
      fireKeyIndexChart({
        pageNum: 1,
        pageSize: 12,
        qx: (this.qx === "重庆市" ? "" : this.qx)
      }).then(res => {
        const keys = Object.keys(this.month).sort((a,b) => parseInt(a) - parseInt(b))
        console.log(keys)
        const ret = res.data.rows
        this.data = [
          keys.map(item => {
            let temp = ret.find(i => i.yf == item)
            return temp ? { name: `${this.month[item]}月`, value: temp.hzqs } : { name: `${this.month[item]}月`, value: 0 }
          }),
          keys.map(item => {
            let temp = ret.find(i => i.yf == item)
            return temp ? { name: `${this.month[item]}月`, value: temp.wrs } : { name: `${this.month[item]}月`, value: 0 }
          }),
          keys.map(item => {
            let temp = ret.find(i => i.yf == item)
            return temp ? { name: `${this.month[item]}月`, value: temp.sss } : { name: `${this.month[item]}月`, value: 0 }
          }),
          keys.map(item => {
            let temp = ret.find(i => i.yf == item)
            return temp ? { name: `${this.month[item]}月`, value: parseInt(temp.zjccss / 10000) } : { name: `${this.month[item]}月`, value: 0 }
          })
        ]
        console.log(this.data)
      })
    }
  },
  watch: {
    qx() {
      this.loadData();
    }
  },
  created() {
    this.loadData();
    setInterval(() => {
      this.activeIndex = this.activeIndex + 1 >= this.activeItems.length ? 0 : this.activeIndex + 1
    }, 10 * 1000)
  }
}
</script>

<style lang="less" scoped>
.charts {
  .top_title {
    display: flex;
    justify-content: space-between;
    margin-left: 30px;
  }
  .options {
    list-style: none;
    display: flex;
    gap: 13px;
    padding: 2px 4px;
    justify-content: end;
    .item {
      color: #828a93;
      font-size: 12px;
      cursor: pointer;
    }
    .active {
      color: #00E0FF;
    }
  }
}
.fire-list {
  display: flex;
  justify-content: space-around;
  margin: 14px 2px 10px 5px;
  letter-spacing: 1px;
}
// 渐变
.fire {
  width: 105px;
  height: 40px;
  background: transparent;
  font-size: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 3px 0;
  border-radius: 2px;
  .fire-num {
    color: #ffbf1a;
    font-size: 20px;
  }
  .num {
    font-size: 16px;
  }
  .num.up {
    color: #fb3636;
  }
  .num.down {
    color: #19f34b;
  }
}
img {
  display: inline-block;
  width: 10px;
  height: 20px;
}
.manoue {
  font-size: 12px !important;
  margin-right: 10px;
}
.money {
  margin-right: 5px;
}
</style>
