<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper seartop">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :span="8">
            <a-form-item label="数据源名称">
              <a-input placeholder="请输入数据源名称" v-model="queryParam.name" />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="数据库类型">
              <j-dict-select-tag v-model="queryParam.dbType" placeholder="请选择数据库类型" dict-code="database_type" />
            </a-form-item>
          </a-col>

          <a-col :span="4">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" class="searchBut">查询</a-button>
              <a-button type="primary" @click="searchReset" class="resetBut" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <div class="table_top">
      <a-row :gutter="15" type="flex" justify="space-between" align="middle">
        <a-col>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 8px;">
            <span>已选择 <a style="font-weight: 600; ">{{ selectedRowKeys.length }}</a>项</span>
            <span><a-button class="clearBut" @click="onClearSelected">清空</a-button></span>
            <span><a-button class="clearBut">批量操作</a-button></span>
          </div>
        </a-col>
        <a-col>
          <div class="table-operator">
            <a-button @click="handleAdd" icon="file-add">新增连接池</a-button>
            <a-button icon="download" @click="handleExportXls('多数据源管理')">导出</a-button>
            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
              :action="importExcelUrl" @change="handleImportExcel">
              <a-button icon="import" class="noImp">导入</a-button>
            </a-upload>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- table区域-begin -->
    <div>

      <!-- <a-alert type="info" showIcon style="margin-bottom: 16px;">
        <template slot="message">
          <span>已选择</span>
          <a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
          <span>项</span>
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </template>
      </a-alert> -->

      <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{ x: true }" :columns="columns"
        :dataSource="dataSource" :loading="loading" :pagination="false"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-popconfirm ok-text="确定" cancel-text="取消" overlayClassName="popDete" placement="bottomRight"
            @confirm="() => handleDelete(record.id)">
            <span slot="icon"></span>
            <span slot="title">
              <!-- <div @click="hide">2</div> -->
              <div>删除的操作不可逆，确定吗？</div>
            </span>
            <a>删除</a>
          </a-popconfirm>
          <!-- <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown> -->
        </span>

      </a-table>
      <div class="myPagination">
        <el-pagination ref="elpagination" @current-change="changeNum" :current-page="ipagination.current" background
          :page-size="ipagination.pageSize" layout="prev, pager, next,jumper, slot ,total " :total="ipagination.total">
          <el-button class="btn-sure" size="mini">确定</el-button>
        </el-pagination>
      </div>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <sys-data-source-modal ref="modalForm" @ok="modalFormOk" />

  </a-card>
</template>

<script>
import JEllipsis from '@/components/jeecg/JEllipsis'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import SysDataSourceModal from './modules/SysDataSourceModal'
export default {

  name: 'SysDataSourceList',
  mixins: [JeecgListMixin],
  components: { JEllipsis, SysDataSourceModal },
  data () {
    let ellipsis = (v, l = 20) => (<j-ellipsis value={v} length={l} />)
    return {
      description: '多数据源管理管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          // align: 'center',
          customRender: (t, r, index) => index + 1
        },
        {
          title: '数据源编码',
          // align: 'center',
          dataIndex: 'code'
        },
        {
          title: '数据源名称',
          // align: 'center',
          dataIndex: 'name'
        },
        {
          title: '数据库类型',
          // align: 'center',
          dataIndex: 'dbType_dictText'
        },
        {
          title: '驱动类',
          // align: 'center',
          dataIndex: 'dbDriver',
          customRender: (t) => ellipsis(t)
        },
        {
          title: '数据源地址',
          // align: 'center',
          dataIndex: 'dbUrl',
          customRender: (t) => ellipsis(t)
        },
        {
          title: '数据库名称',
          // align: 'center',
          dataIndex: 'dbName'
        },
        {
          title: '用户名',
          // align: 'center',
          dataIndex: 'dbUsername'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 147,
          fixed: "right",
          // align: 'center',
          scopedSlots: { customRender: 'action' },
        }
      ],
      url: {
        list: '/sys/dataSource/list',
        delete: '/sys/dataSource/delete',
        deleteBatch: '/sys/dataSource/deleteBatch',
        exportXlsUrl: 'sys/dataSource/exportXls',
        importExcelUrl: 'sys/dataSource/importExcel',
      },
    }
  },
  computed: {
    importExcelUrl () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    changeNum (val) {
      // console.log('2');
      this.ipagination.current = val
      this.loadData()
    }
  }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
@import '~@assets/less/shaDow.less';
@import '~@assets/less/tableCommon.less';

::v-deep .ant-form-item-children .ant-input {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 2px;
}

::v-deep .ant-select-selection--single {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 2px;
}

::v-deep .ant-select-selection__rendered {
  height: 38px;
  line-height: 38px;
}

.searchBut {
  
  border-radius: 0px 2px 2px 0px;
  opacity: 1;
  

  height: 38px;
  line-height: 38px;
  font-size: 14px;
}

.resetBut {
  width: 60px;
  height: 38px;
  line-height: 38px;
  background: #dbdbdb;
  border-radius: 2px;
  color: #000;
  opacity: 1;
  padding: 0;
  border: 1px solid #b6b6b6;
}

.ant-alert-info {
  background-color: #fff;
  border: none;

  .clearBut {
    // width: 60px;
    height: 38px;
    background: #ffffff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    
    letter-spacing: 0px;
    padding: 0 14px;
    margin-left: 16px;
  }
}

.ant-alert {
  padding-left: 0;
}

.table-page-search-wrapper .ant-form-inline .ant-form-item {
  margin-bottom: 10px;
}

.table-page-search-wrapper .table-page-search-submitButtons {
  margin-bottom: 10px;
}

::v-deep .seartop .ant-form-inline .ant-form-item > .ant-form-item-label {
  padding-right: 0;
}

.table-operator {
  .ant-btn {
    height: 38px;
    line-height: 38px;
    
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    
    margin: 0 16px 6px 0;
    padding: 0 14px;
  }

  .noImp {
    margin: 0 0 8px 0;
  }
}

::v-deep .ant-popover-message-title {
  padding-left: 0;
}

::v-deep .ant-popover-buttons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;

  .ant-btn-primary {
    width: 52px;
    height: 28px;
    line-height: 28px;
    
    border-radius: 2px 2px 2px 2px;
    // color: #fff;
    opacity: 1;
    // border: 1px solid #4717f6 !important;

    // &:hover {
    //   color: #fff !important;
      
    // }
  }

  .ant-btn {
    width: 52px;
    height: 28px;
    line-height: 28px;
    // background: #ffffff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    padding: 0;
    // 
  }
}

a {
  
}

.myPagination {
  margin-top: 40px;
  display: flex;
  justify-content: end;

  ::v-deep .el-pagination {
    font-weight: 600;

    .btn-sure {
      background: #dbdbdb;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #b6b6b6;
      padding: 0;
      color: #000;
      margin: 0 20px 0 10px;
      width: 50px;


    }

    .el-select .el-input .el-input__inner {
      color: #000;
      font-size: 14px;
      padding-right: 17px;
      font-weight: 400;
      border-radius: 2px;
    }

    .el-pager li {
      font-size: 16px;
      color: #888888;
      width: 34px;

      &:hover {
        opacity: 0.9;
      }
    }

    .el-pagination span:not([class*='suffix']) {
      font-size: 14px;
      color: #888888;
    }

    .el-pager li:not(.disabled).active {
      color: #fff;
    }
  }

  .ant-pagination {
    color: #888888;
  }

  ::v-deep .ant-select-selection--single {
    height: 28px !important;
  }

  ::v-deep .ant-select-selection__rendered {
    line-height: 28px !important;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-options-quick-jumper input {
    height: 28px;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-item {
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    width: 34px;
  }
}

::v-deep .ant-tooltip-inner {
  
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
}

//滚动条
::v-deep ::-webkit-scrollbar-thumb {
  
  border-radius: 9px 9px 9px 9px;
}
</style>