<template>
  <el-container>
    <el-header>
      <div class="left-panel-group">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          v-auth="'filerecord.create'"
        ></el-button>
        </div>
        <div class="right-panel">
            <el-input
                v-model="query.name"
                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="name"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="文件份数"
          prop="counts"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="档案编号"
          prop="number"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="存档部门"
          prop="belong_dept_name"
          min-width="120">
        </el-table-column>
        <el-table-column
          label="存档人姓名"
          prop="create_by_name"
          min-width="120">
        </el-table-column>
        <el-table-column
          label="存档人电话"
          prop="contacts"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="存档位置"
          prop="location"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="存档时间"
          prop="create_time"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="接收人(综合办公室)"
          prop="reciver"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="备注"
          prop="remark"
          min-width="100"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="250">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="filerecordEidt(scope.row)"
              v-auth="'filerecord.update'"
              >编辑
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="fileDel(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  size="small"
                  type="danger"
                  v-auth="'filerecord.delete'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-drawer :title="titleMap " v-model="limitedVisible" size="50%">
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addForm"
      label-width="100px"
      label-position="left"
    > 
      <el-form-item label="资料名称" prop="name">
        <el-input v-model="addForm.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="档案编号" prop="number">
        <el-input v-model="addForm.number" clearable></el-input>
      </el-form-item>
      <el-form-item label="文件份数" prop="counts">
        <el-input v-model="addForm.counts" clearable></el-input>
      </el-form-item>
      <el-form-item label="存放位置" prop="location">
        <el-input v-model="addForm.location" clearable></el-input>
      </el-form-item>
      <el-form-item label="存档人电话" prop="contacts">
        <el-input v-model="addForm.contacts" clearable></el-input>
      </el-form-item>
      <el-form-item label="接收人(综合办)" prop="reciver" label-width="120px">
        <el-input v-model="addForm.reciver" clearable></el-input>
      </el-form-item>
        <el-form-item label="备注" prop="remark" type="textarea">
        <el-input v-model="addForm.remark" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
        <el-button
            v-auth="'filerecord.create'"
            v-if="type !== 'show'"
            type="primary"
            :loading="isSaving"
            @click="submitHandle()"
        > 保 存</el-button
      >
    </template>
  </el-drawer>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      apiObj: this.$API.ofm.filerecord.list,
      query: {},
      editId: null,
      isSaving: false,
      limitedVisible: false,
      limitedWatch: false,
      type: "add",
      titleMap:"档案管理",
      //表单数据
      addForm: {
        name: null,
        number: null,
        counts: null,
        location: null,
        contacts: null,
        reciver: "",
        remark: ""
      },
    };
  },
  methods: {
    handleAdd() {
      this.type = "add";
      this.addForm = this.getDefaultForm();
      this.limitedVisible = true;
    },
    handleCancel() {
        this.limitedVisible = false;       // 关闭弹窗
        this.getDefaultForm()// 清空表单
      },
    submitHandle() {
      let that = this;
        that.isSaving = true;
        that.submit();
    },
    getDefaultForm(){
      return {
        name: null,
        number: null,
        counts: null,
        location: null,
        contacts: null,
        reciver: "",
        remark: ""
      }
    },
    async submit() {
      let that = this;
      let res = null;
      try {
        if (that.type === "add") {
          res = await that.$API.ofm.filerecord.create.req(that.addForm);
        } else {
          res = await that.$API.ofm.filerecord.update.req(
            that.editId,
            that.addForm
          );
        }
        that.isSaving = false;
        that.limitedVisible = false;
        that.$refs.table.refresh();
      } catch (e) {
        that.isSaving = false;
      }
    },
    // 审批流结束之后才可以编辑
    filerecordEidt(row) {
      this.type = "edit";
      this.editId = row.id;
      this.limitedVisible = true;
      this.addForm = Object.assign({}, row);
    },
    async filerecordDel(row) {
      var id = row.id;
      var res = await this.$API.ofm.filerecord.delete.req(id);
      if (res.err_msg) {
        this.$message.error(res.err_msg);
      } else {
        this.$refs.table.refresh();
        this.$message.success("删除成功");
      }
    },
  //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },
  },
  
};
</script>

