<template>
  <div class="page-content">
    <a-spin :spinning="confirmLoading">
      <h4 style="padding:20px 0 0 50px;line-height:30px;">住户基础资料</h4>
      <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="roomId">
                <a-input v-model="model.houseAllName" placeholder="请输入关联房屋"></a-input>
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="12">
              <p style="line-height:30px">{{this.model.buildingName}}{{this.model.unitName}}{{this.model.roomName}}</p>
            </a-col> -->
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="与业主关系" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="relationShip">
                <a-select style="width: 100%" v-model="model.relationShip" placeholder="请选择与业主关系">
                  <a-select-option v-for="item in relationShipList" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="住户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="residentName">
                <a-input v-model="model.residentName" placeholder="请输入住户姓名"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="住户联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="residentPhone">
                <a-input v-model="model.residentPhone" placeholder="请输入住户联系方式"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="certificateType">
                <a-select style="width: 100%" v-model="model.certificateType" placeholder="请选择证件类型">
                  <a-select-option value="1">身份证</a-select-option>
                  <a-select-option value="2">港澳通行证</a-select-option>
                  <a-select-option value="3">护照</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="certificateNo">
                <a-input v-model.trim="model.certificateNo" placeholder="请输入证件号码"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item label="注册时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                <a-input v-model="model.createTime" placeholder="请输入注册时间"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="住户来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="residentSourceName">
                <a-input v-model="model.residentSourceName" placeholder="请输入住户来源"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <a-divider />
      <h4 style="padding:0 50px;line-height:30px;">贫困人员信息</h4>
      <j-form-container :disabled="true">
        <a-form-model ref="form" :model="formModel" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="贫困类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labelDesc">
                <a-input v-model="formModel.labelDesc" 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="labelImg">
                <j-image-upload :isMultiple="false" text="点击上传" bizPath="scott/pic" v-model="formModel.labelImg"></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="labelRemark">
                <j-editor placeholder="请输入内容" :disabled="true" v-model="formModel.labelRemark"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <a-form-model v-if="pageAudit || auditOpinion">
        <a-form-model-item label="审核意见" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol">
          <a-textarea style="width:500px" :disabled="!pageAudit" v-model="auditOpinion" placeholder="请输入" allow-clear />
        </a-form-model-item>
      </a-form-model>
      <a-row type="flex" justify="end" :gutter="50">
        <a-col :span="6">
          <a-button @click="onCancel">返回</a-button>
          <a-button v-if="pageAudit" @click="onSubmit('auditPass')" type="primary" style="margin-left: 10px;">审核通过</a-button>
          <a-button v-if="pageAudit" @click="onSubmit('refuse')" type="danger" style="margin-left: 10px;">审核驳回</a-button>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
  import { geCommunityOwnertInfoApi, communityOwnerLabelAuditApi } from '@/api/api'
  import {RELATION_SHIP} from '@/assets/static.js'

  export default {
    name: 'PropertyChargruleForm',
    inject:['closeCurrent'],
    data () {
      return {
        pageAudit: false,
        relationShipList: RELATION_SHIP,
        model:{
          buildingId: '',
          buildingName: '',
          unitId: '',
          unitName: '',
          roomId: '',
          roomName: '',
          useTo: '',
          floorSpace: '',
          certificateType: '1',
          certificateNo: '',
          relationShip: '',
          residentName: '',
          residentPhone: ''
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,

        formModel: {
          potions: [],
          labelImg: '',
          labelRemark: ''
        },
        validatorRules: {
          accessAddress: [{ required: true, message: '请输入访问域名前缀', trigger: 'blur' }],
          potions: [{ required: true, message: '请选择贫困类型', trigger: 'change' }],
          labelImg: [{ required: true, message: '请上传业主照片', trigger: 'blur' }],
          labelRemark: [{ required: true, message: '请输入说明', trigger: 'blur' }]
        },
        url: {
          add: "/property-community/info/communityOwner/add",
          edit: "/property-community/info/communityOwner/edit",
          queryById: "/property-community/wechat/communityOwner/queryById"
        },
        auditOpinion: ''
      }
    },
    created () {
      let labelType = this.$route.query.type
      if(labelType === 'audit') {
        this.pageAudit = true
      }
       //备份model原始值
      this.getPageDetail()
    },
    methods: {
      ruleNumberInput(event) {
        let rateValue = event.target.value.replace(/[^\d]/g,"");//清除"数字"和"."和"-"以外的字符
        this.model['empowerDays'] = rateValue
      },
      async getPageDetail() {
        let {result} = await geCommunityOwnertInfoApi({id: this.$route.query.id})
        result.communityOwner['houseAllName'] = result.communityOwner.buildingName + '-' + result.communityOwner.unitName + '-' + result.communityOwner.roomName
        result.communityOwner['residentSourceName'] = result.communityOwner.residentSource === 'pc' ? 'pc' : '小程序'
        this.model = Object.assign({}, result.communityOwner);
        this.formModel = Object.assign({}, result.ownerLabel);
        this.auditOpinion = result.ownerLabel.auditOpinion
      },
      onCancel() {
        this.closeCurrent()
      },
      async onSubmit (auditStatus) {
        let res = await communityOwnerLabelAuditApi({
          id: this.$route.query.id,
          auditOpinion: this.auditOpinion,
          action: 'audit',
          auditStatus
        })
        if(res.code === 200) {
          this.$message.success(res.message);
          this.closeCurrent()
        } else {
          this.$message.warning(res.message);
        }
      }
    }
  }
</script>
<style scoped lang="less">
.page-content {
  min-height: 430px;
  background-color: #fff;
  padding-bottom: 50px;
  .row-box {
    padding: 0 50px;
    width: 90%;
  }
}
</style>