<template>
  <div class="flex-column">
    <sticky :className="'sub-navbar'">
      <div class="filter-container">
        <el-row type="flex" justify="end">
          <el-col :span="4">
            <el-input @keyup.enter.native="handleFilter" prefix-icon="el-icon-search"
                      class="filter-item" v-model="searchKeys" :placeholder="'关键字'">
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-date-picker
                v-model="datetime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">

            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-button @click="handleAudit('pl')" plain>批量审核</el-button>
          </el-col>
          <el-col :span="4">
            <el-button @click="downLoadExcel" type="success" plain>下载</el-button>
          </el-col>
        </el-row>
      </div>
    </sticky>
    <div class="app-container flex-item">
      <el-row class="bg-white fh">
        <el-table
            max-height="550px"
            height="550px"
            ref="multipleTable"
            :data="informationCollectionList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="编号"
              prop="id"
              width="300">
          </el-table-column>
          <el-table-column
              prop="county"
              label="地区"
              width="120">
          </el-table-column>
          <el-table-column
              prop="street"
              label="街道"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="neighborhoodCommittee"
              label="居委"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="buildNo"
              label="楼号"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="createuser"
              label="创建人"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="createtime"
              label="时间"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button v-if="scope.row.reviewStatus === 0"
                         size="mini"
                         @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button v-if="scope.row.reviewStatus"
                         size="mini"
                         @click="handleEdit(scope.$index, false)">查看
              </el-button>
              <el-button v-if="scope.row.reviewStatus === 0"
                         type="success"
                         size="mini"
                         @click="handleAudit(scope.$index, scope.row)">审核
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: space-between;align-items: center">
          <div>
            <span style="font-weight: bold">统计:</span>
            <span style="margin-left: 15px">建筑面积:{{ coveredArea }}</span><span style="font-size: 14px">m<sup>2&nbsp;&nbsp;</sup></span>
<!--            <span style="margin-left: 15px">拆除涉及面积:1111</span><span style="font-size: 14px">m<sup>2&nbsp;&nbsp;</sup></span>-->
<!--            <span style="margin-left: 15px">加固涉及面积:1111</span><span style="font-size: 14px">m<sup>2&nbsp;&nbsp;</sup></span>-->
<!--            <span style="margin-left: 15px">没收涉及面积:1111</span><span style="font-size: 14px">m<sup>2&nbsp;&nbsp;</sup></span>-->
<!--            <span style="margin-left: 15px">责令停止使用涉及面积:1111</span><span style="font-size: 14px">m<sup>2&nbsp;&nbsp;</sup></span>-->
<!--            <span style="margin-left: 15px">责令停工整改涉及面积:1111</span><span style="font-size: 14px">m<sup>2&nbsp;&nbsp;</sup></span>-->
<!--         -->
          </div>

          <div style="margin-top: 10px;text-align: right;margin-right: 100px">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="changePage"
                :current-page="page"
                :page-sizes="[10,20,50,100, 200, 300, 400,countPage]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="countPage">
            </el-pagination>
          </div>
        </div>
      </el-row>
    </div>
    <el-dialog
        width="94%"
        top="60px"
        :visible.sync="dialogFormVisible">
      <Navs :only-show="onlyShow" @closedOP="closedOP" v-if="dialogFormVisible" :id="id"
            :dialog-form-visible="dialogFormVisible"></Navs>
    </el-dialog>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import {getInformationCollectionList, getInformationExportExcel, postInformationVerify} from "../../api/forms";
import Navs from './widget/Navs'
import {generateId} from "element-ui/src/utils/util";

export default {
  name: "Forms",
  components: {
    Sticky, Navs
  },
  data() {
    return {
      multipleSelection: [],
      informationCollectionList: [],
      page: 1,
      dialogFormVisible: false,
      id: "",
      onlyShow: false,
      selectIdList: [],
      searchKeys: "",
      countPage: 1,
      limit: 10,
      datetime: "",
      starttime: "",
      endtime: "",
      coveredArea:0
    }
  },
  watch: {
    searchKeys: function () {
      this.page = 1;
      this.informationCollectionList = []
      this.loadInformationCollectionList()
    },
    page: function () {
      this.informationCollectionList = []
      this.loadInformationCollectionList()
    },
    limit: function () {
      this.page = 1;
      this.loadInformationCollectionList()
    },
    datetime: function (e) {

      if (e && e.length === 2) {
        this.starttime = e[0].Format('yyyy-MM-dd HH:mm:ss')
        this.endtime = e[1].Format('yyyy-MM-dd HH:mm:ss')
        this.page = 1;
        this.loadInformationCollectionList()
      } else {
        this.starttime = ""
        this.endtime = ""
        this.page = 1;
        this.loadInformationCollectionList()
      }
    }
  },
  mounted() {
    this.loadInformationCollectionList()
  },
  methods: {
    handleSelectionChange(e) {
      this.selectIdList = []
      e.forEach(item => {
        this.selectIdList.push(item.id)
      })
    },
    handleEdit(e, i) {
      this.id = this.informationCollectionList[e].id;
      this.dialogFormVisible = true
      if (!i) {
        this.onlyShow = true
      }
    },
    handleAudit(e) {
      let _this = this;
      let list = []
      if (e === 'pl') {
        //批量审核
        list = this.selectIdList
        if (!list.length) {
          _this.$message({
            type: 'error',
            message: '请选择!'
          });
          return false
        }
      } else {
        let id = this.informationCollectionList[e].id;
        list.push(id)
      }
      this.$confirm('通过审核, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postInformationVerify(list).then(res => {
          if (res.code === 200) {
            if (e === 'pl') {
              _this.informationCollectionList.forEach((item, index) => {
                if (_this.selectIdList.includes(item.id)) {
                  _this.informationCollectionList[index].reviewStatus = '1'
                }
              })
            } else {
              _this.informationCollectionList[e].reviewStatus = '1'
            }
            _this.$message({
              type: 'success',
              message: '审核成功!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    handleFilter(e) {
      console.log(e)
    },
    loadInformationCollectionList() {
      let _this = this;
      getInformationCollectionList(
          {
            page: this.page,
            key: this.searchKeys,
            limit: this.limit,
            starttime: this.starttime,
            endtime: this.endtime
          }
      ).then(response => {
        let res = response.result;
        _this.countPage = res.totalNumber
        _this.coveredArea = res._CoveredArea
        _this.informationCollectionList = res.informationCollectionList;
      })
    },
    closedOP() {
      this.dialogFormVisible = false
    },
    changePage(e) {
      this.page = e;
    },
    handleSizeChange(e) {
      this.limit = e
    },
    downLoadExcel() {
      getInformationExportExcel(this.page, this.searchKeys, this.limit).then(res => {
        const aLink = document.createElement('a')
        let mimeType = "application/vnd.ms-excel"
        let blob = new Blob([res.data], {type: mimeType});
        //从response的headers中获取filename,
        //后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置文件名;
        let pattern = new RegExp('filename=([^;]+\\.[^.;]+);*')
        let contentDisposition = decodeURI(res.headers['content-disposition'])
        let result = pattern.exec(contentDisposition)
        let fileName = generateId() + ".xlsx"
        fileName = fileName.replace(/"/g, '')
        aLink.href = URL.createObjectURL(blob)
        aLink.download = fileName // 设置下载文件名称
        document.body.appendChild(aLink)
        aLink.click()
        document.body.appendChild(aLink)
      })
    }
  }
}
</script>

<style>
.custom-theme .el-table .cell {
  text-align: center !important;
}

.filter-container {
  padding: 5px;
}

.custom-theme .el-dialog__body {
  padding: 0 30px;
}

.custom-theme .el-dialog {
  height: calc(100% - 120px);
  overflow-y: scroll;
  position: relative;
}

.van-cell {
  padding: 10px 10px;
}

.el-table__body-wrapper is-scrolling-none {

}
</style>
