<template>
  <section class="personalAssets">
    <el-form ref="PersonalAssets" :model="form" size="small" label-width="0">
      <ai-edit-card title="车辆信息" :show-btn="permissions('app_appresident_edit')"
                    @save="submitCars" @cancel="getCars">
        <template>
          <el-form-item label-width="0">
            <span v-for="car in form.cars" :key="car.id" v-text="car.vehicleNumber+'  '"/>
            <ai-empty v-if="form.cars.length==0"/>
          </el-form-item>
        </template>
        <template #edit>
          <el-form-item v-for="(car,i) in form.cars" :key="i" :prop="`cars.${i}.vehicleNumber`"
                        :rules="{required: true,message:'请输入车牌号'}">
            <el-input v-model="car.vehicleNumber" clearable placeholder="请输入车牌号" maxlength="8" show-word-limit>
              <el-button slot="append" type="text" @click="form.cars.splice(i,1)">删除</el-button>
            </el-input>
          </el-form-item>
          <el-button type="text" @click="form.cars.push({})">新增车辆</el-button>
        </template>
      </ai-edit-card>
      <ai-edit-card title="房屋信息" :show-btn="permissions('app_appresident_edit')"
                    @save="submitHouses" @cancel="getHouses">
        <template>
          <el-form-item label-width="0">
            <div v-for="house in form.houses" :key="house.id" v-text="[house.areaName,house.address].join('')"/>
            <ai-empty v-if="form.houses.length==0"/>
          </el-form-item>
        </template>
        <template #edit>
          <el-row type="flex" v-for="(house,i) in form.houses" :key="i" align="middle">
            <div class="fill">
              <el-form-item :prop="`houses.${i}.areaId`"
                            :rules="[{required: true,message:'请选择房屋地址'},{pattern:/[^0]0{0,2}$/,message:'请选择到村/社区'}]">
                <ai-area-get v-model="house.areaId" :instance="instance" :root="user.info.areaId"/>
              </el-form-item>
              <el-form-item :prop="`houses.${i}.address`" :rules="{required: true,message:'请输入详情地址'}">
                <el-input v-model="house.address" clearable placeholder="请输入详情地址" size="small"/>
              </el-form-item>
            </div>
            <el-button type="text" @click="form.houses.splice(i,1)">删除</el-button>
          </el-row>

          <el-button type="text" @click="form.houses.push({})">新增房屋</el-button>
        </template>
      </ai-edit-card>
    </el-form>
  </section>
</template>

<script>
import AiEditCard from "./AiEditCard";
import {mapState} from "vuex";

export default {
  name: "personalAssets",
  components: {AiEditCard},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    residentId: {required: true, default: ""}
  },
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      form: {
        cars: [],
        houses: []
      }
    }
  },
  methods: {
    getCars() {
      let {residentId} = this
      this.instance.post("/app/appresidentvehicle/list", null, {
        params: {residentId}
      }).then(res => {
        if (res?.data) {
          this.form.cars = res.data.records || []
        }
      })
    },
    submitCars(cb) {
      this.$refs.PersonalAssets.validate(v => {
        if (v) {
          let {residentId, form: {cars: residentVehicleList}} = this
          this.instance.post("/app/appresidentvehicle/update", {
            residentId, residentVehicleList
          }).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功")
              this.getCars()
              cb?.()
            }
          })
        }
      })
    },
    getHouses() {
      let {residentId} = this
      this.instance.post("/app/appresidenthouse/list", null, {
        params: {residentId}
      }).then(res => {
        if (res?.data) {
          this.form.houses = res.data.records || []
        }
      })
    },
    submitHouses(cb) {
      this.$refs.PersonalAssets.validate(v => {
        if (v) {
          let {residentId, form: {houses: residentHouseList}} = this
          this.instance.post("/app/appresidenthouse/update", {
            residentId, residentHouseList
          }).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功")
              this.getHouses()
              cb?.()
            }
          })
        }
      })
    }
  },
  created() {
    this.getCars()
    this.getHouses()
  }
}
</script>

<style lang="scss" scoped>
.personalAssets {
}
</style>
