<template>
  <div class="questionBox" v-if="showQuesModal">
    <n-icon size="24" color="#fff" id="CloseIcon" @click="handleClick('close')">
      <Close />
    </n-icon>
    <n-space>
      <div class="single">
        <span>状态：</span>
        <n-select
          v-model:value="searchValue1"
          filterable
          :options="options1"
          style="width: 250px"
        />
      </div>
      <div class="single">
        <span>考核类型：</span>
        <n-select
          v-model:value="searchValue2"
          filterable
          :options="options2"
          style="width: 250px"
          @update:value="changeType"
        />
      </div>
      <div class="single">
        <span>考核时间：</span>
        <n-select
          v-model:value="searchValue3"
          filterable
          :options="options3"
          style="width: 250px"
        />
      </div>
      <n-button round type="primary" @click="handleClick('search')">
        查询
      </n-button>
      <n-button round type="primary" @click="handleClick('export')">
        导出
      </n-button>
    </n-space>
    <n-data-table
      ref="tableRef"
      :bordered="false"
      :max-height="600"
      striped
      :columns="columns"
      :data="data"
      remote="true"
      :pagination="pagination"
      style="margin-top: 10px"
    ></n-data-table>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, h } from "vue";
import { NButton, NTag } from "naive-ui";
import { Close } from "@vicons/ionicons5";
import bus from "@/utils/util";
import { getProblemList } from "@/services";
import { formatDate } from "../../../../utils/util";

export default {
  name: "questionBox",
  components: {
    Close,
  },
  props: {
    year: String,
  },
  setup(props) {
    const state = reactive({
      // 问题清单弹窗
      showQuesModal: false,
      searchValue1: null,
      searchValue2: null,
      searchValue3: null,
      options1: [
        {
          label: "未整改",
          value: 0,
        },
        {
          label: "已整改",
          value: 1,
        },
        {
          label: "驳回",
          value: 2,
        },
        {
          label: "已核销",
          value: 3,
        },
      ],
      options2: [
        {
          label: "常规考核",
          value: 1,
        },
        {
          label: "临时考核",
          value: 2,
        },
      ],
      options3: [],
      // 表格
      columns: [
        {
          title: "厂站",
          key: "facilitiesName",
          align: "center",
        },
        {
          title: "问题名称",
          key: "problem",
          align: "center",
        },
        {
          title: "状态",
          key: "dealStatus",
          align: "center",
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                color: {
                  color: "transparent",
                },
              },
              {
                default:
                  row.dealStatus == 0
                    ? "未整改"
                    : row.dealStatus == 1
                    ? "已整改"
                    : row.dealStatus == 2
                    ? "驳回"
                    : "已核销",
              }
            );
          },
        },
        {
          title: "上报人",
          key: "reportUserName",
          align: "center",
        },
        {
          title: "上报时间",
          key: "reportTime",
          align: "center",
        },
        {
          title: "整改人",
          key: "dealUserName",
          align: "center",
        },
        {
          title: "整改时间",
          key: "dealTime",
          align: "center",
        },
        {
          title: "核销人",
          key: "confirmUser",
          align: "center",
        },
        {
          title: "操作",
          key: "actions",
          align: "center",
          render(row) {
            return h(
              NButton,
              {
                text: true,
                size: "small",
                style: {
                  margin: "10px",
                },
                onClick: () => handleClick("preview", row),
              },
              { default: () => "查看" }
            );
          },
        },
      ],
      data: [],
    });
    // 分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });
    const init = () => {
      state.showQuesModal = true;
      getTableData();
    };
    const getTableData = async () => {
      let pramas = {
        evaluateType: state.searchValue2,
        evaluateYear: formatDate(props.year,'YYYY'),
        evaluateTime: state.searchValue3,
        dealStatus: state.searchValue1,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
      };
      let res = await getProblemList(pramas);
      if (res.code == 0) {
        state.data = res.page.list;
        paginationReactive.pageCount = res.page.pages;
        paginationReactive.itemCount = res.page.total;
      }
    };
    const changeType = (value) => {
      if (value == 1) {
        state.options3 = [
          {
            label: "第一季度",
            value: 1,
          },
          {
            label: "第二季度",
            value: 2,
          },
          {
            label: "第三季度",
            value: 3,
          },
          {
            label: "第四季度",
            value: 4,
          },
        ];
      } else {
        state.options3 = Array.apply(null, { length: 12 }).map((v, j) => ({
          label: ` ${j + 1}月`,
          value: j + 1,
        }));
      }
    };
    const handleClick = (type) => {
      switch (type) {
        case "close":
          state.showQuesModal = false;
          bus.emit("show", state.showQuesModal);
          break;
        case "search":
          getTableData();
          break;
      }
    };
    return {
      ...toRefs(state),
      pagination: paginationReactive,
      init,
      handleClick,
      changeType,
    };
  },
};
</script>

<style lang="less" scoped>
.questionBox {
  padding: 20px;
  width: 100%;
  height: 100%;
  position: relative;
  background: #012C3F;
  border-radius: 5px;
  .single {
    display: flex;
    align-items: center;
  }
  #CloseIcon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    cursor: pointer;
  }
}
</style>