<template>
  <!-- <div class="container">
    
  </div> -->
  <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="100">
          <!-- 自定义操作按钮，传递 row 和 index -->
          <template #operation="{ row, index }">
            <el-button size="mini" @click="handleView(row, 'view')" type="primary">查看</el-button>
            <el-button size="mini" @click="handleEdit(row, 'edit')" type="primary">编辑</el-button>
            <el-button size="mini" @click="handleDelete(row)" type="primary">删除</el-button>
          </template>
        </MyTable>
        <MyPagination :total="tableTotal" :page-size="pageSize" :current-page="currentPage"
          @pageChange="pagi_changePage" @sizeChange="pagi_changeSize"></MyPagination>
      </el-main>
    </el-container>
    <div v-if="showDialog">
      <UnitDepartmentMaintenance v-model="showDialog" :title="title" :rowObj="rowObj" @confirm="getList"
        @before-close="">
      </UnitDepartmentMaintenance>
    </div>
  </el-container>
</template>
<script>
import UnitDepartmentMaintenance from "./dialog/UnitDepartmentMaintenance.vue";
import MyHeader from "@/components/MyHeader";
import MyTable from "@/components/MyTable";
import MyPagination from "@/components/MyPagination";
import MyTableHeader from "@/components/MyTableHeader";
export default {
  name: "user-manage",
  components: {
    MyHeader,
    MyTableHeader,
    MyTable,
    MyPagination,
    UnitDepartmentMaintenance,
  },
  data () {
    return {
      showDialog: false,
      searchForm: {},
      tableData: [
        { name: "张三", age: 25, address: "北京市" },
        { name: "李四", age: 30, address: "上海市" },
        { name: "王五", age: 22, address: "广州市" },
      ],
      formData: [
        {
          label: "组织名称",
          fieldName: "name",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "排序",
          fieldName: "age",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "创建时间",
          fieldName: "address",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "创建人",
          fieldName: "address",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },

        {
          label: "状态",
          fieldName: "address",
          type: "input",
          showInTable: true,
          value: "",
          width: "80",
        },
      ],
      tableTotal: 0,
      pageSize: 10,
      currentPage: 1,
      treeSearchVal: "",
      tableHeaderTitle: "项目列表",
      tabs: [],
      buttons: [
        {
          label: "新建",
          type: "primary",
          methodName: "action1",
          icon: "el-icon-circle-plus",
        },
        {
          label: "删除",
          type: "primary",
          methodName: "action2",
          icon: "el-icon-remove",
        },
        {
          label: "启用",
          type: "primary",
          methodName: "action3",
          icon: "el-icon-video-play",
        },
        {
          label: "停用",
          type: "primary",
          methodName: "action4",
          icon: "el-icon-video-pause",
        },
        {
          label: "导入",
          type: "primary",
          methodName: "action5",
          icon: "el-icon-download",
        },
        {
          label: "导出",
          type: "primary",
          methodName: "action6",
          icon: "el-icon-upload2",
        },
      ],

      headerFormData: [
        {
          label: "组织名称",
          fieldName: "username",
          type: "input",
          value: "",
          placeholder: "请输入组织名称",
          // isRequired: true,
        },
        {
          label: "状态",
          fieldName: "username",
          type: "input",
          value: "",
          placeholder: "请输入用户状态",
          // isRequired: true,
        },
        // {
        //   label: "用户状态",
        //   fieldName: "gender",
        //   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();
    },
    // 列表头部功能按钮
    handleButtonClick (methodName) {
      console.log(methodName, "methodName");

      switch (methodName) {
        case "action1":
          // 新增
          this.rowObj = {};
          this.title = "新增";
          this.showDialog = true;
          break;
        case "action2":
          // 导出
          if (this.selectedRows.length > 0) {
            // exportTabAccessConfig().then((res) => {
            //   if (+res.code === 200) {
            //   }
            // });
            let ids = [];
            ids = this.selectedRows.map((item) => item.id);
            this.download(
              "/web/tab-access-config/export",
              {
                ids,
              },
              `统一接入配置_${new Date().getTime()}.xlsx`
            );
          } else {
            this.$confirm("请选择列表项?", "提示", {
              confirmButtonText: "关闭",
              cancelButtonText: "取消",
              showCancelButton: false,
              showConfirmButton: false,
              type: "warning",
              center: true,
            })
              .then(() => { })
              .catch(() => { });
          }
          break;

        default:
          break;
      }
    },
    // 树结构点击
    handleNodeClick () { },
    // 列表头部
    handleTabClick (tab) {
      this.tabs.forEach((item) => {
        if (item.label === tab.label) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
    },

    getList () {
      // getFileList({
      //   pageNumber: this.currentPage,
      //   pageSize: this.pageSize,
      //   fileName: this.searchName,
      // }).then((res) => {
      //   if (+res.code === 200) {
      //     this.tableData = res.data;
      //     this.tableTotal = +res.total;
      //   }
      // })
    },
    // 列表分页
    pagi_changePage (page) {
      this.currentPage = page;
      getList();
    },
    pagi_changeSize (size) {
      this.pageSize = size;
      getList();
    },
  },
  created () { },
  mounted () { },
};
</script>
<style lang="scss" scoped>
.el-main {
  padding: 0 20px;
}

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