<template>
  <div class="regional-distribution">
    <div>
      <el-select v-model="selectOption" style="width: 100%" size="mini">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <div class="row header">
        <span class="idx">序号</span>
        <span class="area">区域</span>
        <span class="build">建筑数量（栋）</span>
        <span class="tim">终端数量（个）</span>
        <span class="percent">覆盖率</span>
      </div>
      <VueSeamlessScroll v-if="reload" :data="list" :class-option="classOption" class="warp">
        <ul class="item">
          <li class="row" :class="{
            active: item[4]
          }" v-for="(item, index) in list" :key="index">
            <span class="idx">{{ index + 1 }}</span>
            <span class="area">{{ item[0] }}</span>
            <span class="build">{{ item[1] }}</span>
            <span class="tim">{{ item[2] }}</span>
            <span class="percent">{{ item[3] }}</span>
          </li>
        </ul>
      </VueSeamlessScroll>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from "vue-seamless-scroll";
import { getRank } from "@/api/iot.js";
import { toFirst } from "../../../utils";
export default {
  name: "RegionalDistribution",
  components: {
    VueSeamlessScroll,
  },
  props: ["qx"],
  data() {
    return {
      list: [
        // ["万州区", "1200", 8765, "23%"],
        // ["万州区", "1200", 8765, "23%"],
        // ["万州区", "1200", 8765, "23%"],
        // ["万州区", "1200", 8765, "23%"],
        // ["万州区", "1200", 8765, "23%"],
        // ["万州区", "1200", 8765, "23%"],
        // ["万州区", "1200", 8765, "23%"],
        // ["万州区", "1200", 8765, "23%"],
        // ["万州区", "1200", 8765, "23%"],
      ],
      options: [
        { label: "已建物联网排名", value: "wlw" },
        { label: "已建物水压监测排名", value: "sy" },
        { label: "已建电器火灾检测排名", value: "dq" },
        { label: "已建消防通道检测排名", value: "smtd" },
        { label: "已建火灾报警主机监测排名", value: "hz" },
        { label: "已建消防控制室人员离岗监控排名", value: "xfkzs" },
      ],
      selectOption: "wlw",
      reload: true
    };
  },
  computed: {
    classOption() {
      return {
        singleHeight: 43,
        autoPlay: this.qx === '重庆市'
      };
    },
  },
  methods: {
    getList(bool) {
      this.reload = false
      const param = {
        pageNum: 1,
        pageSize: 100
      };
      getRank(this.selectOption, param).then((res) => {
        const list = [];
        if (res.data.rows) {
          res.data.rows.forEach((p) => {
            if (this.selectOption === "wlw") {
              list.push([p.qx, p.ldsl, p.jrsbzs, p.fgl, p.qx === this.qx]);
            } else if (this.selectOption === "sy") {
              list.push([p.qx, p.ldsl, p.syzs, p.fgl, p.qx === this.qx]);
            } else if (this.selectOption === "dq") {
              list.push([p.qx, p.ldsl, p.dqhzzs, p.fgl, p.qx === this.qx]);
            } else if (this.selectOption === "smtd") {
              list.push([p.qx, p.ldsl, p.smtdzs, p.fgl, p.qx === this.qx]);
            } else if (this.selectOption === "hz") {
              list.push([p.qx, p.ldsl, p.hzbjzjzs, p.fgl, p.qx === this.qx]);
            } else if (this.selectOption === "xfkzs") {
              list.push([p.qx, p.ldsl, p.xfkzszs, p.fgl, p.qx === this.qx]);
            }
          });
        }
        this.list = toFirst(list, this.qx, '0');
        this.reload = true
        if (bool) {
          this.$emit('selectData', this.list)
        }
      });
    },
  },
  watch: {
    qx() {
      this.getList();
    },
    selectOption() {
      this.getList();
    },
  },
  created() {
    this.getList(true);
  },
};
</script>
<style scoped lang="less">
.regional-distribution {
  padding: 9px 8px 0px 8px;
  // padding: 10px 10px 0px 20px;
  ::v-deep(.el-input__inner) {
    text-align: right;
    border: none;
    background: linear-gradient(
      360deg,
      rgba(0, 148, 255, 0.5) 0%,
      rgba(0, 148, 255, 0.31) 100%
    );
    color: #fff;
  }
}
.warp {
  height: 374px;
  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.active {
  background-color: rgba(0, 213, 255, 0.2);
}

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

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

.row,
li,
a {
  display: block;
  height: 39px;
  line-height: 39px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  margin-top: 4px;
  .idx,
  .area,
  .build,
  .tim,
  .percent {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .idx {
    flex: 0.1;
  }

  .area {
    flex: 0.3;
    text-align: center;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis !important; // 超出隐藏
      white-space: nowrap;
  }
  .build {
    flex: 0.25;
  }
  .tim {
    flex: 0.25;
    color: #61dbff;
  }
  .percent {
    flex: 0.15;
  }
}
</style>

