<template>
  <yo-tree-layout
    :load-data="loadTreeData"
    @select="onSelect"
    default-expanded-keys
    ref="tree-layout"
  >
    <container>
      <a-card :bordered="false">
        <Auth auth="sysOrg:page">
          <div class="yo-query-bar">
            <a-form-model :model="query" layout="inline">
              <a-form-model-item label="机构名称">
                <a-input allow-clear placeholder="请输入机构名称" v-model="query.name" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button-group>
                  <a-button @click="onQuery" type="primary">查询</a-button>
                  <a-button @click="onReset">重置</a-button>
                </a-button-group>
              </a-form-model-item>
            </a-form-model>
          </div>

          <yo-table :columns="columns" :load-data="loadData" ref="table">
            <Auth auth="sysOrg:add" slot="operator">
              <a-button @click="onOpen('add-form')" icon="plus">新增机构</a-button>
            </Auth>
            <span slot="action" slot-scope="text, record">
              <yo-table-actions>
                <Auth auth="sysOrg:edit">
                  <a @click="onOpen('edit-form', record)">编辑</a>
                </Auth>
                <Auth auth="sysOrg:delete">
                  <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
                    <a>删除</a>
                  </a-popconfirm>
                </Auth>
              </yo-table-actions>
            </span>
          </yo-table>
        </Auth>
      </a-card>
    </container>
    <add-form @ok="onReloadData" ref="add-form" />
    <edit-form @ok="onReloadData" ref="edit-form" />
  </yo-tree-layout>
</template>
<script>
import YoTreeLayout from '@/components/yoTreeLayout';

import AddForm from './addForm';
import EditForm from './editForm';

export default {
  components: {
    YoTreeLayout,
    AddForm,
    EditForm,
  },

  data() {
    return {
      query: {},
      columns: [
        {
          title: '机构名称',
          width: '400px',
          dataIndex: 'name',
          sorter: true,
        },
        {
          title: '唯一编码',
          width: '200px',
          dataIndex: 'code',
          sorter: true,
        },
        {
          title: '排序',
          width: '80px',
          dataIndex: 'sort',
          sorter: true,
        },
        {
          title: '备注',
          dataIndex: 'remark',
          sorter: true,
        },
      ],
    };
  },

  created() {
    const flag = this.$auth({
      sysOrg: [['edit'], ['delete']],
    });

    if (flag) {
      this.columns.push({
        title: '操作',
        width: '150px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
      });
    }
  },

  methods: {
    /**
     * 树形选择界面必要的方法
     * 传给yo-table-layout以示意数据接口
     */
    loadTreeData() {
      return this.$api.getOrgTree().then((res) => {
        return res.data;
      });
    },

    onSelect([id]) {
      this.query = {
        pid: id,
      };
      this.onQuery();
    },

    /**
     * 必要的方法
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
      return this.$api
        .getOrgPage({
          ...params,
          ...this.query,
        })
        .then((res) => {
          return res.data;
        });
    },

    /**
     * 有查询功能时的必要方法
     * 加载数据时初始化分页信息
     */
    onQuery() {
      this.$refs.table.onReloadData(true);
    },

    onReset() {
      Object.keys(this.query).forEach((p) => {
        if (p !== 'pid') {
          this.query[p] = undefined;
        }
      });
      this.onQuery();
    },

    /**
     * 必要方法
     * 重新列表数据
     */
    onReloadData() {
      this.$refs.table.onReloadData();
      this.$refs['tree-layout'].onReloadData();
    },

    /**
     * 有编辑新增功能的必要方法
     * 从列表页调用窗口的打开方法
     */
    onOpen(formName, record) {
      this.$refs[formName].onOpen(record, this.query['pid']);
    },

    onDelete(record) {
      this.$api.sysOrgDelete(record).then(({ success }) => {
        if (success) {
          this.$message.success('删除成功');
          this.onReloadData();
          if (this.query['pid'] == record.id) {
            delete this.query.pid;
          }
        }
      });
    },
  },
};
</script>