<template>
  <div>
    <el-dialog
      v-if="type === 105"
      :model-value="type === 105"
      :title="title"
      :before-close="fnClose"
    >
      <el-space wrap>
        <el-button type="primary" @click="fnAddArchivesCapital">新增</el-button>
        <el-button type="danger" @click="fnDeleteArchivesCapital">
          删除
        </el-button>
        <el-button type="primary" v-print="'#printContent'">打印</el-button>
      </el-space>
      <div id="printContent">
        <div style="text-align: center">
          <el-text size="large">
            {{ year }}年度培训资金提取和使用情况管理台账
          </el-text>
        </div>
        <div>
          <el-text size="small">单位名称:{{ CORP_NAME }}</el-text>
        </div>
        <layout-table
          :data="data.capitalList"
          :show-pagination="false"
          highlight-current-row
          @row-click="fnCurrentChange"
          @row-dblclick="fnAddOrUpdate"
        >
          <el-table-column label="序号" width="40">
            <template v-slot="{ $index }">
              {{ serialNumber({ currentPage: 1, pageSize: 99999 }, $index) }}
            </template>
          </el-table-column>
          <el-table-column prop="DATE" label="日期" width="85" />
          <el-table-column label="费用项目">
            <el-table-column prop="AMOUNT" label="提取金额" width="80" />
            <el-table-column
              prop="MATERIAL_COST"
              label="培训教材教具费"
              width="80"
            />
            <el-table-column prop="TEACHER_COST" label="师资费" width="80" />
            <el-table-column prop="PAPER_COST" label="试卷印制费" width="80" />
            <el-table-column
              prop="OUTSIDE_COST"
              label="外出培训费"
              width="80"
            />
            <el-table-column
              prop="EQUIPMENT_COST"
              label="教学设备、课桌椅等购置维护费"
              width="80"
            />
            <el-table-column prop="TRAIN_COST" label="培训活动费" width="80" />
            <el-table-column
              prop="ENTRUST_COST"
              label="委托活动费"
              width="80"
            />
            <el-table-column
              prop="OTHER_COST"
              label="其他与培训有关的直接支出"
              width="80"
            />
          </el-table-column>
          <el-table-column prop="BALANCE" label="余额" width="75" />
        </layout-table>
        <el-row>
          <el-col :span="6">制表人:</el-col>
          <el-col :span="6">编制日期:</el-col>
          <el-col :span="6">审核人:</el-col>
          <el-col :span="6">审核日期:</el-col>
        </el-row>
        <br />
        <div>
          <el-text size="small">
            填表说明:1.将实际发生的费用金额记录在费用项目栏内。2.培训提取比例按职工工资1.5%，可按季或月提取。
          </el-text>
        </div>
      </div>
      <template #footer>
        <el-button @click="fnClose">关闭</el-button>
      </template>
    </el-dialog>
    <capital-form
      v-if="data.formVisible"
      v-model:visible="data.formVisible"
      :ARCHIVESCAPITAL_ID="data.current.ARCHIVESCAPITAL_ID"
      :type="data.current.ARCHIVESCAPITAL_ID ? 'edit' : 'add'"
      :year="year"
      @get-data="fnGetArchivesCapitalList"
    />
  </div>
</template>

<script setup>
import {
  deleteArchivesCapital,
  getArchivesCapitalList,
} from "@/request/archives.js";
import { reactive } from "vue";
import { useVModels } from "@vueuse/core";
import { useUserStore } from "@/pinia/user.js";
import LayoutTable from "@/components/table/index.vue";
import { serialNumber } from "@/assets/js/utils.js";
import CapitalForm from "./capital_form.vue";
import { ElMessageBox } from "element-plus";

const userStore = useUserStore();
const CORP_NAME = userStore.getUserInfo.CORP_NAME;

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: "",
  },
  year: {
    type: String,
    required: false,
    default: "",
  },
  type: {
    type: Number,
    required: true,
  },
  studyTaskId: {
    type: String,
    required: false,
    default: "",
  },
});
const { title, year, type } = useVModels(props);

const data = reactive({
  capitalList: [],
  current: undefined,
  formVisible: false,
});

const emits = defineEmits(["update:visible"]);

const fnClose = () => {
  emits("update:current", undefined);
};

const fnCurrentChange = (row) => {
  data.current = row;
};

const fnAddArchivesCapital = () => {
  data.capitalList.push({});
};

const fnDeleteArchivesCapital = async () => {
  if (data.current) {
    if (data.current.ARCHIVESCAPITAL_ID) {
      await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
      await deleteArchivesCapital({
        ARCHIVESCAPITAL_ID: data.current.ARCHIVESCAPITAL_ID,
      });
    }
    data.current = undefined;
    await fnGetArchivesCapitalList();
  }
};

const fnGetArchivesCapitalList = async () => {
  const respData = await getArchivesCapitalList({ YEAR: year.value });
  if (respData && respData.varList) {
    data.capitalList = respData.varList;
  }
};
await fnGetArchivesCapitalList();

const fnAddOrUpdate = (row) => {
  data.current = row;
  if (row) {
    data.formVisible = true;
  }
};
</script>

<style scoped lang="scss"></style>
