<template>
  <div class="resultsPublicity">
    <div class="tabBox" v-show="!LssueTrue">
      <n-tabs
        v-model:value="tabData.value"
        type="line"
        tab-style="min-width: 25%;"
        @update:value="handleUpdateValue()"
      >
        <n-tab-pane v-for="panel in tabData.list" :key="panel" :name="panel">
          <div class="content">
            <div class="searchBox">
              <n-space>
                <n-select
                  v-model:value="searchData.selectedValue1"
                  filterable
                  placeholder="选择季度"
                  :options="searchData.options1"
                  style="width: 250px"
                />
                <n-select
                  v-model:value="searchData.selectedValue2"
                  filterable
                  placeholder="选择考核类型"
                  :options="searchData.options2"
                  style="width: 250px"
                />
                <n-button type="primary" @click="handleClick('search')"
                  >搜索</n-button
                >
                <n-button @click="handleClick('reset')">重置</n-button>
                <n-button @click="handleClick('issue2')">批量下发</n-button>
              </n-space>
            </div>
            <n-button
              type="primary"
              class="downBtn"
              @click="handleClick('downLoad')"
              >导出</n-button
            >
            <div class="tableBox">
              <n-data-table
                ref="tableRef"
                :bordered="false"
                :max-height="700"
                striped
                :columns="columns"
                :data="data"
                :row-key="(row) => row.id"
                :remote="true"
                :pagination="pagination"
              ></n-data-table>
            </div>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
    <Lssue
      v-if="LssueTrue"
      ref="RefLssue"
      @update:FatherTalk="LssueTrue = false"
    />
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, h } from "vue";
import { NButton, useMessage } from "naive-ui";
import Lssue from "./resultsPublicity_IssueResults.vue";
export default {
  name: "resultsPublicity",
  components: { Lssue },
  setup() {
    const message = useMessage();
    const state = reactive({
      tabData: {
        value: "2022年考核指标评价",
        list: [
          "2022年考核指标评价",
          "2021年考核指标评价",
          "2020年考核指标评价",
          "2019年考核指标评价",
          "2018年考核指标评价",
        ],
      },
      searchData: {
        selectedValue1: 0,
        selectedValue2: 0,
        options1: [
          { label: "第一季度", value: 0 },
          { label: "第二季度", value: 1 },
          { label: "第三季度", value: 2 },
          { label: "第四季度", value: 3 },
        ],
        options2: [
          { label: "临时考核", value: 0 },
          { label: "常规考核", value: 1 },
        ],
      },
      columns: [
        {
          type: "selection",
          width: "60",
        },
        {
          title: "考核对象",
          key: "assessment",
          align: "center",
        },
        {
          title: "考核结果公示流程节点",
          key: "node",
          align: "center",
          render(row) {
            return h(
              NButton,
              {
                text: true,
                size: "small",
                type: "primary",
                onClick: () => handleClick("issue", row),
              },
              { default: () => row.node }
            );
          },
        },
        {
          title: "考核类型",
          key: "type",
          align: "center",
        },
        {
          title: "考核分数",
          key: "score",
          align: "center",
        },
        {
          title: "整改问题数",
          key: "questionNum",
          align: "center",
        },
        {
          title: "整改要求时间",
          key: "reqTime",
          align: "center",
        },
        {
          title: "整改完成时间",
          key: "doneTime",
          align: "center",
        },
        {
          title: "复合完成时间  ",
          key: "doneTime2",
          align: "center",
        },
        {
          title: "下发时间  ",
          key: "issueTime",
          align: "center",
        },
        {
          title: "操作",
          key: "actions",
          align: "center",
          render(row) {
            return h(
              NButton,
              {
                text: true,
                size: "small",
                type: "primary",
                onClick: () => handleClick("issue2", row),
              },
              { default: () => "下发" }
            );
          },
        },
      ],
      data: [],
      LssueTrue: false,
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableData();
      },
    });
    //获取表格数据
    const getTableData = () => {
      state.data = Array.apply(null, { length: 10 }).map((_, index) => {
        return {
          id: index,
          assessment: "西渠闸门",
          node: "待公示下发",
          type: "常规考核",
          score: Math.floor(Math.random() * (100 - 80)) + 80,
          questionNum: Math.floor(Math.random() * (20 - 10)) + 10,
          reqTime: "2022-03-25",
          doneTime: "2022-03-25",
          doneTime2: "2022-03-25",
          issueTime: "2022-03-25",
        };
      });
    };
    const handleClick = (type) => {
      switch (type) {
        case "search":
          break;
        case "issue":
          state.LssueTrue = true;
          break;
        case "issue2":
          message.success("操作成功");
          break;
      }
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      getTableData,
      handleClick,
      pagination: paginationReactive,
    };
  },
};
</script>

<style lang="less" scoped>
.resultsPublicity {
  width: 100%;
  height: 100%;
}
.content {
  display: flex;
  flex-direction: column;
  .downBtn {
    margin: 10px 0;
    align-self: flex-end;
  }
}
</style>