<template>
  <el-dialog
    :title="$t('addOwnerMember.title')"
    :visible.sync="dialogVisible"
    width="80%"
    @close="_closeSaveOwnerModal"
  >
    <el-form :model="addOwnerMemberInfo" :rules="rules" ref="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('addOwnerMember.personRole')" prop="personRole">
            <el-select
              v-model="addOwnerMemberInfo.personRole"
              :placeholder="$t('addOwnerMember.placeholder.personRole')"
              class="w100"
            >
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item :label="$t('addOwnerMember.name')" prop="name">
            <el-input
              v-model.trim="addOwnerMemberInfo.name"
              :placeholder="$t('addOwnerMember.placeholder.name')"
              clearable
            />
          </el-form-item>
          
          <el-form-item :label="$t('addOwnerMember.link')" prop="link">
            <el-input
              v-model.trim="addOwnerMemberInfo.link"
              :placeholder="$t('addOwnerMember.placeholder.link')"
              clearable
            />
          </el-form-item>
          
          <el-form-item :label="$t('addOwnerMember.sex')" prop="sex">
            <el-select
              v-model="addOwnerMemberInfo.sex"
              :placeholder="$t('addOwnerMember.placeholder.sex')"
              class="w100"
            >
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="12" class="text-center">
          <div class="avatar-uploader">
            <img
              v-if="addOwnerMemberInfo.ownerPhotoUrl"
              :src="addOwnerMemberInfo.ownerPhotoUrl"
              class="avatar"
              :alt="$t('addOwnerMember.photo')"
            >
            <img
              v-else
              src="/img/noPhoto.jpg"
              class="avatar"
              :alt="$t('addOwnerMember.photo')"
            >
          </div>
          <el-button
            type="primary"
            class="mt10"
            @click="_uploadPhoto"
          >
            {{ $t('addOwnerMember.uploadPhoto') }}
          </el-button>
          <input
            type="file"
            ref="fileInput"
            accept=".jpg,.jpeg,.png"
            @change="_choosePhoto"
            style="display: none"
          >
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('addOwnerMember.concactLink')">
            <el-input
              v-model.trim="addOwnerMemberInfo.concactLink"
              :placeholder="$t('addOwnerMember.placeholder.concactLink')"
              clearable
            />
          </el-form-item>
          
          <el-form-item :label="$t('addOwnerMember.address')">
            <el-input
              v-model.trim="addOwnerMemberInfo.address"
              :placeholder="$t('addOwnerMember.placeholder.address')"
              clearable
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item :label="$t('addOwnerMember.idCard')">
            <el-input
              v-model.trim="addOwnerMemberInfo.idCard"
              :placeholder="$t('addOwnerMember.placeholder.idCard')"
              clearable
            />
          </el-form-item>
          
          <el-form-item :label="$t('addOwnerMember.remark')">
            <el-input
              v-model.trim="addOwnerMemberInfo.remark"
              :placeholder="$t('addOwnerMember.placeholder.remark')"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <template v-for="(item,index) in addOwnerMemberInfo.attrs">
        <el-row :gutter="20" v-if="index % 2 === 0" :key="index">
          <el-col :span="12">
            <el-form-item :label="item.specName" v-if="item.specType === '2233'">
              <el-input
                v-model="item.value"
                :placeholder="item.specHoldplace"
                clearable
              />
            </el-form-item>
            
            <el-form-item :label="item.specName" v-if="item.specType === '3344'">
              <el-select
                v-model="item.value"
                :placeholder="item.specHoldplace"
                class="w100"
              >
                <el-option
                  v-for="value in item.values"
                  :key="value.value"
                  :label="value.valueName"
                  :value="value.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          
          <el-col :span="12" v-if="index < addOwnerMemberInfo.attrs.length-1">
            <el-form-item 
              :label="addOwnerMemberInfo.attrs[index+1].specName" 
              v-if="addOwnerMemberInfo.attrs[index+1].specType === '2233'"
            >
              <el-input
                v-model="addOwnerMemberInfo.attrs[index+1].value"
                :placeholder="addOwnerMemberInfo.attrs[index+1].specHoldplace"
                clearable
              />
            </el-form-item>
            
            <el-form-item 
              :label="addOwnerMemberInfo.attrs[index+1].specName" 
              v-if="addOwnerMemberInfo.attrs[index+1].specType === '3344'"
            >
              <el-select
                v-model="addOwnerMemberInfo.attrs[index+1].value"
                :placeholder="addOwnerMemberInfo.attrs[index+1].specHoldplace"
                class="w100"
              >
                <el-option
                  v-for="value in addOwnerMemberInfo.attrs[index+1].values"
                  :key="value.value"
                  :label="value.valueName"
                  :value="value.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="_closeSaveOwnerModal">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="saveOwnerMemberInfo">{{ $t('common.save') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'
import { getAttrSpec, getAttrValue } from '@/api/community/communityApi'
import { uploadFile } from '@/api/staff/addStaffApi'

export default {
  name: 'AddOwnerMember',
  data() {
    return {
      dialogVisible: false,
      addOwnerMemberInfo: {
        name: '',
        link: '',
        address: '',
        sex: '',
        remark: '',
        ownerId: '',
        ownerPhoto: '',
        ownerPhotoUrl: '',
        idCard: '',
        personType: 'P',
        personRole: '3',
        concactLink: '',
        attrs: []
      },
      roleOptions: [
        { value: '2', label: this.$t('addOwnerMember.role.tenant') },
        { value: '3', label: this.$t('addOwnerMember.role.family') },
        { value: '4', label: this.$t('addOwnerMember.role.staff') },
        { value: '99', label: this.$t('addOwnerMember.role.other') }
      ],
      sexOptions: [
        { value: '0', label: this.$t('common.male') },
        { value: '1', label: this.$t('common.female') }
      ],
      rules: {
        personRole: [
          { required: true, message: this.$t('addOwnerMember.placeholder.personRole'), trigger: 'change' }
        ],
        name: [
          { required: true, message: this.$t('addOwnerMember.placeholder.name'), trigger: 'blur' },
          { min: 2, max: 64, message: this.$t('addOwnerMember.validate.nameLength'), trigger: 'blur' }
        ],
        link: [
          { required: true, message: this.$t('addOwnerMember.placeholder.link'), trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: this.$t('addOwnerMember.validate.phoneFormat'), trigger: 'blur' }
        ],
        sex: [
          { required: true, message: this.$t('addOwnerMember.placeholder.sex'), trigger: 'change' }
        ],
        idCard: [
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: this.$t('addOwnerMember.validate.idCardFormat'), trigger: 'blur' }
        ],
        remark: [
          { max: 200, message: this.$t('addOwnerMember.validate.remarkLength'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    open(ownerId) {
      this.addOwnerMemberInfo.ownerId = ownerId
      this._loadOwnerAttrSpec()
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    
    saveOwnerMemberInfo() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const params = {
            ...this.addOwnerMemberInfo,
            communityId: getCommunityId()
          }
          
          this.$http.post('/owner.saveOwnerMember', params)
            .then(res => {
              if (res.data.code === 0) {
                this.$message.success(this.$t('common.saveSuccess'))
                this.dialogVisible = false
                this.$emit('save-success')
              } else {
                this.$message.error(res.data.msg || this.$t('common.saveFailed'))
              }
            })
            .catch(err => {
              console.error('请求失败:', err)
              this.$message.error(this.$t('common.saveFailed'))
            })
        }
      })
    },
    
    _loadOwnerAttrSpec() {
      this.addOwnerMemberInfo.attrs = []
      getAttrSpec('building_owner_attr').then(data => {
        data.forEach(item => {
          if (item.specShow === 'Y') {
            item.value = ''
            item.values = []
            this._loadAttrValue(item.specCd, item.values)
            this.addOwnerMemberInfo.attrs.push(item)
          }
        })
      })
    },
    
    _loadAttrValue(specCd, values) {
      getAttrValue(specCd).then(data => {
        data.forEach(item => {
          if (item.valueShow === 'Y') {
            values.push(item)
          }
        })
      })
    },
    
    _uploadPhoto() {
      this.$refs.fileInput.click()
    },
    
    _choosePhoto(event) {
      const files = event.target.files
      if (files && files.length > 0) {
        const file = files[0]
        if (file.size > 1024 * 1024 * 2) {
          this.$message.error(this.$t('addOwnerMember.validate.photoSize'))
          return
        }
        
        this._doUploadImage(file)
      }
    },
    
    _doUploadImage(file) {
      const formData = new FormData()
      formData.append('uploadFile', file)
      formData.append('communityId', getCommunityId())
      
      uploadFile(formData).then(res => {
        this.addOwnerMemberInfo.ownerPhoto = res.fileId
        this.addOwnerMemberInfo.ownerPhotoUrl = res.url
      }).catch(err => {
        console.error('上传失败:', err)
        this.$message.error(this.$t('addOwnerMember.uploadFailed'))
      })
    },
    
    _closeSaveOwnerModal() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.addOwnerMemberInfo = {
        name: '',
        link: '',
        address: '',
        sex: '',
        remark: '',
        ownerId: '',
        ownerPhoto: '',
        ownerPhotoUrl: '',
        idCard: '',
        personType: 'P',
        personRole: '3',
        concactLink: '',
        attrs: []
      }
    }
  }
}
</script>

<style scoped>
.w100 {
  width: 100%;
}
.mt10 {
  margin-top: 10px;
}
.text-center {
  text-align: center;
}
.avatar-uploader {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.avatar {
  width: 150px;
  height: 150px;
  object-fit: cover;
}
</style>