<template>
  <div class="controlInspection">
    <n-radio-group v-model:value="selectedValue">
      <n-radio-button
        v-for="btn in btnList"
        :key="btn.value"
        :value="btn.value"
      >
        {{ btn.label }}
      </n-radio-button>
    </n-radio-group>
    <div class="table_box">
      <n-data-table
        ref="tableRef"
        size="small"
        :bordered="false"
        :max-height="200"
        :columns="columns"
        :data="data"
      ></n-data-table>
    </div>
    <div class="search_table">
      <ul class="btn_list">
        <li
          v-for="item in btnList2"
          :key="item.id"
          :class="currentIndex === item.id ? 'active' : ''"
          @click="changeTab(item.id)"
        >
          {{ item.text }}
        </li>
      </ul>
      <n-data-table
        ref="tableRef"
        size="small"
        :bordered="false"
        :max-height="120"
        :columns="columns2"
        :data="data2"
      ></n-data-table>
    </div>
    <div class="table_box">
      <n-data-table
        ref="tableRef"
        size="small"
        :bordered="false"
        :max-height="140"
        :columns="columns3"
        :data="data3"
        :pagination="pagination"
      ></n-data-table>
    </div>
  </div>
</template>

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

export default {
  name: "controlInspection",
  setup() {
    const state = reactive({
      selectedValue: 0,
      btnList: [
        { label: "一键下发防汛检查通知", value: 0 },
        { label: "一键打印", value: 1 },
        { label: "下载PDF", value: 2 },
      ],
      //   表格相关
      columns: [
        {
          title: "序号",
          key: "number",
          align: "center",
          width: "100",
          render(row) {
            return h(
              NButton,
              { round: true, secondary: true, size: "small", type: "info" },
              { default: () => row.number }
            );
          },
        },
        {
          title: "防汛工作安排要求",
          key: "arrange",
          align: "center",
        },
      ],
      data: [],
      currentIndex: 0,
      btnList2: [
        { id: 0, text: "后湖二期泵站" },
        { id: 1, text: "铁路桥泵站" },
        { id: 2, text: "机场河补水泵站" },
      ],
      columns2: [
        {
          title: "检查内容",
          key: "content",
          align: "center",
        },
        {
          title: "核查结果",
          key: "result",
          align: "center",
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                color: {
                  color: "transparent",
                  textColor: row.result === 0 ? "#444444" : "#E11F59",
                },
              },
              {
                default: row.result === 0 ? "已处理" : "未处理",
              }
            );
          },
        },
        {
          title: "执行人",
          key: "executor",
          align: "center",
        },
        {
          title: "检查人",
          key: "inspector",
          align: "center",
        },
      ],
      data2: [],
      columns3: [
        {
          title: "泵闸名称",
          key: "name",
          align: "center",
        },
        {
          title: "防汛责任人",
          key: "liable",
          align: "center",
        },
        {
          title: "检查执行人",
          key: "executor",
          align: "center",
        },
        {
          title: "联系方式",
          key: "phone",
          align: "center",
          width: "150",
        },
        {
          title: "紧急联系人",
          key: "contact",
          align: "center",
        },
      ],
      data3: [],
      pagination: {
        pageSize: 5,
      },
    });
    const getTableData = () => {
      state.data = Array.apply(null, { length: 10 }).map((v, j) => ({
        number: j + 1,
        arrange: "对泵站的防污物资进行清点、检查，并将其放在方便取用的地方",
      }));
    };
    const changeTab = (i) => {
      state.currentIndex = i;
    };
    const getTableData2 = () => {
      state.data2 = Array.apply(null, { length: 10 }).map((v, j) => ({
        content: "清理清理站内杂物",
        result: Math.floor(Math.random() * (3 - 0)) + 0,
        executor: "刘xx",
        inspector: "李四",
      }));
    };
    const getTableData3 = () => {
      state.data3 = Array.apply(null, { length: 10 }).map((v, j) => ({
        name: "后湖二期泵站",
        liable: "赵主任",
        executor: "赵三",
        phone: "130XXXXXXXX",
        contact: "王站长",
      }));
    };
    onMounted(() => {
      getTableData();
      getTableData2();
      getTableData3();
    });
    return {
      ...toRefs(state),
      getTableData,
      changeTab,
      getTableData2,
      getTableData3,
    };
  },
};
</script>

<style lang='less' scoped>
.controlInspection {
  padding: 10px;
  .table_box {
    margin: 15px 0;
  }
  .search_table {
      margin-bottom:20px;
    .btn_list {
      display: flex;
      li {
        margin: 10px;
        width: 120px;
        line-height: 30px;
        text-align: center;
        color: #1a2a4e;
        font-size: 16px;
        background: #aab6ce;
        border-radius: 2px;
        &.active {
          color: #fff;
          background: #1970fe;
        }
      }
    }
  }
}
::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>