<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-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-option value="4">其他</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 />
      <template v-if="labelType === '1' || (labelType === '3' && formParamas.labelCode)">
        <h4 style="padding:0 50px;line-height:30px;">业主委员会信息</h4>
        <j-form-container :disabled="labelType === '3'">
          <a-form-model ref="form" :model="formParamas" :rules="validatorRules" slot="detail">
            <a-row>
              <a-col :span="12" style="position:relative">
                <a-form-model-item label="访问域名前缀" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="accessAddress">
                  <a-input v-model="formParamas.accessAddress" placeholder="请输入访问域名前缀" addon-after=".committee.hjxbc.cn" disabled></a-input>
                  <p v-if="model.accessAddress">访问域名：{{ formParamas.accessAddress }}.committee.hjxbc.cn</p>
                </a-form-model-item>
                <a @click="onCopyLink" v-if="formParamas.accessAddress" style="position:absolute;top:0;right:-10px;line-height:40px;z-index:999;pointer-events:auto;">复制</a>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="logo" :labelCol="{ xs:{ span: 24 }, sm:{ span: 3 } }" :wrapperCol="wrapperCol" prop="logoUrl">
                  <j-image-upload :isMultiple="false" text="点击上传" bizPath="scott/pic" v-model="formParamas.logoUrl"></j-image-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="职位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="labelCode">
                  <a-select style="width:100%" v-model="formParamas.labelCode" placeholder="请选择职位">
                    <a-select-option :value="item.value" v-for="item in ownerPotionLists" :key="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="committeeName">
                  <a-input v-model="formParamas.committeeName" placeholder="请输入业委会名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="管理员账户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminLoginName">
                  <a-input v-model="formParamas.adminLoginName" placeholder="请输入管理员账户" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="管理员密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="adminPassword">
                  <a-input v-model="formParamas.adminPassword" placeholder="请输入管理员密码"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <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="formParamas.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">
                  <!-- <a-textarea style="width:500px" v-model="formParamas.labelRemark" placeholder="请输入" allow-clear /> -->
                  <j-editor placeholder="请输入内容" :disabled="labelType === '3'" v-model="formParamas.labelRemark"/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </template>
      <template v-if="labelType === '2' || (labelType === '3' && formModel.labelCode)">
        <h4 style="padding:0 50px;line-height:30px;">贫困人员信息</h4>
        <j-form-container :disabled="labelType === '3'">
          <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="potions">
                  <a-select style="width:100%" v-model="formModel.potions" mode="multiple" placeholder="请选择贫困类型（可多选）" labelInValue>
                    <a-select-option :value="item.value" v-for="item in ownerLabelsLists" :key="item.value">{{item.label}}</a-select-option>
                  </a-select>
                </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">
                  <!-- <a-textarea style="width:500px" v-model="formModel.labelRemark" placeholder="请输入" allow-clear /> -->
                  <j-editor placeholder="请输入内容" v-model="formModel.labelRemark" :disabled="labelType === '3'"/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </template>
      <div class="row-box">
        <a-row type="flex" justify="end">
          <a-button @click="onCancel">返回</a-button>
          <a-button :loading="isLoading" v-if="labelType !== '3'" @click="onSubmit" type="primary" style="margin-left: 10px;">确认</a-button>
        </a-row>
      </div>
    </a-spin>
  </div>
</template>

<script>
  import { geCommunityOwnertInfoApi, setOwnerLabelApi, editOwnerLabelApi, setCommunityOwnerLabelApi } from '@/api/api'
  import {RELATION_SHIP, INDUSTRY_JOB, OWNER_LEBEL} from '@/assets/static.js'
  let isPoorEdit = false
  export default {
    name: 'PropertyChargruleForm',
    inject:['closeCurrent'],
    data () {
      return {
        isLoading: false,
        labelType: '2',
        relationShipList: RELATION_SHIP,
        ownerPotionLists: INDUSTRY_JOB,
        ownerLabelsLists: OWNER_LEBEL,
        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: {
          labelCode: '',
          potions: [],
          labelImg: '',
          labelRemark: ''
        },
        validatorRules: {
          accessAddress: [{ required: true, message: '请输入访问域名前缀', trigger: 'blur' }],
          logoUrl: [{ required: true, message: '请上传logo', trigger: 'blur' }],
          potions: [{ required: true, message: '请选择贫困类型', trigger: 'change' }],
          labelCode: [{ required: true, message: '请选择职位', trigger: 'change' }],
          committeeName: [{ required: true, message: '请输入业委会名称', trigger: 'blur' }],
          adminPassword: [{ required: true, message: '请输入管理员密码', trigger: 'blur' }],
          labelImg: [{ required: true, message: '请上传业主照片', trigger: 'blur' }],
          labelRemark: [{ required: true, message: '请输入说明', trigger: 'blur' }]
        },
        formParamas: {
          accessAddress: '',
          logoUrl: '',
          labelCode: '',
          committeeName: '',
          adminLoginName: '',
          adminPassword: '123456',
          labelImg: '',
          labelRemark: ''
        },
        url: {
          add: "/property-community/info/communityOwner/add",
          edit: "/property-community/info/communityOwner/edit",
          queryById: "/property-community/wechat/communityOwner/queryById"
        },
        treeData: [],

        auditOpinion: '',
        dictOptions: [
          {label: '商用', value: 1},
          {label: '普通住宅', value: 2},
          {label: '商住合一', value: 3}
        ]
      }
    },
    created () {
      this.labelType = this.$route.query.type
       //备份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.residentSource === 'miniapp' ? '小程序' : 'pc'
        this.model = Object.assign({}, result.communityOwner);
        if(this.labelType === '1') {
          this.formParamas.adminLoginName = result.communityOwner.residentPhone
          this.formParamas.accessAddress = result.communityVo.accessAddress
          this.formParamas.committeeName = result.committee ? result.committee.committeeName : ''
        }
        if(this.labelType === '2' && result.destituteInfo) {
          isPoorEdit = true
          let labelCodes = result.destituteInfo.labelCode.split(',')
          let labelDescs = result.destituteInfo.labelDesc.split(',')
          let potions = labelCodes.map((item, index)=> {
            return {
              key: item,
              label: labelDescs[index]
            }
          })
          let formModel = {
            potions,
            labelCode: result.destituteInfo ? result.destituteInfo.labelCode : null,
            labelImg: result.destituteInfo ? result.destituteInfo.labelImg : null,
            labelRemark: result.destituteInfo ? result.destituteInfo.labelRemark : null
          }
          this.formModel = {...formModel}
        }
        if(this.labelType === '3') {
          let formParamas = {
            accessAddress: result.communityVo.accessAddress,
            logoUrl: result.committee ? result.committee.logoUrl : '',
            labelCode: result.committeeInfo ? result.committeeInfo.labelCode : null,
            committeeName: result.committee ? result.committee.committeeName : '',
            adminLoginName: result.communityOwner.residentPhone,
            adminPassword: result.communityVo.adminPassword,
            labelImg: result.committeeInfo ? result.committeeInfo.labelImg : null,
            labelRemark: result.committeeInfo ? result.committeeInfo.labelRemark : null
          }
          this.formParamas = {...formParamas}
          if(result.destituteInfo && result.destituteInfo.labelCode) {
            let labelCodes = result.destituteInfo.labelCode.split(',')
            let labelDescs = result.destituteInfo.labelDesc.split(',')
            let potions = labelCodes.map((item, index)=> {
              return {
                key: item,
                label: labelDescs[index]
              }
            })
            let formModel = {
              potions,
              labelCode: result.destituteInfo ? result.destituteInfo.labelCode : null,
              labelImg: result.destituteInfo ? result.destituteInfo.labelImg : null,
              labelRemark: result.destituteInfo ? result.destituteInfo.labelRemark : null
            }
            this.formModel = {...formModel}
          }
        }
      },
      onCancel() {
        this.closeCurrent()
      },
      onCopyLink() {
        let txa = document.createElement("textarea");
        txa.value = this.formParamas.accessAddress + '.committee.hjxbc.cn'
        document.body.appendChild(txa);
        txa.select();
        document.execCommand("copy");
        document.body.removeChild(txa);
        this.$message.success("复制成功!");
      },
      async onSubmit() {
        this.isLoading = true
        this.$refs.form.validate(valid => {
          if (valid) {
            if(this.labelType === '1') {
              setCommunityOwnerLabelApi({
                ownerId: this.$route.query.id,
                ...this.formParamas
              }).then(res=> {
                if(res.code === 200) {
                  this.$message.success(res.message);
                  this.closeCurrent()
                } else {
                  this.$message.warning(res.message);
                }
                this.isLoading = false
              }).catch(err=> {
                this.isLoading = false
              })
            } else {
              let labelCode = this.formModel.potions.map(item=>item.key).join(',')
              let labelDesc = this.formModel.potions.map(item=>item.label).join(',')
              if(isPoorEdit) {
                editOwnerLabelApi({
                  ownerId: this.$route.query.id,
                  labelImg: this.formModel.labelImg,
                  labelRemark: this.formModel.labelRemark,
                  labelCode,
                  labelDesc
                }).then(res=> {
                  if(res.code === 200) {
                    this.$message.success(res.message);
                    this.closeCurrent()
                  } else {
                    this.$message.warning(res.message);
                  }
                  this.isLoading = false
                }).catch(err=> {
                  this.isLoading = false
                })
              } else {
                setOwnerLabelApi({
                  ownerId: this.$route.query.id,
                  labelImg: this.formModel.labelImg,
                  labelRemark: this.formModel.labelRemark,
                  labelCode,
                  labelDesc
                }).then(res=> {
                  if(res.code === 200) {
                    this.$message.success(res.message);
                    this.closeCurrent()
                  } else {
                    this.$message.warning(res.message);
                  }
                  this.isLoading = false
                }).catch(err=> {
                  this.isLoading = false
                })
              }
            }
          } else {
            this.isLoading = false
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
.page-content {
  min-height: 430px;
  background-color: #fff;
  padding-bottom: 50px;
  .row-box {
    padding: 0 50px;
    width: 90%;
  }
}
</style>