
<template>
  <div class="root">
    <el-form :inline="true" :model="listQuery" class="form-listQuery">
      <el-form-item label="楼盘库">
        <el-select v-model="listQuery.phaseId" style="width: 120px;" placeholder="期/区" @change="buildSelectChange(0)" >
          <!--<el-option label="选择楼栋" value="-1" />-->
          <el-option
            v-for="item in phaseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-select v-model="listQuery.buildingId" style="width: 120px;" placeholder="栋" @change="buildSelectChange(1)">
          <!--<el-option label="选择楼栋" value="-1" />-->
          <el-option
            v-for="item in buildingList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-select v-model="listQuery.unitId" style="width: 120px;" placeholder="单元" @change="buildSelectChange(2)">
          <!--<el-option label="选择单元" value="-1" />-->
          <el-option
            v-for="item in unitList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-select v-model="listQuery.levelId" style="width: 120px;" placeholder="楼层" @change="buildSelectChange(3)">
          <!--<el-option label="选择楼层" value="-1" />-->
          <el-option
            v-for="item in levelList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-select v-model="listQuery.roomNoId" style="width: 120px;" placeholder="户号">
          <!--<el-option label="选择户号" value="-1" />-->
          <el-option
            v-for="item in roomNoList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
        <el-form-item label="姓名">
          <el-input v-model="listQuery.ownerName" placeholder="姓名" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="listQuery.ownerTel" placeholder="手机号" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="listQuery.idCard" placeholder="身份证号" />
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="emptyListQuery">清空</el-button>
        <el-button type="primary" @click="conditionsQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="operation">
      <div>
        <el-button type="primary" @click="addBuilding">添加</el-button>
        <el-button type="danger" @click="deleteData">删除</el-button>
      </div>
      <div>
        <el-button type="success" @click="dialogBatchImport">批量导入业主资料</el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="buildingInfoLists"
      border
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="userVerifyId" label="编号" align="center" />
      <el-table-column prop="ownerName" label="姓名" align="center">
        <template slot-scope="scope"><a><span style="color: #63B8FF" @click="clickTitle(scope.row.userVerifyId)">{{ scope.row.ownerName }}</span></a></template>
      </el-table-column>
      <el-table-column prop="ownerTel" label="手机号" align="center" />
      <el-table-column prop="idCard" label="身份证号" align="center" />
      <el-table-column prop="roomNoName" label="房间号" align="center">
        <template slot-scope="scope">{{ scope.row.phaseName + scope.row.buildingName + scope.row.unitName + scope.row.levelName + scope.row.roomNoName }}</template>
      </el-table-column>
      <el-table-column prop="roleName" label="身份" align="center" />
      <el-table-column prop="verifyStatus" label="审核状态" align="center" >
        <template slot-scope="scope">
          <span v-if="scope.row.verifyStatus === '0'" style="color: red;">未审核</span>
          <span v-if="scope.row.verifyStatus === '1'">审核通过</span>
          <span v-if="scope.row.verifyStatus === '2'">审核不通过</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateName" label="编辑人" align="center" />
      <el-table-column prop="createDate" label="编辑时间" align="center" >
        <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  data() {
    return {
      listQuery: {
        phaseId: '',
        buildingId: '',
        unitId: '',
        levelId: '',
        roomNoId: '',
        ownerName: '',
        ownerTel: '',
        idCard: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0, // 数据总数
      phaseList: [], // 期 集合
      buildingInfoLists: [], // 表格数据集合
      buildingList: [], // seletc 楼栋集合
      unitList: [], // seletc 单元集合
      levelList: [], // seletc 层 集合
      roomNoList: [], //  seletc 户号集合
      listLoading: true, // 加载圈
      deleteIds: [] // 需要删除的id集合
    }
  },
  computed: {
    ...mapState('buildingOwnerInfo', {
      buildingInfoList: s => s.list
    })
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    // 获取栋
    // this.getBuild()

    // 获取期
    this.getPhase()

    const query = this.$route.query.listQuery
    if (query !== undefined) {
      console.log('参数:', query)
      this.listQuery = query
    }

    // 获取数据
    this.dataQuery()
  },
  methods: {
    ...mapActions('buildingOwnerInfo', [
      'GetPhaseList',
      'GetBuildingList',
      'GetUnitList',
      'GetLevelList',
      'GetRoomNoList',
      'BuildingInfoList'
    ]),
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageSize = val
      this.listQuery.pageNum = 1
      // 获取数据
      this.dataQuery()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      // 获取数据
      this.dataQuery()
    },
    dialogBatchImport() {
      this.$router.push({ name: 'batch-import' })
    },
    handleSelectionChange(data) { // 表格多选框
      console.log('多选框的值:', data)
      // 设置为 空
      this.deleteIds = []
      for (let i = 0; i < data.length; i++) {
        this.deleteIds.push(data[i].id)
      }
    },
    getPhase() { // 获取期
      this.listQuery.phaseId = ''
      this.$store.dispatch('GetPhaseList', this.listQuery).then((res) => {
        this.phaseList = res.data
      }).catch(() => {
        console.log('error phase BuildingAddress')
      })
    },
    getBuild() { // 获取楼栋
      this.listQuery.buildingId = ''
      this.$store.dispatch('GetBuildingList', this.listQuery).then((res) => {
        this.buildingList = res.data
      }).catch(() => {
        console.log('error building BuildingAddress')
      })
    },
    getUnit() { // 获取单元
      this.listQuery.unitId = ''
      this.$store.dispatch('GetUnitList', this.listQuery).then((res) => {
        this.unitList = res.data
      }).catch(() => {
        console.log('error unit BuildingAddress')
      })
    },
    getLevel() { // 获取楼层
      this.listQuery.levelId = ''
      this.$store.dispatch('GetLevelList', this.listQuery).then((res) => {
        this.levelList = res.data
      }).catch(() => {
        console.log('error level BuildingAddress')
      })
    },
    getRoomNo() { // 获取户号
      this.listQuery.roomNoId = ''
      this.$store.dispatch('GetRoomNoList', this.listQuery).then((res) => {
        this.roomNoList = res.data
      }).catch(() => {
        console.log('error roomNo BuildingAddress')
      })
    },
    buildSelectChange(value) { // select 的 change
      switch (value) {
        case 0: // 查询栋
          this.buildingList = []
          this.unitList = []
          this.levelList = []
          this.roomNoList = []
          this.listQuery.buildingId = ''
          this.listQuery.unitId = ''
          this.listQuery.levelId = ''
          this.listQuery.roomNoId = ''
          this.getBuild()
          break
        case 1: // 查询 单元
          this.unitList = []
          this.levelList = []
          this.roomNoList = []
          this.listQuery.unitId = ''
          this.listQuery.levelId = ''
          this.listQuery.roomNoId = ''
          this.getUnit()
          break
        case 2: // 查询 楼层
          this.levelList = []
          this.roomNoList = []
          this.listQuery.levelId = ''
          this.listQuery.roomNoId = ''
          this.getLevel()
          break
        case 3: // 查询 户号
          this.roomNoList = []
          this.listQuery.roomNoId = ''
          this.getRoomNo()
          break
      }
    },
    conditionsQuery() { // 条件查询
      this.listQuery.pageNum = 1
      this.dataQuery()
    },
    dataQuery() { // 查询数据
      this.listLoading = true
      this.$store.dispatch('BuildingInfoList', this.listQuery).then((res) => {
        const resData = res.data
        this.buildingInfoLists = resData.list
        this.listQuery.pageNum = resData.pageNum
        this.listQuery.pageSize = resData.pageSize
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error BuildingInfoList')
      })
    },
    emptyListQuery() { // 清空按钮
      this.listQuery.phaseId = ''
      this.listQuery.buildingId = ''
      this.listQuery.unitId = ''
      this.listQuery.levelId = ''
      this.listQuery.roomNoId = ''
      this.listQuery.ownerName = ''
      this.listQuery.ownerTel = ''
      this.listQuery.idCard = ''
      this.listQuery.pageNum = 1
      // 获取数据
      this.dataQuery()
    },
    clickTitle(id) {
      this.$router.push({ name: 'building-info-index', query: { id: id }})
    },
    deleteData() { // 删除
      this.$confirm('请确认是否真的需要删除?')
        .then(_ => {
          this.$store.dispatch('DeleteBuilding', this.deleteIds).then((res) => {
            if (res.code === '0') {
              this.$message({
                message: res.message,
                type: 'success'
              })
              // 获取数据
              this.dataQuery()
              return
            }
            this.$message.error(res.message)
          }).catch(() => {
            console.log('error deleteBuilding')
          })
        }).catch(_ => {})
    },
    addBuilding() { // 添加楼栋户主信息资料
      this.$router.push({ name: 'building-add' })
    },
    ediBuilding(buildId) { // 修改楼栋户主信息资料
      const ids = this.deleteIds
      if (ids.length > 1) {
        this.$message.error('只能选择一行数据进行修改!')
        return
      }
      if (ids < 1) {
        this.$message.error('请选择一行数据进行修改!')
        return
      }
      this.$store.dispatch('GetByIdBuildingId', ids[0]).then((res) => {
        // const resCode = res.code
        // if (resCode === '0') {
        //   const resData = res.data
        //   if (resData.verify.verifyStatus !== '0') {
        //     this.$message.error('不能修改已审核的资料信息!')
        //     return
        //   }
        // }
        this.$router.push({ name: 'building-edi', query: { id: ids[0], listQuery: this.listQuery }})
      }).catch(() => {
        console.log('error GetByIdBuildingId')
      })
    },
    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
    showRoleName(roleId) {
      let str = ''
      switch (roleId) {
        case 1:
          str = '户主'
          break
        case 2:
          str = '租客'
          break
        case 3:
          str = '家属'
          break
      }

      return str
    }
  }
}
</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>

