/** 管理员管理 author:laiyh date:2020-10-28 */
<template>
  <dg-row>
    <!-- 搜索项 -->
    <search-bar ref="searchBar" :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
    <!-- 操作 -->
    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>

    <!-- 列表 -->
    <new-table
      ref="table"
      :tableUrl="tableUrl"
      :tableHeader="tableHeader"
      :condition="condition"
      :tableOptList="tableOptList"
      @submitTableOpt="receviceOpt"
    >
    </new-table>
  </dg-row>
</template>

<script>
import newTable from '@/components/new-table';
import Add from './add';
import Editor from './noBindEditor';
import * as api from '@/api/admin-manage';
import { downloadBlob } from '@/utils/download';
import searchBar from '@/components/search-bar';
import operateBar from '@/components/operate-bar';
import { searchOpt } from '@/mixins/page-opt';
import { conditionForm, tableHeader } from './DataConfig';
const area = ['1000px', '700px'];
export default {
  components: { newTable, searchBar, operateBar },
  mixins: [searchOpt],
  data() {
    const vm = this;
    return {
      tableUrl: api.table,
      conditionForm: vm.$lodash.cloneDeep(conditionForm),
      tableHeader,
      pageOptList: ['新增'],
      tableOptList: ['修改', '删除']
    };
  },
  methods: {
    receviceOpt(type, row) {
      if (type == '新增') {
        this.handleAddDialog();
      } else if (type == '修改') {
        this.handleEditor(row);
      } else if (type == '删除') {
        this.handleDelete(row);
      }
    },
    handleEditor({ id }) {
      const that = this;
      const layer = that.$dgLayer({
        title: '修改',
        shade: [0.4, '#FFF'],
        area: ['830px', '660px'],
        content: Editor,
        props: {
          id,
          type: 'edit'
        },
        on: {
          success() {
            layer.close(layer.dialogIndex);
            that.handleSearch();
          }
        }
      });
    },
    handleDelete({ id }) {
      const that = this;
      that.$confirm('是否确定删除这条数据！', '提示').then(() => {
        api
          .del(id)
          .then(() => {
            that.handleSearch();
            that.$message.success('删除成功!');
          })
          .catch((error) => {
            that.$message.error('删除失败!');
          });
      });
    },
    // 新增
    handleAddDialog() {
      const that = this;
      const orgId = this.$refs.searchBar.form.find((item) => item.name == 'orgId').value;
      const layer = that.$dgLayer({
        title: '新增',
        shade: [0.4, '#FFF'],
        content: Add,
        props: { type: 'create', orgId },
        area,
        on: {
          success() {
            layer.close(layer.dialogIndex);
            that.handleSearch();
          }
        }
      });
    },
    handleExport() {
      let data = this.$refs.table.getReqSearchCondition();
      api
        .exports(data, {
          method: 'post',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
        .then((res) => {
          downloadBlob('管理员信息.xls', res.data);
        })
        .catch((error) => {
          console.error('[Error]', error);
          this.$message.error('下载失败！');
        });
    },
    handleImport() {
      // const layer = this.$dgLayer({
      //     title: "管理员导入",
      //     shade: [0.4, "#FFF"],
      //     area: ["400px", "400px"],
      //     content: Import,
      //     props: {
      //         temp: "manager",
      //         action: "/usersvr/v2/admin/import",
      //         fileName: "管理员模版"
      //     },
      //     on: {
      //         success(params) {
      //             layer.close(layer.dialogIndex);
      //         }
      //     }
      // });
    }
  }
};
</script>

<style scoped lang="scss">
.el-input,
.el-select {
  width: 140px !important;
}
</style>
