<template>
  <a-spin :spinning="confirmLoading">
    <div class="title-top">
      <h3>{{isDetail ? '详情' : '新增'}}</h3>
      <div class="button"><a-button @click="onCancel">返回</a-button>
        <a-button v-if="!isDetail" type="primary" @click="submitForm">提交</a-button>
      </div>
    </div>

    <div style="background-color:#fff;padding-top:10px">
      <div>
        <a-form-model ref="form" :model="model">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="小区" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="communityName">
                <my-popup
                  v-model="model.communityName"
                  icon="bank"
                  title="选择小区"
                  :multi="false"
                  :disabled="isDetail"
                  url="/property-company/community/companyCommunity/list?type=all"
                  :columns="buildingColumns"
                  @callback="onChoseBuilding"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <j-form-container :disabled="true">
        <a-form-model :model="model" slot="detail">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="所属地区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="communityArea">
                <a-input v-model="model.communityArea" placeholder="请输入所属地区"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="用途" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="useTo">
                <!-- <a-input v-model="model.useTo" placeholder="请输入用途"></a-input> -->
                <a-select style="width: 100%" v-model="model.useTo" placeholder="请选择房屋用途">
                  <a-select-option v-for="item in dictOptions" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addressInfo">
                <a-input v-model="model.addressInfo" placeholder="请输入详细地址"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="建成日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="completedDate">
                <a-input v-model="model.completedDate" :min="1" placeholder="请输入建成日期" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="占地面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coverArea">
                <a-input v-model="model.coverArea" placeholder="请输入占地面积"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="楼栋数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buildingNum">
                <a-input v-model="model.buildingNum" placeholder="请输入楼栋数量"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="房屋数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="houseNum">
                <a-input v-model="model.houseNum" placeholder="请输入房屋数量"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="停车位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="parkingSpace">
                <a-input v-model="model.parkingSpace" placeholder="请输入停车位"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="充电桩" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chargingStation">
                <a-input v-model="model.chargingStation" placeholder="请输入充电桩"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="小区图片" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol"
                prop="communityImage">
                <j-image-upload bizPath="scott/pic" v-model="model.communityImage"></j-image-upload>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="小区简介" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol"
                prop="communityIntro">
                <a-textarea v-model="model.communityIntro" placeholder="请输入小区简介" :maxLength="500"
                  :auto-size="{ minRows: 3, maxRows: 5 }" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </div>
  </a-spin>
</template>

<script>
import myPopup from '@/components/custom/myPopup'
import { ajaxGetDictItems,getDictItemsFromCache, queryCommunityApi, deleteCommunityApi } from '@/api/api'

export default {
  name: 'PropertySettledForm',
  inject: ['closeCurrent'],
  components: {
    myPopup
  },
  data() {
    return {
      dictOptions: [],
      isDetail: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      url: {
        add: '/property-company/community/companyCommunity/setCouncils',
        queryById: '/property-central/property/propertySettled/queryById',
      },
      costList: [],
      mapRef: null,
      buildingColumns: [
        {
          title: '小区名称',
          dataIndex: 'communityName',
          key: 'communityName',
          align: 'center'
        },
        {
          title: '小区地址',
          dataIndex: 'communityArea',
          key: 'communityArea',
          align: 'center'
        },
        {
          title: '详细地址',
          dataIndex: 'addressInfo',
          key: 'addressInfo',
          align: 'center'
        },
        {
          title: '联系方式',
          dataIndex: 'adminPhone',
          key: 'adminPhone',
          align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center'
        }
      ],
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    //this.modelDefault = JSON.parse(JSON.stringify(this.model))
    let pageId = this.$route.query.id

    if (pageId) {
      this.isDetail = true
      this.getPageDetail(pageId)
    }
    this.initDictData()
  },
  methods: {
    initDictData() {
      //优先从缓存中读取字典配置
      if(getDictItemsFromCache('house_purpose')){
        this.dictOptions = getDictItemsFromCache('house_purpose');
        return
      }
      // //根据字典Code, 初始化字典数组
      ajaxGetDictItems('house_purpose', null).then((res) => {
        if (res.success) {
          this.dictOptions = res.result;
        }
      })
    },
    async getPageDetail(id) {
      let { result } = await queryCommunityApi({ id })
      this.model = {...result, useTo: result.useTo.toString()}
    },
    onCancel() {
      this.closeCurrent()
    },
    contactPhoneChange(e) {
      if (!this.model.adminLoginName) {
        this.model.adminLoginName = e.target.value
      }
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.model.registAdress = [record.provinceCode, record.cityCode, record.countyCode]
    },
    onChoseBuilding(list) {
      const row = list[0]
      this.model = {...row, useTo: row.useTo.toString()}
    },
    submitForm() {
      // const that = this
      // this.$refs.form.validate((valid) => {
      //   if (valid) {
      //     that.confirmLoading = true
      //     let httpurl = ''
      //     let method = ''
      //     if (!this.model.id) {
      //       httpurl += this.url.add
      //       method = 'post'
      //     } else {
      //       httpurl += this.url.edit
      //       method = 'put'
      //     }
      //     httpAction(httpurl, this.model, method)
      //       .then((res) => {
      //         if (res.success) {
      //           that.$message.success(res.message)
      //           that.$emit('ok')
      //           this.onCancel()
      //         } else {
      //           that.$message.warning(res.message)
      //         }
      //       })
      //       .finally(() => {
      //         that.confirmLoading = false
      //       })
      //   }
      // })

      this.confirmLoading = true
      deleteCommunityApi({ids: this.model.id,action: 'binded'}).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
          this.onCancel()
        } else {
          this.$message.warning(res.message)
        }
      })
      .finally(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.title-top {
  background: #fff;
  padding: 0 25px;
  line-height: 50px;
  height: 50px;
  margin-bottom: 5px;
  h3 {
    font-weight: bold;
    display: inline-block;
  }
  .button {
    float: right;
    .ant-btn {
      margin-left: 15px;
    }
  }
}
</style>
<style>
.area-select {
  width: 100% !important;
}
</style>