<template>
  <div class="app-container">
    <el-button class="filter-item" type="success" icon="el-icon-edit" @click="handleDownload">导出</el-button>

  </div>
</template>

<script>
// 引入
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils/index.js'
import { json2excel } from '@/utils/index.js'

export default {
  name: 'MilkMaintenance',
  directives: { waves },
  components: {

  },
  filters: {
    timestampToTime(val, timestamp) {
      return parseTime(val, timestamp)
    }
  },
  data() {
    return {
      listLoading: true,
      rolesList: [
        {
          userId: 123,
          userNum: 'admin', // 用户账号
          userName: 'admin', // 用户名称
          userDescription: '这个账户是超级管理员账户'
        }, {
          userId: 124,
          userNum: 'wxf123', // 用户账号
          userName: '张三', // 用户名称
          userDescription: '这个账户是一级管理员账户'
        }, {
          userId: 125,
          userNum: 'cz123', // 用户账号
          userName: '李氏', // 用户名称
          userDescription: '这个账户是二级管理员账户'
        }
      ],
      rolesList2: [
        {
          userId: 123,
          userNum: 'admin', // 用户账号
          userName: 'admin2', // 用户名称
          userDescription: '这个账户是超级管理员账户'
        }, {
          userId: 124,
          userNum: 'wxf123', // 用户账号
          userName: '张三2', // 用户名称
          userDescription: '这个账户是一级管理员账户'
        }, {
          userId: 125,
          userNum: 'cz123', // 用户账号
          userName: '李氏2', // 用户名称
          userDescription: '这个账户是二级管理员账户'
        }
      ],
      rolesList3: [
        {
          userId: 123,
          userNum: 'admin', // 用户账号
          userName: 'admin3', // 用户名称
          userDescription: '这个账户是超级管理员账户'
        }, {
          userId: 124,
          userNum: 'wxf123', // 用户账号
          userName: '张三3', // 用户名称
          userDescription: '这个账户是一级管理员账户'
        }, {
          userId: 125,
          userNum: 'cz123', // 用户账号
          userName: '李氏3', // 用户名称
          userDescription: '这个账户是二级管理员账户'
        }
      ]

    }
  },
  created() {

  },
  mounted() {
    this.listLoading = false
  },
  methods: {
    // 点击下载事件
    handleDownload() {
      // 注意：组装的导出excel所需要的数据结构
      var excelDatas = [
        {
          tHeader: ['序号', '名字', '描述'],
          filterVal: ['userId', 'userName', 'userDescription'],
          tableDatas: this.rolesList3,
          sheetName: 'sheet3'
        },
        {
          tHeader: ['序号', '名字', '描述'],
          filterVal: ['userId', 'userName', 'userDescription'],
          tableDatas: this.rolesList2,
          sheetName: 'sheet2'
        },
        {
          tHeader: ['序号', '名字', '描述'],
          filterVal: ['userId', 'userName', 'userDescription'],
          tableDatas: this.rolesList,
          sheetName: 'sheet1'
        }
      ]
      //   引入的函数
      json2excel(excelDatas, '数据报表', true, 'xlsx')
    }

  }

}
</script>
