<template>
  <div class="app-container-info">
    <div class="left_back">
      <img src="@/assets/login/login.png" style="width: 100%; height: 100%" />
    </div>
    <div class="right_back">
      <div class="start-bar" />
      <el-form
        ref="myInfo"
        :model="params"
        :rules="rules"
        autocomplete="on"
        label-position="left"
        label-width="80px"
      >
        <el-form-item prop="nickname" :label="$t('myInfo.name')">
          <el-input
            ref="username"
            v-model="params.nickname"
            :placeholder="$t('myInfo.nameNotice')"
            name="username"
            type="text"
            tabindex="1"
          />
        </el-form-item>
        <el-form-item :label="$t('myInfo.nameEn')">
          <el-input
            v-model="params.englishName"
            :placeholder="$t('notices.nameEn')"
            name="username"
            type="text"
            tabindex="1"
          />
        </el-form-item>
        <!-- 生日 -->
        <el-form-item :label="$t('myInfo.birth')">
          <el-date-picker
            v-model="params.birthday"
            type="date"
            :placeholder="$t('notices.birthday')"
          />
        </el-form-item>
        <el-form-item :label="$t('myInfo.sex')">
          <el-select
            v-model="params.gender"
            :placeholder="$t('notices.gender')"
          >
            <el-option
              v-for="(item, index) in genderData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item prop="mobile" :label="$t('login.mobile')">
              <el-input
                ref="mobile"
                v-model="params.mobile"
                :placeholder="$t('login.mobile')"
                name="mobile"
                maxlength="11"
                type="text"
                tabindex="1"
                autocomplete="on"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-select v-model="params.areaCode">
              <el-option
                v-for="item in countryAreaCodeList"
                :key="item.id"
                :label="'+' + item.tel + ' ' + item[apiLang]"
                :value="item.tel"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-form-item prop="country" :label="$t('myInfo.country')">
          <el-select
            v-model="params.country"
            :placeholder="$t('notices.country')"
            @change="getCityList"
          >
            <el-option
              v-for="item in countryList"
              :key="item.id"
              :label="language == 'zh_CN' ? item.titleZh : item.titleEn"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="city" :label="$t('myInfo.city')">
          <el-select
            v-model="params.city"
            filterable
            :placeholder="$t('notices.city')"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="language == 'zh_CN' ? item.titleZh : item.titleEn"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 地址 -->
        <el-form-item :label="$t('myInfo.adderss')">
          <el-input
            v-model="params.adderss"
            :placeholder="$t('notices.adderss')"
            name="username"
            type="text"
            tabindex="1"
          />
        </el-form-item>
        <el-form-item :label="$t('myInfo.department')">
          <el-input
            v-model="params.department"
            :placeholder="$t('notices.department')"
            name="department"
            type="text"
            tabindex="1"
          />
        </el-form-item>
        <el-form-item :label="$t('myInfo.job')">
          <el-input
            v-model="params.department"
            :placeholder="$t('notices.job')"
            name="username"
            type="text"
            tabindex="1"
          />
        </el-form-item>
      </el-form>
      <div style="width: 100%; text-align: center; margin-top: 60px">
        <el-button
          type="primary"
          round
          style="width: 70%"
          @click.native.prevent="submitForm"
          >{{ $t("myInfo.edit") }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCode,
  getCountryList,
  getCityListByParent,
  getTradeCountryList,
  update,
} from "@/api/user";
import { langData } from "@/data/lang";
import { deepClone } from "@/utils";
export default {
  data() {
    return {
      rules: {},
      params: {
        areaCode: "86",
        city: null,
        country: null,
      },
      areaData: [],
      areaName: [],
      countryAreaCodeList: [],
      langData: langData,
      apiLang: "",
      areaIndex: 0,
      countryList: [],
      genderData: [
        { value: "0", label: this.$t("myInfo.girl") },
        { value: "1", label: this.$t("myInfo.boy") },
        { value: "2", label: this.$t("myInfo.secret") },
      ],
      // 国家列表
      // 城市列表
      cityList: [],
      rules: {
        nickname: [
          {
            required: true,
            message: this.$t("notices.name"),
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: this.$t("login.mobileRules"),
            trigger: "blur",
          },
          { pattern: /^[0-9]\d*$/, message: this.$t("customer.phoneRules2") },
        ],
        city: [
          {
            required: true,
            message: this.$t("notices.city"),
            trigger: "change",
          },
        ],
        country: [
          {
            required: true,
            message: this.$t("notices.country"),
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    language: {
      get() {
        return this.$store.getters.language;
      },
      set(val) {
        this.$i18n.locale = val;
        this.$store.dispatch("app/setLanguage", val);
      },
    },
  },
  watch: {
    language() {
      this.apiLang = this.langData[this.language];
    },
  },
  created() {
    this.apiLang = this.langData[this.language];
    getCountryList().then((r) => {
      this.countryAreaCodeList = r.data;
    });
    this.getTradeCountryList();
    this.getUserInfo();
  },
  methods: {
    submitForm() {
      this.$refs["myInfo"].validate((valid) => {
        if (valid) {
          update(this.params).then((res) => {
            this.$router.push({
              path: "/jiedao/jd-profile",
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getUserInfo() {
      this.$store.dispatch("user/getInfo").then((res) => {
        this.params = deepClone(res);
        if (!res.gender) {
          this.params.gender = "2";
        }
        this.params.nickname = "";
      });
    },
    // 获取城市接口
    getTradeCountryList() {
      getTradeCountryList().then((res) => {
        this.countryList = res.data;
      });
    },
    // 获取城市列表
    getCityList(id) {
      getCityListByParent({ id }).then((res) => {
        this.cityList = res.data;
      });
    },
  },
};
</script>

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

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

.consult-btn {
  width: 90%;
  margin: 50px auto 0;
}
.consult-btn div {
  width: 100%;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c036);
  color: var(--c0);
  font-size: var(--f36);
  font-weight: 700;
  margin-bottom: 40px;
  border-radius: 8px;
}
.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: 60px;
  height: 50px;
  padding: 0 10px;
  margin-right: 20px;
  font-size: var(--f26);
}
.login-area text {
  margin-right: 10px;
}
.rgt {
  position: absolute;
  right: 20px;
}
.placeholder {
  color: #666666;
}
</style>
