<template>
  <el-dialog :close-on-click-modal="false" :title="'选择适配器'+connectorType" :visible.sync="dialogVisible" width="800px" top="5vh" append-to-body @close="closeDialog">
    <el-form :model="formData" label-width="50px" @submit.native.prevent>

      <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>
    </el-form>
    <div class="tableWrap">
      <el-table
        v-if="!isMore"
        :data="tableList"
        v-loading="tableLoading"
        highlight-current-row
        style="width: 100%; margin-bottom: 10px"
        size="mini"
        @current-change="handleCurrentChange">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          align="left"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="description"
          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">
          <template slot-scope="scope">
            <el-radio v-model="selectIndex" :label="scope.$index" class="radioEmpty">{{''}}</el-radio>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-else
        :data="tableList"
        v-loading="tableLoading"
        highlight-current-row
        style="width: 100%; margin-bottom: 10px"
        size="mini"
        ref="multipleTable"
        tooltip-effect="dark"
        row-key="id"
        :reserve-selection="true"
        @row-click="clickRow"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="50"
          align="center"
          :reserve-selection="true">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          align="left"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="description"
          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>
      <el-pagination
        :page-size="page.pageSize"
        :current-page.sync="page.pageNum"
        background
        @current-change="quickQueryData()"
        :total="page.total"
      ></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { findAvailableConnectType, queryConnector } from '@/api/esb_service'
import QuickQuery from '@/components/quickquery/QuickQuery'
import EsbServiceListMixins from '@/mixins/esb_service_list_mixins'

export default {
  mixins: [EsbServiceListMixins],
  name: 'ChooseGoodsDialog',
  components: {
    QuickQuery
  },
  data() {
    return {
      dialogVisible: false,
      tableLoading: false,
      formData: {
        name: '',
        description: ''
      },
      tableList: [],
      selectIndex: -1,
      multipleSelection: [],
      typeList: [],
      filters: [],
      currentId: '',
      quickQueryKeys: ['name', 'description'],
      sort: {
        orderby: 'createon',
        sort: 'desc'
      },
      placeholder: '名称、说明'
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isMore: {
      type: Boolean,
      default: false
    },
    connectorId: {
      type: String,
      default: ''
    },
    connectorType: {
      type: String,
      default: ''
    }
  },
  created() {
    this.toGetDataCurrent = false
    this.page.pageSize = 5
    this.logic = 'or'
    this.fullFilters = [{ logic: 'and', filters: [{ key: 'connectorType', value: this.connectorType }] }, { logic: 'and', filters: [] }]
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        this.currentId = this.connectorId
        if (this.connectorType) {
          this.formData.connectorType = this.connectorType
          this.fullFilters[0].filters[0].value = this.connectorType
        }
        this.findAvailableConnectType()
        this.quickSearch({})
      } else if (this.isMore) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.setCurrentRow()
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    findAvailableConnectType() {
      findAvailableConnectType(false).then((rt) => {
        this.tableLoading = false
        if (rt.status === '200') {
          this.typeList = rt.data
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    getData() {
      this.tableLoading = true
      this.fullFilters[1].filters = this.filters
      queryConnector({
        logic: this.logic,
        fullFilters: this.fullFilters,
        ...this.sort,
        ...this.page
      }).then(rt => {
        if (rt.status === '200') {
          this.tableList = rt.data.list || []
          this.tableList.forEach((item, index) => {
            if (this.currentId && this.currentId === item.id) {
              this.selectIndex = index
            }
          })
          this.page.total = rt.data.total
        }
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        return Promise.reject(e)
      })
    },
    quickQueryData() {
      this.tableLoading = true
      this.fullFilters[1].filters = this.filters
      queryConnector({
        logic: this.logic,
        fullFilters: this.fullFilters,
        ...this.sort,
        ...this.page
      }).then(rt => {
        if (rt.status === '200') {
          this.tableList = rt.data.list || []
          this.tableList.forEach((item, index) => {
            if (this.currentId && this.currentId === item.id) {
              this.selectIndex = index
            }
          })
          this.page.total = rt.data.total
        }
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        return Promise.reject(e)
      })
    },

    // 关闭dialog
    closeDialog() {
      this.formData = {}
      this.powerSearch()
    },

    // 搜索过滤
    filterData(obj) {
      this.filters = []
      Object.keys(obj).forEach(key => {
        const filter = {
          key,
          opt: 'LIKE',
          type: 'S',
          value: obj[key]
        }
        if (filter.value) {
          this.filters.push(filter)
        }
      })
    },
    // 单选
    handleCurrentChange(val) {
      if (val) {
        this.currentId = ''
        this.selectIndex = this.tableList.findIndex(item => item.id === val.id)
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    clickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    submit() {
      if (this.isMore) {
        const data = JSON.parse(JSON.stringify(this.multipleSelection))
        this.$emit('confirm', data)
        this.dialogVisible = false
      } else {
        if (this.selectIndex >= 0) {
          const data = JSON.parse(JSON.stringify(this.tableList[this.selectIndex]))
          this.$emit('confirm', data)
          this.dialogVisible = false
        } else {
          this.$message({
            message: '请选择',
            type: 'error'
          })
        }
      }
    },
    cancel() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
</style>
