<template>
  <div class="export-container">
    <span class="export-title"><Icon type="ios-folder-open"/>选择要导出的表格</span>
    <div style="padding-bottom:6px;margin-bottom:6px;">
      <Checkbox :indeterminate="indeterminate"
                :value="checkAll"
                @click.prevent.native="handleCheckAll">全选</Checkbox>
    </div>
    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
      <Checkbox v-for="(item,index) in tableList" :key="index" :label="item.name + '.xls'"></Checkbox>
    </CheckboxGroup>
      <div class="btn-export"  @click="handleDownload">
        <Icon type="md-archive"/>
        导出
      </div>
  </div>
</template>
<script>
  import tableList from '@/static/tableList.json'
  export default {
    data() {
      return {
        tableList:[], //可选择数据源
        indeterminate: false, //是否有选中
        checkAll: false, //是否全选
        checkAllGroup: [] //全选数据
      }
    },

    created() {
      this.tableList = tableList;
    },
    methods: {
      handleCheckAll() {
        if (this.indeterminate) {
          this.checkAll = false;
        } else {
          this.checkAll = !this.checkAll;
        }
        this.indeterminate = false;

        if (this.checkAll) {
          this.checkAllGroup = this.tableList.map(item => item.name + '.xls');
        } else {
          this.checkAllGroup = [];
        }
      },
      checkAllGroupChange(data) {
        if (data.length === this.tableList.length) {
          this.indeterminate = false;
          this.checkAll = true;
        } else if (data.length > 0) {
          this.indeterminate = true;
          this.checkAll = false;
        } else {
          this.indeterminate = false;
          this.checkAll = false;
        }
      },
      //确认导出表格
      handleDownload() {
        //let a = document.createElement('a');
        //console.log(a);
        //a.href ="/user/downloadExcel"
        //a.click();
        let checkList = this.checkAllGroup;
        if (checkList.length) {

        } else {
          this.$Message.warning("请选择要导出的表格！");
        }
        console.log(this.checkAllGroup);
      }
    }
  }
</script>

<style>
  .export-container {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI','Microsoft JhengHei' !important;
  }

  .export-container .ivu-checkbox-wrapper {
      margin:15px;
      font-size:14px;
      font-weight:bold;
  }


  .export-container .ivu-checkbox {
      margin-right:10px;
      margin-bottom:3px;
  }

    .export-container .export-title {
      font-size:18px;
      font-weight:bold;
      margin:20px 10px;
      display:block;
    }

        .export-container .export-title .ivu-icon {
          font-size:22px;
          margin-right:10px;
          margin-bottom:5px;
          color:#0094ff;
        }

    .export-container .btn-export {
       display:block;
       margin:30px auto;
       width:100px;
       height:36px;
       background:#0094ff;
       color:#fff;
       display:flex;
       flex-direction:row;
       justify-content:center;
       align-items:center;
       font-size:14px;
       border-radius:5px;
       cursor:pointer;
    }

    .export-container .btn-export .ivu-icon{
       font-size:18px;
       margin-right:10px;
       margin-top:2px;
    }
</style>
