
<template>
  <div class="root">
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item>
        <div style="display: flex;">
          <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=1556098137"><el-button style="margin-left: 10px;" size="large" type="primary">下载模板</el-button></a>
          <el-upload :on-preview="handlePreview" :on-change="handleChange" :before-upload="beforeUpload" :limit="1" :on-exceed="handleExceed" class="upload-demo" action="" multiple>
            <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>
    <div class="block">
      <el-pagination :current-page="listQuery.pageNum" :page-sizes="[5, 10, 20, 30]" :page-size="listQuery.pageSize" :total="treeTotal" 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", {
      treeTemlist: s => s.treeTemlist,
      treeTotal: s => s.treeTotal
    })
  },
  created() {
    console.log(mapActions);
  },
  methods: {
    ...mapActions("batchImport", [
      "UploadBuildingTreeExcel",
      "SubmitBuildingTreeExcel"
    ]),
    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.UploadBuildingTreeExcel(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;
      }
      let file = {
        raw: this.files
      };
      this.SubmitBuildingTreeExcel(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.treeTemlist.slice(
        (this.listQuery.pageNum - 1) * this.listQuery.pageSize,
        this.listQuery.pageNum * this.listQuery.pageSize
      );
      console.log(this.list);
    },
    dialogBuildingIndex() {
      this.$router.push({ name: "building-data" });
    }
  }
};
</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>

