<!--
    @Author: xiongkai
    @project:
    @Date: 2021-03-09
-->
<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar :conditionForm="conditionForm" @submitSearch="receiveSearch"></search-bar>
    <!-- 操作栏 -->
    <operate-bar :pageOptList="pageOptList" @submitPageOpt="receviceOpt"></operate-bar>
    <!--表格-->
    <new-table
      ref="table"
      :condition="condition"
      :tableHeader="tableHeader"
      :tableUrl="tableUrl"
      :tableOptList="tableOptList"
      @submitTableOpt="receviceOpt"
    >
    </new-table>
  </div>
</template>

<script>
import newTable from '@/components/new-table';
import editForm from './edit-form';
import Detail from './detail';
import * as api from '@/api/service-delegate';
import operateBar from '@/components/operate-bar';
import searchBar from '@/components/search-bar';
import { searchOpt } from '@/mixins/page-opt';
import { appRestApi } from '@/api/application';

const area = ['640px', '430px'];
export default {
  name: 'index',
  // 接收父页面传过来的属性
  props: {},
  components: {
    newTable,
    searchBar,
    operateBar
  },
  mixins: [searchOpt],
  // 页面数据绑定
  data() {
    return {
      tableUrl: api.tableUrl,
      conditionForm: [
        {
          label: '应用系统名称',
          name: 'appName',
          op: '=',
          value: '',
          component: 'SelectApp',
          apiUrl: appRestApi.table,
          valueName: 'applyName',
          labelName: 'applyName'
        },
        {
          label: '应用系统编号',
          name: 'appCode',
          op: 'like',
          value: '',
          component: 'ElInput'
        },
        {
          label: '服务资源名称',
          name: 'serviceName',
          op: 'like',
          value: '',
          component: 'ElInput'
        },
        {
          label: '服务资源标识符',
          name: 'serviceCode',
          op: 'like',
          value: '',
          component: 'ElInput'
        }
      ],
      tableHeader: [
        { label: '应用系统名称', prop: 'appName' },
        { label: '应用系统编号', prop: 'appCode' },
        { label: '服务资源名称', prop: 'serviceName' },
        { label: '服务资源标识符', prop: 'serviceCode' },
        { label: '创建时间', prop: 'createTime' }
      ],
      pageOptList: ['新增'],
      tableOptList: ['修改', '删除']
    };
  },
  created() {},
  // 计算属性
  computed: {},
  // 方法
  methods: {
    receviceOpt(opt, row) {
      if (opt == '新增') {
        this.handleAddDialog();
      } else if (opt == '修改') {
        this.handleEdit(row);
      } else if (opt == '删除') {
        this.handleDelete(row);
      } else if (opt == '详情') {
        this.handleDetail(row);
      }
    },
    // 新增
    handleAddDialog() {
      const that = this;
      const layer = that.$dgLayer({
        title: '新增',
        shade: [0.4, '#FFF'],
        content: editForm,
        props: {},
        area,
        on: {
          success() {
            that.handleSearch();
            layer.close(layer.dialogIndex);
          }
        }
      });
    },
    // 修改
    handleEdit({ id }) {
      const that = this;
      api.detail(id).then((res) => {
        const layer = that.$dgLayer({
          title: '修改',
          shade: [0.4, '#FFF'],
          content: editForm,
          area,
          props: {
            id: id,
            formData: res
          },
          on: {
            success() {
              that.handleSearch();
              layer.close(layer.dialogIndex);
            }
          }
        });
      });
    },
    // 详情
    handleDetail({ id }) {
      const that = this;
      api.detail(id).then((res) => {
        const layer = that.$dgLayer({
          title: '详情',
          shade: [0.4, '#FFF'],
          content: Detail,
          props: {
            formData: res
          },
          on: {
            success() {
              layer.close(layer.dialogIndex);
            }
          },
          area
        });
      });
    },
    handleDelete({ id }) {
      const that = this;
      that.$confirm(`是否确定删除这条数据！`, '确认', {}).then(() => {
        api.del(id).then(() => {
          that.handleSearch();
          that.$message.success('删除成功!');
        });
      });
    }
  }
};
</script>

<style scoped></style>
