/* *@description:数据源 *@author: hudw *@date: 2021-10-9 10:02:07 */
<template>
  <div :title="$route.meta.title">
    <a-modal
      :maskClosable='false'
      :title="mx_modal_title"
      :width="580"
      destroyOnClose
      :visible="visible"
      :confirmLoading="visible&&confirmLoading"
      @ok="mx_handleOk"
      @cancel="mx_handleCancel"
    >
      <p-grid-form ref="modalForm" :items="mx_modal_formItems"></p-grid-form>
    </a-modal>

    <a-card size="small" style="margin-bottom:10px">
      <div slot="title">
        <span style="cursor:pointer" @click="back">
          <a-icon class='mr-5' style='color: #1990ff' type='arrow-left'></a-icon>返回
        </span>
      </div>
      <p-grid-form ref="queryForm" layout="inline" :items="mx_queryFromItems" @submit="mx_querySubmit" />
    </a-card>
    <p-table
      style="background:#fff"
      :selectedRowKeys.sync="mx_selectedRowKeys"
      :scroll="{ x: true }"
      ref="table"
      bordered
      :columns="mx_columns"
      :remoteUrl="mx_remoteUrl"
      dragle
      :rowSelectType="false"
    >
      <template slot="operation" slot-scope="text,record">
        <a href="javascript:;" @click="mx_showMSG(record)">查看信息</a>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="undateItem(record)">修改</a>
        <a-divider type="vertical" />
        <a href="javascript:;" @click="deleteItem(record.id)">删除</a>
      </template>
      <a-row slot="title" type="flex" justify="space-between" align="middle">
        <a-col :flex="0">
          <h3>
            {{ $route.meta.title + '列表' }}
          </h3>
        </a-col>
        <a-col :flex="0">
          <p-button type="primary" icon="plus" style="margin-right:10px" @clickSync="addItem">新增</p-button>
          <!-- <p-button type="primary"  style="margin-right:10px" @clickSync="back">返回</p-button> -->
        </a-col>
      </a-row>
    </p-table>

  <a-drawer
      placement="right"
      keyboard
      @close="logVisible = false"
      :visible="logVisible"
      :wrapStyle="{}"
      :width="480"
      title="数据源信息"
    >
      <a-form layout="horizontal">
        <a-form-item
          style='margin-bottom: 0;'
          v-for="item in currentRecord"
          :key="item.label"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 17 }"
        >
          <h3 slot="label" style="display:inline-block;">{{ item.label }}</h3>
          <template slot>
            <div
              v-if="item.label == 'URL' || item.label == '验证SQL'"
              style="margin-top: 10px;line-height:1.6;font-size:14px"
            >
              {{ item.value }}
            </div>
            <span class="f-14" v-else>{{ item.value }}</span>
          </template>
        </a-form-item>
      </a-form>
    </a-drawer>

  </div>
</template>
<script>
import mainTable from './mixins/mainTable'
import queryForm from './mixins/queryForm'
import modal from './mixins/modal'
import drawer from './mixins/drawer'

export default {
  mixins: [queryForm,mainTable,modal,drawer],
  data() {
    return {
      spinning:false,
      confirmLoading: false
    }
  },
  mounted() {},
  methods: {
    back() {
      this.$emit('backto')

    },
    addItem() {
      this.mx_modal_OPEN(0)
    },
    undateItem(record) {
      this.mx_modal_OPEN(1,record)
    },
    deleteItem(id) {

       this.mx_del(id)
    }
  }
}
</script>

