<template>
  <div class="manage-container">
    <div class="manage-wrap">
      <div class="manage-header">
        <div class="header-left"></div>
        <div class="header-right">
          <el-button type="primary" @click="addItem">新增</el-button>
          <el-button type="primary" @click="exportData">导出</el-button>
        </div>
      </div>
      <div class="manage-content">
        <el-table
          :data="tableData"
          style="width: 100%; height: 100%"
          empty-text="暂无数据"
          border
        >
          <el-table-column type="index" width="50" />
          <el-table-column
            v-for="column in tableColumns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
          >
            <template #default="scope">
              <el-input v-model="scope.row[column.prop]" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60">
            <template #default="scope">
              <el-button
                link
                type="danger"
                size="small"
                @click="deleteItem(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { exportTableFile } from "../../common/tableFileHandle";

const tableColumns = reactive([
  {
    prop: "projectName",
    label: "项目名称",
  },
  {
    prop: "tzglzt",
    label: "投资管理主体",
  },
  {
    prop: "jcdw",
    label: "决策单位",
  },
  {
    prop: "xdpfsj",
    label: "下达批复时间",
  },
  {
    prop: "zyx",
    label: "重要性",
  },
  {
    prop: "ssjd",
    label: "实施阶段",
  },
  {
    prop: "pfnr",
    label: "批复内容",
  },
  {
    prop: "pfyjsm",
    label: "批复意见落实情况具体说明",
  },
  {
    prop: "lszxqk",
    label: "落实（执行）情况",
  },
  {
    prop: "zcclxh",
    label: "支撑材料序号",
  },
  {
    prop: "wlsyy",
    label: "未落实原因",
  },
  {
    prop: "xybgzcs",
    label: "下一步工作措施",
  },
  {
    prop: "yjwcsj",
    label: "预计完成时间",
  },
  {
    prop: "zrld",
    label: "责任领导",
  },
  {
    prop: "zrbnmjzrr",
    label: "责任部门及责任人",
  },
  {
    prop: "sfgx",
    label: "是否更新",
  },
  {
    prop: "bz",
    label: "备注",
  },
]);
let tableData = ref([]);
const addItem = () => {
  tableData.value.push({});
};
const deleteItem = (index) => {
  ElMessageBox.confirm("确认删除该项？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableData.value.splice(index, 1);
    })
    .catch(() => {});
};
const exportData = () => {
  exportTableFile(
    tableData.value,
    tableColumns,
    "投资项目批复意见落实情况统计表",
    "导出文件",
  );
};
</script>

<style lang="less"></style>
