<template>
  <view>
    <dHeader :left-icon="!first" :title="first ? '个人信息填写' : $lang.lang.myInfo.info"></dHeader>
    <view class="start-bar"></view>
    <view class="consultAdd">
      <view class="consult-item">
        <view class="consult-item-label required-icon">
          <text>{{ $lang.lang.myInfo.name }}</text>
        </view>
        <view class="consult-item-put">
          <input v-model="params.nickname" type="text" :placeholder="$lang.lang.notices.nickName" />
        </view>
      </view>
      <view class="consult-item">
        <view class="consult-item-label required-icon">
          <text>{{ $lang.lang.myInfo.nameEn }}</text>
        </view>
        <view class="consult-item-put">
          <input
            v-model="params.englishName"
            type="text"
            :placeholder="$lang.lang.notices.nameEn"
          />
        </view>
      </view>
      <view class="consult-item">
        <view class="consult-item-label">
          <text>{{ $lang.lang.myInfo.birth }}</text>
        </view>
        <view class="consult-item-put">
          <picker
            style="width: 100%"
            mode="date"
            class="date-picker"
            :value="date"
            :start="startDate"
            :end="endDate"
            @change="bindDateChange"
          >
            <view class="uni-input">{{ date }}</view>
          </picker>
          <image class="rgt" src="../../static/img/rgt.png" mode=""></image>
        </view>
      </view>
      <view class="consult-item">
        <view class="consult-item-label">
          <text>{{ $lang.lang.myInfo.sex }}</text>
        </view>
        <view class="consult-item-put">
          <picker
            style="width: 100%"
            :value="genderIndex"
            :range="genderData"
            @change="generChange"
          >
            <view class="uni-input">{{ genderData[genderIndex] }}</view>
          </picker>
          <image class="rgt" src="../../static/img/rgt.png" mode=""></image>
        </view>
      </view>
      <view class="consult-item">
        <view class="consult-item-label">
          <text>{{ $lang.lang.myInfo.phone }}</text>
        </view>
        <view class="consult-item-put">
          <view class="login-area">
            <picker :value="areaIndex" :range="areaName" disabled>
              <view class="uni-input">{{ $request.checkAddIcon(areaData[areaIndex]) }}</view>
            </picker>
            <image src="../../static/img/down1.png" mode=""></image>
          </view>
          <input
            v-model="params.mobile"
            disabled
            type="number"
            :placeholder="$lang.lang.notices.contactPhone"
          />
        </view>
      </view>
      <view class="consult-item">
        <view class="consult-item-label required-icon">
          <text>{{ $lang.lang.myInfo.country }}</text>
        </view>
        <view class="consult-item-put">
          <picker
            style="width: 100%"
            :range="countryArray"
            :range-key="rangeKey == 'zh' ? 'titleZh' : rangeKey == 'en'?'titleEn':'titleFr'"
            @change="bindCountyChange"
          >
            <view :class="{ placeholder: !params.country }">{{
              params.countryValue ? params.countryValue : $lang.lang.notices.country
            }}</view>
          </picker>
          <image class="rgt" src="../../static/img/rgt.png" mode=""></image>
        </view>
      </view>
      <view class="consult-item">
        <view class="consult-item-label required-icon">
          <text>{{ $lang.lang.myInfo.city }}</text>
        </view>
        <view class="consult-item-put" @click="showCityPicker">
          <view :class="{ placeholder: !params.city }">
            {{ params.cityValue || $lang.lang.notices.city }}
          </view>
          <image class="rgt" src="../../static/img/rgt.png" mode=""></image>
        </view>
        <cityListPicker
          v-model="cityPickerPopup"
          :dataSource="cityArray"
          :pickerValues="params.city"
          @reLoad="changeCity"
        ></cityListPicker>
      </view>
      <view class="consult-item">
        <view class="consult-item-label">
          <text>{{ $lang.lang.myInfo.adderss }}</text>
        </view>
        <view class="consult-item-put">
          <input v-model="params.address" type="text" :placeholder="$lang.lang.notices.address" />
        </view>
      </view>
      <view class="consult-item">
        <view class="consult-item-label">
          <text>{{ $lang.lang.myInfo.department }}</text>
        </view>
        <view class="consult-item-put">
          <input
            v-model="params.department"
            type="text"
            :placeholder="$lang.lang.notices.department"
          />
        </view>
      </view>
      <view class="consult-item">
        <view class="consult-item-label">
          <text>{{ $lang.lang.myInfo.job }}</text>
        </view>
        <view class="consult-item-put">
          <input v-model="params.jobPosition" type="text" :placeholder="$lang.lang.notices.job" />
        </view>
      </view>
    </view>
    <view class="consult-btn">
      <view class="" @click="submitForm">{{ first ? '完成' : $lang.lang.myInfo.edit }}</view>
    </view>
  </view>
</template>

<script>
import dHeader from '../../components/dHeader/index.vue'
import cityListPicker from './cityListPicker.vue'
export default {
  components: {
    dHeader,
    cityListPicker
  },
  data() {
    const currentDate = this.getDate({
      format: true
    })
    return {
      params: {},
      areaData: [],
      areaName: [],
      areaIndex: 0,
      genderData: [
        this.$lang.lang.myInfo.girl,
        this.$lang.lang.myInfo.boy,
        this.$lang.lang.myInfo.secret
      ],
      genderIndex: 2,
      date: currentDate,
      time: '00:00',
      // 国家列表
      countryArray: [],
      countryId: 0,
      // 城市列表
      cityArray: [],
      // 是否为首次进入 没有国家城市信息
      first: false,
      cityPickerPopup: false //城市下拉列表展示
    }
  },
  onLoad(route) {
    const { type } = route
    if (type == 'first') {
      this.first = true
    }
    this.getUserInfo()
  },
  computed: {
    startDate() {
      return this.getDate('start')
    },
    endDate() {
      return this.getDate('end')
    },
    rangeKey() {
	  return this.$lang.locale == 'zh' ? 'zh' : this.$lang.locale =='en'?'en':'fr'
    }
  },
  watch: {
    cityPickerPopup(newValue, oldValue) {
      console.log('99999', newValue)
    }
  },
  methods: {
    //变更城市
    changeCity(e) {
      this.$set(this.params, 'cityValue', e.name)
      this.$set(this.params, 'city', e.id)
      console.log('000008', e)
    },
    //弹出城市下拉筛选列表
    showCityPicker() {
      this.cityPickerPopup = true
    },
    submitForm() {
      if (!this.params.nickname) {
        uni.showToast({
          title: this.$lang.lang.notices.nickName,
          icon: 'none'
        })
        return
      }
      if (!this.params.englishName) {
        uni.showToast({
          title: this.$lang.lang.notices.nameEn,
          icon: 'none'
        })
        return
      }
      if (!this.params.country) {
        uni.showToast({
          title: this.$lang.lang.notices.country,
          icon: 'none'
        })
        return
      }
      if (!this.params.city) {
        uni.showToast({
          title: this.$lang.lang.notices.city,
          icon: 'none'
        })
        return
      }
      this.$request.put('/app-api/member/user/update', this.params).then((res) => {
        if (res.code == 0) {
          if (this.first) {
            uni.showToast({
              title: '成功',
              icon: 'none'
            })
            uni.reLaunch({
              url: '/pages/index/index'
            })
            return
          }
          uni.showToast({
            title: this.$lang.lang.notices.edited,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    getUserInfo() {
      this.$request.get('/app-api/member/user/get').then((res) => {
        if (res.code == 0 && res.data) {
          this.params = res.data
          if (!res.data.gender) {
            this.params.gender = 2
          }
          if (res.data.birthday) {
            this.date = res.data.birthday
          }
          const { city, country, countryTitleZh, countryTitleEn, countryTitleFr, cityTitleZh, cityTitleEn, cityTitleFr } =
            res.data

          if (this.first) {
            this.params.nickname = ''
            this.params.englishName = ''
          }
          this.params.city = city
          this.params.country = country
          this.params.cityValue = this.rangeKey == 'zh' ? cityTitleZh : this.rangeKey == 'en' ? cityTitleEn :cityTitleFr
          this.params.countryValue = this.rangeKey == 'zh' ? countryTitleZh : this.rangeKey == 'en' ? countryTitleEn : countryTitleFr
          this.getCountryList()
          this.getCityList()
          this.Country()
          if (country) this.getCityList(country)
        }
      })
    },
    // 获取国家区号
    Country() {
      let that = this
      that.$request.get('/app-api/ecw/country/list-all').then((res) => {
        // console.log(res)
        if (res.code == 0 && res.data.length > 0) {
          for (let i in res.data) {
            that.areaData.push(res.data[i].tel)
            if (res.data[i].tel == that.params.areaCode) {
              that.areaIndex = i
            }
            if (that.$lang.locale == 'zh') {
              that.areaName.push(res.data[i].tel + ' ' + res.data[i].nameZh)
            } else if (that.$lang.locale == 'en') {
              that.areaName.push(res.data[i].tel + ' ' + res.data[i].nameEn)
            } else {
				that.areaName.push(res.data[i].tel + ' ' + res.data[i].nameFr)
			}
          }
        }
      })
    },
    areaChange(e) {
      this.areaIndex = e.detail.value
      this.params.areaCode = this.areaData[this.areaIndex]
    },
    generChange(e) {
      console.log(e.detail.value)
      this.genderIndex = e.detail.value
      this.params.gender = e.detail.value
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear() - 16
      let month = date.getMonth() + 1
      let day = date.getDate()

      if (type === 'start') {
        year = year - 80
      } else if (type === 'end') {
        year = year
      }
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}-${month}-${day}`
    },
    bindDateChange: function (e) {
      this.date = e.detail.value
      this.params.birthday = e.detail.value
    },
    // 获取国家列表
    getCountryList() {
      this.$request.get('/admin-api/ecw/region/getTradeCountryList').then((res) => {
        if (res.code == 0) {
          this.countryArray = res.data
        }
      })
    },
    // 国家选择 change
    bindCountyChange(e) {
      const index = e.detail.value
      const { titleZh, titleEn, titleFr, id } = this.countryArray[index]
      const value = this.rangeKey == 'zh' ? titleZh : this.rangeKey == 'zh' ? titleEn :titleFr
      if (this.params.country != id) {
        this.$set(this.params, 'cityValue', '')
        this.$set(this.params, 'city', '')
        this.getCityList(id)
      }
      this.$set(this.params, 'countryValue', value)
      this.$set(this.params, 'country', id)
    },
    // 获取城市列表
    getCityList(id) {
      this.$request.get('/admin-api/ecw/region/getCityListByParent', { id }).then((res) => {
        if (res.code == 0) {
          this.cityArray = res.data
        }
      })
    }
  }
}
</script>

<style>
page {
  padding-top: 190upx;
}
.consultAdd {
  width: 90%;
  margin: 0 auto 30upx;
  background-color: var(--c0);
  border-radius: 24upx;
  padding: 20upx 0;
  font-size: var(--f26);
}
.consult-item {
  display: flex;
  width: 92%;
  margin: 0 auto;
  margin-bottom: 20upx;
  position: relative;
}
.consult-item-2 {
  width: 100%;
  padding: 20upx 0 0 0;
}
.consult-item image {
  width: 44upx;
  height: 44upx;
  vertical-align: middle;
}
.consult-item-2 image {
  width: 44upx;
  height: 44upx;
  vertical-align: middle;
  margin-right: 14upx;
  margin-left: 40upx;
}
.consult-item-label {
  width: 180upx;
  display: flex;
  align-items: center;
}
.consult-item-put {
  height: 70upx;
  border: 1px solid var(--cdf);
  display: flex;
  align-items: center;
  padding-left: 20upx;
  border-radius: 10upx;
  flex: 1;
}
.consult-item-put input {
  font-size: var(--f26);
  flex: 1;
}

.consult-item-label-2 {
  padding: 0 0 0 0upx;
  display: flex;
  align-items: center;
  width: 100%;
}
.consult-item-put-2 {
  padding: 30upx 40upx 30upx 40upx;
  display: flex;
  align-items: center;
  border-radius: 1px solid var(--cdf);
}
.consult-item-put-2 .textarea {
  font-size: var(--f26);
  width: 100%;
  height: 200upx;
  padding: 20upx;
  border: 1px solid var(--cdf);
  border-radius: 10upx;
}
.noborder {
  border: none;
}
.radio {
  margin-right: 50upx;
}
radio {
  margin-right: 10upx;
}

.consult-btn {
  width: 90%;
  margin: 50upx auto 0;
}
.consult-btn view {
  width: 100%;
  height: 94upx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c036);
  color: var(--c0);
  font-size: var(--f36);
  font-weight: 700;
  margin-bottom: 40upx;
  border-radius: 8upx;
}
.v-picker {
  width: 100%;
}
.v-picker-2 .uni-input {
  color: #666666;
}
.login-area {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f30);
  /* background-color: #27417C; */
  border-radius: 60upx;
  height: 50upx;
  padding: 0 10upx;
  margin-right: 20upx;
  font-size: var(--f26);
}
.login-area text {
  margin-right: 10upx;
}
.rgt {
  position: absolute;
  right: 20upx;
}
.placeholder {
  color: #666666;
}
.required-icon {
  position: relative;
}
.required-icon::after {
  content: '*';
  color: red;
  position: absolute;
  left: -14upx;
  top: 16upx;
}
</style>
