<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form
        :model="where"
        :label-col="{md: {span: 6}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 18}, sm: {span: 24}}">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="部门名称:">
              <a-input
                v-model:value.trim="where.title"
                placeholder="请输入部门名称"
                allow-clear/>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item style="padding-left:10px;" :wrapper-col="{span: 24}">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 表格 -->
      <ele-pro-table
        ref="table"
        row-key="id"
        :datasource="url"
        :columns="columns"
        :where="where"
        :need-page="false"
        :parse-data="parseData"
        :expand-icon-column-index="1"
        :expanded-row-keys="expandedRowKeys"
        :scroll="{x: 'max-content'}"
        @expandedRowsChange="onExpandedRowsChange">
        <template #toolbar>
          <a-space>
            <a-button type="primary" @click="openEdit()">
              <template #icon>
                <plus-outlined/>
              </template>
              <span>新建</span>
            </a-button>
            <a-button @click="expandAll">展开全部</a-button>
            <a-button @click="foldAll">折叠全部</a-button>
          </a-space>
        </template>
        <!-- 部门类型列 -->
        <template #type="{ record }">
          <a-tag :color="['green', 'red', '', 'orange'][record.type-1]">
            {{ ['公司', '子公司', '部门', '小组'][record.type - 1] }}
          </a-tag>
        </template>
        <!-- 操作列 -->
        <template #action="{ record }">
          <a-space>
            <a @click="openEdit(null, record.id)">添加</a>
            <a-divider type="vertical"/>
            <a @click="openEdit(record)">修改</a>
            <a-divider type="vertical"/>
            <a-popconfirm @confirm="remove(record)" title="确定要删除此部门吗？">
              <a class="ele-text-danger">删除</a>
            </a-popconfirm>
          </a-space>
        </template>
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
  <dept-edit
    v-model:visible="showEdit"
    :data="current"
    :dept-list="deptList"
    @done="reload"/>
</template>

<script>
import {PlusOutlined} from '@ant-design/icons-vue';
import DeptEdit from './dept-edit';

export default {
  name: 'SystemDept',
  components: {PlusOutlined, DeptEdit},
  data() {
    return {
      // 表格数据接口
      url: '/dept/index',
      // 表格列配置
      columns: [
        {
          key: 'index',
          dataIndex: 'index',
          width: 48,
          align: 'center',
          customRender: ({index}) => index + 1
        },
        {
          title: '部门名称',
          dataIndex: 'name',
          width: 250,
          align: 'left',
        },
        {
          title: '部门编码',
          dataIndex: 'code',
          align: 'center',
        },
        {
          title: '部门全称',
          dataIndex: 'fullname',
          align: 'center',
        },
        {
          title: '部门类型',
          dataIndex: 'type',
          align: 'center',
          slots: {customRender: 'type'}
        },
        {
          title: '排序号',
          dataIndex: 'sort',
          align: 'center',
          sorter: true
        },
        {
          title: '备注',
          dataIndex: 'sort',
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
          customRender: ({text}) => this.$util.toDateString(text)
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          fixed: 'right',
          slots: {customRender: 'action'}
        }
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 表格展开的行
      expandedRowKeys: [],
      // 全部部门数据
      deptList: []
    };
  },
  methods: {
    /* 解析接口返回数据 */
    parseData(res) {
      res.data = this.$util.toTreeData(res.data.map(d => {
        d.key = d.id;
        d.value = d.id;
        d.title = d.name;
        return d;
      }), 'id', 'pid');
      if (!Object.keys(this.where).length) {
        this.deptList = res.data;
      }
      if (!this.expandedRowKeys.length) {
        this.expandAll();
      }
      // return res;
      return {
        code : res.code,
        msg : res.msg,
        data : {
          records : res.data
        }
      };
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    /* 打开编辑弹窗 */
    openEdit(row, pid) {
      this.current = Object.assign({
        pid: pid
      }, row);
      this.showEdit = true;
    },
    /* 删除单个 */
    remove(row) {
      if (row.children && row.children.length > 0) {
        this.$message.error('请先删除子节点');
        return;
      }
      const hide = this.$message.loading('请求中..', 0);
      this.$http.delete('/dept/delete/' + [row.id]).then(res => {
        hide();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        hide();
        this.$message.error(e.message);
      });
    },
    /* 展开全部 */
    expandAll() {
      let keys = [];
      this.$util.eachTreeData(this.deptList, (d) => {
        if (d.children && d.children.length) {
          keys.push(d.id);
        }
      });
      this.expandedRowKeys = keys;
    },
    /* 折叠全部 */
    foldAll() {
      this.expandedRowKeys = [];
    },
    /* 展开的行变化 */
    onExpandedRowsChange(expandedRows) {
      this.expandedRowKeys = expandedRows;
    }
  }
}
</script>

<style scoped>
</style>
