<template>
  <el-dialog
    title="选择关联查询"
    :append-to-body="appendToBody"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <ht-table
      @load="loadData"
      :data="data"
      :single="single"
      :pageResult="pageResult"
      :show-export="false"
      :selectable="false"
      :showCustomColumn="false"
      :custom-table-height="420"
      quick-search-props="name,alias"
      :highlight-current-row="single"
      ref="dialogTable"
      :header-cell-class-name="headerCellClassName"
    >
      <template>
        <el-table-column v-if="single" align="center" width="50">
          <template slot-scope="scope">
            <el-radio
              v-model="selectionId"
              :label="scope.row.id"
              @change="handleChange"
            ></el-radio>
          </template>
        </el-table-column>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          label="名称"
          prop="name"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link type="primary">{{ row.name }}</el-link>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="alias"
          width="120"
          label="别名"
          :sortable="true"
        />
        <ht-table-column
          prop="style"
          label="显示样式"
          width="110"
          :render-header="renderHeaderMethod"
          :filters="[
            {text: '列表', value: '0'},
            {text: '树形', value: '1'}
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="info" v-if="row.style == '0'">列表</el-tag>
            <el-tag type="success" v-if="row.style == '1'">树形</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="dsType"
          label="数据来源"
          width="110"
          :render-header="renderHeaderMethod"
          :filters="[
            {text: '数据源', value: 'dataSource'},
            {text: 'REST接口', value: 'restful'}
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="info" v-if="row.dsType == 'dataSource'"
              >数据源</el-tag
            >
            <el-tag type="success" v-if="row.dsType == 'restful'"
              >REST接口</el-tag
            >
          </template>
        </ht-table-column>
      </template>
    </ht-table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="onConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import req from '@/request.js'
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
export default {
  name: 'CustomQuerySelectorDialog',
  mixins: [tableHeaderFilter],
  props: {
    appendToBody: {
      type: Boolean,
      default: true
    },
    single: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      pageResult: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      data: [],
      dialogVisible: false,
      selectedNode: null,
      selection: [],
      selectionId: ''
    }
  },
  methods: {
    handleChange(val) {
      this.selection = this.data.filter(item => item.id === val)
    },
    //页面加载显示数据
    loadData(param, cb) {
      req
        .post(window.context.form + '/form/customQuery/v1/list', param)
        .then(response => {
          this.data = response.data.rows
          this.pageResult = {
            page: response.data.page,
            pageSize: response.data.pageSize,
            total: response.data.total
          }
        })
        .finally(() => {
          cb && cb()
        })
    },
    showDialog() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    onConfirm() {
      // let selectedList = this.$refs.dialogTable.$refs.htTable.selection
      let selectedList = this.selection
      if (selectedList.length < 1) {
        this.$message({message: '请至少选择一项!', type: 'warning'})
        return
      }
      if (this.single && selectedList.length > 1) {
        this.$message({message: '只能选择一项!', type: 'warning'})
        return
      }
      let arr = []
      selectedList.forEach(item => {
        arr.push({alias: item.alias, name: item.name})
      })
      this.$emit('onConfirm', arr)
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .cell > .el-table__column-filter-trigger {
    display: none;
  }
}
</style>