<template lang="html">
  <mu-container>
  <!-- <div style="margin: 0.5rem;"> -->
    <mu-paper :z-depth="1">
      <mu-data-table :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list">
        <template slot-scope="scope">
          <td class="is-center">{{scope.row.name}}</td>
          <td class="is-center">{{scope.row.calories}}</td>
          <td class="is-center">{{scope.row.fat}}</td>
          <td class="is-center">{{scope.row.carbs}}</td>
          <td class="is-center">{{scope.row.protein}}</td>
          <td class="is-center">
            jjj
          </td>
        </template>
      </mu-data-table>
    </mu-paper>
  <!-- </div> -->

</mu-container>
</template>

<script>
export default {
  mounted () {
  },
  data () {
    return {
      sort: {
        name: '',
        order: 'asc'
      },
      columns: [
        { title: '我是测试表头', name: 'name', width: '150' },
        { title: '我是测试表头123', name: 'calories', sortable: true, width: '150', align: 'center' },
        { title: '我是测试表头', name: 'fat', sortable: true, width: '150' },
        { title: '我是测试表头', name: 'carbs', sortable: true, width: '150' },
        { title: '我是测试表头', name: 'protein', sortable: true, width: '150' },
        { title: '操作', name: 'iron', width: '150', align: 'center' }
      ],
      list: [
        {
          name: 'Frozen Yogurt',
          calories: 15999999999999,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: 1
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: 1
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: 7
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: 8
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: 16
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: 0
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: 2
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: 45
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: 22
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: 6
        }
      ]
    }
  },
  methods: {
    handleSortChange ({ name, order }) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    }
  }
}
</script>

<style lang="less" scoped>
  .demo-button {
    margin: 6px 8px;
  }

  /deep/.mu-table th {
    border-right: 1px solid #ffffff;
    word-wrap: break-word;
    vertical-align: middle;
    white-space: normal;
    overflow: hidden;
    user-select: none;
    min-width: 0;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
  }

  // /deep/.mu-table th.is-sortable {
  //   color: rgba(0,0,0,.87);
  // }
  /deep/.mu-table th.is-sortable .mu-table-sort-icon {
    opacity: .6;
  }

  .container {
    max-width: fit-content;
  }

</style>