<template>
  <div class="manage-container">
    <div class="manage-wrap">
      <div class="manage-input">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          label-position="left"
        >
          <!--          <el-form-item label="部门名称">-->
          <!--            <el-input v-model="form.name" size="small"></el-input>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
      <div class="manage-button">
        <el-form-item width="100">
          <el-button type="primary" size="small" @click="handleAdd">
            添加部门
          </el-button>
        </el-form-item>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <h1 style="margin-top: 0">企业组织架构</h1>
          <el-tree
            :data="treeDeptData"
            :props="defaultProps"
            :default-expand-all="true"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <el-table
            :data="treeDeptData"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column
              prop="label"
              label="部门名称"
              width="300"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="weight"
              label="排序"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="status"
              :label="$t('dataEnquiry.zt')"
              align="center"
              width="100"
            >
              <template #default="{ row }">
                <el-switch
                  v-model="row.status"
                  active-value="0"
                  inactive-value="1"
                  @click="editStatus(row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              :label="$t('defalult.cz')"
              width="280"
              align="center"
            >
              <template #default="{ row }">
                <el-button type="text" @click="handleEdit(row)">
                  {{ $t('defalult.bj') }}
                </el-button>
                <el-button type="text" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--          <el-pagination-->
          <!--            @size-change="handleSizeChange"-->
          <!--            @current-change="handleCurrentChange"-->
          <!--            :current-page="currentPage4"-->
          <!--            :page-sizes="[100, 200, 300, 400]"-->
          <!--            :page-size="100"-->
          <!--            layout="total, sizes, prev, pager, next, jumper"-->
          <!--            :total="400"-->
          <!--            style="text-align: right"-->
          <!--          >-->
          <!--          </el-pagination>-->
        </div>
      </el-col>
    </el-row>
    <add-dept ref="add"></add-dept>
  </div>
</template>

<script>
import { doDeptEdit, doDeptDelete, getDeptTreeList } from '@/api/dept';
import addDept from './add';
export default {
  components: {
    addDept,
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      form: {
        name: '',
      },
      treeDeptData: [],
      deptData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  created() {
    // this.fetchData();
    this.fetchData();
  },
  methods: {
    // 树状图
    async fetchData() {
      this.listLoading = true;
      const { data } = await getDeptTreeList();
      this.treeDeptData = data;
      console.log(this.treeDeptData);
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
    // 修改状态
    async editStatus(row) {
      const { msg } = await doDeptEdit({
        deptId: row.id,
        status: row.status,
        parentId: row.parentId,
      });
      this.$message({
        type: 'success',
        message: msg == undefined ? '修改成功' : msg,
      });
      const that = this;
      setTimeout(function () {
        that.fetchData();
      }, 1000);
    },
    // 部门表格
    // async fetchData() {
    //   this.listLoading = true;
    //   const { data } = await getDeptList();
    //   this.deptData = data;
    //   setTimeout(() => {
    //     this.listLoading = false;
    //   }, 500);
    // },
    // 添加
    handleAdd() {
      this.$refs['add'].deptEdit();
    },
    // 修改
    handleEdit(row) {
      this.$refs['add'].deptEdit(row);
    },
    handleDelete(row) {
      this.$confirm('你确定要删除当前项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const { msg } = doDeptDelete({ deptId: row.deptId });
          this.$message({
            type: 'success',
            message: msg == undefined ? '删除成功' : msg,
          });
          const that = this;
          setTimeout(function () {
            that.fetchData();
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    handleQuery() {
      this.queryForm.page = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.queryForm.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.fetchData();
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .el-input {
    width: 200px !important;
  }
  .el-select {
    width: 200px !important;
  }
  .manage-button {
    padding-left: 12px;
  }
}
</style>
