<template>
  <el-container>
    <el-header>
      <div class="left-panel-group">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
        >新增</el-button>
        <ExportBtn :getTableRef="() => $refs.table" :columns="exportCols" fileName="用印申请台账" />
        </div>
      <div class="right-panel">
        <el-input
            v-model="query.seal"
            placeholder="印章名称"
            clearable
            @keyup.enter="handleQuery"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="id">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column
          label="用印时间"
          prop="create_time"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="用印类别"
          prop="seal"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="文件(资料)名称"
          prop="filename"
          min-width="120">
        </el-table-column>
        <el-table-column
          label="份数"
          prop="file_count"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="印章部门"
          prop="belong_dept_name"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="用印人"
          prop="create_by_name"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="借出时间"
          prop="lending_date"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="拟归还时间"
          prop="return_date"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="实际归还时间"
          prop="actual_return_date"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="是否借出"
          prop="is_lending"
          min-width="60"
        >
        <template #default="scope">
              <span v-if="scope.row.is_lending" style="color: red;">是</span>
              <span v-else>否</span>
        </template>
        </el-table-column>
        <el-table-column
          label="终版文件"
          min-width="80"
          align="center">
          <template #default="scope">
            <el-link v-if="scope.row.final_file" type="primary" :href="scope.row.final_file" target="_blank">查看文件</el-link>
            <span v-else style="color:#999">未上传</span>
          </template>
        </el-table-column>
        <el-table-column label="审批信息" width="200">
          <template #default="scope">
                                <el-tag :type="actStateEnum[scope.row.ticket_?.act_state]?.type">
                        {{ actStateEnum[scope.row.ticket_?.act_state]?.text }}
                    </el-tag>
            <el-tag type="info" effect="plain">{{ scope.row.ticket_?.state_?.name }}</el-tag>

          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="250">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="handleShow(scope.row)"
              >详情
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="handleDel(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  size="small"
                  type="danger"
                  v-auth="'seal.delete'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-drawer
      title="印章申请"
      v-model="limitedVisible"
      :destroy-on-close="true"
      direction="rtl"
      size="70%"
      >
  <div style="display: flex; height: calc(100% - 60px);"> 
    <div style="flex: 1; padding-right: 20px; overflow-y: auto;">
      <SealForm
        :mode="mode"
        :t_id="t_id"
        @success="()=>{handleQuery(); limitedVisible = false}"
        @closed="limitedVisible = false"
      />
    </div>
  </div>
</el-drawer>
</template>
<script>
import SealForm from "./seal_form.vue";
import ExportBtn from "./exportBtn.vue";
import { actStateEnum, interveneTypeEnum } from "@/utils/enum.js";
export default {
  components: { SealForm, ExportBtn},
  name: "index",
  data() {
    return {
      actStateEnum, interveneTypeEnum,
      apiObj: this.$API.ofm.lendingseal.list,
      query: {},
      limitedVisible: false,
      mode: "show",
      t_id: null,
      exportCols: [
        { header: "用印时间", key: "create_time", wch: 20 },
        { header: "用印类别", key: "seal", wch: 15 },
        { header: "文件(资料)名称", key: "filename", wch: 25 },
        { header: "份数", key: "file_count", wch: 8 },
        { header: "印章部门", key: "belong_dept_name", wch: 15 },
        { header: "用印人", key: "create_by_name", wch: 12 },
        { header: "借出时间", key: "lending_date", wch: 15 },
        { header: "拟归还时间", key: "return_date", wch: 15 },
        { header: "实际归还时间", key: "actual_return_date", wch: 15 },
        { header: "是否借出", key: "_is_lending_text", wch: 10 },
        { header: "终版文件", key: "final_file", wch: 25 },
        { header: "审批状态", key: "_act_state_text", wch: 12 },
      ],
    };
  },
  methods: {
    handleAdd() {
      this.mode = "add";
      this.t_id = null;
      this.limitedVisible = true;
    },
    handleShow(row) {
      this.mode = "show";
      this.t_id = row.id;
      this.limitedVisible = true;
    },
    async handleDel(row) {
      var id = row.id;
      await this.$API.ofm.lendingseal.delete.req(id);
      this.$refs.table.refresh();
      this.$message.success("删除成功");
    },
  //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },

  },
};
</script>

