<template>
  <div class="pumpGate">
    <ul class="top">
      <li>
        泵站数统计 <span class="num">{{ bengTotal }}</span>
        <span class="unit">个</span>
      </li>
      <li>
        雨水泵站<span class="num">{{ rainBeng }}</span
        ><span class="unit">个</span>
      </li>
      <li>
        污水泵站<span class="num">{{ wuBeng }}</span
        ><span class="unit">个</span>
      </li>
    </ul>
    <div class="table_box">
      <n-data-table
        ref="tableRef"
        size="small"
        :bordered="false"
        :max-height="360"
        :columns="columns"
        :data="data"
      ></n-data-table>
    </div>
    <p>计划排班16人，实际到岗18人，换班1人</p>
    <div class="table_box">
      <n-data-table
        ref="tableRef2"
        size="small"
        :bordered="false"
        :max-height="160"
        :columns="columns2"
        :data="data2"
      ></n-data-table>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, h } from "vue";
import { NTag, NIcon, NTooltip } from "naive-ui";
import { Call } from "@vicons/ionicons5";

export default {
  name: "pumpGate",
  setup() {
    const renderTooltip = (trigger, content) => {
      return h(NTooltip, null, {
        trigger: () => trigger,
        default: () => content,
      });
    };
    const state = reactive({
      bengTotal: 10,
      rainBeng: 8,
      wuBeng: 3,
      //   表格相关
      columns: [
        {
          title: "泵站名称",
          key: "name",
          align: "center",
          width: "100",
        },
        {
          title: "泵站类型",
          key: "type",
          align: "center",
        },
        {
          title: "泵机数",
          key: "bengNum",
          align: "center",
        },
        {
          title: "开取数",
          key: "openNum",
          align: "center",
        },
        {
          title: "日抽排量",
          key: "capacity",
          align: "center",
        },
        {
          title(column) {
            return h("div", {}, [
              h("div", { style: {} }, ["额定功率"]),
              h("ul", { style: { display: "flex", width: "100%" } }, [
                h(
                  "li",
                  {
                    style: {
                      flex: 1,
                      display: "flex",
                      alignItems: "center",
                      fontSize: "12px",
                      color: "#798087",
                    },
                  },
                  [
                    h("div", {
                      style: {
                        width: "10px",
                        height: "10px",
                        background: "#00FFFF",
                        marginRight: "5px",
                      },
                    }),
                    ["正常"],
                  ]
                ),
                h(
                  "li",
                  {
                    style: {
                      flex: 1,
                      display: "flex",
                      alignItems: "center",
                      fontSize: "12px",
                      color: "#798087",
                    },
                  },
                  [
                    h("div", {
                      style: {
                        width: "10px",
                        height: "10px",
                        background: "#FFB332",
                        marginRight: "5px",
                      },
                    }),
                    ["警戒"],
                  ]
                ),
                h(
                  "li",
                  {
                    style: {
                      flex: 1,
                      display: "flex",
                      alignItems: "center",
                      fontSize: "12px",
                      color: "#798087",
                    },
                  },
                  [
                    h("div", {
                      style: {
                        width: "10px",
                        height: "10px",
                        background: "#FF4546",
                        marginRight: "5px",
                      },
                    }),
                    ["报警"],
                  ]
                ),
              ]),
            ]);
          },
          key: "power",
          align: "center",
          width: "200",
          render(row) {
            const tags = row.power.map((tagKey) => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: "3px",
                  },
                  color: {
                      color: tagKey.status === 0
                      ? "#23D2DC"
                      : tagKey.status === 1
                      ? "#E3B25E"
                      :  tagKey.status === 2?"#E37474":'#6C8CA7',
                  },
                },
                {
                  default: () => tagKey.name,
                }
              );
            });
            return tags;
          },
        },
      ],
      data: [],
      columns2: [
        {
          title: "泵闸换班",
          key: "change",
          align: "center",
          width: "120",
        },
        {
          title: "当前排班",
          key: "current",
          align: "center",
        },
        {
          title: "下次排班",
          key: "next",
          align: "center",
        },
        {
          title: "站长",
          key: "stationmaster",
          align: "center",
        },
        {
          title: "签到",
          key: "sign",
          align: "center",
          render(row) {
            return row.sign === 0 ? "是" : "否";
          },
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center",
          render(row) {
            return renderTooltip(
              h("span", {}, [
                h("span", { style: { "margin-right": "5px" } }),
                h(
                  NIcon,
                  {
                    size: 14,
                    color: "#38D1F8",
                  },
                  {
                    default: () => h(Call),
                  }
                ),
              ]),
              row.phone
            );
          },
        },
      ],
      data2: [],
    });
    //获取泵闸表格数据1
    const getTableData = () => {
      state.data = Array.apply(null, { length: 10 }).map((v, j) => ({
        name: "后湖二期泵站",
        type: "雨水泵",
        bengNum: "5",
        openNum: "3",
        capacity: "100",
        power: [
            // "1#", "2#", "3#", "4#", "5#"
            {name:'1#',status:Math.floor(Math.random() * (4 - 0)) + 0,},
            {name:'2#',status:Math.floor(Math.random() * (4 - 0)) + 0,},
            {name:'3#',status:Math.floor(Math.random() * (4 - 0)) + 0,},
            {name:'4#',status:Math.floor(Math.random() * (4 - 0)) + 0,},
            {name:'5#',status:Math.floor(Math.random() * (4 - 0)) + 0,},
        ],
      }));
    };
    //获取泵闸表格数据2
    const getTableData2 = () => {
      state.data2 = Array.apply(null, { length: 10 }).map((v, j) => ({
        change: "铁路桥泵站",
        current: "张三",
        next: "李四",
        stationmaster: "周站",
        sign: Math.floor(Math.random() * (2 - 0)) + 0,
        phone: "13451524789",
      }));
    };
    onMounted(() => {
      getTableData();
      getTableData2();
    });
    return {
      ...toRefs(state),
      getTableData,
      getTableData2,
    };
  },
};
</script>

<style lang='less' scoped>
.pumpGate {
  .top {
    margin: 20px 0;
    display: flex;
    li {
      padding: 3px 5px;
      margin: 0 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background: linear-gradient(90deg, #22a5e9 0%, #1271ff 100%);
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      color: #f8fafe;
      border-left: 2px solid #00ffff;
      .num {
        margin-left: 10px;
        font-size: 20px;
        font-family: DIN;
        font-weight: bold;
        color: #34e55e;
      }
      .unit {
        margin-left: 5px;
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #e5ecff;
      }
    }
  }
  p {
    line-height: 70px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: #386f6f;
  }
}
::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);

}
</style>