<!--
应用列表
@Author: linqian
@Date: 2021-05-17 15:59
-->
<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
    <!-- 操作栏 -->
    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
    <!-- 表格 -->
    <new-table
      ref="table"
      :tableHeader="tableHeader"
      :tableUrl="tableUrl"
      :condition="condition"
      optColumnWidth="200"
      :tableOptList="tableOptList"
      @submitTableOpt="receviceOpt"
    >
    </new-table>
  </div>
</template>

<script>
import { appRestApi } from '@/api/application';
import addFuncForm from './add-func-form';
import { appImportUrl } from '@/api/import';
import { appSyncUrl } from '@/api/sync';
import searchBar from '@/components/search-bar';
import operateBar from '@/components/operate-bar';
import newTable from '@/components/new-table';
import { conditionForm, pageOptList, tableOptList, tableHeader, appForm } from './DataConfig';
import { searchOpt, importOpt, syncOpt, detailOpt, addEditOpt } from '@/mixins/page-opt';
const labelWidth = '180px';
const area = ['900px', '600px'];
export default {
  components: { operateBar, newTable, searchBar },
  mixins: [searchOpt, addEditOpt, detailOpt, importOpt, syncOpt],
  data() {
    return {
      conditionForm,
      pageOptList,
      tableOptList,
      // 表格请求路径
      tableUrl: appRestApi.table,
      // 表头
      tableHeader
    };
  },
  computed: {},
  methods: {
    /**
     * 接收操作事件
     */
    async receviceOpt(type, row) {
      const otherParams = {
        config: appForm,
        labelWidth,
        area
      };
      if (type == '修改') {
        const detailInfo = await this.getDetail(row.id);
        this.handleOpenEditForm('编辑', 'update', { ...otherParams, detailInfo });
      } else if (type == '新增') {
        this.handleOpenEditForm('新增', 'add', otherParams);
      } else if (type == '详情') {
        this.handleViewDetail(row.id, otherParams);
      } else if (type == '删除') {
        this.handleDelete(row);
      } else if (type == '功能配置') {
        this.handleSetFunc(row);
      } else if (type == '导入') {
        this.handleImport(appImportUrl, 'apply');
      } else if (type == '同步') {
        this.handleSync(appSyncUrl);
      }
    },
    /**
     * 删除
     */
    handleDelete(row) {
      this.$dgConfirm(`是否确定删除这条数据！`, '提示', {}).then(() => {
        appRestApi.del(row.id).then((res) => {
          this.$message.success("删除成功!");
          this.handleSearch();
        });
      });
    },
    /**
     * 功能配置
     */
    handleSetFunc(app) {
      this.$dgLayer({
        title: '功能配置',
        content: addFuncForm,
        props: {
          app
        },
        noneBtnField: true,
        area: ['1200px', '750px']
      });
    },

    /**
     * 获取详情
     */
    getDetail(id) {
      return new Promise((resolve) => {
        appRestApi.detail(id).then((res) => {
          resolve(res);
        });
      });
    },
    /**
     * @description: 保存表单
     * @param { 表单数据 } form
     * @param { 新增还是编辑 } type
     * @param { 弹框 } layer
     */
    saveForm(form, type, layer) {
      const api = type == 'update' ? 'update' : 'save';
      appRestApi[api](form)
        .then((res) => {
          this.$message.success('保存成功!');
          layer.close(layer.dialogIndex);
          this.handleSearch();
        })
        .catch((error) => {
          this.$message.error(error);
        });
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss'>
</style>