<template>
  <div>
    <!--表格-->
    <div>
      <div>
        <el-table
          v-loading="loading"
          stripe
          border
          size="small"
          ref="moveTable"
          highlight-current-row
          :data="getPage.records"
          style="width: 100%"
          :height="tableHeight"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          @row-click="_rowClickChange"
          @row-dblclick="_dbClickRow"
        >
          <el-table-column label="" width="60">
            <template slot-scope="scope">
              <div style="text-align: center !important;margin-right: -10px">
                <el-radio 
                  :label="scope.row.id?scope.row.id:scope.row.uid" 
                  v-model="templateRadio"
                  @change.native="_getTemplateRow(scope.row)">&ensp;</el-radio>
              </div>
            </template>
          </el-table-column>
          <slot></slot>
        </el-table>
      </div>
    </div>
    <el-pagination
      v-if="hidePage===undefined"
      class="my-el-page"
      style="margin-top:10px"
      background
      :current-page="getPage.current"
      :page-sizes="pageSizeOpts"
      :page-size="getPage.size"
      :layout="layout?layout:pageLayout"
      :total="getPage.total"
      @size-change="_pageSizeChange"
      @current-change="_pageChange"
    />
  </div>
</template>

<script>
/* radio-table(单选) */
export default {
  props: [
    'pageColumns',
    'tableHeight',
    'getPage',
    'iconMsg',
    'warnKey',
    'hidePage',
    'layout'
  ],
  data() {
    return {
      formId: '', // 表单id
      loading: true,
      pageParams: {
        page: 1,
        rows: this.$pageParams
      },
      rowData: {},
      pageSizeOpts: this.$pageSizeOpts,
      templateRadio: '',
      pageLayout: this.$pageLayout
    }
  },
  methods: {
    _getTemplateRow(row) {
      this.$emit('on-result-change', 'radioSelect', row)
    },
    // 初始化加载
    _initTable() {
      this.loading = false
    },
    _pageChange(page) {
      this.pageParams.page = page
      this._pageParamsChange()
    },
    _pageSizeChange(rows) {
      if (rows !== this.pageParams.rows) {
        this.pageParams.rows = rows
        this._pageParamsChange()
      }
    },
    _pageParamsChange() {
      this.$emit('on-result-change', 'page', '')
    },
    _searchParams() {
      this.loading = true
      return this.pageParams
    },
    // 点击单元格触发
    _rowClickChange(row) {
      this.templateRadio = row.id ? row.id : row.uid
      this.$emit('on-result-change', 'radioSelect', row)
    },
    // 双击行操作
    _dbClickRow(row, event) {
      this.$emit('on-result-change', 'dbSelect', row)
    },
    // 操作列回调
    _iconClick(name, rowData) {
      this.$emit('on-result-change', 'iconClick', {
        name: name,
        rowData: rowData
      })
    },
    _hideLoading() {
      this.loading = false
    },
    // 清空选中的数据
    _clear() {
      this.templateRadio = ''
    }
  }
}
</script>
