<template>
  <div class="right1-container">
    <InfoHeader
      name="困人排行"
      eName="Trapped people data statistics"
    ></InfoHeader>
    <InfoContent height="3.9rem">
      <div class="tab-list d-flex full-width jc-space-around">
        <div
          class="tab-item"
          v-for="(item, index) in tabList"
          :key="index"
          @click="handleClickTab(index)"
          :style="{ color: currentIndex === index ? 'white' : '' }"
        >
          {{ item.name }}
          <dv-decoration-2
            :dur="2"
            v-if="currentIndex === index"
            style="width: 130px; height: 5px"
          />
        </div>
      </div>
      <div><RangeDatePicker></RangeDatePicker></div>
      <div class="d-flex">
        <BarCharts
          chartId="rightxs"
          :chartData="chartData"
          :chartSetting="chartSetting"
        ></BarCharts>
      </div>
    </InfoContent>
  </div>
</template>
  
  <script>
import InfoHeader from "@/components/infoHeader";
import InfoContent from "@/components/infoContent";
import BarCharts from "@/components/barCharts";
import RangeDatePicker from "@/components/rangeDatePicker";
export default {
  components: {
    InfoHeader,
    InfoContent,
    BarCharts,
    RangeDatePicker,
  },
  data() {
    return {
      currentIndex: 0,
      tabList: [
        { name: "项目", key: "maintenance" },
        { name: "维保单位", key: "tenement" },
        { name: "困人时段", key: "build" },
   
      ],
      chartSetting: { barColor: "#104975" },
      chartData: [
        {
          value: 9,
          name: "停电故障",
          itemStyle: { color: "#AC2B61" },
        },
        { value: 60, name: "非平层开门", itemStyle: { color: "#FFDB4A" } },
        { value: 32, name: "非平层停梯", itemStyle: { color: "#D36D50" } },
      ],
    };
  },
  methods: {
    handleClickTab(index) {
      this.currentIndex = index;
    },
  },
};
</script>
  <style lang="scss" scoped>
.right1-container {
  position: fixed;
  top: 7.1rem;
  right: 0.22rem;
  width: 31%;
  pointer-events: all;
  .tab-list {
  padding: 0.2rem 0.15rem;
  .tab-item {
    background-image: url("../../../assets/images/biaoti-bck.png");
    width: 1.675rem;
    height: 0.375rem;
    line-height: 0.375rem;

    text-align: center;
    font-size: 0.18rem;
    font-weight: bolder;
    color: #828797;
    cursor: pointer;
    &:hover {
      color: white;
    }
  }
}
  .title1 {
    background-image: url("../../../assets/images/biaoti-bck.png");
    width: 1.875rem;
    height: 0.375rem;
    line-height: 0.375rem;
    margin: 0 auto;

    font-size: 0.2rem;
    color: white;
  }
  .order {
    background: url("../../../assets/images/guzhang_bck.png");
    background-repeat: no-repeat;
    background-size: 100% 35%;
    background-position: bottom;
    height: 3.25rem;
    .rate {
      font-size: 0.55rem;
      color: white;
      font-weight: bolder;
    }
    .item {
      margin: 0.375rem 0;
      .num-title {
        font-size: 0.3rem;
        color: white;
      }
      .num-value {
        font-size: 0.36rem;
        color: white;
        margin-left: 0.15rem;
      }
    }
  }
}
</style>
  