<template>
  <el-dialog title="新增用户" :close-on-click-modal="false" :visible.sync="open" width="800px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="form.mobile" maxlength="11" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="form.nickname" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="职业" prop="profession">
            <el-select v-model="form.profession" clearable size="small" style="width: 95%">
              <el-option
                  v-for="dict in professionList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年收入" prop="annualIncome">
            <el-select v-model="form.annualIncome" clearable size="small" style="width: 95%">
              <el-option
                  v-for="dict in userAnnualIncomeList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="体型" prop="somatotype">
            <el-select v-model="form.somatotype" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userSomatotypeList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生肖" prop="zodiac">
            <el-select v-model="form.zodiac" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userZodiacList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="星座" prop="sign">
            <el-select v-model="form.sign" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userSignList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司性质" prop="companyNature">
            <el-select v-model="form.companyNature" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userCompanyNatureList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="为谁征婚" prop="forPersonals">
            <el-select v-model="form.forPersonals" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userForPersonalsList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名族" prop="nation">
            <el-input v-model="form.nation"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="住房情况" prop="housingStatus">
            <el-select v-model="form.housingStatus" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userHousingStatusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购车情况" prop="carStatus">
            <el-select v-model="form.carStatus" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userCarStatusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否吸烟" prop="smokeStatus">
            <el-select v-model="form.smokeStatus" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userSmokeStatusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否喝酒" prop="drinkStatus">
            <el-select v-model="form.drinkStatus" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userDrinkStatusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="有没有小孩" prop="childStatus">
            <el-select v-model="form.childStatus" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userChildStatusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="家庭背景" prop="familyBackground">
            <el-select v-model="form.familyBackground" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userFamilyBackgroundList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否接受异地恋" prop="loveAtDistance">
            <el-select v-model="form.loveAtDistance" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userLoveAtDistanceList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="何时结婚" prop="whenMarriage">
            <el-select v-model="form.whenMarriage" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userWhenMarriageList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否要小孩" prop="wantChild">
            <el-select v-model="form.wantChild" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userWantChildList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="愿与对方父母同住" prop="liveAtParent">
            <el-select v-model="form.liveAtParent" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userLiveAtParentList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="毕业院校" prop="graduateSchool">
            <el-input v-model="form.graduateSchool" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="兴趣爱好" prop="hobbys">
            <el-input v-model="form.hobbys" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="自我描述" prop="remark">
            <el-input v-model="form.remark" type="textarea" :rows="2"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  appUserTypeList,
  booleanList,
  finishStatusList,
  genderList,
  memberTypeList,
  onlineStatusList,
  professionList,
  userAnnualIncomeList,
  userCarStatusList,
  userChildStatusList,
  userCompanyNatureList,
  userDrinkStatusList,
  userEducationList,
  userFamilyBackgroundList,
  userFamilyRankingList,
  userFindTagList,
  userForPersonalsList,
  userHousingStatusList,
  userLiveAtParentList,
  userLoveAtDistanceList,
  userMarriageList,
  userSignList,
  userSmokeStatusList,
  userSomatotypeList,
  userStatusList,
  userWantChildList,
  userWhenMarriageList,
  userZodiacList,
  videoStatusList
} from '@/constant/statusMap'
import Treeselect from '@riophae/vue-treeselect'
import { getTreeAreaCode } from '@/api/xq/areaCode'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { updateUser } from '@/api/xq/user'
import { getUserInfoUpdate, updateUserInfo } from '@/api/xq/userInfo'

export default {
  name: "UserInfo",
  components: { Treeselect },
  data() {
    return {
      genderList,userStatusList,finishStatusList,userSomatotypeList,userZodiacList,userSignList,
      userEducationList,userCompanyNatureList,userAnnualIncomeList,userForPersonalsList,
      userHousingStatusList,userCarStatusList,userSmokeStatusList,userMarriageList,
      userDrinkStatusList,userChildStatusList,userFamilyBackgroundList,userFamilyRankingList,
      userLoveAtDistanceList,userWhenMarriageList,userWantChildList,userLiveAtParentList,
      userFindTagList,appUserTypeList,professionList,
      videoStatusList,onlineStatusList,memberTypeList,
      booleanList,
      open:false,
      buttonLoading: false,
      form:{
        userId: undefined,
        nickname: undefined,
        profession: undefined,
        annualIncome: undefined,
        somatotype: undefined,
        zodiac: undefined,
        sign: undefined,
        companyNature: undefined,
        forPersonals: undefined,
        nation: undefined,
        housingStatus: undefined,
        carStatus: undefined,
        smokeStatus: undefined,
        drinkStatus: undefined,
        childStatus: undefined,
        familyBackground: undefined,
        loveAtDistance: undefined,
        whenMarriage: undefined,
        wantChild: undefined,
        liveAtParent: undefined,
        graduateSchool: undefined,
        hobbys: undefined,
        remark: undefined,
      },
      rules:{
        annualIncome: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        profession: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        marriage: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        education: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        addressCode: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        residenceCode: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        weight: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        height: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        birthday: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        gender: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        avatar: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        nickname: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "数据不能为空", trigger: "blur" }
        ],
      },
      areaOption: [],
    };
  },
  created() {
    getTreeAreaCode().then(response => {
      this.areaOption = response.data
    })
  },
  methods: {
    normalizer(node){
      return {
        id: node.id,
        label: node.label,
        children: node.children && node.children.length > 0 ? node.children : 0,
      }
    },
    init(row){
      this.form.userId = row.userId
      this.open = true;
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
        getUserInfoUpdate(row.userId).then(response => {
          this.form = response.data
        })
      })
    },
    submitForm(){
      updateUserInfo(this.form).then(data => {
        this.$modal.msgSuccess("修改用户信息成功");
        this.buttonLoading = false;
        this.open = false
        this.$emit('refreshDataList')
      }).finally(() => {
        this.buttonLoading = false;
      });
    }
  }
};
</script>
