<template>
  <el-dialog
   :close-on-click-modal="false"
    id="addSqlBuilderDialog"
    v-loading="loading"
    :title="title"
    :visible.sync="dialogVisible"
    :append-to-body="true"
  >
    <div class="module_content">
      <el-card shadow="never" class="commont-cart">
        <el-form ref="searchForm" :model="searchForm" @submit.native.prevent>
          <div class="">

            <div class="search-header">
              <div class="tool-common-wrap">
                <div class="search-wrap">
                  <quick-query ref="quick" :placeholder="placeholder" :is-date="false" @quickSearch="quickSearch" />
                </div>
                <div class="btn-wrap">
                  <el-button type="primary" @click="rest()"> 刷新</el-button>
                </div>
              </div>
            </div>
            <div class="tableWrap">
              <el-table
                ref="singleTable"
                :data="tableList"
                v-loading="tableLoading"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%; margin: 15px 0"
                size="mini">
                <el-table-column type="index" label="序号" width="50" align="center">
                </el-table-column>
                <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="connectorType" label="类型" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="60" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-radio
class="radio"
:label="scope.$index"
v-model="radio"
name="checkedRadio"
                              @change.native="getTemplateRow(scope.$index,scope.row)">
                      <span></span>
                    </el-radio>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                :page-size="page.pageSize"
                :current-page.sync="page.pageNum"
                background
                @current-change="getDataCurrent()"
                :total="page.total"
              />
            </div>
          </div>
        </el-form>
      </el-card>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog(false)">取 消</el-button>
    <el-button type="primary" @click="subName">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>

import { queryConnector, deleteConnector } from '@/api/esb_service'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'
import { checkFormData } from '@/utils/common'
import QuickQuery from '@/components/quickquery/QuickQuery'
import { createNamespacedHelpers } from 'vuex'

const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  mixins: [EsbServiceListMixins],
  components: {
    QuickQuery
  },
  data() {
    return {
      title: '适配器列表',
      loading: false,
      dialogVisible: false,
      radio: '',

      uploadOptions: {
        name: 'file',
        type: 'icon',
        limit: 100000000
      },
      fileList: [],
      quickQueryKeys: ['name'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      placeholder: '名称',
      logic: 'and',
      connectorType: {
        key: 'connectorType',
        logic: 'OR',
        opt: 'LIKE',
        type: 'S',
        value: 'DB'
      }
    }
  },
  computed: {
    ...mapGetters(['projectID', 'projectName'])
  },
  props: {
    value: {
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.getData()
      this.$emit('closeconnectorListDialog', val)
    }
  },
  created() {
    this.setProjectID(localStorage.getItem('projectID'))
    this.setProjectName(localStorage.getItem('projectName'))
    this.page.pageSize = 5
  },
  methods: {
    ...mapMutations(['setProjectID', 'setProjectName']),
    handleSuccess(res, fileList) {
      this.getDataCurrent()
    },
    async getData() {
      this.tableLoading = true
      this.filters.push(this.connectorType)
      const rt = await queryConnector({
        logic: this.logic,
        filters: this.filters,
        ...this.sort,
        ...this.page
      }).catch(e => {
        this.tableLoading = false
        return Promise.reject(e)
      })
      if (rt.status === '200') {
        this.tableLoading = false
        this.tableList = rt.data.list || []
        this.page.total = rt.data.total
        return Promise.resolve(rt)
      } else {
        this.tableLoading = false
      }
    },
    getDataCurrent() {
      if (this.dialogVisible == false) {
        return false
      }
      this.getData().then((rt) => {
        if (this.tableList.length > 0) {
          this.handleCurrentChange(this.tableList[0])
        }
      })
    },
    // 关闭弹窗
    closeDialog(val) {
      this.$emit('closeconnectorListDialog', val)
    },
    // 点击单选框
    getTemplateRow(index, item) {
    },
    // 返回适配器名字
    subName() {
      this.$emit('getConnerctorName', this.tableList[this.radio])
    },
    quickQueryData() {
      this.tableLoading = true
      this.filters.push(this.connectorType)
      queryConnector({
        logic: this.logic,
        filters: this.filters,
        ...this.sort,
        ...this.page
      }).then(rt => {
        if (rt.status === '200') {
          this.tableLoading = false
          this.tableList = rt.data.list || []
          this.page.total = rt.data.total
          return Promise.resolve(rt)
        } else {
          this.tableLoading = false
        }
      }).catch(e => {
        this.tableLoading = false
        return Promise.reject(e)
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  .upload {
    /deep/ .uploader {
      .el-upload-list {
        display: none;
      }
    }
  }
</style>
