<template>
  <el-container>
    <el-header height="60px" class="content-header">
      <MyHeader :title="'数据目录清单'" :formData="headerFormData" @submit="handleHeaderFormSubmit"></MyHeader>
    </el-header>
    <el-container>
      <el-main>
        <MyTableHeader :title="tableHeaderTitle" :tabs="tabs" :buttons="buttons" @tabClick="handleTabClick"
          @buttonClick="handleButtonClick"></MyTableHeader>

        <!-- <MyTable
          :tableData="tableData"
          :formData="formData"
          :minWidth="340"
          ref="myTableRef"
          @selection-change="handleSelectionChange"
        >
          <template #operation="{ row, index }">
            <el-button
              size="mini"
              @click="handleCopy(row, 'view')"
              type="primary"
              >复制</el-button
            >
            <el-button
              size="mini"
              @click="handleView(row, 'view')"
              type="primary"
              >详情</el-button
            >
        
            <el-button
              v-if="row.status === 1"
              size="mini"
              @click="handleStop(row, index)"
              type="primary"
              >停用</el-button
            >
            <el-button size="mini" @click="handleDelete(row)" type="primary"
              >删除</el-button
            >
          </template>
</MyTable> -->
        <el-table class="table-new" ref="tableRef" :data="tableData" @selection-change="handleSelectionChange"
          row-key="catalogId" border
          :header-cell-style="{ fontSize: '14px', backgroundColor: ' #cae5ff', color: '#333' }">
          <el-table-column type="selection" width="40" align="center" :reserve-selection="true" />
          <el-table-column type="index" label="序号" width="70" align="center" />
          <el-table-column prop="catalogName" label="目录名称" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="catalogCode" label="目录标识码" align="center" show-overflow-tooltip />
          <el-table-column prop="catalogType" label="目录类型" align="center">
            <template #default="scope">
              <div v-for="item in dict.type.catalog_type" :key="item.value">
                <span v-if="scope.row.catalogType === +item.value">
                  {{ item.label }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="shareRange" label="共享范围" align="center" />

          <el-table-column prop="isShare" label="共享状态" align="center">
            <template #default="scope">
              <!-- <div v-for="item in catalog_type" :key="item.value">
                <span v-if="scope.row.catalogType === +item.value">
                  {{ item.label }}
                </span>
              </div> -->
              <span v-if="scope.row.shareRange === '不共享'">——</span>
              <div v-else class="shareRange-txt">
                <el-button type="text" v-if="scope.row.isShare === 1"><span
                    style="color: #989185;">已开启</span></el-button>
                <el-button type="text" @click="applySharingHandle(scope.row)"
                  v-if="scope.row.isShare === 2">申请共享</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="informaationSystem" label="所属系统" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="provideUnit" label="所属单位" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="state" label="资源状态" align="center" min-width="160">
            <template #default="{ row }">
              <el-link v-if="row.Catlog === 1">
                <div class="icon-box">
                  <span>📰</span>
                  <span>编目</span>
                </div>
              </el-link>
              <el-link v-if="row.isResource === 1">
                <div class="icon-box">
                  <span>📒</span>
                  <span>资源</span>
                </div>
              </el-link>
              <el-link v-if="row.isGuiji === 1">
                <div class="icon-box">
                  <span>📇</span>
                  <span>归集</span>
                </div>
              </el-link>
              <el-link v-if="row.isDuty === 1">
                <div class="icon-box">
                  <span>🔗</span>
                  <span>上链</span>
                </div>
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="catalogStatus" label="目录状态" align="center">
            <template #default="{ row }">
              <div v-for="item in dict.type.catalog_status" :key="item.value">
                <span v-if="row.catalogStatus === +item.value">
                  {{ item.label }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="时间" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="sfzzml" label="是否对应职责目录" align="center">
            <template #default="{ row }">
              <el-tag type="success" v-if="row.isDuty === 1">是</el-tag>
              <el-tag type="danger" v-else>否</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="left" min-width="340">
            <template #default="{ row }">
              <el-popconfirm title="确认复制此条？" @confirm="handleCopy(row)" class="popconfirm_btn">
                <el-button type="text" icon="el-icon-document-copy" slot="reference">
                  复制
                </el-button>
              </el-popconfirm>
              <!-- <el-button link type="primary" @click="handleRow(row, 'edit')" v-if="row.catalogStatus === 1">编辑</el-button> -->
              <el-button type="text" @click="handleRow(row, 'edit')"
                v-if="row.catalogStatus === 1 || row.catalogStatus === 2">编辑</el-button>
              <!-- <el-button type="text" @click="handleRowAssetChange(row)" v-if="row.catalogStatus === 5">资产变更</el-button> -->

              <!-- <el-button  type="text" @click="handleRow(row, 'change')" v-if="row.catalogStatus === 5">变更</el-button> -->
              <el-button type="text" @click="handleRow(row, 'view')">查看</el-button>
              <el-button type="text" @click="handleView(row)" v-if="row.isGuiji === 1">查看归集</el-button>

              <el-popconfirm title="是否确定删除?" @confirm="handleDeleteRow(row)" class="popconfirm_btn">
                <el-button type="text" icon="el-icon-delete" slot="reference">删除</el-button>
              </el-popconfirm>
              <el-button type="text" @click="handleConfigId(row)">协同配置</el-button>

              <el-popconfirm title="是否确定发布?" @confirm="handleIssue(row)" class="popconfirm_btn">
                <template #reference>
                  <el-button type="text" v-if="row.catalogStatus === 2">发布</el-button>
                </template>
              </el-popconfirm>
              <el-popconfirm title="是否确定失效?" @confirm="handleInvalid(row)">
                <template #reference>
                  <el-button type="text" v-if="row.catalogStatus === 6">失效</el-button>
                </template>
              </el-popconfirm>

              <!-- <el-link class="mr10" @click="handleRow(row, 'edit')" v-if="row.catalogStatus === 1">编辑</el-link>
              <el-link class="mr10" v-if="row.catalogStatus === 6">变更</el-link>
              <el-link class="mr10" @click="handleRow(row, 'view')" v-else>查看</el-link>
              <el-popconfirm title="是否确定删除?" @confirm="handleDeleteRow(row)">
                <template #reference>
                  <el-link class="mr10">删除</el-link>
                </template>
              </el-popconfirm>
              <el-popconfirm title="是否确定发布?" @confirm="handleIssue(row)">
                <template #reference>
                  <el-link class="mr10" v-if="row.catalogStatus === 2">发布</el-link>
                </template>
              </el-popconfirm>
              <el-popconfirm title="是否确定失效?" @confirm="handleInvalid(row)">
                <template #reference>
                  <el-link class="mr10" v-if="row.catalogStatus === 5">失效</el-link>
                </template>
              </el-popconfirm> -->
            </template>
          </el-table-column>
        </el-table>

        <MyPagination :total="tableTotal" :page-size="pageSize" :current-page="currentPage"
          @pageChange="pagi_changePage" @sizeChange="pagi_changeSize"></MyPagination>
      </el-main>
    </el-container>

    <!-- 导入 -->
    <div v-if="fileUploadShowDialog">
      <FileUploadDialog v-model="fileUploadShowDialog" :uploadUrl="uploadUrl" @confirm="getList"></FileUploadDialog>
    </div>

    <!-- 库表 -->
    <div v-if="libraryTableVisible">
      <LibraryTable :current-op-obj="currentOpObj" v-model="libraryTableVisible" :is-add-operation="isAddOperation"
        @changeOperation="changeOperation" :operationType="operationType" @confirm="getList">
      </LibraryTable>
    </div>

    <!--  服务 -->
    <div v-if="addFwDialogVisible">
      <ServiceDialog :current-op-obj="currentOpObj" v-model="addFwDialogVisible" :is-add-operation="isAddOperation"
        :operationType="operationType" @confirm="getList"></ServiceDialog>
    </div>

    <!-- 文件 -->
    <div v-if="addWjDialogVisible">
      <FireDirectoryDialog :current-op-obj="currentOpObj" :is-add-operation="isAddOperation"
        v-model="addWjDialogVisible" :operationType="operationType" @confirm="getList"></FireDirectoryDialog>
    </div>

    <!-- 实时 -->
    <div v-if="addSjDialogVisible">
      <DataDirectoryDialog :current-op-obj="currentOpObj" :is-add-operation="isAddOperation"
        v-model="addSjDialogVisible" :operationType="operationType" @confirm="getList"></DataDirectoryDialog>
    </div>

    <el-dialog title="协同配置" :visible.sync="configOpen" width="50%" append-to-body>
      <div style="font-size: 18px">
        <span style="font-size: 20px; margin-right: 15px">协同id:</span>
        {{ currentOpObj.catalogId }}
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="configOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- <div v-if="showDialog">
      <ConfigDialog
        v-model="showDialog"
        :title="title"
        :rowObj="rowObj"
        @confirm="getList"
        @before-close=""
      ></ConfigDialog>
    </div> -->
  </el-container>
</template>
<script>
publishCatalog
import { getCatalogList, getCatalogDetail, saveCatalog, removeCatalog, removeBatchCatalog,publishCatalog,InvalidCatalog } from '@/api/unified-resources/data-directory/index.js'
import MyHeader from "@/components/MyHeader";
import MyTable from "@/components/MyTable";
import MyPagination from "@/components/MyPagination";
import MyTableHeader from "@/components/MyTableHeader";
import FileUploadDialog from "./dialog/FileUploadDialog.vue";
import LibraryTable from "./dialog/libraryTable.vue";
import ServiceDialog from "./dialog/serviceDialog.vue";
import FireDirectoryDialog from "./dialog/fileDirectory.vue";
import DataDirectoryDialog from "./dialog/DataDirectoryDialog.vue";

export default {
  name: "data-directory",
  dicts: ['catalog_type', 'catalog_status'],
  components: {
    MyHeader,
    MyTableHeader,
    MyTable,
    MyPagination,
    FileUploadDialog,
    LibraryTable,
    ServiceDialog,
    FireDirectoryDialog,
    DataDirectoryDialog
  },
  data() {
    return {
      configOpen: false,
      addFwDialogVisible: false,
      libraryTableVisible: false,
      addWjDialogVisible: false,
      addSjDialogVisible: false,
      isAddOperation: '',
      operationType: '',
      fileUploadShowDialog: false,
      uploadUrl: process.env.VUE_APP_BASE_API + '/catalog/importData',
      showDialog: false,
      title: "新增",
      rowObj: {},
      currentOpObj: {},
      type: "add",
      tableData: [],
      formData: [
        {
          label: "系统名称",
          fieldName: "dataManner",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "系统简称",
          fieldName: "gatewayIp",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "所属单位",
          fieldName: "gatewayPort",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "系统类型",
          fieldName: "sixIp",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "是否对应职责目录",
          fieldName: "sixPort",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },

      ],
      tableTotal: 0,
      pageSize: 10,
      currentPage: 1,
      selectedRows: [], // 存储选中的行数据
      searchForm: {},
      treeSearchVal: "",
      tableHeaderTitle: "项目列表",
      tabs: [],
      buttons: [
        {
          label: "新增库表目录",
          type: "primary",
          methodName: "action1",
          // icon: "el-icon-circle-plus",
        },
        {
          label: "新增服务目录",
          type: "primary",
          methodName: "action2",
          // icon: "el-icon-circle-plus",
        },
        {
          label: "新增文件目录",
          type: "primary",
          methodName: "action3",
          // icon: "el-icon-circle-plus",
        },
        {
          label: "新增实时目录",
          type: "primary",
          methodName: "action4",
          // icon: "el-icon-circle-plus",
        },
        {
          label: "导入",
          type: "primary",
          methodName: "action5",
          // icon: "el-icon-circle-plus",
        },
        {
          label: "导出",
          type: "primary",
          methodName: "action6",
          // icon: "el-icon-circle-plus",
        },
        {
          label: "全部删除",
          type: "primary",
          methodName: "action7",
          // icon: "el-icon-circle-plus",
        },

      ],

      headerFormData: [
        {
          label: "标签",
          fieldName: "informationLabel",
          type: "input",
          value: "",
          placeholder: "请输入标签",
          // isRequired: true,
        },
        {
          label: "目录名称",
          fieldName: "catalogName",
          type: "input",
          value: "",
          placeholder: "请输入目录名称",
          // isRequired: true,
        },
        {
          label: "目录分类",
          fieldName: "informationSystem",
          type: "input",
          value: "",
          placeholder: "请输入目录分类",
          // isRequired: true,
        },


      ],
      catalogIds: '',
    };
  },

  methods: {
    // 头部搜索框
    handleHeaderFormSubmit(form) {
      this.searchForm = form;
      this.getList();
    },
    // 树结构点击
    handleNodeClick() { },
    // 列表头部
    handleTabClick(tab) {
      this.tabs.forEach((item) => {
        if (item.label === tab.label) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
    },
    // 列表头部功能按钮
    handleButtonClick(methodName) {
      console.log(methodName, "methodName");

      switch (methodName) {
        case "action1":
          // 新增库表目录
          this.rowObj = {};
          this.currentOpObj = {};
          this.title = "新增";
          this.isAddOperation = 'add'
          this.libraryTableVisible = true;
          break;
        case "action2":
          // 新增服务目录
          this.rowObj = {};
          this.currentOpObj = {};
          this.title = "新增";
          this.isAddOperation = 'add'
          this.addFwDialogVisible = true;
          break;
        case "action3":
          // 新增文件目录
          this.rowObj = {};
          this.currentOpObj = {};
          this.title = "新增";
          this.isAddOperation = 'add'
          this.addWjDialogVisible = true;
          break;
        case "action4":
          // 新增实时目录
          this.rowObj = {};
          this.currentOpObj = {};
          this.title = "新增";
          this.isAddOperation = 'add'
          this.addSjDialogVisible = true;
          break;
        case "action5":
          // 导入
          this.fileUploadShowDialog = true;
          break;
        case "action6":
          // 导出
          if (this.selectedRows.length > 0) {
            // let ids = [];
            // ids = this.selectedRows.map((item) => item.id);
            let pForm = {};

            this.headerFormData.forEach(i => {
              pForm[i.fieldName] = i.value;
            })
            this.download(
              "/catalog/export",
              {
                ...pForm,
                catalogIdSet: this.catalogIds.join(',')
              },
              `目录_${new Date().getTime()}.zip`
            );
            this.$message({
              type: 'success',
              message: '导出成功'
            })
          } else {
            this.$confirm("请选择列表项?", "提示", {
              confirmButtonText: "关闭",
              cancelButtonText: "取消",
              showCancelButton: false,
              showConfirmButton: false,
              type: "warning",
              center: true,
            })
              .then(() => { })
              .catch(() => {

              });
          }
          break;

        case "action7":
          // 批量删除
          if (this.selectedRows.length > 0) {
            removeBatchCatalog({ catalogIds: this.catalogIds }).then(res => {
              if (+res.code === 200) {
                this.$message.success(res.msg)
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            this.$confirm("请选择列表项?", "提示", {
              confirmButtonText: "关闭",
              cancelButtonText: "取消",
              showCancelButton: false,
              showConfirmButton: false,
              type: "warning",
              center: true,
            })
              .then(() => { })
              .catch(() => { });
          }


          break;
        default:
          break;
      }
    },
    // 处理选中项变化
    handleSelectionChange(selectedRows) {
      // this.selectedRows = selectedRows; // 获取选中的行
      this.catalogIds = ''
      selectedRows.forEach(item => {
        this.catalogIds += item.catalogId + ','
      })
    },

    getList() {
      getCatalogList({
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          this.tableData = res.data;
          this.tableTotal = +res.total;
        }
      });
    },
    // 列表分页
    pagi_changePage(page) {
      this.currentPage = page;
      this.getList();
    },
    pagi_changeSize(size) {
      this.pageSize = size;
      this.getList();
    },

    // 弹窗
    handleConfirm() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },

    // 复制
    handleCopy(row) {
      this.getDetail(row)
    },
    getDetail(row) {
      getCatalogDetail({ catalogId: row.catalogId }).then(res => {
        if (+res.code === 200) {
          let pForm = { ...res.data }
          pForm.catalog.catalogName = '副本_' + pForm.catalog.catalogName
          saveCatalog({ ...pForm }).then(res => {
            if (+res.code === 200) {
              // proxy.$modal.msgSuccess('复制成功')
              this.$message.success('复制成功')
              this.getList()
            }
          })
        }
      })
    },
    handleRow(row, type) {
      /////////////
      let catalogId = row.catalogId
      let catalogType = row.catalogType
      this.isAddOperation = type
      this.$store.dispatch(
        "projectManage/setCatalogId",
        row.catalogId
      );
      switch (catalogType) {
        case 1:
          this.libraryTableVisible = true
          break
        case 2:
          this.addFwDialogVisible = true
          break
        case 3:
          this.addWjDialogVisible = true
          break
        case 4:
          this.addSjDialogVisible = true
          break
      }
    },
    // 编辑
    handleView(row) {
      this.rowObj = row;
      this.title = "查看";
      this.showDialog = true;
    },
    handleEdit(row) {
      console.log(row, "row");
      this.rowObj = row;
      this.title = "编辑";
      this.showDialog = true;
    },

    beforeClose() {
      this.showDialog = false;
    },
    handleDeleteRow(row) {
      removeCatalog({ catalogId: row.catalogId }).then(res => {
        if (+res.code === 200) {
          this.$message.success(res.msg)
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    changeOperation() { },
    handleConfigId(row) {
      this.currentOpObj = row
      this.configOpen = true
    },
    handleIssue(row) {
  publishCatalog({ catalogId: row.catalogId }).then(res => {
    if (+res.code === 200) {
      this.$message.success(res.msg)
      this.getList()
    } else {
      this.$message.error(res.msg)
    }
  })
},
handleInvalid(row) {
  InvalidCatalog({ catalogId: row.catalogId }).then(res => {
    if (+res.code === 200) {
      this.$message.success(res.msg)
      this.getList()
    } else {
      this.$message.error(res.msg)
    }
  })
}

    // handleDelete(row) {
    //   this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     center: true,
    //     type: "warning",
    //   })
    //     .then(() => {
    //       falseDeleteMis({ ids: row.id }).then((res) => {
    //         if (+res.code === 200) {
    //           this.$message({
    //             message: res.msg,
    //             type: "success",
    //           });
    //           this.getList();
    //         } else {
    //           this.$message.error(res.msg);
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    //   console.log(row, "row");
    // },
  },
  created() { },
  mounted() {
    this.getList()
  },
}
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}

.el-icon-search {
  font-size: 16px;
  font-weight: 700;
  color: #1e80e0;
}

.popconfirm_btn {
  margin: 0 10px !important;
}
</style>
