<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 ref="table" :data="tableData" class="table-new">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="序号" width="70" align="center" />
          <el-table-column prop="misProjectName" label="系统名称" align="center" min-width="220" />
          <el-table-column prop="systemAbbreviated" label="系统简称" align="center" min-width="180" />
          <el-table-column prop="belongDepartmentName" label="所属单位" align="center" min-width="200" />
          <el-table-column prop="systemType" label="系统类型" align="center" min-width="90" />
          <el-table-column prop="temp" label="是否对应职责目录" align="center" min-width="120">
            <template #default="{ row }">{{
              row.temp === 0 ? "否" : "是"
            }}</template>
          </el-table-column>

          <el-table-column label="操作" align="center" min-width="220">
            <template #default="scope">
              <el-popconfirm title="确认复制此条？" @confirm="handleCopy(scope.row)" class="popconfirm_btn">
                <el-button type="text" icon="el-icon-document-copy" slot="reference">
                  复制
                </el-button>
              </el-popconfirm>
              <el-button type="text" @click="handleView( scope.row)" icon="el-icon-view">
                <span>详情</span>
              </el-button>
              <el-button type="text" @click="handleEdit(scope.row)" icon="el-icon-edit">
                <span>编辑</span>
              </el-button>

              <el-popconfirm title="确认删除此条？" @confirm="handleDeleteRow(scope.row)" class="popconfirm_btn">
                <el-button type="text" icon="el-icon-delete" slot="reference">
                  删除
                </el-button>
              </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="showDialog">
      <InformationSystemDialog
        v-model="showDialog"
        :title="title"
        :rowObj="rowObj"
        @confirm="getList"
        @before-close="beforeClose"
      ></InformationSystemDialog>
    </div>
  </el-container>
</template>
<script>
import {
  queryMisList,
  addMis,
  updateMis,
  queryMisMsg,
  falseDeleteMis,
} from "@/api/unified-resources/information-system/index.js";
import MyHeader from "@/components/MyHeader";
import MyTable from "@/components/MyTable";
import MyPagination from "@/components/MyPagination";
import MyTableHeader from "@/components/MyTableHeader";
import InformationSystemDialog from "./dialog/InformationSystemDialog.vue";
export default {
  name: "access-config",
  components: {
    MyHeader,
    MyTableHeader,
    MyTable,
    MyPagination,
    InformationSystemDialog,
  },
  data() {
    return {
      loading: false,
      showDialog: false,
      title: "新增",
      rowObj: {},
      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",
        },
      ],

      headerFormData: [
        {
          label: "信息系统名称",
          fieldName: "misProjectName",
          type: "input",
          value: "",
          placeholder: "请输入信息系统名称",
          // isRequired: true,
        },

        {
          label: "所属单位",
          fieldName: "belongDepartment",
          type: "select",
          value: "",
          placeholder: "请选择所属单位",
          isRequired: true,
          options: [
            { label: "男", value: "male" },
            { label: "女", value: "female" },
          ],
        },
        // {
        //   label: "生日",
        //   fieldName: "birthdate",
        //   type: "date",
        //   value: "",
        //   placeholder: "请选择生日",
        //   isRequired: false,
        // },
      ],
    };
  },

  methods: {
    // 头部搜索框
    handleHeaderFormSubmit(form) {
      this.searchForm = form;
      this.getList();
    },
    // 树结构点击
    handleNodeClick() { },
    // 列表头部
    handleTabClick(tab) {

    },
    // 列表头部功能按钮
    handleButtonClick(methodName) {
      console.log(methodName, "methodName");

      switch (methodName) {
        case "action1":
          // 新增
          this.rowObj = {};
          this.title = "新增";
          this.showDialog = true;
          break;

        default:
          break;
      }
    },
    // 处理选中项变化
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows; // 获取选中的行
    },

    getList() {
      this.loading = true;
      queryMisList({
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      }).then((res) => {
        if (+res.code === 200) {
          if (res.data === null) {
            this.tableData = [];
            this.tableTotal = 0;
          } else {
            this.tableData = res.data;
            this.tableTotal = +res.total;
          }
          this.loading = false;
        }
      });
    },
    // 列表分页
    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) {
      queryMisMsg({ id: row.id }).then(res => {
        if (+res.code === 200) {
          let item = {}
          let dataSourceArr = []
          item = res.data[0]
          dataSourceArr = res.data[0].dataBaseList
          let arr = []
          dataSourceArr?.forEach(element => {
            console.log(element, 'element')
            arr.push(element.dbId)
          })

          let pForm = { ...item }
          pForm.misProjectName = '副本_' + row.misProjectName
          addMis({ ...pForm, dbId: arr }).then(res => {
            if (+res.code === 200) {
              this.$message.success("成功复制副本");
              this.getList()
            }
          })
        }
      })
    },
    // addData(type, row) {
    //   operationType.value = type
    //   currentOpObj.value = row
    //   dialogVisible.value = true
    // },
    // 编辑
    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) {
      falseDeleteMis({ ids: row.id }).then(res => {
        if (+res.code === 200) {
          this.$message.success(res.msg);
          this.getList()
        }
      })
    }
  },
  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-right: 10px !important;
}
</style>
