<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-__visitVisitor} resi-container">
      <el-card ref="searchCard" class="search-card">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item label="姓名" label-width="100px">
          <el-input v-model="dataForm.name" placeholder='姓名' clearable></el-input>
        </el-form-item>
        <el-form-item label="身份证" label-width="100px">
          <el-input v-model="dataForm.idCard" placeholder='身份证' clearable></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="100px">
          <el-input v-model="dataForm.mobile" placeholder='联系方式' clearable></el-input>
        </el-form-item>
        <br/>
        <el-form-item label="来访时间" prop="startTime" label-width="100px">
          <el-date-picker v-model="dataForm.startTime"
                          type="datetime"
                          :picker-options="pickerBeginDateBefore"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期时间"
                          style="width:200px" @change="changeTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="endTime">
          <el-date-picker v-model="dataForm.endTime"
                          type="datetime"
                          :picker-options="pickerBeginDateAfter"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期时间"
                          style="width:200px" @change="changeTime">
          </el-date-picker>
        </el-form-item>
        <br/>
        <el-form-item label="所属小区"
                      prop="neighborhoodId" label-width="100px">
          <el-select
                  v-model.trim="dataForm.neighborhoodId"
                  placeholder="请选择"
                  clearable
                  @change="getBuildingList"
          >
            <el-option
                    v-for="item in neighborhoodArr"
                    :key="item.id"
                    :label="item.neighborHoodName"
                    :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属楼栋"
                      prop="buildingId" label-width="100px">
          <el-select
                  v-model.trim="dataForm.buildingId"
                  placeholder="请选择"
                  clearable
                  @change="getUnitList"
          >
            <el-option
                    v-for="item in buildingArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属单元"
                      prop="unitId" label-width="100px">
          <el-select
                  v-model.trim="dataForm.unitId"
                  placeholder="请选择"
                  clearable
                  @change="getHouseList"
          >
            <el-option
                    v-for="item in unitArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属房屋"
                      prop="houseId" label-width="100px">
          <el-select
                  v-model.trim="dataForm.houseId"
                  placeholder="请选择"
                  clearable
                  @change="getHouseList"
          >
            <el-option
                    v-for="item in houseArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>
      </el-card>
      <el-card class="resi-card-table">
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="idCard" label="身份证" header-align="center" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" header-align="center" align="center">
          <template slot-scope="scope">{{scope.row.gender === '0' ? '女' : scope.row.gender === '1' ? '男' : '未知'}}</template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="type" label="人员类型" header-align="center" align="center">
          <template slot-scope="scope">{{scope.row.type === '0' ? '访客' : '租客'}}</template>
        </el-table-column>
        <el-table-column prop="createdTime" label="来访时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="visitReason" show-overflow-tooltip label="来访事由" header-align="center" align="center"></el-table-column>
        <el-table-column prop="faceImg" label="头像" header-align="center" align="center">
          <template slot-scope="scope">
              <el-image :src="scope.row.faceImg" @click="imgShow(scope.row.faceImg)" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="residential" label="小区" header-align="center" align="center"></el-table-column>
        <el-table-column prop="building" label="楼栋" header-align="center" align="center"></el-table-column>
        <el-table-column prop="unit" label="单元" header-align="center" align="center"></el-table-column>
        <el-table-column prop="room" label="房屋" header-align="center" align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id, $t('update'))">{{ $t('update') }}</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      </el-card>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <el-dialog :visible.sync="dialogVisible" :modal="false">
        <el-image width="100%" :src="dialogImageUrl" alt=""/>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './visitvisitor-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/pli/power/visitVisitor/page',
        getDataListIsPage: true,
        deleteURL: '/pli/power/visitVisitor',
        deleteIsBatch: true
      },
      dialogVisible: false,
      dialogImageUrl: '',
      neighborhoodArr: [],
      buildingArr: [],
      unitArr: [],
      houseArr: [],
      dataForm: {
        id: '',
        agencyId: '1550309684605952002'
      }
    }
  },
  components: {
    AddOrUpdate
  },
  mounted() {
    this.getNeighborhoodList()
  },
  methods: {
    addOrUpdateHandle(id, title) {
      this.dialogTitle = title
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      });
      this.addOrUpdateVisible = true;
    },
    getNeighborhoodList() {
      this.buildingArr = []
      this.unitArr = []
      this.houseArr = []
      this.$http
              .post('/gov/org/icneighborhood/open/list', { agencyId: this.dataForm.agencyId})
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                } else {
                  console.log('获取查询详情成功', res.data)
                  this.neighborhoodArr = res.data.list
                }
              })
              .catch(() => {
                return this.$message.error('网络错误')
              })
    },
    getBuildingList() {
      this.unitArr = []
      this.houseArr = []
      this.$http
              .post('/gov/org/icbuilding/buildingoption', { neighborHoodId: this.dataForm.neighborhoodId})
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                } else {
                  console.log('获取查询详情成功', res.data)
                  this.buildingArr = res.data
                }
              })
              .catch(() => {
                return this.$message.error('网络错误')
              })
    },
    getUnitList() {
      this.houseArr = []
      this.$http
              .post('/gov/org/icbuildingunit/unitoption', { buildingId: this.dataForm.buildingId})
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                } else {
                  console.log('获取查询详情成功', res.data)
                  this.unitArr = res.data
                }
              })
              .catch(() => {
                return this.$message.error('网络错误')
              })
    },
    getHouseList() {
      this.$http
              .post('/gov/org/ichouse/houseoption', { unitId: this.dataForm.unitId})
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                } else {
                  console.log('获取查询详情成功', res.data)
                  this.houseArr = res.data
                }
              })
              .catch(() => {
                return this.$message.error('网络错误')
              })
    },
    // 查看大图
    imgShow(url){
      this.dialogImageUrl = url
      this.dialogVisible = true
    },
    pickerBeginDateBefore: {
      disabledDate: (time) => {
        let beginDateVal = this.dataForm.endTime
        if (beginDateVal) {
          return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
        }
      }
    },
    pickerBeginDateAfter: {
      disabledDate: (time) => {
        let EndDateVal = this.dataForm.startTime
        if (EndDateVal) {
          return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/buttonstyle.scss";

  .resi-container .resi-card-table {
    ::v-deep .el-table th {
      color: #fff;
      background-color: rgba(33, 149, 254, 1);
      // border-right: 1px solid rgba(33, 149, 254, 1);
    }
  }
  .resi-table {
    ::v-deep .el-button--text {
      text-decoration: underline;
    }
    ::v-deep .btn-color-del {
      margin-left: 10px;
      color: rgba(213, 16, 16, 1);
    }
    ::v-deep .btn-color-edit {
      color: rgba(0, 167, 169, 1);
    }
  }
  .form-wr {
    .input-width {
      width: 260px;

    }
    .input-width-textarea {
      width: 500px;
    }
    .imsg-list {
      display: flex;
      align-items: center;
      .imgs-item {
        position: relative;
        margin-right: 10px;
        .el-icon-delete {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 18px;
          color: red;
          z-index: 3;
          cursor: pointer;
        }
      }
    }
  }
  .div-content {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

<style>
  .el-table .warning-row {
    background: #ffe168;
  }
</style>
