<template>

  <el-card>
    <y-table
      ref="table"
      :is-vxe="true"
      :data="tableData"
      :columns="columns"
      :reload="reloadData"
      :row-class-name="handleDisabledRowClass"
      height="400"
      :pagination="false"
      border
      virtual
      has-batch-button
      :row-key="'id'"
      @selection-change="handleSelectChange"
    ></y-table>

    <!-- <TableMd class="md"></TableMd> -->
  </el-card>
</template>

<script>
// import TableMd from '../../../docs/components/table.md'
// import Table from '../../../packages/Table/src/VxeTable'
// import XEUtils from 'xe-utils'
export default {
  name: '',
  components: {
    // TableMd
    // Table
  },
  data() {
    return {
      inputValue: '',
      columns: [
        { type: 'selection', width: 50 },
        { label: '商品ID', prop: 'skuId', filters: [{ data: '' }],
          renderFilter: (h, { $panel, col }) => {
            console.log(col)
            return col.filters.map(filter => {
              return <el-input v-model={filter.data} onInput={($event) => $panel.changeOption($event, !!filter.data, filter)}></el-input>
            })
          } },
        { label: '名称', prop: 'name', filter: true },
        { label: '商品品类', prop: 'l1Name', render: (h, { row }) => {
          return <span>{
            row.l1Name && row.l2Name && row.l3Name ? `${row.l1Name}/${row.l2Name}/${row.l3Name}` : row.l1Name
          }</span>
        } },
        { label: '销售单位', prop: 'priceUnit' },
        { label: '规格', prop: 'spec' },
        { label: '品牌', prop: 'brand' },
        { label: '生产厂商', prop: 'manufacturer' },
        { label: '保质期天数', prop: 'shelfLifeDays' }
      ],
      seqFixed: null,
      expandFixed: null,
      ageFixed: null,
      tableData: [
        {
          'skuId': '032201060000000194',
          'skuPrice': '4',
          'name': 'wp直送test111',
          'brand': '',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': '公斤（KG）',
          'availableTotalStock': '17',
          'unitName': '盒',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '4',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'DIRECT_DELIVERY',
          'l1Name': '面包',
          'l2Name': '面包',
          'l3Name': '面包',
          'spec': '个',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': null,
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1479045327884386304',
              'skuId': '032201060000000194',
              'unitName': '公斤（KG）',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 10,
          'id': '032201060000000194',
          'disabled': false
        },
        {
          'skuId': '052112070000000265',
          'skuPrice': '0',
          'name': 'wp的猪肉直送-干货',
          'brand': '',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': 'KG',
          'availableTotalStock': '114',
          'unitName': 'KG',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '0',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'DIRECT_DELIVERY',
          'l1Name': '其它1',
          'l2Name': '其它',
          'l3Name': '其它',
          'spec': '1000g*2kg*10包*1箱',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': {
            'depositGoodsId': '1466648324403625984',
            'depositGoodsCode': '',
            'name': '押金品A',
            'price': '1.1212',
            'ratio': '1:1',
            'fixedRatio': false
          },
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1468044222568333312',
              'skuId': '052112070000000265',
              'unitName': 'KG',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': true,
              'depositGoodsId': '1466648324403625984',
              'depositGoodsCode': 'DG012112031359441871',
              'depositGoodsName': '押金品A',
              'depositGoodsPrice': '1.1212',
              'depositGoodsRatio': '1:1'
            },
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1502923816853045248',
              'skuId': '052112070000000265',
              'unitName': '包',
              'ratio': '1:2',
              'type': 'OTHER',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            },
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1502923909052235776',
              'skuId': '052112070000000265',
              'unitName': '箱',
              'ratio': '1:1',
              'type': 'OTHER',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 100,
          'id': '052112070000000265',
          'disabled': false
        },
        {
          'skuId': 'S52206150000000504',
          'skuPrice': '0',
          'name': '辣椒粉2g (1箱=3000片 )',
          'brand': '',
          'thumbnail': 'https://yyx-temp.oss-cn-chengdu.aliyuncs.com/1412294777445023744/image/png/3262ddc0df84c7ecdb8f6ae33024e265.png',
          'minNum': 0,
          'priceUnit': '箱',
          'availableTotalStock': '5',
          'unitName': '箱',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '0',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'PURCHASE',
          'l1Name': '其它1',
          'l2Name': '其它',
          'l3Name': '其它',
          'spec': '1箱*3000pc',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': null,
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1536994063526572032',
              'skuId': 'S52206150000000504',
              'unitName': '箱',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            }
          ],
          'masterImgUrl': 'https://yyx-temp.oss-cn-chengdu.aliyuncs.com/1412294777445023744/image/png/3262ddc0df84c7ecdb8f6ae33024e265.png,https://yyx-temp.oss-cn-chengdu.aliyuncs.com/1412294777445023744/image/png/6b34f78a8d09cc1aff526b66b188f685.png',
          'manufacturer': '',
          'shelfLifeDays': 365,
          'id': 'S52206150000000504',
          'disabled': false
        },
        {
          'skuId': '032201060000000193',
          'skuPrice': '1',
          'name': 'wp直送test',
          'brand': '',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': '包',
          'availableTotalStock': '17',
          'unitName': '包',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '1',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'DIRECT_DELIVERY',
          'l1Name': '生鲜',
          'l2Name': '果蔬',
          'l3Name': '蔬菜',
          'spec': '份',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': null,
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1479045060094853120',
              'skuId': '032201060000000193',
              'unitName': '包',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 300,
          'id': '032201060000000193',
          'disabled': false
        },
        {
          'skuId': '052112070000000272',
          'skuPrice': '0',
          'name': 'wp的猪肉759',
          'brand': '',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': 'KG',
          'availableTotalStock': '10923',
          'unitName': 'KG',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '0',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'CROSS_DOCKING',
          'l1Name': '其它1',
          'l2Name': '其它',
          'l3Name': '其它',
          'spec': '1000g*2kg*10包*1箱',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': {
            'depositGoodsId': '1476014466809200640',
            'depositGoodsCode': '',
            'name': '接口测试押金品',
            'price': '3',
            'ratio': '2:1',
            'fixedRatio': false
          },
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1468044341925642240',
              'skuId': '052112070000000272',
              'unitName': 'KG',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': true,
              'depositGoodsId': '1476014466809200640',
              'depositGoodsCode': 'DG012112291017265621',
              'depositGoodsName': '接口测试押金品',
              'depositGoodsPrice': '3',
              'depositGoodsRatio': '2:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 90,
          'id': '052112070000000272',
          'disabled': false
        },
        {
          'skuId': '052112070000000261',
          'skuPrice': '1',
          'name': 'wp的猪肉直送-冷藏',
          'brand': '',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': 'KG',
          'availableTotalStock': '201',
          'unitName': 'KG',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '1',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'CROSS_DOCKING',
          'l1Name': '其它1',
          'l2Name': '其它',
          'l3Name': '其它',
          'spec': '1000g*2kg*10包*1箱',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': null,
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1468044210186747904',
              'skuId': '052112070000000261',
              'unitName': 'KG',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            },
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1482169892751802368',
              'skuId': '052112070000000261',
              'unitName': '包',
              'ratio': '1:1',
              'type': 'OTHER',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            },
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1482169892764385280',
              'skuId': '052112070000000261',
              'unitName': '盒',
              'ratio': '1:1',
              'type': 'OTHER',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 90,
          'id': '052112070000000261',
          'disabled': false
        },
        {
          'skuId': '052112070000000270',
          'skuPrice': '1',
          'name': 'wp的猪肉越库',
          'brand': '112',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': '包',
          'availableTotalStock': '8007',
          'unitName': 'KG',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '1',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'CROSS_DOCKING',
          'l1Name': '其它1',
          'l2Name': '其它',
          'l3Name': '其它',
          'spec': '1000g*2kg*10包*1箱',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': {
            'depositGoodsId': '1476010761741402112',
            'depositGoodsCode': '',
            'name': '汉堡王押金品wp',
            'price': '2',
            'ratio': '2:1',
            'fixedRatio': false
          },
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1468044332274548736',
              'skuId': '052112070000000270',
              'unitName': '包',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': true,
              'depositGoodsId': '1476010761741402112',
              'depositGoodsCode': 'DG012112291002431961',
              'depositGoodsName': '汉堡王押金品wp',
              'depositGoodsPrice': '2',
              'depositGoodsRatio': '2:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 90,
          'id': '052112070000000270',
          'disabled': false
        },
        {
          'skuId': 'S22210170000018358',
          'skuPrice': '1',
          'name': 'wp备货测试商品01',
          'brand': '',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': '包',
          'availableTotalStock': '1172',
          'unitName': '包',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '1',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'PURCHASE',
          'l1Name': '面包',
          'l2Name': '面包',
          'l3Name': '面包',
          'spec': '包',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': null,
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '3288711554387964941',
              'skuId': 'S22210170000018358',
              'unitName': '包',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 1111,
          'id': 'S22210170000018358',
          'disabled': false
        },
        {
          'skuId': 'S52207020000003305',
          'skuPrice': '0',
          'name': '3D立体防护口罩（白色）-(1包*60个)',
          'brand': '',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': '包',
          'availableTotalStock': null,
          'unitName': '',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '0',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'PURCHASE',
          'l1Name': '其它1',
          'l2Name': '其它',
          'l3Name': '其它',
          'spec': '1包*60个',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': null,
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '3288706915823286760',
              'skuId': 'S52207020000003305',
              'unitName': '包',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 1095,
          'id': 'S52207020000003305',
          'disabled': false
        },
        {
          'skuId': '052112070000000268',
          'skuPrice': '2',
          'name': 'wp的猪肉182',
          'brand': '',
          'thumbnail': '',
          'minNum': 0,
          'priceUnit': 'KG',
          'availableTotalStock': '533',
          'unitName': 'KG',
          'priceRangeMin': null,
          'priceRangeMax': null,
          'price': '2',
          'quotation': [],
          'goodsAttrList': [],
          'saleType': 'CROSS_DOCKING',
          'l1Name': '其它1',
          'l2Name': '其它',
          'l3Name': '其它',
          'spec': '1000g*2kg*10包*1箱',
          'goodsRedlineDTO': null,
          'goodsDepositDTO': null,
          'subtotalMoney': '0',
          'unitList': [
            {
              'tenantId': '1412294777445023744',
              'orgId': '1413093866122248192',
              'id': '1468044232219426816',
              'skuId': '052112070000000268',
              'unitName': 'KG',
              'ratio': '1:1',
              'type': 'BASE',
              'hasDeposit': false,
              'depositGoodsId': null,
              'depositGoodsCode': '',
              'depositGoodsName': '',
              'depositGoodsPrice': '0',
              'depositGoodsRatio': '1:1'
            }
          ],
          'masterImgUrl': '',
          'manufacturer': '',
          'shelfLifeDays': 90,
          'id': '052112070000000268',
          'disabled': false
        }
      ]
    }
  },
  created() {
    // this.loadData()
  },
  methods: {
    reloadData() {},
    handleSelectChange(selection) {
      console.log('selection', selection)
    },
    handleDisabledRowClass() {},
    indexMethod(index) {
      return index * 2
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }
    },
    resetDateFilter() {
      this.$refs.xTable.clearFilter('name')
    },
    clearFilter() {
      this.$refs.xTable.clearFilter()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    setCurrent(row) {
      this.$refs.multipleTable.setCurrentRow(row)
    },
    handleKeyDown(val) {
      console.log('handleKeyDown', val)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    handleSizeChange(size) {
      console.log('size change', size)
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })

      console.log('sums', sums)

      return sums
    },
    loadData() {
      for (let i = 0; i < 10000; i++) {
        this.tableData.push({
          id: i + 1,
          parentId: null,
          name: `TestTestTestTestTestTestTestTestTestTestTestTestTest${i}`,
          type: 'js',
          size: 1024,
          date: new Date()
        })
      }
      console.log(this.tableData)
    },
    filterNameMethod({ value, row, column }) {
      return row.amount1 >= value
    },
    toggleSeqFixed() {
      this.seqFixed = this.seqFixed ? null : 'left'
      this.$nextTick(() => {
        this.$refs.xTable.refreshColumn()
      })
    },
    toggleExpandFixed() {
      this.expandFixed = this.expandFixed ? null : 'left'
      this.$nextTick(() => {
        this.$refs.xTable.refreshColumn()
      })
    },
    toggleExpandChangeEvent({ row, expanded }) {
      console.log('行展开事件' + expanded)
    }
  }
}
</script>

<style lang="scss">
::v-deep .warning-row {
  background: oldlace;
}
::v-deep .success-row {
  background: #f0f9eb;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
