<template>
<div>
<p>{{names}}</p>
<el-button type="text" @click="checkedRows = []">清空选择</el-button>
<honjo-data-table :paged-loader="pagedLoader" :checkedRows.sync="checkedRows" row-key="name" ref="table">
  <el-table-column type="selection" width="64px" reserve-selection></el-table-column>
  <el-table-column prop="name" label="姓名" ></el-table-column>
  <el-table-column prop="age" label="年龄" ></el-table-column>
  <el-table-column prop="status" label="状态"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</honjo-data-table>
</div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'

/**
 * @title  保留checked项 (远程分页)
 * @desc 一般用于跨页选择, 需要指定 row-key 与 reserve-selection, 使用checkedRows控制。
 */
@Component
export default class RemoteReserveCheckedExample extends Vue {
  @Ref() table!: any

  checkedRows = []

  dataSource = [
    { id: '95708874', name: '邵明', age: 59, address: '澳门特别行政区 澳门半岛 -', status: '1' },
    { id: '65421887', name: '邵磊', age: 28, address: '辽宁省 抚顺市 东洲区', status: '0' },
    { id: '34776362', name: '田军', age: 86, address: '甘肃省 临夏回族自治州 广河县', status: '1' },
    { id: '45443785', name: '魏军', age: 90, address: '江苏省 淮安市 盱眙县', status: '1' },
    { id: '35429264', name: '黎艳', age: 47, address: '北京 北京市 朝阳区', status: '1' },
    { id: '65853241', name: '雷敏', age: 37, address: '内蒙古自治区 锡林郭勒盟 苏尼特右旗', status: '0' },
    { id: '45539624', name: '高娟', age: 77, address: '天津 天津市 河东区', status: '1' },
    { id: '69126109', name: '孙超', age: 93, address: '宁夏回族自治区 固原市 西吉县', status: '1' },
    { id: '38344652', name: '夏平', age: 9, address: '云南省 德宏傣族景颇族自治州 盈江县', status: '0' },
    { id: '03816318', name: '傅丽', age: 98, address: '吉林省 辽源市 东丰县', status: '1' },
    { id: '29903181', name: '侯涛', age: 23, address: '宁夏回族自治区 中卫市 中宁县', status: '0' },
    { id: '64783878', name: '潘勇', age: 47, address: '四川省 甘孜藏族自治州 理塘县', status: '1' },
    { id: '67137493', name: '戴秀英', age: 13, address: '北京 北京市 西城区', status: '0' },
    { id: '43294385', name: '范杰', age: 100, address: '福建省 宁德市 福鼎市', status: '0' },
    { id: '65164882', name: '侯强', age: 17, address: '山西省 阳泉市 矿区', status: '1' },
    { id: '61705877', name: '苏强', age: 89, address: '河北省 承德市 丰宁满族自治县', status: '1' },
    { id: '76814304', name: '陈平', age: 84, address: '新疆维吾尔自治区 吐鲁番地区 鄯善县', status: '0' },
    { id: '69748172', name: '罗洋', age: 46, address: '湖北省 黄石市 黄石港区', status: '1' },
    { id: '38178819', name: '侯丽', age: 50, address: '上海 上海市 长宁区', status: '0' },
    { id: '28422311', name: '冯艳', age: 84, address: '河南省 平顶山市 湛河区', status: '0' },
    { id: '52193766', name: '江杰', age: 36, address: '湖北省 武汉市 东西湖区', status: '1' },
    { id: '59429385', name: '汪涛', age: 80, address: '浙江省 衢州市 柯城区', status: '0' },
    { id: '39306164', name: '蔡勇', age: 65, address: '新疆维吾尔自治区 昌吉回族自治州 昌吉市', status: '0' },
    { id: '65438576', name: '金静', age: 71, address: '安徽省 黄山市 休宁县', status: '0' },
    { id: '69758546', name: '赖丽', age: 81, address: '四川省 宜宾市 南溪区', status: '0' },
    { id: '12263777', name: '蔡磊', age: 44, address: '陕西省 咸阳市 杨陵区', status: '1' },
    { id: '76789554', name: '乔伟', age: 58, address: '海南省 三沙市 西沙群岛', status: '0' },
    { id: '63211146', name: '孔霞', age: 68, address: '山东省 枣庄市 台儿庄区', status: '0' },
    { id: '06833177', name: '王丽', age: 64, address: '安徽省 安庆市 迎江区', status: '0' },
    { id: '94792291', name: '徐涛', age: 97, address: '山西省 忻州市 五台县', status: '1' },
    { id: '21149340', name: '孔娟', age: 83, address: '重庆 重庆市 大渡口区', status: '0' },
    { id: '44239761', name: '孙秀兰', age: 70, address: '重庆 重庆市 万盛区', status: '1' },
    { id: '74862756', name: '周敏', age: 84, address: '海南省 三亚市 -', status: '1' },
    { id: '13433269', name: '丁娜', age: 48, address: '天津 天津市 滨海新区', status: '0' },
    { id: '21814359', name: '孔洋', age: 16, address: '上海 上海市 松江区', status: '0' },
    { id: '65922176', name: '田秀兰', age: 24, address: '福建省 龙岩市 上杭县', status: '1' },
    { id: '10566728', name: '丁涛', age: 73, address: '内蒙古自治区 乌海市 乌达区', status: '1' },
    { id: '37824181', name: '高杰', age: 5, address: '江西省 鹰潭市 其它区', status: '0' },
    { id: '78725894', name: '董艳', age: 49, address: '河南省 周口市 西华县', status: '0' },
    { id: '35466317', name: '顾洋', age: 62, address: '内蒙古自治区 锡林郭勒盟 苏尼特右旗', status: '1' },
    { id: '66584393', name: '沈涛', age: 48, address: '浙江省 嘉兴市 海宁市', status: '1' },
    { id: '67278776', name: '杜丽', age: 41, address: '宁夏回族自治区 石嘴山市 大武口区', status: '0' },
    { id: '72539508', name: '何静', age: 94, address: '云南省 昆明市 寻甸回族彝族自治县', status: '0' },
    { id: '02127810', name: '魏刚', age: 16, address: '黑龙江省 双鸭山市 四方台区', status: '1' },
    { id: '74014253', name: '汤秀兰', age: 27, address: '上海 上海市 静安区', status: '0' },
    { id: '30076343', name: '曹洋', age: 18, address: '青海省 海东市 化隆回族自治县', status: '1' },
    { id: '03152619', name: '崔艳', age: 98, address: '广西壮族自治区 贺州市 平桂管理区', status: '1' },
    { id: '93438125', name: '傅秀兰', age: 21, address: '宁夏回族自治区 石嘴山市 惠农区', status: '0' },
    { id: '64627271', name: '顾秀英', age: 18, address: '内蒙古自治区 乌海市 海南区', status: '1' },
    { id: '58719916', name: '谭勇', age: 42, address: '澳门特别行政区 离岛 -', status: '1' },
    { id: '62876740', name: '沈霞', age: 14, address: '海南省 三亚市 -', status: '1' },
    { id: '57581065', name: '董艳', age: 30, address: '河南省 洛阳市 西工区', status: '1' },
    { id: '85479209', name: '汤杰', age: 78, address: '河北省 承德市 平泉县', status: '0' },
    { id: '86307750', name: '赖洋', age: 93, address: '贵州省 黔南布依族苗族自治州 瓮安县', status: '0' },
    { id: '53564141', name: '姜强', age: 28, address: '澳门特别行政区 离岛 -', status: '1' },
    { id: '75126631', name: '孙秀兰', age: 61, address: '安徽省 安庆市 宿松县', status: '0' },
    { id: '64813165', name: '梁超', age: 59, address: '河北省 廊坊市 固安县', status: '0' },
    { id: '61671366', name: '魏平', age: 27, address: '湖南省 永州市 宁远县', status: '0' },
    { id: '42208949', name: '龚静', age: 33, address: '山西省 晋中市 介休市', status: '0' },
    { id: '43947675', name: '顾平', age: 47, address: '广西壮族自治区 来宾市 金秀瑶族自治县', status: '1' },
    { id: '65029975', name: '赖秀英', age: 37, address: '新疆维吾尔自治区 和田地区 洛浦县', status: '0' },
    { id: '07343338', name: '毛磊', age: 61, address: '香港特别行政区 香港岛 中西区', status: '1' },
    { id: '77177351', name: '叶艳', age: 54, address: '山西省 临汾市 侯马市', status: '0' },
    { id: '73362876', name: '秦艳', age: 35, address: '山西省 阳泉市 城区', status: '0' },
    { id: '15291337', name: '蒋娟', age: 83, address: '广东省 河源市 和平县', status: '1' },
    { id: '48835245', name: '苏芳', age: 61, address: '湖北省 孝感市 云梦县', status: '1' }
  ]

  get names () {
    return this.checkedRows.map((v: any) => v.name)
  }

  pagedLoader = ({ page, size, params }: any) => this.delay({ page, size, total: this.dataSource.length, rows: this.dataSource.slice((page - 1) * size, page * size) })

  delay<T> (data: T, duration = 1000): Promise<T> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(data)
      }, duration)
    })
  }

  mounted () {
    this.table.query()
  }
}
</script>
