<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" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="年龄" prop="ageFilter">
            <el-col :span="4">
              <el-checkbox v-model="form.ageBx">不限</el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-slider v-if="form.ageBx === false" v-model="form.ageFilter" range :min="20" :max="50" />
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="身高" prop="ageFilter">
            <el-col :span="4">
              <el-checkbox v-model="form.heightBx">不限</el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-slider v-if="form.heightBx === false" v-model="form.heightFilter" range :min="150" :max="199" />
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="体型" prop="somatotypeFilter">
            <el-col :span="4">
              <el-checkbox v-model="form.somatotypeFilterBx">不限</el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-select v-if="form.somatotypeFilterBx === false" multiple v-model="form.somatotypeFilter" size="small" style="width: 95%">
                <el-option
                  v-for="dict in userSomatotypeList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="婚况" prop="marriageFilter">
            <el-col :span="4">
              <el-checkbox v-model="form.marriageFilterBx">不限</el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-select v-if="form.marriageFilterBx === false" multiple v-model="form.marriageFilter" size="small" style="width: 95%">
                <el-option
                  v-for="dict in userMarriageList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="学历" prop="filterEducation">
            <el-col :span="4">
              <el-checkbox v-model="form.filterEducationBx">不限</el-checkbox>
            </el-col>
            <el-col :span="20">
              <el-select v-if="form.filterEducationBx === false" multiple v-model="form.filterEducation" clearable size="small" style="width: 95%">
                <el-option
                  v-for="dict in userEducationList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年收入" prop="filterAnnualIncome">
            <el-select v-model="form.filterAnnualIncome" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userFilterAnnualIncomeList"
                :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="filterChildStatus">
            <el-select v-model="form.filterChildStatus" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userFilterChildStatusList"
                :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="filterHousingStatus">
            <el-select v-model="form.filterHousingStatus" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userFilterHouseStatusList"
                :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="filterCarStatus">
            <el-select v-model="form.filterCarStatus" clearable size="small" style="width: 95%">
              <el-option
                v-for="dict in userFilterCarStatusList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </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,
  userFilterAnnualIncomeList,
  userFilterCarStatusList,
  userFilterChildStatusList,
  userFilterHouseStatusList,
  userFindTagList,
  userForPersonalsList,
  userHousingStatusList,
  userLiveAtParentList,
  userLoveAtDistanceList,
  userMarriageList,
  userSignList,
  userSmokeStatusList,
  userSomatotypeList,
  userStatusList,
  userWantChildList,
  userWhenMarriageList,
  userZodiacList,
  videoStatusList
} from '@/constant/statusMap'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getUserInfo, updateUserInfoFilter } from '@/api/xq/userInfo'

export default {
  name: "UserInfo",
  components: { },
  data() {
    return {
      genderList,userStatusList,finishStatusList,userSomatotypeList,userZodiacList,userSignList,
      userEducationList,userCompanyNatureList,userFilterAnnualIncomeList,userForPersonalsList,
      userHousingStatusList,userCarStatusList,userSmokeStatusList,userMarriageList,
      userDrinkStatusList,userChildStatusList,userFamilyBackgroundList,userFamilyRankingList,
      userLoveAtDistanceList,userWhenMarriageList,userWantChildList,userLiveAtParentList,
      userFindTagList,appUserTypeList,professionList,
      videoStatusList,onlineStatusList,memberTypeList,
      userFilterCarStatusList,userFilterChildStatusList,userFilterHouseStatusList,
      booleanList,
      open:false,
      buttonLoading: false,
      userSomatotypeListFilter:[],
      userMarriageListFilter:[],
      form:{
        id: undefined,
        mobile: undefined,
        nickname: undefined,
        ageBx: false,
        ageFilter: undefined,
        heightBx: false,
        heightFilter: undefined,
        somatotypeFilterBx: false,
        somatotypeFilter: undefined,
        marriageFilterBx: false,
        marriageFilter: undefined,
        filterEducationBx: undefined,
        filterEducation: undefined,
        filterAnnualIncome: undefined,
        filterChildStatus: undefined,
        filterHousingStatus: undefined,
        filterCarStatus: undefined,
      },
      rules:{
      },
      areaOption: [],
    };
  },
  created() {
  },
  methods: {
    init(row){
      this.form.id = row.id
      this.open = true;
      this.$nextTick(() => {
        getUserInfo(row.id).then(response => {
          this.form.id = response.data.id;
          this.form.mobile = row.mobile;
          this.form.nickname = row.nickname;
          if(response.data.filterAge != '0'){
            this.form.ageBx = false
            this.form.ageFilter = response.data.filterAge.split('-')
          }else{
            this.form.ageBx = true
            this.form.ageFilter = undefined
          }
          if(response.data.filterHeight != '0'){
            this.form.heightBx = false
            this.form.heightFilter = response.data.filterHeight.split('-')
          }else{
            this.form.heightBx = true
            this.form.heightFilter = undefined
          }
          if(response.data.filterSomatotype != '0'){
            this.form.somatotypeFilterBx = false
            console.log(response.data.filterSomatotype.split('&'))
            this.form.somatotypeFilter = response.data.filterSomatotype.split('&').map(i => parseInt(i))
          }else{
            this.form.somatotypeFilterBx = true
            this.form.somatotypeFilter = undefined
          }
          if(response.data.filterMarriage != '0'){
            this.form.marriageFilterBx = false
            this.form.marriageFilter = response.data.filterMarriage.split('&').map(i => parseInt(i))
          }else{
            this.form.marriageFilterBx = true
            this.form.marriageFilter = undefined
          }
          if(response.data.filterEducation != '0'){
            this.form.filterEducationBx = false
            this.form.filterEducation = response.data.filterEducation.split('&').map(i => parseInt(i))
          }else{
            this.form.filterEducationBx = true
            this.form.filterEducation = undefined
          }
          this.form.filterAnnualIncome = response.data.filterAnnualIncome;
          this.form.filterChildStatus = response.data.filterChildStatus;
          this.form.filterHousingStatus = response.data.filterHousingStatus;
          this.form.filterCarStatus = response.data.filterCarStatus;
        })
      })
    },
    submitForm(){
      updateUserInfoFilter({
        id: this.form.id,
        filterAge : this.form.ageBx ? "0" : this.form.ageFilter.join("-"),
        filterHeight : this.form.heightBx ? "0" : this.form.heightFilter.join("-"),
        filterSomatotype : this.form.somatotypeFilterBx ? "0" : this.form.somatotypeFilter.join("&"),
        filterMarriage : this.form.marriageFilterBx ? "0" : this.form.marriageFilter.join("&"),
        filterEducation: this.form.filterEducationBx ? "0" : this.form.filterEducation.join("&"),
        filterAnnualIncome: this.form.filterAnnualIncome,
        filterChildStatus: this.form.filterChildStatus,
        filterHousingStatus: this.form.filterHousingStatus,
        filterCarStatus: this.form.filterCarStatus,
      }).then(data => {
        this.$modal.msgSuccess("修改用户择偶信息成功");
        this.buttonLoading = false;
        this.open = false
        this.$emit('refreshDataList')
      }).finally(() => {
        this.buttonLoading = false;
      });
    }
  }
};
</script>
