<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="90px"
        @submit.prevent="fnResetPagination"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="计划名称" prop="KEYWORDS">
              <el-input v-model="searchForm.KEYWORDS" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计划年份" prop="PLAN_YEAR">
              <el-select v-model="searchForm.PLAN_YEAR">
                <el-option
                  v-for="item in yearList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计划周期" prop="PLAN_PERIOD">
              <el-select v-model="searchForm.PLAN_PERIOD">
                <el-option
                  v-for="item in planPeriodList"
                  :key="item.ID"
                  :value="item.ID"
                  :label="item.NAME"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="STATUS">
              <el-select v-model="searchForm.STATUS">
                <el-option
                  v-for="item in statusList"
                  :key="item.ID"
                  :value="item.ID"
                  :label="item.NAME"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button native-type="reset" @click="fnResetPagination">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card>
      <layout-table
        ref="tableRef"
        v-model:pagination="pagination"
        row-key="SAFETYINVESTMENTPLAN_ID"
        :data="list"
        @get-data="fnGetData"
      >
        <el-table-column reserve-selection type="selection" width="55" />
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="PLAN_NAME" label="计划名称" />
        <el-table-column prop="PLAN_YEAR" label="计划年份" />
        <el-table-column prop="PLAN_PERIOD" label="计划周期" />
        <el-table-column prop="INFO_COUNT" label="涉及费用项数" />
        <el-table-column prop="TOTAL_AMOUNT" label="总金额" />
        <el-table-column prop="CREATOR" label="编制人" />
        <el-table-column label="审核人">
          <template #default="{ row }">
            <span v-if="row.STATUS !== 0">{{ row.OPERATOR }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            {{ translationStatus(row.STATUS, statusList) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button
              type="primary"
              text
              link
              @click="fnView(row.SAFETYINVESTMENTPLAN_ID)"
            >
              查看
            </el-button>
            <el-button
              v-if="buttonJurisdiction.del && row.STATUS < 1"
              type="primary"
              text
              link
              @click="fnDelete(row.SAFETYINVESTMENTPLAN_ID)"
            >
              删除
            </el-button>
            <el-button
              v-if="buttonJurisdiction.edit && row.STATUS < 1"
              type="primary"
              text
              link
              @click="fnAddOrEdit(row.SAFETYINVESTMENTPLAN_ID, 'edit')"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
        <template #button>
          <el-button
            v-if="buttonJurisdiction.add"
            type="primary"
            @click="fnAddOrEdit('', 'add')"
          >
            新增
          </el-button>
          <el-button
            v-if="buttonJurisdiction.del"
            type="danger"
            @click="fnBatchDelete"
          >
            批量删除
          </el-button>
        </template>
      </layout-table>
    </layout-card>
    <view-info
      v-model:visible="data.viewDialog.visible"
      :info="data.viewDialog.info"
    />
    <add
      v-model:visible="data.addDialog.visible"
      v-model:form="data.addDialog.form"
      :type="data.addDialog.type"
      :year-list="yearList"
      :plan-period-list="planPeriodList"
      @get-data="fnResetPagination"
    />
  </div>
</template>

<script setup>
import { serialNumber, translationStatus } from "@/assets/js/utils";
import useListData from "@/assets/js/useListData.js";
import { debounce } from "throttle-debounce";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getPlanList,
  getPlanView,
  setPlanBatchDelete,
  setPlanDelete,
} from "@/request/security_investment.js";
import useButtonJurisdiction from "@/assets/js/useButtonJurisdiction.js";
import ViewInfo from "./components/view.vue";
import add from "./components/add.vue";
import { nextTick, reactive } from "vue";

const yearList = (() => {
  const year = new Date().getFullYear();
  const arr = [];
  for (let i = 2021; i <= year + 1; i++) {
    arr.push(i);
  }
  return arr;
})();
const planPeriodList = [
  { NAME: "季度计划1", ID: "季度计划1" },
  { NAME: "季度计划2", ID: "季度计划2" },
  { NAME: "季度计划3", ID: "季度计划3" },
  { NAME: "季度计划4", ID: "季度计划4" },
];
const statusList = [
  { NAME: "待审核", ID: 0 },
  { NAME: "已归档", ID: 1 },
  { NAME: "已打回", ID: -1 },
];
const { list, pagination, searchForm, fnGetData, fnResetPagination, tableRef } =
  useListData(getPlanList);
const data = reactive({
  viewDialog: {
    visible: false,
    info: {},
  },
  addDialog: {
    visible: false,
    type: "",
    form: {
      PLAN_NAME: "",
      PLAN_YEAR: "",
      PLAN_PERIOD: "",
      TOTAL_AMOUNT: 0,
      infos: [],
    },
  },
});
const buttonJurisdiction = await useButtonJurisdiction("safetyinvestmentplan");
const fnDelete = debounce(
  1000,
  async (SAFETYINVESTMENTPLAN_ID) => {
    await ElMessageBox.confirm(`确定要删除吗？`, {
      type: "warning",
    });
    await setPlanDelete({ SAFETYINVESTMENTPLAN_ID });
    ElMessage.success(`删除成功`);
    fnResetPagination();
  },
  { atBegin: true }
);
const fnBatchDelete = debounce(
  1000,
  async () => {
    const selectionData = tableRef.value.getSelectionRows();
    if (selectionData.length === 0) {
      ElMessage.warning("请选中要删除的项");
      return;
    }
    await ElMessageBox.confirm("确定要删除选中的数据吗？", { type: "warning" });
    const DATA_IDS = selectionData
      .map((item) => item.SAFETYINVESTMENTPLAN_ID)
      .join(",");
    await setPlanBatchDelete({ DATA_IDS });
    ElMessage.success("删除成功");
    fnResetPagination();
  },
  { atBegin: true }
);
const fnView = async (SAFETYINVESTMENTPLAN_ID) => {
  const resData = await getPlanView({ SAFETYINVESTMENTPLAN_ID });
  data.viewDialog.info = resData.pd;
  data.viewDialog.info.infos = resData.infoList;
  data.viewDialog.visible = true;
};
const fnAddOrEdit = async (SAFETYINVESTMENTPLAN_ID, type) => {
  data.addDialog.visible = true;
  await nextTick();
  data.addDialog.type = type;
  if (type === "edit") {
    const resData = await getPlanView({ SAFETYINVESTMENTPLAN_ID });
    data.addDialog.form = resData.pd;
    data.addDialog.form.infos = resData.infoList;
  } else {
    data.addDialog.form.infos = [
      { TYPE: "", DESCR: "", AMOUNT: 0, id: Math.random() },
    ];
  }
};
</script>

<style scoped></style>
