<template>
  <div class="prevention_left">
    <div class="plan common">
      <div class="title">
        <span>防汛预案</span>
      </div>

      <div class="content">
        <img src="../../../assets/Imgs/weixiufenxi1.png" alt="" />
      </div>
    </div>
    <div class="inspect common">
      <div class="title">
        <span>防汛检查</span>
      </div>
      <div class="content">
        <ul class="inspect_head">
          <li>设施名称</li>
          <li>检查项目</li>
          <li>检查情况</li>
        </ul>
        <div class="inspect_list">
          <div class="list_title">{{ inspectList.title }}</div>
          <ul class="list_con">
            <li v-for="item in inspectList.list" :key="item.id">
              <div>{{ item.projectName }}</div>
              <div :class="[item.status == '正常' ? 'color1' : 'color2']">
                {{ item.status }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="analysis common">
      <div class="title">
        <span>排水抽查分析</span>
      </div>
      <div class="content">
        <ul class="btn_box">
          <li
            v-for="(item, index) in btnList1"
            :key="item.id"
            :class="[currentIndex1 == index ? 'active' : '']"
            @click="changeTab1(index)"
          >
            <div class="statusIcon">
              <n-icon size="14" color="#2DEDF5">
                <Airplane />
              </n-icon>
            </div>
            <span>{{ item.text1 }}</span>
            <span>{{ item.text2 }}</span>
          </li>
        </ul>
        <div class="table">
          <n-data-table
            ref="tableRef"
            size="small"
            style="color: red"
            :bordered="false"
            :max-height="130"
            :columns="columns"
            :data="data"
          ></n-data-table>
        </div>
        <ul class="btn_box2">
          <li
            v-for="(item, index) in btnList2"
            :key="item.id"
            :class="[currentIndex2 == index ? 'active' : '']"
            @click="changeTab2(index)"
          >
            {{ item.text }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { Airplane } from "@vicons/ionicons5";

export default {
  name: "PreventionLeft",
  components: {
    Airplane,
  },
  setup() {
    const state = reactive({
      // 防汛检查
      inspectList: {
        title: "防暴雨预案",
        list: [
          { id: 0, projectName: "疏通站内排水系统", status: "正常" },
          { id: 1, projectName: "检查配电柜密封情况", status: "不正常" },
          { id: 2, projectName: "检查电缆沟", status: "正常" },
          {
            id: 3,
            projectName: "检查高压配电室、主控室的门窗",
            status: "正常",
          },
          { id: 4, projectName: "编织袋装满沙土以备急用", status: "正常" },
        ],
      },
      //   排水检查抽排分析
      currentIndex1: 0,
      btnList1: [
        { id: 0, text1: "2小时预报", text2: "20mm" },
        { id: 0, text1: "4小时预报", text2: "40mm" },
      ],
      currentIndex2: 0,
      btnList2: [
        { id: 0, text: "查看详细评估报告" },
        { id: 0, text: "查看详细评估报告" },
      ],
      columns: [
        {
          title: "设施名称",
          key: "facilityName",
          ellipsis: true,
          align: "center",
        },
        {
          title: "抽排预估分析",
          key: "analysis",
          ellipsis: true,
          align: "center",
        },
        {
          title: "历史状况",
          key: "historical",
          ellipsis: true,
          align: "center",
        },
      ],
      data: [],
    });
    //获取排水抽查分析表格数据
    const getAnalysisData = () => {
      state.data = Array.apply(null, { length: 10 }).map((v, j) => ({
        facilityName: "后湖二期泵站",
        analysis: "应开泵4台满足抽排需求",
        historical: "1#2#3#4#",
      }));
    };
    const changeTab1 = (i) => {
      state.currentIndex1 = i;
    };
    const changeTab2 = (i) => {
      state.currentIndex2 = i;
    };
    onMounted(() => {
      getAnalysisData();
    });
    return {
      ...toRefs(state),
      getAnalysisData,
      changeTab1,
      changeTab2,
    };
  },
};
</script>

<style lang="less" scoped>
.prevention_left {
  position: absolute;
  top: 0;
  left: 10px;
  width: 420px;
  height: 100%;
  z-index: 10;
  .common {
    margin-bottom: 10px;
    padding: 10px;
    height: calc((100% - 30px) / 3);
    border-top: 2px solid;
    border-color: var(--border-top);
    background: var(--bg-left);
    box-shadow: 0px 1px 7px 0px rgba(0, 109, 247, 0.35);
    box-sizing: border-box;
    .title {
      margin: 5px 0 10px 0;
      height: 30px;
      background: url("../../../assets/Imgs/weixiufenxi_title.png") no-repeat;
      span {
        padding-left: 10px;
        line-height: 14px;
        color: var(--color-title);
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
      }
    }
  }
  .plan {
    .content {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 365px;
      height: 210px;
    }
  }
  .inspect {
    .content {
      .inspect_head {
        display: flex;
        text-align: center;
        line-height: 40px;
        li {
          width: 33.33%;
        }
      }
      .inspect_list {
        height: 160px;
        background: var(--bg-left);
        box-shadow: 0 0 5px 5px rgb(25 152 192 / 18%) inset;
        display: flex;
        .list_title {
          width: 33.33%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: var(--color-Invert);
        }
        .list_con {
          width: calc(100% - 33.33%);
          overflow: auto;
          li {
            line-height: 40px;
            display: flex;
            > div {
              width: 50%;
              text-align: center;
              color: var(--color-Invert);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .color1 {
              color: #65ba6c;
            }
            .color2 {
              color: #ff4545;
            }
          }
        }
      }
    }
  }
  .analysis {
    position: relative;
    .content {
      .btn_box {
        position: absolute;
        top: 10px;
        right: 0;
        height: 40px;
        display: flex;
        li {
          padding: 5px;
          box-sizing: border-box;
          position: relative;
          margin-right: 5px;
          width: 85px;
          height: 40px;
          display: flex;
          cursor: pointer;
          span {
            font-size: 12px;
          }
          &.active {
            background: #1b6aef;
            color: #fff;
          }
          flex-direction: column;
          .statusIcon {
            position: absolute;
            top: 0;
            right: 10px;
          }
        }
      }
      .btn_box2 {
        margin-top: 10px;
        display: flex;
        li {
          margin-right: 10px;
          width: 130px;
          height: 30px;
          background: var(--color-btn-bg);
          color: var(--color-btn-text);
          display: flex;
          justify-content: center;
          border-radius: 2px;
          align-items: center;
          cursor: pointer;
          &.active {
            background: var(--color-btn-bg-a);
            color: var(--color-btn-text-a);
          }
        }
      }
    }
  }
}
::v-deep(.n-data-table-td) {
  background: var(--bg-menu);
}
::v-deep(.n-data-table-table) {
  background: var(--bg-menu);
}
::v-deep(.n-data-table-thead) {
  background: var(--bg-menu);
}
::v-deep(.n-data-table-th) {
  background: var(--color-odd);
}
::-webkit-scrollbar-thumb {
  background-color: #006df7;
}
</style>