<template>
  <div class="planPermission">
    <div class="top">
      <el-form ref="ruleForm" :model="form" v-show="showSearch">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="名称:" prop="fileName">
              <el-input
                v-model="form.fileName"
                placeholder="请输入文件名称"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="search">
                查询</el-button
              >
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row class="row">
      <el-button type="primary" plain icon="Plus" @click="openDialog({}, 'add')"
        >新增</el-button
      >
      <el-button type="danger" plain icon="Delete" @click="batchDel"
        >批量删除</el-button
      >
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="resetQuery"
      ></right-toolbar>
    </el-row>
    <div class="table" ref="table_box">
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        :max-height="maxHeight"
        ref="multipleTableRef"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column
          label="文件名称"
          prop="fileName"
          show-overflow-tooltip
        />
        <el-table-column
          label="文件描述"
          align="center"
          prop="fileDescription"
          show-overflow-tooltip
        >
          <!-- <template #default="{ row }">
            <span>{{ projectTypes.find(item => item.id === row.projectTypeId)?.projectTypeName || '' }}</span>
          </template> -->
        </el-table-column>
        <el-table-column
          label="上传时间"
          prop="createTime"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span>{{ row.createTime?.slice(0, 10) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          show-overflow-tooltip
          width="170"
        >
          <template #default="{ row }">
            <el-button type="primary" link @click="handlePreview(row, 'view')"
              >下载</el-button
            >
            <el-button type="primary" link @click="openDialog(row, 'edit')"
              >编辑</el-button
            >
            <el-button type="danger" link @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        class="pagination"
        :total="total"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        @pagination="getTableList"
      />
    </div>
    <el-dialog
      v-model="visible"
      :title="`${opts.text}规划许可`"
      :close-on-click-modal="false"
      width="70%"
      :before-close="close"
      class="dialog"
    >
      <operate
        ref="operateRef"
        :cur-row="curRow"
        :opts="opts"
        :types="projectTypes"
        @close="close"
        v-if="visible"
      />
      <template #footer v-if="opts.type !== 'view'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="close">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, shallowRef } from "vue";
import { usePagination, useAdaption, useDicts } from "@/hooks";
import operate from "./operate.vue";
import { optTextMap } from "@/utils/map";
import {
  projectExaminationGuidelinePage,
  projectPlanningPermissionDel,
} from "@/api/xmsczl";
import { projectTypeList } from "@/api/projectInformationNew";
import { FileSystemList } from "@/api/project/tenderReview";
import { ElMessage, ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
const { maxHeight, onResize } = useAdaption(proxy, "table_box");
const showSearch = ref(true);
const visible = ref(false);
const opts = reactive({
  type: "",
  text: "",
});
const curRow = shallowRef({});
const form = reactive({
  projectName: "",
  spongeLandType: "",
  chargeDepartment: "",
  projectTypeId: "",
  buildStatus: "",
  fileType :'guide'

});

const params = computed(() => {
  return JSON.parse(JSON.stringify(form));
});
const { pageNum, pageSize, tableData, total, loading, getTableList } =
  usePagination(projectExaminationGuidelinePage, params);
const projectTypes = ref([]);
const openDialog = (data, type) => {
  visible.value = true;
  opts.type = type;
  opts.text = optTextMap.get(type);
  curRow.value = data;
};

const close = () => {
  visible.value = false;
  opts.type = "";
  opts.text = "";
  getTableList();
};

const search = () => {
  pageNum.value = 1;
  getTableList();
};
const resetQuery = () => {
  proxy.$refs.ruleForm.resetFields();
  search();
};

const batchDel = () => {
  const checkedList = proxy.$refs.multipleTableRef.getSelectionRows();
  if (!checkedList.length) return proxy.$modal.msgError("请选择一条数据！");
  const ids = checkedList.map((item) => item.id).join();
  proxy.$modal
    .confirm("是否确认删除？")
    .then(async () => {
      const res = await projectPlanningPermissionDel(ids);
      if (res?.code !== 200) return;
      proxy.$modal.msgSuccess("操作成功！");
      getTableList();
    })
    .catch(() => {});
};

const del = (row) => {
  proxy.$modal
    .confirm("是否确认删除？")
    .then(async () => {
      const res = await projectPlanningPermissionDel(row.id);
      if (res?.code !== 200) return;
      proxy.$modal.msgSuccess("操作成功！");
      getTableList();
    })
    .catch(() => {});
};

const submit = () => {
  proxy.$refs.operateRef.submit();
};
watch(showSearch, onResize);
function handlePreview(file) {
  FileSystemList({
    refId: file.id,
    refType: "examinationGuideline",
  }).then(({ data }) => {
    console.log(data, "datadata");
    return ElMessageBox.confirm(`下载此文件: ${data[0]?.originalName}？`).then(
      () => window.open(data[0]?.url),
      () => false
    );
  });
}
onMounted(() => {
  getTableList();
});
</script>
<style lang="scss" scoped>
.planPermission {
  padding: 20px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  .top,
  .row {
    flex-shrink: 0;
  }
  .table {
    flex: 1;
    :deep(.pagination) {
      margin-top: 0;
      margin-right: 10px;
      .el-pagination {
        right: 20px;
      }
    }
  }
  :deep(.formItem110) {
    .el-form-item__label {
      width: 110px;
      word-break: keep-all;
      white-space: nowrap;
    }
  }

  :deep(.formItem140) {
    .el-form-item__label {
      width: 140px;
      word-break: keep-all;
      white-space: nowrap;
    }
  }
}

:deep(.el-dialog__body) {
  background-color: #eef1fb;
}
</style>