
<template>
  <div class="root">
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item>
        <div style="display: flex;">
          <el-button style="margin-left: 10px;" size="large" type="primary" @click="exportExcel">下载模板-小区</el-button>
          <el-upload :on-change="handleChange" :before-upload="beforeUpload" :limit="1" class="upload-demo" action="" multiple>
            <!-- <a href="http://jingcheng-h5temp.oss-cn-shanghai.aliyuncs.com/%E6%A5%BC%E6%A0%8B%E5%BA%93%E6%A8%A1%E6%9D%BF.xlsx?Expires=1548327771"></a> -->
            <el-button slot="trigger" size="large" type="primary" style="margin-left: 10px;">选取文件并预览</el-button>
          </el-upload>
          <el-button style="margin-left: 10px;" size="large" type="success" @click="submitUpload">提交</el-button>
          <el-button style="margin-left: 10px;" size="large" type="success" @click="dialogBuildingIndex">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" :data="list" border tooltip-effect="dark" style="width: 100%; margin-top: 20px;">
      <el-table-column label="期/区" align="center">
        <template slot-scope="scope">{{ scope.row.phaseName }}</template>
      </el-table-column>
      <el-table-column label="栋" align="center">
        <template slot-scope="scope">{{ scope.row.buildingName }}</template>
      </el-table-column>
      <el-table-column label="单元" align="center">
        <template slot-scope="scope">{{ scope.row.unitName }}</template>
      </el-table-column>
      <el-table-column label="楼层" align="center">
        <template slot-scope="scope">{{ scope.row.levelName }}</template>
      </el-table-column>
      <el-table-column label="户号" align="center">
        <template slot-scope="scope">{{ scope.row.roomNoName }}</template>
      </el-table-column>
      <el-table-column label="户主姓名" align="center">
        <template slot-scope="scope">{{ scope.row.ownerName }}</template>
      </el-table-column>
      <el-table-column label="身份" align="center">
        <template slot-scope="scope">{{ scope.row.roleName }}</template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="scope">{{ scope.row.ownerTel }}</template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination :current-page="listQuery.pageNum" :page-sizes="[5, 10, 20, 30]" :page-size="listQuery.pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      listQuery: {
        pageNum: 1,
        pageSize: 20
      },
      list: [],
      files: null,
      currentPage4: 4
    }
  },
  computed: {
    ...mapState('batchImport', {
      temlist: s => s.temlist,
      total: s => s.total
    })
  },
  created() {
    console.log(mapActions)
  },
  methods: {
    ...mapActions('batchImport', [
      'UploadBuildingExcel',
      'SubmitBuildingExcel'
    ]),
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.getList()
      console.log(`当前页: ${val}`)
    },
    dialogBatchImport() {
      this.$router.push({ name: 'batch-import' })
    },
    beforeUpload(file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      if (!extension && !extension2) {
        this.$message.warning('上传文件只能是 xls、xlsx格式!')
        return
      }
      this.files = file
      return false // 返回false不会自动上传
    },
    handleChange(file) {
      const fileName = file.name
      if (fileName === '') {
        this.$message.warning('请选择要上传的文件！')
        return false
      }
      this.UploadBuildingExcel(file)
        .then(response => {
          if (response.code === '1') {
            this.$message.warning(response.message)
          }
          if (response.code === '0') {
            this.$message.success('上传成功')
            this.getList()
          }
        })
        .catch(() => {
          console.log('upload error')
        })
    },
    submitUpload() {
      if (this.files === null) {
        this.$message.warning('没有需要提交的文件')
        return false
      }
      const file = {
        raw: this.files
      }
      this.SubmitBuildingExcel(file)
        .then(response => {
          if (response.code === '1') {
            this.$message.warning(response.message)
          }
          if (response.code === '0') {
            this.$message.success('提交成功')
            this.dialogBuildingIndex()
          }
        })
        .catch(() => {
          console.log('upload error')
        })
    },
    getList() {
      this.list = this.temlist.slice(
        (this.listQuery.pageNum - 1) * this.listQuery.pageSize,
        this.listQuery.pageNum * this.listQuery.pageSize
      )
      console.log(this.list)
    },
    dialogBuildingIndex() {
      this.$router.push({ name: 'building-index' })
    },
    exportExcel() {
      this.$store.dispatch('BuildingDownloadExcel').then(res => {
        const url = window.URL.createObjectURL(new Blob([res]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '户主资料库.xlsx')
        document.body.appendChild(link)
        link.click()
      }).catch(() => {
        console.log('error BuildingDownloadExcel')
      })
    }
  }
}
</script>

<style scoped>
.root {
  display: flex;
  flex-flow: column;
}
.form-listQuery {
  margin-top: 20px;
  margin-left: 30px;
}
.operation {
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-right: 20px;
}
.block {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>

