<template>
  <ai-list class="BuildMsg">
    <!-- 标题 -->
    <template #title>
      <ai-title :title="params.communityName + '-' + params.buildingNumber + '号楼房屋信息'" isShowBack isShowBottomBorder
                @onBackClick="cancel(false)"></ai-title>
    </template>
    <template #content>
      <!-- 性别下拉选择框 -->
      <ai-search-bar>
        <template #left>
          <ai-select v-model="search.livingStatus" placeholder="房屋状态" clearable @change=";(page.current = 1), getList()"
                     :selectList="dict.getDict('houselivingStatus')"></ai-select>

          <ai-select v-model="search.existFlow" placeholder="有无流动人口" clearable @change=";(page.current = 1), getList()"
                     :selectList="dict.getDict('yesOrNo')"></ai-select>
        </template>

        <template #right>
          <el-input v-model="search.houseCode" size="small" placeholder="请输入户号/户主" clearable
                    v-throttle="() => {page.current = 1, getList()}"
                    @clear=";(page.current = 1), (search.houseCode = ''), getList()" suffix-icon="iconfont iconSearch"/>
        </template>
      </ai-search-bar>

      <ai-search-bar>
        <template #left>
          <div style="height: 32px"/>
        </template>

        <template #right>
          <ai-import :instance="instance" :dict="dict" type="appcommunityhouseinfo" :importParams="houseImpParam" name="房屋信息"
                     @success="getList()">
            <el-button icon="iconfont iconImport">导入房屋信息</el-button>
          </ai-import>
          <ai-download :instance="instance" url="/app/appcommunityhouseinfo/listExport" :params="houseExpParam"
                       fileName="房屋信息" style="margin-right: 10px">
            <el-button icon="iconfont iconExported">导出房屋信息</el-button>
          </ai-download>
          <ai-import :instance="instance" :dict="dict" type="appcommunityhouseresident" :importParams="houseImpParam" name="人口信息"
                     @success="getList()">
            <el-button icon="iconfont iconImport">导入人口信息</el-button>
          </ai-import>
          <ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="houseExpParam"
                       fileName="人口信息">
            <el-button icon="iconfont iconExported">导出人口信息</el-button>
          </ai-download>
        </template>
      </ai-search-bar>

      <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
                :current.sync="page.current" :size.sync="page.size" @getList="getList"
                @selection-change="(v) => (ids = v.map((e) => e.id))">
        <el-table-column slot="owner" label="房主" align="center">
          <template slot-scope="{ row }">
            <span v-for="(item, i) in row.owner" :key="i" v-if="item.name">
              <span v-if="i < 2" style="margin-right: 5px;">
                {{ item.name }}
              </span>
            </span>
          </template>
        </el-table-column>

        <el-table-column slot="owner" label="联系方式" align="center">
          <template slot-scope="{ row }">
            <span v-for="(item, i) in row.owner" :key="i" v-if="item.phone">
              <span v-if="i < 1">
                {{ item.phone }}
              </span>
            </span>
          </template>
        </el-table-column>

        <el-table-column slot="livingStatus" label="房屋状态" align="center">
          <template slot-scope="{ row }">
            {{ dict.getLabel('houselivingStatus', row.livingStatus) }}
          </template>
        </el-table-column>

        <el-table-column slot="owner" label="流动人口" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.existFlow == 1 ? '有' : '无' }}</span>
          </template>
        </el-table-column>

        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140">
          <div class="table-options" slot-scope="{ row }">
            <el-button type="text" @click="toEdit(row.id, 'edit')">编辑</el-button>
            <el-button type="text" @click="toEdit(row.id, 'detail')">详情</el-button>
          </div>
        </el-table-column>
      </ai-table>

      <ai-dialog :title="isEdit ? '编辑居民户' : '居民户详情'" :visible.sync="dialogVisible" width="800px" customFooter>
        <ai-wrapper label>
          <div class="bulidmsg">
            <span class="icon"></span>
            <span class="bulidtext">房屋信息</span>
          </div>

          <ai-info-item label="所属社区">
            {{ forms.areaName }}
          </ai-info-item>

          <ai-info-item label="房屋地址">
            {{ forms.createAddress }}
          </ai-info-item>

          <ai-info-item label="房屋类型">
            {{ dict.getLabel('communityBuildingType', forms.buildingType) }}
          </ai-info-item>

          <template v-if="!isEdit">
            <ai-info-item label="房屋面积" prop="houseArea" class="line">
              <span>{{ forms.houseArea }}</span
              >&nbsp;<span v-if="forms.houseArea">m²</span>
            </ai-info-item>

            <ai-info-item label="居住现状" prop="livingStatus">
              <span>{{ dict.getLabel('houselivingStatus', forms.livingStatus) }}</span>
            </ai-info-item>

            <ai-info-item label="房屋用途" prop="houseUse">
              <span>{{ dict.getLabel('houseUseStatus', forms.houseUse) }}</span>
            </ai-info-item>

            <ai-info-item label="承租情况" prop="leaseSituation">
              <span>{{ dict.getLabel('houseLeaseSituation', forms.leaseSituation) }}</span>
            </ai-info-item>

            <ai-info-item label="起租日期" prop="startDate">
              {{ $dateFormat(forms.startDate) }}
            </ai-info-item>

            <ai-info-item label="备案证明" prop="isFilingCertificate">
              <span>{{ dict.getLabel('isFilingCertificateStatus', forms.isFilingCertificate) }}</span>
            </ai-info-item>
          </template>
        </ai-wrapper>

        <el-form v-if="isEdit" :model="forms" ref="ruleForm" label-width="100px" label-suffix="：" align-items="center"
                 size="small">
          <template>
            <el-form-item label="房屋面积" prop="houseArea" class="house">
              <el-input v-model="forms.houseArea" type="text" size="small" placeholder="请输入" suffix="m²">
                <template slot="suffix">m²</template>
              </el-input>
            </el-form-item>

            <div class="family-hose">
              <el-form-item label="居住现状">
                <el-radio-group v-model="forms.livingStatus">
                  <el-radio label="0">自用</el-radio>
                  <el-radio label="1">出租</el-radio>
                  <el-radio label="2">闲置</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="房屋用途">
                <el-radio-group v-model="forms.houseUse">
                  <el-radio label="0">居住</el-radio>
                  <el-radio label="1">闲置</el-radio>
                  <el-radio label="2">经营</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>

            <div class="family-hose">
              <el-form-item label="承租情况" prop="leaseSituation">
                <ai-select v-model="forms.leaseSituation" placeholder="请选择" clearable
                           @change=";(page.current = 1), getList()" :selectList="dict.getDict('houseLeaseSituation')"
                           size="small"></ai-select>
              </el-form-item>

              <el-form-item label="起租日期" prop="startDate">
                <el-date-picker v-model="forms.startDate" type="date" placeholder="选择日期" size="small"
                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              </el-form-item>
            </div>

            <el-form-item label="备案证明" prop="isFilingCertificate">
              <el-radio-group v-model="forms.isFilingCertificate">
                <el-radio label="0">有租赁房备案证明</el-radio>
                <el-radio label="1">无租赁房备案证明</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-form>
        <!-- 房主信息 -->
        <div class="table">
          <div class="msg">
            <b class="house-msg">
              <span class="icon"></span>
              <span class="msg">房主信息</span>
            </b>

            <div class="button">
              <ai-person-select :instance="instance" @selectPerson="getOwners" ref="getOwner" :chooseUserList="owners"
                                :isMultiple="true" v-if="isEdit"/>
            </div>
          </div>

          <ai-table :tableData="owners" :col-configs="owner" ref="aitableex">
            <el-table-column slot="owner" label="居民类型" align="center">
              <template slot-scope="{ row }">
                {{ dict.getLabel('BulidResidentType', row.residentType) }}
              </template>
            </el-table-column>

            <el-table-column slot="owner" label="特殊人群" align="center" v-if="!isEdit">
              <template slot-scope="{ row }">
                {{ row.tips }}
              </template>
            </el-table-column>

            <el-table-column slot="owner" label="与户主关系" align="center" v-if="isEdit">
              <template slot-scope="{ row }">
                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
                           :selectList="$dict.getDict('householdRelation')"></ai-select>
              </template>
            </el-table-column>

            <el-table-column slot="owner" label="与户主关系" align="center" v-if="!isEdit">
              <template slot-scope="{ row }">
                {{ dict.getLabel('householdRelation', row.relation) }}
              </template>
            </el-table-column>

            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
              <template slot-scope="scope">
                <el-button type="text" @click="remove(scope.$index, 'owners')">删除</el-button>
              </template>
            </el-table-column>
          </ai-table>
        </div>

        <!-- 承租人信息 -->
        <div class="table">
          <div class="msg">
            <b class="house-msg">
              <span class="icon"></span>
              <span class="msg">承租人信息</span>
            </b>

            <div class="button">
              <ai-person-select :instance="instance" @selectPerson="getRenters" :chooseUserList="renters"
                                :isMultiple="true" v-if="isEdit"/>
            </div>
          </div>

          <ai-table :tableData="renters" :col-configs="renter" ref="aitableex">
            <el-table-column slot="renters" label="居民类型" align="center">
              <template slot-scope="{ row }">
                {{ dict.getLabel('BulidResidentType', row.residentType) }}
              </template>
            </el-table-column>

            <el-table-column slot="renters" label="特殊人群" align="center" v-if="!isEdit">
              <template slot-scope="{ row }">
                {{ row.tips }}
              </template>
            </el-table-column>

            <el-table-column slot="renters" label="与户主关系" align="center" v-if="isEdit">
              <template slot-scope="{ row }">
                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
                           :selectList="$dict.getDict('householdRelation')"></ai-select>
              </template>
            </el-table-column>

            <el-table-column slot="renters" label="与户主关系" align="center" v-if="!isEdit">
              <template slot-scope="{ row }">
                {{ dict.getLabel('householdRelation', row.relation) }}
              </template>
            </el-table-column>

            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
              <template slot-scope="scope">
                <el-button type="text" @click="remove(scope.$index, 'renters')">删除</el-button>
              </template>
            </el-table-column>
          </ai-table>
        </div>

        <!-- 实际居住人员 -->
        <div class="table">
          <div class="msg">
            <b class="house-msg">
              <span class="icon"></span>
              <span class="msg">实际居住人员</span>
            </b>

            <div class="button" v-if="isEdit">
              <ai-person-select :instance="instance" @selectPerson="getLives" :isMultiple="true"
                                :chooseUserList="lives"/>
            </div>
          </div>

          <ai-table :tableData="lives" :col-configs="live" ref="aitableex">
            <el-table-column slot="lives" label="居民类型" align="center">
              <template slot-scope="{ row }">
                {{ dict.getLabel('BulidResidentType', row.residentType) }}
              </template>
            </el-table-column>

            <el-table-column slot="lives" label="特殊人群" align="center" v-if="!isEdit">
              <template slot-scope="{ row }">
                {{ row.tips }}
              </template>
            </el-table-column>

            <el-table-column slot="lives" label="与户主关系" align="center" v-if="isEdit">
              <template slot-scope="{ row }">
                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
                           :selectList="$dict.getDict('householdRelation')"></ai-select>
              </template>
            </el-table-column>

            <el-table-column slot="lives" label="与户主关系" align="center" v-if="!isEdit">
              <template slot-scope="{ row }">
                {{ dict.getLabel('householdRelation', row.relation) }}
              </template>
            </el-table-column>

            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
              <template slot-scope="scope">
                <el-button type="text" @click="remove(scope.$index, 'lives')">删除</el-button>
              </template>
            </el-table-column>
          </ai-table>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">{{ isEdit ? '取消' : '关闭' }}</el-button>
          <el-button type="primary" @click="report" v-if="isEdit">确认</el-button>
        </span>
      </ai-dialog>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: 'BuildMsg',
  components: {},
  props: {
    dict: Object,
    params: Object,
    instance: Function,
  },
  data() {
    return {
      id: '',
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      search: {
        livingStatus: '',
        houseCode: '',
      },
      colConfigs: [
        {prop: 'unitNumber', label: '单元', align: 'center'},
        {prop: 'houseCode', label: '户号', align: 'center'},
        {prop: 'livingNumber', label: '住户数', align: 'center'},
        {slot: 'owner', label: '户主', align: 'center'},
        {slot: 'livingStatus', align: 'center'},
        {slot: 'options', label: '操作', align: 'center'},
      ],
      tableData: [],
      dialogVisible: false,
      forms: {
        houseArea: '',
        livingStatus: 0,
        houseUse: 0,
        leaseSituation: '',
        isFilingCertificate: '',
      },
      owners: [],
      owner: [
        {prop: 'name', label: '姓名', align: 'center'},
        {prop: 'idNumber', label: '身份证号', align: 'center'},
        {prop: 'phone', label: '联系方式', align: 'center'},
        {slot: 'owner', align: 'center'},
        {
          slot: 'relation',
          align: 'center',
        },
        {slot: 'options', label: '操作', align: 'center'},
      ],
      renters: [],
      renter: [
        {prop: 'name', label: '姓名', align: 'center'},
        {prop: 'idNumber', label: '身份证号', align: 'center'},
        {prop: 'phone', label: '联系方式', align: 'center'},
        {
          slot: 'relation',
          align: 'center',
        },
        {slot: 'renters', align: 'center'},
        {slot: 'options', label: '操作', align: 'center'},
      ],
      lives: [],
      live: [
        {prop: 'name', label: '姓名', align: 'center'},
        {prop: 'idNumber', label: '身份证号', align: 'center'},
        {prop: 'phone', label: '联系方式', align: 'center'},
        {
          slot: 'relation',
          align: 'center',
        },
        {slot: 'lives', align: 'center'},
        {slot: 'options', label: '操作', align: 'center'},
      ],
      type: '',
      ids: '',
      buildingId: '',
    }
  },
  computed: {
    houseImpParam() {
      return {
        buildingId: this.params.id,
      }
    },
    houseExpParam() {
      return {
        buildingId: this.params.id,
      }
    },
    isEdit() {
      return this.type == 'edit'
    },
  },
  watch: {},
  created() {
    this.dict.load('yesOrNo', 'houselivingStatus', 'houseLeaseSituation', 'isFilingCertificateStatus', 'houseUseStatus', 'BulidResidentType', 'communityBuildingType', 'householdRelation').then(() => {
      this.getList()
    })
  },
  mounted() {
  },
  methods: {
    getList() {
      this.instance
      .post(`/app/appcommunityhouseinfo/list`, null, {
        params: {
          ...this.page,
          ...this.search,
          buildingId: this.params.id,
        },
      })
      .then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    // 返回按钮
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: !!isRefresh,
      })
    },

    // 确认增加和编辑
    report() {
      this.instance
      .post(`/app/appcommunityhouseinfo/update`, {
        ...this.forms,
        id: this.id,
        owner: this.owners,
        renter: this.renters,
        live: this.lives,
      })
      .then((res) => {
        if (res.code == 0) {
          this.$message.success('提交成功')

          this.dialogVisible = false
          this.getList()
        }
      })
    },

    // 详情 和 编辑
    toEdit(id, type) {
      this.id = id
      this.type = type
      this.instance.post(`/app/appcommunityhouseinfo/queryDetailById?&id=${id}`).then((res) => {
        if (res.code == 0) {
          this.forms = res.data

          this.owners = this.forms.owner
          this.renters = this.forms.renter
          this.lives = this.forms.live
        }
      })
      this.dialogVisible = true
    },

    // 删除
    remove(index, source) {
      this.$confirm('确定删除该数据？').then(() => {
        this[source].splice(index, 1)
      })
    },

    // 选择人员
    getOwners(val) {
      let listNew = []
      let newName = []
      for (var i = 0; i < val.length; i++) {
        if (newName.indexOf(val[i].name) == -1) {
          newName.push(val[i].name)
          listNew.push(val[i])
        }
      }

      this.owners = listNew
    },

    getRenters(val) {
      let listNew = []
      let newName = []
      for (var i = 0; i < val.length; i++) {
        if (newName.indexOf(val[i].name) == -1) {
          newName.push(val[i].name)
          listNew.push(val[i])
        }
      }

      this.renters = listNew
    },

    getLives(val) {
      let listNew = []
      let newName = []
      for (var i = 0; i < val.length; i++) {
        if (newName.indexOf(val[i].name) == -1) {
          newName.push(val[i].name)
          listNew.push(val[i])
        }
      }

      this.lives = listNew
    },
  },
}
</script>

<style lang="scss" scoped>
.BuildMsg {
  :deep( .ai-list__title ){
    background-color: #fff;
    margin: 0 !important;
    padding-left: 20px;
  }

  :deep( .ai-list__content ){
    .ai-list__content--right {
      .ai-list__content--right-wrapper {
        .search-select {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;

          .left {
            width: 30%;

            .ai-select {
              display: inline-block;
            }

            .ai-select:first-child {
              margin-right: 15px;
            }
          }

          .right {
            width: 20%;
          }
        }

        .bar {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;

          .export {
            .ai-import {
              display: inline-block;
              margin-right: 10px;
            }

            .ai-download {
              display: inline-block;
            }
          }

          .import {
            .ai-import {
              display: inline-block;
              margin-right: 10px;
            }

            .ai-download {
              display: inline-block;
            }
          }
        }

        .ai-dialog__wrapper {
          background-color: #fff;

          .el-dialog__wrapper {
            .el-dialog__body {
              .ai-dialog__content {
                .ai-dialog__content--wrapper {
                  .ai-wrapper {
                    padding-left: 0 !important;

                    .bulidmsg {
                      height: 32px;
                      line-height: 32px;
                      width: 100%;
                      margin: 0 0 15px 20px;

                      .icon {
                        border-left: 2px solid #2266ff;
                      }

                      .bulidtext {
                        display: inline-block;
                        margin-left: 9px;
                        color: #222;
                        font-size: 15px;
                        font-weight: 800;
                      }
                    }

                    .create {
                      width: 100% !important;

                      .ai-info-item__left {
                        width: 78px;
                        margin-right: 22px;
                      }
                    }

                    .Address {
                      .ai-info-item__left {
                        width: 78px;
                        margin-right: 22px;
                      }
                    }

                    .building {
                      padding-left: 40px;

                      .ai-info-item__left {
                        width: 78px;
                        margin-right: 22px;
                      }
                    }
                  }

                  .el-form {
                    padding: 20px 0 0 0;

                    .house {
                      width: 50%;

                      .el-form-item__content {
                        width: 63%;
                      }
                    }

                    .family-hose {
                      display: flex;
                      justify-content: space-between;
                    }

                    .line {
                      width: 50% !important;
                      padding-right: 40px;

                      .el-form-item__content {
                        .el-input {
                          .el-input__suffix {
                            color: #666;
                            margin-right: 5px;
                          }
                        }
                      }
                    }
                  }

                  .table {
                    padding: 20px 20px 0 20px;

                    .msg {
                      display: flex;
                      justify-content: space-between;

                      .house-msg {
                        height: 32px;
                        line-height: 32px;

                        .icon {
                          border-left: 2px solid #2266ff;
                        }

                        .msg {
                          display: inline-block;
                          color: #222;
                          font-size: 15px;
                          font-weight: 800;
                          margin-left: 9px;
                        }
                      }

                      // .button {
                      // }
                    }

                    .ai-table {
                      margin-top: 10px;
                      // .el-table {
                      // }
                      .pagination {
                        display: none;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
