<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="Order_No" min-width="200">
      <template slot-scope="scope">
        {{ scope.row.order_no | orderNoFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
      <template slot-scope="scope">
        ¥{{ scope.row.price | toThousandFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Status" width="100" align="center">
      <template slot-scope="{row}">
        <el-tag :type="row.status | statusFilter">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    },
    orderNoFilter(str) {
      return str.substring(0, 30)
    },
      toThousandFilter(num) {
          return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      }
  },
  data() {
    return {
      list: null
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const data = { 'code': 20000, 'data': { 'total': 20, 'items':
         [{ 'order_no': 'E14b78DF-3ADd-75A9-d496-79Df781acdbD', 'timestamp': 1476830852412, 'username': 'Jose Hernandez', 'price': 1975, 'status': 'pending' },
           { 'order_no': '4B69AD24-17Ce-71ED-7EEC-C4fdEC1Cbce0', 'timestamp': 1476830852412, 'username': 'Frank Gonzalez', 'price': 11574.2, 'status': 'success' },
           { 'order_no': '6F3F9aab-7F82-dE8b-efD6-af2377ABdAdF', 'timestamp': 1476830852412, 'username': 'Mark Allen', 'price': 11875.5, 'status': 'success' },
           { 'order_no': 'D7A914C7-A9Ae-c27b-bd87-AE0c9a4202B1', 'timestamp': 1476830852412, 'username': 'Elizabeth Thomas', 'price': 9620.6, 'status': 'success' },
           { 'order_no': '78daEEbB-B59A-BdA9-F1Ae-664fEf63b229', 'timestamp': 1476830852412, 'username': 'Kenneth Walker', 'price': 3998.43, 'status': 'success' },
           { 'order_no': 'E6b98c96-dCf2-7bDa-0bdD-76Fc91Df1825', 'timestamp': 1476830852412, 'username': 'Larry Johnson', 'price': 7574.13, 'status': 'success' },
           { 'order_no': '65A28E82-6af8-2c37-66cf-6161238b36be', 'timestamp': 1476830852412, 'username': 'Larry Thomas', 'price': 10120.29, 'status': 'pending' },
           { 'order_no': 'bE58E9bb-dcEA-9Af6-f36c-24A58cC12fCA', 'timestamp': 1476830852412, 'username': 'Gary Jackson', 'price': 8665.9, 'status': 'success' },
           { 'order_no': 'A7f76Ff1-CdfA-DAEd-1b38-D48EfdCd8b6f', 'timestamp': 1476830852412, 'username': 'Mary Wilson', 'price': 13246.9, 'status': 'success' },
           { 'order_no': '326b7CCE-d17F-7d4c-b1bb-Cc74DE5ADE5a', 'timestamp': 1476830852412, 'username': 'Richard Lopez', 'price': 3888, 'status': 'success' },
           { 'order_no': 'fBABbAC0-2AA8-6ec8-1f5e-5EC2CEb6Fe89', 'timestamp': 1476830852412, 'username': 'Brian Thomas', 'price': 3519.8, 'status': 'pending' },
           { 'order_no': 'fc8EAdcC-3E96-c77E-EaEe-BC62aCe8C248', 'timestamp': 1476830852412, 'username': 'Kevin Johnson', 'price': 2380.6, 'status': 'pending' },
           { 'order_no': 'cBEB67Bd-5914-E913-DAff-4dEFF82Be3c3', 'timestamp': 1476830852412, 'username': 'Barbara Moore', 'price': 8960.8, 'status': 'success' },
           { 'order_no': 'FE855c04-fd30-b9a1-4f64-9D1Db0C178b8', 'timestamp': 1476830852412, 'username': 'Maria White', 'price': 10769, 'status': 'pending' },
           { 'order_no': '5196AfCC-168b-2AD4-7626-8BaBFFdC71Fd', 'timestamp': 1476830852412, 'username': 'Betty Wilson', 'price': 8094.6, 'status': 'success' },
           { 'order_no': '2bA347eF-CcAD-Bc63-4e9d-4c9ebdA89736', 'timestamp': 1476830852412, 'username': 'Richard Hall', 'price': 7626.5, 'status': 'pending' },
           { 'order_no': '8fFeF124-4bE4-5980-feB8-869a236dABC7', 'timestamp': 1476830852412, 'username': 'Brenda Allen', 'price': 5350, 'status': 'success' },
           { 'order_no': 'f68bF44d-aB4B-5A5d-159A-85DD6E94B7Ae', 'timestamp': 1476830852412, 'username': 'Betty White', 'price': 3887.55, 'status': 'success' },
           { 'order_no': 'fd6D73d3-d3AD-c1d0-8c39-df7AD676bd29', 'timestamp': 1476830852412, 'username': 'Thomas Garcia', 'price': 14281.8, 'status': 'success' },
           { 'order_no': 'AdeD5b10-bc92-EAb4-DAee-f9fB1e19deB0', 'timestamp': 1476830852412, 'username': 'Eric Robinson', 'price': 2840.4, 'status': 'pending' }] }}
      this.list = data.data.items.slice(1, 8)
    }

  }
}
</script>
