<template>
  <div style="padding: 6px">
    <div>
      <button-group @change="changeHandler">
        <button-group-item>
          <span style="color: #79e7ff"> 火灾起数</span>
        </button-group-item>
        <button-group-item>
          <span style="color: #79e7ff"> 死亡人数 </span>
        </button-group-item>
      </button-group>
    </div>
    <div>
      <div class="row header">
        <span class="type">序号</span>
        <span class="count">区县</span>
        <span class="time">{{ ["火灾总数", "死亡人数"][idx] }}</span>
        <span class="unit">同比</span>
      </div>
      <VueSeamlessScroll
        v-if="reload"
        :data="list"
        :class-option="classOption"
        class="warp"
      >
        <ul class="item">
          <li
            class="row"
            :class="{
              active: item.isActive,
            }"
            v-for="(item, index) in list"
            :key="index"
            @click="openBasicModal1(item)"
          >
            <span class="type">{{ index + 1 }}</span>
            <span class="count">{{ item.qx }}</span>
            <span class="time">{{ [item.bnhzqs, item.bnwrs][idx] }}</span>
            <span class="unit"
              >{{ [item.hzPercent, item.wrPercent][idx] }}
              <img
                v-if="[item.hzIcon, item.wrIcon][idx]"
                :src="[item.hzIcon, item.wrIcon][idx]"
                alt=""
              />
            </span>
          </li>
        </ul>
      </VueSeamlessScroll>
    </div>
    <basic-modal top="120px" ref="basicInfoModal1" name="历史火灾查询">
      <hzfbCont :qy="units" />
    </basic-modal>
  </div>
</template>

<script>
import VueSeamlessScroll from "vue-seamless-scroll";
import upIcon from "../../../assets/images/up-icon.svg";
import downIcon from "../../../assets/images/down-icon.svg";
import { fireDistribution } from "@/api/hzfx";
import { toFirst } from "@/utils";
import hzfbCont from "./hzfbCont.vue";

export default {
  name: "FireDistribution",
  components: {
    VueSeamlessScroll,
    hzfbCont,
  },
  props: {
    qx: String,
  },
  data() {
    return {
      idx: 0,
      list: [],
      reload: true,
      units: "",
    };
  },
  created() {
    this.loadData();
  },
  watch: {
    qx() {
      this.loadData();
    },
  },
  methods: {
    changeHandler(idx) {
      this.idx = idx;
      this.list = toFirst(this.sortData(this.list), this.qx, "qx");
    },
    getPercent(bn, tq) {
      if (bn - tq === 0) {
        return "—";
      }
      if (tq === 0) {
        return "—";
      }
      return `${parseInt((Math.abs(bn - tq) / tq).toFixed(2) * 100)}%`;
    },
    getIcon(bn, tq) {
      if (tq === 0) {
        return null;
      }
      if (bn - tq > 0) {
        return upIcon;
      } else if (bn - tq < 0) {
        return downIcon;
      } else {
        return null;
      }
    },
    sortData(tempData) {
      const sub1 = tempData
        .filter((item) => {
          if (this.idx === 0) {
            return item.hzIcon === upIcon;
          } else {
            return item.wrIcon === upIcon;
          }
        })
        .sort(
          (a, b) =>
            parseInt(b.hzPercent.replace("%", "")) -
            parseInt(a.hzPercent.replace("%", ""))
        );
      const sub2 = tempData.filter((item) => {
        if (this.idx === 0) {
          return item.hzIcon === null;
        } else {
          return item.wrIcon === null;
        }
      });
      const sub3 = tempData
        .filter((item) => {
          if (this.idx === 0) {
            return item.hzIcon === downIcon;
          } else {
            return item.wrIcon === downIcon;
          }
        })
        .sort(
          (a, b) =>
            parseInt(a.hzPercent.replace("%", "")) -
            parseInt(b.hzPercent.replace("%", ""))
        );
      return [...sub1, ...sub2, ...sub3];
    },
    loadData() {
      this.reload = false;
      fireDistribution({
        pageSize: 100,
        pageNum: 1,
      }).then((res) => {
        let tempData = res.data.rows.map((item) => ({
          ...item,
          hzPercent: this.getPercent(item.bnhzqs, item.tqhzqs || 0),
          wrPercent: this.getPercent(item.bnwrs, item.tqwrs || 0),
          hzIcon: this.getIcon(item.bnhzqs, item.tqhzqs || 0),
          wrIcon: this.getIcon(item.bnwrs, item.tqwrs || 0),
          isActive: item.qx === this.qx,
        }));
        this.list = toFirst(this.sortData(tempData), this.qx, "qx");
        this.reload = true;
      });
    },
    openBasicModal1(val) {
      this.units = val.qx;
      this.showModal("basicInfoModal1");
    },
  },
  computed: {
    classOption() {
      return {
        singleHeight: 51,
        autoPlay: this.qx === "重庆市",
      };
    },
  },
};
</script>

<style scoped lang="less">
.warp {
  height: 521px;
  margin: 0 auto;
  overflow: hidden;
  .item {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
  }
}

.header {
  color: #61dbff !important;
  height: 38px !important;
  background-color: rgba(0, 163, 255, 0.3) !important;
  margin-top: 2px;
  letter-spacing: 1px;
  .is_notice {
    line-height: 19px;
    font-size: 10px;
  }
}

li.row > span {
  text-align: center;
  font-size: 14x;
  position: relative;
  display: inline-block;
}

li.row.active {
  background-color: rgba(0, 213, 255, 0.2);
}

li.row {
  box-sizing: border-box;
}

.row,
li,
a {
  display: block;
  height: 46px;
  line-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  margin-top: 5px;
  .time,
  .type,
  .count,
  .unit {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0.25;
    img {
      display: inline-block;
      width: 11px;
      height: 16px;
      margin-left: 5px;
    }
  }
  .count {
    text-align: center;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis !important; // 超出隐藏
    white-space: nowrap;
  }
  .time {
    color: #61dbff;
  }
}
</style>
