<template>
  <el-dialog
    :title="title"
    style="height: 720px"
    :append-to-body="appendToBody"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :single="single"
      :selectable="false"
      :show-export="false"
      :showCustomColumn="false"
      :custom-table-height="420"
      quick-search-props="name,alias"
      :highlight-current-row="single"
      ref="dialogTable"
      :header-cell-class-name="headerCellClassName"
    >
      <!--
        加了查询条件后与元件数据不一至，先注释，如果数据要过滤可添加到 ht-table
      :default-querys="[
        {
          property: 'style_',
          value: styleType,
          operation: 'IN',
          relation: 'AND',
        },
      ]"
      -->
      <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="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: 'custom-dialog-dialog',
    mixins: [tableHeaderFilter],
    props: {
      appendToBody: {
        type: Boolean,
        default: false,
      },
      single: {
        type: Boolean,
        default: true,
      },
      /**显示样式(0:列表 1:树形) */
      styleType: {
        type: Number,
      },
    },
    data() {
      return {
        pageResult: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        data: [],
        dialogVisible: false,
        selectedNode: null,
        selection: [],
        selectionId: '',
      }
    },
    computed: {
      title: function () {
        if (this.styleType === 0) {
          return '选择[列表类型]-对话框'
        } else if (this.styleType === 1) {
          return '选择[树形类型]-对话框'
        } else if (this.styleType === 2) {
          return '选择[组合]-对话框'
        } else {
          return '选择-对话框'
        }
      },
    },
    methods: {
      handleChange(val) {
        this.selection = this.data.filter((item) => item.id === val)
      },
      //页面加载显示数据
      loadData(param, cb) {
        req
          .post(window.context.form + '/form/customDialog/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>