<template>
  <div>
    <div style="display: flex; align-items: flex-end">
      <img
        src="@/assets/setting/user.png"
        alt
        style="width: 26px; height: 26px"
      />
      <span
        style="
          font-size: 18px;
          font-weight: bold;
          color: #333333;
          line-height: 26px;
          margin-left: 5px;
        "
        >{{ $t("setting.userInfo") }}</span
      >
    </div>
    <div style="display: flex; align-items: flex-end; margin-top: 5px">
      <div style="width: 75px; height: 4px; background: #396fff" />
      <div
        style="
          width: 75px;
          height: 1px;
          background: #fff;
          border: 1px solid #acacac;
        "
      />
    </div>
    <div style="margin-top: 20px">
      <img
        src="@/assets/setting/banner.png"
        alt
        object-fit="cover"
        style="width: 100%; height: 126px; margin-bottom: 20px"
      />
      <div style="position: absolute; top: 85px; left: 30px">
        <div style="display: flex">
          <div class="tx" @mouseover="mouseenter" @mouseout="mouseout">
            <el-image
              style="width: 46px; height: 46px; border-radius: 50%"
              :src="userInfo.avatar"
              fit="cover"
            >
              <div slot="error" class="image-slot">
                <img
                  src="@/assets/default.png"
                  alt
                  style="width: 46px; height: 46px"
                />
              </div>
            </el-image>
            <div v-show="mouseShow" class="update-tx">
              <el-upload
                action="#"
                :http-request="requestUpload"
                :show-file-list="false"
                :before-upload="beforeUploaduser"
              >
                <i style="font-size: 20px; margin: 12px" class="el-icon-edit" />
              </el-upload>
            </div>
          </div>
          <span
            style="
              font-size: 18px;
              font-weight: bold;
              color: #333;
              line-height: 46px;
              margin-left: 5px;
            "
            >{{ $t("setting.nickname") }}：{{ userInfo.nickname }}</span
          >
        </div>
        <div style="display: flex">
          <span
            style="
              font-size: 14px;
              font-weight: 400;
              color: #999;
              line-height: 26px;
              margin-left: 50px;
            "
            >{{ $t("setting.loginDate") }}：{{
              parseTime(userInfo.loginDate)
            }}</span
          >
          <span
            style="
              font-size: 14px;
              font-weight: bold;
              color: #333;
              line-height: 26px;
              margin-left: 20px;
            "
            >{{ $t("setting.advice") }}</span
          >
          <div style="display: flex; margin-left: 10px">
            <img
              src="@/assets/setting/open.png"
              alt
              style="width: 26px; height: 26px"
            />
            <span
              style="
                font-size: 14px;
                font-weight: bold;
                line-height: 30px;
                text-decoration: underline;
                color: #409eff;
                margin-left: 3px;
                cursor: pointer;
              "
              @click="editPwd"
              >{{ $t("setting.editPassword") }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex">
        <div
          style="
            width: 6px;
            height: 26px;
            background: #659fd5;
            border-radius: 0px 6px 6px 0px;
          "
        />
        <span
          style="
            font-size: 22px;
            font-weight: 500;
            color: #333;
            line-height: 26px;
            margin-left: 5px;
          "
          >{{ $t("setting.baseInfo") }}</span
        >
      </div>
      <div
        v-if="!baseEdit"
        style="
          width: 92px;
          height: 30px;
          background: #5ba8dc;
          border: 2px solid #659fd5;
          border-radius: 19px;
          display: flex;
          justify-content: center;
          cursor: pointer;
        "
        @click="baseHanderEdit"
      >
        <img
          src="@/assets/setting/edit.png"
          alt
          style="width: 26px; height: 26px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: bold;
            line-height: 26px;
            color: #fff;
            margin-left: 6px;
          "
          >{{ $t("setting.update") }}</span
        >
      </div>
      <div v-else style="display: flex">
        <div
          style="
            width: 92px;
            height: 30px;
            background: #5ba8dc;
            border: 2px solid #659fd5;
            border-radius: 19px;
            display: flex;
            justify-content: center;
            cursor: pointer;
          "
          @click="baseHanderCancel"
        >
          <span
            style="
              font-size: 14px;
              font-weight: bold;
              line-height: 26px;
              color: #fff;
              margin-left: 6px;
            "
            >{{ $t("setting.cancel") }}</span
          >
        </div>
        <div
          style="
            width: 92px;
            height: 30px;
            background: #5ba8dc;
            border: 2px solid #659fd5;
            border-radius: 19px;
            display: flex;
            justify-content: center;
            cursor: pointer;
            margin-left: 10px;
          "
          @click="baseHanderSubmit"
        >
          <span
            style="font-size: 14px;font-weight: bold;line-height: 26px;color: #fff;margin-left:6px;cu"
            >{{ $t("setting.save") }}</span
          >
        </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-form
        ref="baseForm"
        v-loading="baseloading"
        :model="baseForm"
        :rules="baseRules"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item
              style="display: flex; align-items: center"
              prop="nickname"
            >
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/ren.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.name") }}：</span>
              </span>
              <el-input
                v-if="baseEdit"
                v-model="baseForm.nickname"
                size="mini"
                class="jd-input"
              />
              <span v-else>{{ userInfo.nickname }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              style="display: flex; align-items: center"
              prop="mobile"
            >
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/dianhua.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.mobile") }}：</span>
              </span>
              <el-input
                v-if="baseEdit"
                v-model="baseForm.mobile"
                disabled
                size="mini"
                class="jd-input"
              />
              <span v-else>{{ userInfo.mobile }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/zhiwei.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.jobPosition") }}：</span>
              </span>
              <el-input
                v-if="baseEdit"
                v-model="baseForm.jobPosition"
                size="mini"
                class="jd-input"
              />
              <span v-else>{{ userInfo.jobPosition }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/bir.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.birthday") }}：</span>
              </span>
              <el-date-picker
                v-if="baseEdit"
                v-model="baseForm.birthday"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                class="jd-input"
              />
              <span v-else>{{ userInfo.birthday }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              style="display: flex; align-items: center"
              prop="englishName"
            >
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/enname.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.englishName") }}：</span>
              </span>
              <el-input
                v-if="baseEdit"
                v-model="baseForm.englishName"
                size="mini"
                class="jd-input"
              />
              <span v-else>{{ userInfo.englishName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/address.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.address") }}：</span>
              </span>
              <el-input
                v-if="baseEdit"
                v-model="baseForm.address"
                size="mini"
                class="jd-input"
              />
              <span v-else>{{ userInfo.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/sex.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.gender") }}：</span>
              </span>
              <el-select
                v-if="baseEdit"
                v-model="baseForm.gender"
                size="mini"
                class="jd-input"
              >
                <el-option :label="$t('setting.girl')" :value="0" />
                <el-option :label="$t('setting.male')" :value="1" />
                <el-option :label="$t('setting.secret')" :value="2" />
              </el-select>
              <span v-else>{{ genderData[userInfo.gender] }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/gongsi.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.department") }}：</span>
              </span>
              <el-input
                v-if="baseEdit"
                v-model="baseForm.department"
                size="mini"
                class="jd-input"
              />
              <span v-else>{{ userInfo.department }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="country"
              style="display: flex; align-items: center"
            >
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/gongsi.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.country") }}：</span>
              </span>
              <el-select
                v-if="baseEdit"
                v-model="baseForm.country"
                :placeholder="$t('notices.country')"
                @change="getCityList"
              >
                <el-option
                  v-for="item in countrySelectList"
                  :key="item.id"
                  :label="language == 'zh_CN' ? item.titleZh : item.titleEn"
                  :value="item.id"
                />
              </el-select>

              <span v-else>{{
                language == "zh_CN"
                  ? userInfo.countryTitleZh
                  : userInfo.countryTitleEn
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              prop="city"
              style="display: flex; align-items: center"
            >
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/gongsi.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.city") }}：</span>
              </span>
              <el-select
                v-if="baseEdit"
                v-model="baseForm.city"
                filterable
                :placeholder="$t('notices.country')"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.id"
                  :label="language == 'zh_CN' ? item.titleZh : item.titleEn"
                  :value="item.id"
                />
              </el-select>
              <span v-else>{{
                language == "zh_CN"
                  ? userInfo.cityTitleZh
                  : userInfo.cityTitleEn
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div
      style="display: flex; justify-content: space-between; margin-top: 30px"
    >
      <div style="display: flex">
        <div
          style="
            width: 6px;
            height: 26px;
            background: #659fd5;
            border-radius: 0px 6px 6px 0px;
          "
        />
        <span
          style="
            font-size: 22px;
            font-weight: 500;
            color: #333;
            line-height: 26px;
            margin-left: 5px;
          "
          >{{ $t("setting.companyInfo") }}</span
        >
      </div>
      <div
        v-if="!companyEdit"
        style="
          width: 92px;
          height: 30px;
          background: #5ba8dc;
          border: 2px solid #659fd5;
          border-radius: 19px;
          display: flex;
          justify-content: center;
          cursor: pointer;
        "
        @click="companyHanderEdit"
      >
        <img
          src="@/assets/setting/edit.png"
          alt
          style="width: 26px; height: 26px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: bold;
            line-height: 26px;
            color: #fff;
            margin-left: 6px;
          "
          >{{ $t("setting.update") }}</span
        >
      </div>
      <div v-else style="display: flex">
        <div class="cancelBtn" @click="companyHanderCancel">
          <span
            style="
              font-size: 14px;
              font-weight: bold;
              line-height: 26px;
              color: #fff;
              margin-left: 6px;
            "
            >{{ $t("setting.cancel") }}</span
          >
        </div>
        <div
          style="
            width: 92px;
            height: 30px;
            background: #5ba8dc;
            border: 2px solid #659fd5;
            border-radius: 19px;
            display: flex;
            justify-content: center;
            cursor: pointer;
            margin-left: 10px;
          "
          @click="companyHanderSubmit"
        >
          <span
            style="
              font-size: 14px;
              font-weight: bold;
              line-height: 26px;
              color: #fff;
              margin-left: 6px;
            "
            >{{ $t("setting.save") }}</span
          >
        </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-form
        ref="companyForm"
        v-loading="companyloading"
        :model="companyForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/cname.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.companyName") }}：</span>
              </span>
              <el-input
                v-if="companyEdit"
                v-model="companyForm.companyName"
                size="mini"
                class="jd-company-input"
              />
              <span v-else>{{ companyInfo.companyName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/jianjie.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.companyDesc") }}：</span>
              </span>
              <el-input
                v-if="companyEdit"
                v-model="companyForm.companyDesc"
                size="mini"
                class="jd-company-input"
              />
              <span v-else>{{ companyInfo.companyDesc }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/dangkou.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.companyStall") }}：</span>
              </span>
              <el-input
                v-if="companyEdit"
                v-model="companyForm.companyStall"
                size="mini"
                class="jd-company-input"
              />
              <span v-else>{{ companyInfo.companyStall }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/cenname.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label"
                  >{{ $t("setting.companyEnName") }}：</span
                >
              </span>
              <el-input
                v-if="companyEdit"
                v-model="companyForm.companyEnName"
                size="mini"
                class="jd-company-input"
              />
              <span v-else>{{ companyInfo.companyEnName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/caddress.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label"
                  >{{ $t("setting.companyAddress") }}：</span
                >
              </span>
              <el-input
                v-if="companyEdit"
                v-model="companyForm.companyAddress"
                size="mini"
                class="jd-company-input"
              />
              <span v-else>{{ companyInfo.companyAddress }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item style="display: flex; align-items: center">
              <span slot="label" style="display: flex">
                <img
                  src="@/assets/setting/pinpai.png"
                  alt
                  style="width: 26px; height: 26px"
                />
                <span class="jd-label">{{ $t("setting.companyBand") }}：</span>
              </span>
              <el-input
                v-if="companyEdit"
                v-model="companyForm.companyBand"
                size="mini"
                class="jd-company-input"
              />
              <span v-else>{{ companyInfo.companyBand }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="companyEdit">
          <el-form-item style="display: flex; align-items: center">
            <span slot="label" style="display: flex">
              <span class="jd-label">{{ $t("setting.companyWebsite") }}：</span>
            </span>
            <el-input
              v-model="companyForm.companyWebsite"
              size="mini"
              style="width: 200px"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <jd-button
      style="margin: 25px auto; width: 160px; font-size: 14px; font-weight: 500"
      :name="$t('setting.companyWebsite') + '>>'"
      @click.native="companyWebsite"
    />
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex">
        <div
          style="
            width: 6px;
            height: 26px;
            background: #659fd5;
            border-radius: 0px 6px 6px 0px;
          "
        />
        <span
          style="
            font-size: 22px;
            font-weight: 500;
            color: #333;
            line-height: 26px;
            margin-left: 5px;
          "
          >{{ $t("setting.safetyVerificat") }}</span
        >
      </div>
      <div
        v-show="false"
        style="
          width: 92px;
          height: 30px;
          background: #5ba8dc;
          border: 2px solid #659fd5;
          border-radius: 19px;
          display: flex;
          justify-content: center;
        "
      >
        <img
          src="@/assets/setting/edit.png"
          alt
          style="width: 26px; height: 26px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: bold;
            line-height: 26px;
            color: #fff;
            margin-left: 6px;
          "
          >{{ $t("setting.update") }}</span
        >
      </div>
    </div>
    <div
      style="display: flex; justify-content: space-between; margin-top: 20px"
    >
      <div style="display: flex">
        <img
          src="@/assets/setting/phone.png"
          alt
          style="width: 26px; height: 26px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 26px;
            color: #666;
            margin-left: 16px;
          "
          >{{ $t("setting.bindMobile") }}： +{{ userInfo.areaCode }}
          {{ userInfo.mobile }}</span
        >
      </div>
      <div style="display: flex">
        <div
          style="
            font-size: 14px;
            font-weight: 500;
            text-decoration: underline;
            line-height: 26px;
            color: #659fd5;
            cursor: pointer;
          "
          @click="changePhone"
        >
          {{ $t("setting.changePhone") }}
        </div>
        <div
          v-if="false"
          style="
            width: 80px;
            height: 26px;
            border: 2px solid #659fd5;
            border-radius: 19px;
            text-align: center;
            margin-left: 10px;
          "
        >
          <span
            style="
              font-size: 12px;
              font-weight: 500;
              line-height: 24px;
              color: #659fd5;
              cursor: pointer;
            "
            @click="removePhone"
            >{{ $t("setting.removePhone") }}</span
          >
        </div>
      </div>
    </div>
    <div
      style="display: flex; justify-content: space-between; margin-top: 20px"
    >
      <div style="display: flex">
        <img
          src="@/assets/setting/youxiang.png"
          alt
          style="width: 26px; height: 26px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 26px;
            color: #666;
            margin-left: 16px;
          "
          >{{ $t("setting.bindEmail") }}： {{ userInfo.email }}</span
        >
      </div>
      <div
        v-if="!userInfo.email || userInfo.email == '' || userInfo.email == '0'"
        style="
          width: 80px;
          height: 26px;
          border: 2px solid #659fd5;
          border-radius: 19px;
          text-align: center;
        "
      >
        <span
          style="
            font-size: 12px;
            font-weight: 500;
            line-height: 24px;
            color: #659fd5;
            cursor: pointer;
          "
          @click="bindEmail"
          >{{ $t("setting.ImmediatelyBind") }}</span
        >
      </div>
      <div
        v-if="userInfo.email && userInfo.email !== '0'"
        style="
          width: 80px;
          height: 26px;
          border: 2px solid #659fd5;
          border-radius: 19px;
          text-align: center;
          cursor: pointer;
        "
        @click="bindEmail"
      >
        <span
          style="
            font-size: 12px;
            font-weight: 500;
            line-height: 24px;
            color: #659fd5;
          "
          >{{ $t("更换邮箱") }}</span
        >
      </div>
    </div>
    <div
      style="display: flex; justify-content: space-between; margin-top: 20px"
    >
      <div style="display: flex">
        <img
          src="@/assets/setting/shiming.png"
          alt
          style="width: 26px; height: 26px"
        />
        <span
          style="
            font-size: 12px;
            font-weight: 500;
            line-height: 26px;
            color: #666;
            margin-left: 16px;
          "
          >{{ $t("setting.realName") }}： {{ authFlag }}</span
        >
      </div>
      <div
        style="
          width: 80px;
          height: 26px;
          border: 2px solid #659fd5;
          border-radius: 19px;
          text-align: center;
          cursor: pointer;
        "
        @click="authUser"
      >
        <span
          style="
            font-size: 12px;
            font-weight: 500;
            line-height: 24px;
            color: #659fd5;
          "
          >{{ $t("setting.ImmediatelyrealName") }}</span
        >
      </div>
    </div>
    <div style="margin-top: 20px">
      <img
        src="@/assets/setting/bottom.png"
        alt
        object-fit="cover"
        style="width: 720px; height: 175px; margin-bottom: 20px"
      />
      <div style="position: relative; bottom: 190px; left: 30px">
        <div>
          <span style="font-size: 24px; font-weight: 500; line-height: 48px">{{
            $t("setting.passwork")
          }}</span>
        </div>
        <div>
          <span
            style="
              font-size: 18px;
              font-weight: 400;
              line-height: 28px;
              color: #666;
            "
            >{{ $t("setting.passworkNotice") }}</span
          >
        </div>
        <div
          style="
            width: 66px;
            height: 6px;
            background: #5ba8dc;
            opacity: 0.27;
            border-radius: 4px;
            margin-top: 10px;
          "
        />
        <div class="set-pass">
          <div @click="editPwd">{{ $t("setting.passworkUpdate") }}</div>
          <div @click="showSetControlPasswordDialog = true">
            {{ $t("setting.setControlPassword") }}
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex">
        <div
          style="
            width: 6px;
            height: 26px;
            background: #659fd5;
            border-radius: 0px 6px 6px 0px;
          "
        />
        <span
          style="
            font-size: 22px;
            font-weight: 500;
            color: #333;
            line-height: 26px;
            margin-left: 5px;
          "
          >{{ $t("setting.deliveryAddress") }}</span
        >
      </div>
      <div
        style="
          width: 92px;
          height: 30px;
          background: #5ba8dc;
          border: 2px solid #659fd5;
          border-radius: 19px;
          display: flex;
          justify-content: center;
          cursor: pointer;
        "
        @click="addressDialogChange(0)"
      >
        <img
          src="@/assets/setting/edit.png"
          alt
          style="width: 26px; height: 26px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: bold;
            line-height: 26px;
            color: #fff;
            margin-left: 6px;
          "
          >{{ $t("setting.add") }}</span
        >
      </div>
    </div>
    <div class="address-list">
      <el-row v-for="item in addressList" :key="item.id" class="address-item">
        <el-col :span="4">
          <div class="item-name">
            <span>{{ $t("setting.name") }}:{{ item.name }}</span>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="item-phone">
            <span
              >{{ $t("setting.mobile") }}:+{{ item.areaCode }}&ensp;{{
                item.phone
              }}</span
            >
          </div>
        </el-col>
        <el-col :span="13">
          <div class="item-address">
            <span>{{ $t("setting.address") }}:{{ item.address }}</span>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="item-btn" @click="addressDialogChange(1, item)">
            <span>{{ $t("setting.update") }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 初始化密码弹窗 -->
    <el-dialog
      :title="$t('setting.passworkInit')"
      :visible.sync="initPwdVisible"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="initPwdForm" :model="initPwdForm" label-width="150px">
        <el-form-item
          :label="$t('setting.passworkNew')"
          prop="password"
          :rules="[{ required: true, message: $t('setting.passworkNewRules') }]"
        >
          <el-input
            v-model="initPwdForm.password"
            type="password"
            :placeholder="$t('setting.passworkNewNotice')"
            @input="pwdChange"
          />
        </el-form-item>
        <el-row :gutter="20" style="margin-left: 150px" class="password-level">
          <el-col :span="8">
            <div class="bg-level" :class="{ leveldisplay: level == 1 }">
              <p>{{ $t("registered.weak") }}</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="bg-level" :class="{ leveldisplay: level == 2 }">
              <p>{{ $t("registered.medium") }}</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="bg-level" :class="{ leveldisplay: level == 3 }">
              <p>{{ $t("registered.strong") }}</p>
            </div>
          </el-col>
        </el-row>
        <el-form-item
          :label="$t('setting.comfirmNewPasswork')"
          prop="spassword"
          :rules="[
            { required: true, message: $t('setting.comfirmNewPassworkRules') },
          ]"
        >
          <el-input
            v-model="initPwdForm.spassword"
            type="password"
            :placeholder="$t('setting.comfirmNewPassworkNotice')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="initPwdSubmitForm">{{
          $t("setting.save")
        }}</el-button>
        <el-button @click="initPwdReloadForm">{{
          $t("setting.reset")
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码弹窗 -->
    <el-dialog
      :title="$t('setting.passworkUpdate')"
      :visible.sync="editPwdVisible"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="editPwdForm" :model="editPwdForm" label-width="150px">
        <el-form-item
          :label="$t('setting.passworkOld')"
          prop="oldPassword"
          :rules="[{ required: true, message: $t('setting.passworkOldRules') }]"
        >
          <el-input
            v-model="editPwdForm.oldPassword"
            type="password"
            :placeholder="$t('setting.passworkOldotice')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('setting.passworkNew')"
          prop="password"
          :rules="[{ required: true, message: $t('setting.passworkNewRules') }]"
        >
          <el-input
            v-model="editPwdForm.password"
            type="password"
            :placeholder="$t('setting.passworkNewNotice')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('setting.passworkNew')"
          prop="spassword"
          :rules="[{ required: true, message: $t('setting.passworkNewRules') }]"
        >
          <el-input
            v-model="editPwdForm.spassword"
            type="password"
            :placeholder="$t('setting.passworkNewRules')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPwdSubmitForm">{{
          $t("setting.save")
        }}</el-button>
        <el-button @click="editPwdReloadForm">{{
          $t("setting.reset")
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 更换手机号弹窗 -->
    <el-dialog
      :title="$t('setting.changePhone')"
      :visible.sync="changePhoneVisible"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="changePhoneForm"
        :model="changePhoneForm"
        label-width="150px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              :label="$t('setting.oldMobile')"
              prop="oldMobile"
              :rules="[
                { required: true, message: $t('setting.oldMobileRules') },
              ]"
            >
              <span
                >+{{ userInfo.areaCode }} {{ changePhoneForm.oldMobile }}</span
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          :label="$t('setting.passwork1')"
          prop="password"
          :rules="[{ required: true, message: $t('setting.passworkRules1') }]"
        >
          <el-input
            v-model="changePhoneForm.password"
            type="password"
            :placeholder="$t('setting.passworkNotice1')"
          />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item
              :label="$t('setting.changePhone')"
              prop="mobile"
              :rules="[
                { required: true, message: $t('setting.changePhone') },
                {
                  pattern: /^[0-9]\d*$/,
                  message: $t('setting.changeMobileRules'),
                },
              ]"
            >
              <el-input
                v-model="changePhoneForm.mobile"
                :placeholder="$t('setting.newMobileNotice')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-select v-model="changePhoneForm.areaCode">
              <el-option
                v-for="item in countryList"
                :key="item.id"
                :label="'+' + item.tel + ' ' + item[apiLang]"
                :value="item.tel"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item
              :label="$t('setting.mobileCode')"
              prop="code"
              :rules="[
                { required: true, message: $t('setting.mobileCodeRules') },
              ]"
            >
              <el-input
                v-model="changePhoneForm.code"
                :placeholder="$t('setting.mobileCodeNotice')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- <el-button type="primary" @click="changePhoneCode">{{ $t('setting.getCode') }}</el-button> -->
            <jd-send-code :form="{
                            mobile: changePhoneForm.mobile,
                            nodeValue: 'user-sms-update-mobile',
                            isTransport: 0,
                            transportId: 0,
                            isOrders: 0,
                            areaCode: changePhoneForm.areaCode
                          }" />
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changePhoneSubmitForm">{{
          $t("setting.determine")
        }}</el-button>
        <el-button @click="changePhoneReloadForm">{{
          $t("setting.reset")
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 解除手机绑定弹窗 -->
    <el-dialog
      title="解除绑定"
      :visible.sync="removePhoneVisible"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="removePhoneForm"
        :model="removePhoneForm"
        label-width="150px"
      >
        <el-form-item
          label="绑定手机号"
          prop="oldPassword"
          :rules="[{ required: true, message: '原绑定手机号不能为空' }]"
        >
          <el-input
            v-model="removePhoneForm.oldPassword"
            placeholder="请输入原绑定手机号"
          />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item
              label="手机验证码"
              prop="password"
              :rules="[{ required: true, message: '手机验证码不能为空' }]"
            >
              <el-input
                v-model="removePhoneForm.password"
                placeholder="请输入验证码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="removePhoneCodeForm"
              >获取验证码</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="removePhoneSubmitForm"
          >确定</el-button
        >
        <el-button @click="removePhoneReloadForm">重置</el-button>
      </div>
    </el-dialog>
    <!-- 绑定邮箱弹窗 -->
    <el-dialog
      :title="$t('setting.bindEmail')"
      :visible.sync="bindEmailVisible"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="bindEmailForm" :model="bindEmailForm" label-width="150px">
        <el-form-item
          v-if="userInfo.email && userInfo.email !== '0'"
          :label="$t('原邮箱')"
        >
          <span>{{ userInfo.email }}</span>
        </el-form-item>
        <el-form-item
          :label="$t('setting.email')"
          prop="email"
          :rules="[
            { required: true, message: $t('setting.emailRules') },
            {
              pattern:
                /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
              message: $t('setting.emailRules1'),
            },
          ]"
        >
          <el-input
            v-model="bindEmailForm.email"
            :placeholder="$t('setting.emailNotice')"
          />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item
              :label="$t('验证码')"
              prop="code"
              :rules="[
                { required: true, message: $t('setting.mobileCodeRules') },
              ]"
            >
              <el-input
                v-model="bindEmailForm.code"
                :placeholder="$t('setting.mobileCodeNotice')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              :disabled="emaildisabled"
              @click="bindEmailCode"
              >{{ emailgetCode }}</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindEmailSubmitForm">{{
          $t("setting.determine")
        }}</el-button>
        <el-button @click="bindEmailReloadForm">{{
          $t("setting.reset")
        }}</el-button>
      </div>
    </el-dialog>
    <!-- 实名认证弹窗 -->
    <el-dialog
      :title="$t('realName.title')"
      :visible.sync="authUserVisible"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="authUserForm" :model="authUserForm" label-width="150px">
        <el-form-item
          :label="$t('realName.name')"
          prop="name"
          :rules="[{ required: true, message: $t('realName.nameRules') }]"
        >
          <el-input
            v-model="authUserForm.name"
            type="text"
            :placeholder="$t('realName.nameNotice')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('realName.cardType')"
          prop="cardType"
          :rules="[{ required: true, message: $t('realName.cardTypeRules') }]"
        >
          <el-select
            v-model="authUserForm.cardType"
            :placeholder="$t('realName.cardTypeNotice')"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in cardTypeData"
              :key="dict.value"
              :label="$l(dict, 'label')"
              :value="dict.value * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('realName.cardNumber')"
          prop="cardNumber"
          :rules="[{ required: true, message: $t('realName.cardNumberRules') }]"
        >
          <el-input
            v-model="authUserForm.cardNumber"
            type="text"
            :placeholder="$t('realName.cardNumberNotice')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('realName.img1')"
          prop="img1"
          :rules="[{ required: true, message: $t('realName.imgRules1') }]"
        >
          <el-col v-if="authUserForm.img1" :span="18">
            <el-image
              style="width: 100px; height: 100px"
              :src="authUserForm.img1"
              cover
            />
          </el-col>
          <el-upload
            action="#"
            :http-request="requestUpload"
            :show-file-list="false"
            :before-upload="beforeUploadimg1"
          >
            <el-button size="small">
              {{ $t("realName.upload") }}
              <i class="el-icon-upload el-icon--right" />
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item
          :label="$t('realName.img2')"
          prop="img2"
          :rules="[{ required: true, message: $t('realName.imgRules2') }]"
        >
          <el-col v-if="authUserForm.img2" :span="18">
            <el-image
              style="width: 100px; height: 100px"
              :src="authUserForm.img2"
              cover
            />
          </el-col>
          <el-upload
            action="#"
            :http-request="requestUpload"
            :show-file-list="false"
            :before-upload="beforeUploadimg2"
          >
            <el-button size="small">
              {{ $t("realName.upload") }}
              <i class="el-icon-upload el-icon--right" />
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div
        v-if="authUserForm.status != 1 && authUserForm.status != 2"
        slot="footer"
        class="dialog-footer"
      >
        <el-button type="primary" @click="authUserSubmitForm">{{
          $t("setting.save")
        }}</el-button>
        <el-button @click="authUserReloadForm">{{
          $t("setting.reset")
        }}</el-button>
      </div>
    </el-dialog>
    <set-control-password
      v-if="showSetControlPasswordDialog"
      @close="showSetControlPasswordDialog = false"
    />
    <!-- 地址弹窗 -->
    <el-dialog
      :title="addressDialogTitle"
      :visible.sync="addressVisible"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="addressForm"
        :model="addressForm"
        :rules="addressRules"
        label-width="100px"
      >
        <el-form-item :label="$t('setting.name')" prop="name">
          <el-input
            v-model="addressForm.name"
            :placeholder="$t('setting.validate1')"
          />
        </el-form-item>
        <el-form-item :label="$t('setting.mobile')" prop="mobile">
          <el-row>
            <el-col :span="16">
              <el-input
                v-model="addressForm.mobile"
                :placeholder="$t('setting.validate2')"
              />
            </el-col>
            <el-col :offset="1" :span="7">
              <el-select v-model="addressForm.areaCode">
                <el-option
                  v-for="item in countryList"
                  :key="item.id"
                  :label="'+' + item.tel + ' ' + item[apiLang]"
                  :value="item.tel"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item :label="$t('setting.address')" prop="address">
          <el-input
            v-model="addressForm.address"
            :placeholder="$t('setting.deliveryAddressInput')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bindCancelAddress">{{
          $t("setting.cancel")
        }}</el-button>
        <el-button type="primary" @click="bindSubmitAddress">{{
          $t("setting.save")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCode,
  getInfo,
  getCompanyInfo,
  updatePwd,
  update,
  createCompanyInfo,
  updateCompanyInfo,
  getCountryList,
  updateMobile,
  uploadFile,
  authIdCard,
  getIdCard,
  updateAvatar,
  sendEmailCode,
  bindEmail,
  getCityListByParent,
  getTradeCountryList,
} from "@/api/user";
import { getData } from "@/api/data";
import { addresslist, addressadd, addressedit } from "@/api/address";
import JdButton from "@/components/JdButton";
import JdSendCode from "@/components/JdSendCode";
import { mapGetters } from "vuex";
import { parseTime } from "@/utils";
import { langData } from "@/data/lang";
import SetControlPassword from "@/views/jiedao/profile/components/SetControlPassword.vue";
import language from "@/components/ImageCropper/utils/language";
export default {
  components: {
    SetControlPassword,
    JdButton,
    JdSendCode,
  },
  data() {
    var validate1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("setting.validate1")));
      } else {
        callback();
      }
    };
    var validate2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("setting.validate2")));
      } else {
        callback();
      }
    };
    var validate3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("setting.validate3")));
      } else {
        callback();
      }
    };
    var validateCity = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("setting.validateCity")));
      } else {
        callback();
      }
    };
    var validateCountry = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("setting.validateCountry")));
      } else {
        callback();
      }
    };
    return {
      parseTime,
      userInfo: {},
      baseForm: {
        nickname: "",
        mobile: "",
        englishName: "",
      },
      baseloading: false,
      companyInfo: {
        id: 0,
      },
      companyForm: {},
      companyloading: false,
      baseEdit: false,
      companyEdit: false,
      genderData: [
        this.$t("setting.girl"),
        this.$t("setting.male"),
        this.$t("setting.secret"),
      ],
      editPwdVisible: false,
      editPwdForm: {},
      initPwdVisible: false,
      initPwdForm: {},
      changePhoneVisible: false,
      changePhoneForm: {
        areaCode: "86",
      },
      removePhoneVisible: false,
      removePhoneForm: {},
      bindEmailVisible: false,
      bindEmailForm: {},
      baseRules: {
        nickname: [{ validator: validate1, trigger: "blur" }],
        mobile: [{ validator: validate2, trigger: "blur" }],
        englishName: [{ validator: validate3, trigger: "blur" }],
        city: [{ validator: validateCity, trigger: "change" }],
        countryList: [{ validator: validateCountry, trigger: "change" }],
      },

      countrySelectList: [],
      cityList: [],
      // areaCode List
      countryList: [],
      authUserForm: {},
      authUserVisible: false,
      cardTypeData: [],
      mouseShow: false,
      authFlag: this.$t("realName.status"),
      level: 0,
      apiLang: "",
      langData: langData,
      emaildisabled: false,
      emailcount: 60,
      emailgetCode: this.$t("login.getCode"),
      // 是否显示设置控货密码弹层
      showSetControlPasswordDialog: false,
      // 地址弹窗
      addressVisible: false,
      // 地址表单
      addressForm: {
        name: "",
        mobile: "",
        address: "",
        areaCode: "",
        id: null,
      },
      // 地址弹窗类型 0:新增 1:编辑
      addressDialogType: 0,
      // 地址列表
      addressList: [],
    };
  },
  computed: {
    ...mapGetters(["loginUser"]),
    language: {
      get() {
        return this.$store.getters.language;
      },
      set(val) {
        this.$i18n.locale = val;
        this.$store.dispatch("app/setLanguage", val);
      },
    },
    // 地址校验规则
    addressRules() {
      return {
        name: [
          {
            required: true,
            message: this.$t("setting.validate1"),
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: this.$t("setting.validate2"),
            trigger: "blur",
          },
          {
            pattern: /^[0-9]\d*$/,
            message: this.$t("setting.changeMobileRules"),
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: this.$t("setting.deliveryAddressInput"),
            trigger: "blur",
          },
        ],
      };
    },
    // 地址弹窗标题
    addressDialogTitle() {
      if (this.addressDialogType === 0) return this.$t("setting.addAddress");
      return this.$t("setting.editAddress");
    },
  },
  watch: {
    language() {
      this.apiLang = this.langData[this.language];
    },
  },
  created() {
    this.apiLang = this.langData[this.language];
    this.getInfo();
    this.getCompanyInfo();
    this.getIdCard();
    getCountryList().then((r) => {
      this.countryList = r.data;
    });
    getData({ page: 1, rows: 100, dictType: "certificate_type" }).then((r) => {
      this.cardTypeData = r.data.list;
    });
    // 如果是设置控货密码跳转过来的，直接打开弹层
    if (this.$route.query.action == "setControlPassword") {
      this.showSetControlPasswordDialog = true;
    }
    this.getTradeCountryList();
  },
  methods: {
    // 获取country 接口
    getTradeCountryList() {
      getTradeCountryList().then((res) => {
        this.countrySelectList = res.data;
      });
    },
    // 获取城市列表
    getCityList(id, status = "edit") {
      getCityListByParent({ id }).then((res) => {
        this.cityList = res.data;
        if (status == "edit") {
          this.baseForm.city = "";
        }
      });
    },
    getInfo() {
      getInfo().then((r) => {
        this.userInfo = r.data;
        this.addressForm.areaCode = this.userInfo.areaCode;
        this.getCityList(r.data.country, "init");
        this.getAddressList();
      });
    },
    getIdCard() {
      getIdCard().then((r) => {
        if (r.data) {
          this.authUserForm = r.data;
          switch (this.authUserForm.status) {
            case 0:
              this.authFlag = this.$t("realName.status0");
              break;
            case 1:
              this.authFlag = this.$t("realName.status1");
              break;
            case 2:
              this.authFlag = this.$t("realName.status2");
              break;
            case 3:
              this.authFlag = this.$t("realName.status3");
              break;
          }
        }
      });
    },
    getCompanyInfo() {
      getCompanyInfo().then((r) => {
        if (r.data) {
          this.companyInfo = r.data;
        }
      });
    },
    baseHanderEdit() {
      this.baseEdit = true;
      this.baseForm = { ...this.userInfo };
    },
    baseHanderCancel() {
      this.$refs.baseForm.clearValidate();
      this.getInfo();
      this.baseEdit = false;
    },
    baseHanderSubmit() {
      this.baseloading = true;
      this.$refs.baseForm.validate((valid) => {
        if (valid) {
          update(this.baseForm)
            .then(() => {
              this.$message({
                message: this.$t("common.success"),
                type: "success",
              });
              this.getInfo();
              this.baseEdit = false;
              this.baseloading = false;
            })
            .catch(() => {
              this.baseloading = false;
            });
        } else {
          this.baseloading = false;
          console.log("error submit!!");
          this.$message({
            message: this.$t("setting.saveButton"),
            type: "success",
          });
          return false;
        }
      });
    },
    companyHanderEdit() {
      this.companyEdit = true;
      this.companyForm = { ...this.companyInfo };
    },
    companyHanderCancel() {
      this.companyEdit = false;
    },
    companyHanderSubmit() {
      this.companyloading = true;
      this.companyForm.userId = this.userInfo.id;
      if (this.companyForm.id === 0) {
        delete this.companyForm.id;
        createCompanyInfo(this.companyForm)
          .then(() => {
            this.$message({
              message: this.$t("common.success"),
              type: "success",
            });
            this.getCompanyInfo();
            this.companyEdit = false;
            this.companyloading = false;
          })
          .catch(() => {
            this.companyEdit = false;
          });
      } else {
        updateCompanyInfo(this.companyForm)
          .then(() => {
            this.$message({
              message: this.$t("common.success"),
              type: "success",
            });
            this.getCompanyInfo();
            this.companyEdit = false;
            this.companyloading = false;
          })
          .catch(() => {
            this.companyEdit = false;
          });
      }
    },
    editPwd() {
      if (!this.userInfo.isHavePassword) {
        this.$message(this.$t("setting.editPwdNotice"));
        this.initPwdVisible = true;
        return;
      }
      this.editPwdVisible = true;
    },
    initPwdReloadForm() {
      this.initPwdForm = {};
    },
    initPwdSubmitForm() {
      this.$refs.initPwdForm.validate((v) => {
        if (v) {
          if (this.initPwdForm.password !== this.initPwdForm.spassword) {
            this.$message.error(this.$t("setting.initPwdNotice"));
            return;
          }
          updatePwd(this.initPwdForm).then(() => {
            this.$message({
              message: this.$t("common.success"),
              type: "success",
            });
            this.getInfo();
            this.initPwdVisible = false;
          });
        }
      });
    },
    editPwdReloadForm() {
      this.editPwdForm = {};
    },
    editPwdSubmitForm() {
      this.$refs.editPwdForm.validate((v) => {
        if (v) {
          if (this.editPwdForm.password !== this.editPwdForm.spassword) {
            this.$message.error(this.$t("setting.initPwdNotice"));
            return;
          }
          updatePwd(this.editPwdForm).then(() => {
            this.$message({
              message: this.$t("common.success"),
              type: "success",
            });
            this.$store.dispatch("user/logout").then(() => {
              location.href = "";
            });
          });
        }
      });
    },
    changePhone() {
      if (!this.userInfo.isHavePassword) {
        this.$message(this.$t("setting.editPwdNotice"));
        this.initPwdVisible = true;
        return;
      }
      this.changePhoneVisible = true;
      this.changePhoneForm.oldMobile = this.userInfo.mobile;
    },
    changePhoneReloadForm() {
      this.$nextTick(() => {
        this.$refs["changePhoneForm"].resetFields();
      });
    },
    changePhoneCode() {
      var data = {
        mobile: this.changePhoneForm.mobile,
        scene: 2,
        areaCode: this.changePhoneForm.areaCode,
      };
      getCode(data).then(() => {
        this.$message({
          message: this.$t("common.success"),
          type: "success",
        });
      });
    },
    changePhoneSubmitForm() {
      this.$refs.changePhoneForm.validate((v) => {
        if (v) {
          updateMobile(this.changePhoneForm).then(() => {
            this.$message({
              message: this.$t("common.success"),
              type: "success",
            });
            this.getInfo();
            this.changePhoneVisible = false;
            this.changePhoneForm = {};
          });
        }
      });
    },
    removePhone() {
      this.removePhoneVisible = true;
    },
    removePhoneReloadForm() {
      this.removePhoneForm = {};
    },
    removePhoneCodeForm() {},
    removePhoneSubmitForm() {},
    bindEmail() {
      if (!this.userInfo.isHavePassword) {
        this.$message(this.$t("setting.editPwdNotice"));
        this.initPwdVisible = true;
        return;
      }
      this.bindEmailVisible = true;
    },
    bindEmailReloadForm() {
      this.bindEmailForm = {};
    },
    bindEmailSubmitForm() {
      this.$refs.bindEmailForm.validate((v) => {
        if (v) {
          bindEmail(this.bindEmailForm).then(() => {
            this.$message({
              message: this.$t("common.success"),
              type: "success",
            });
            this.getInfo();
            this.bindEmailVisible = false;
            this.bindEmailForm = {};
          });
        }
      });
    },
    bindEmailCode() {
      var data = { email: this.bindEmailForm.email };
      if (!this.bindEmailForm.email) {
        this.$message({
          message: this.$t("请输入邮箱地址"),
          type: "error",
        });
        return;
      }
      sendEmailCode(data).then(() => {
        var countDown = window.setInterval(() => {
          if (this.emailcount < 1) {
            this.emaildisabled = false;
            this.emailcount = 60;
            this.emailgetCode = this.$t("login.getCode");
            window.clearInterval(countDown);
          } else {
            this.emailcount--;
            this.emaildisabled = true;
            this.emailgetCode = this.emailcount + "s";
          }
        }, 1000);
        this.$message({
          message: this.$t("common.success"),
          type: "success",
        });
      });
    },
    authUser() {
      this.authUserVisible = true;
      this.getIdCard();
    },
    authUserReloadForm() {
      this.authUserForm = {
        cardType: 1,
      };
    },
    authUserSubmitForm() {
      this.$refs.authUserForm.validate((valid) => {
        if (valid) {
          authIdCard(this.authUserForm).then(() => {
            this.$message({
              message: this.$t("common.success"),
              type: "success",
            });
            this.authUserVisible = false;
            this.getIdCard();
          });
        }
      });
    },
    // 覆盖默认的上传行为
    requestUpload() {},
    // 上传预处理
    beforeUploadimg1(file) {
      if (file.type.indexOf("image/") === -1) {
        this.$message.error(this.$t("setting.imgType"));
      } else {
        // 上传
        const formData = new FormData();
        formData.append("file", file);
        formData.append("path", this.uuid());
        uploadFile(formData).then((response) => {
          this.$set(this.authUserForm, "img1", response.data);
          // this.form.img = response.data;
        });
      }
    },
    beforeUploadimg2(file) {
      if (file.type.indexOf("image/") === -1) {
        this.$message.error(this.$t("setting.imgType"));
      } else {
        // 上传
        const formData = new FormData();
        formData.append("file", file);
        formData.append("path", this.uuid());
        uploadFile(formData).then((response) => {
          this.$set(this.authUserForm, "img2", response.data);
          // this.form.img = response.data;
        });
      }
    },
    beforeUploaduser(file) {
      if (file.type.indexOf("image/") === -1) {
        this.$message.error(this.$t("setting.imgType"));
      } else {
        // 上传
        const formData = new FormData();
        formData.append("file", file);
        formData.append("path", this.uuid());
        console.log(formData);
        uploadFile(formData).then((response) => {
          updateAvatar(response.data).then(() => {
            this.getInfo();
            this.$bus.$emit("updateAvatar");
          });
        });
      }
    },
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid;
    },
    mouseenter() {
      this.mouseShow = true;
    },
    mouseout() {
      this.mouseShow = false;
    },
    companyWebsite() {
      if (this.companyInfo.companyWebsite) {
        window.open("https://" + this.companyInfo.companyWebsite, "_blank");
      } else {
        this.$message.error(this.$t("setting.companyWebsiteNotice"));
      }
    },
    pwdChange() {
      // 弱密码：全是数字或全是字母，6-16个字符
      const weakReg = /^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/;
      // 中密码：数字和26个英文字母，6-16个字符
      const mediumReg = /^[A-Za-z0-9]{6,16}$/;
      // 强密码：由数字、26个英文字母或者下划线组成的字符串，6-16个字符
      const strongReg = /^\w{6,16}$/;
      var password = this.initPwdForm.password;
      if (password !== null) {
        if (password.length >= 6 && password.length <= 16) {
          if (password.match(weakReg)) {
            this.level = 1;
          } else if (password.match(mediumReg)) {
            this.level = 2;
          } else if (password.match(strongReg)) {
            this.level = 3;
          }
        }
        if (password.length > 16) {
          this.level = 3;
        }
      }
    },
    // 弹窗打开事件 类型 0:新增 1:编辑
    addressDialogChange(type, item) {
      this.addressDialogType = type;
      this.addressVisible = true;
      if (type === 0) return;
      const { name, phone, address, areaCode, id } = item;
      this.addressForm = { name, mobile: phone, address, areaCode, id };
    },
    // 取消地址弹窗事件
    bindCancelAddress() {
      this.addressVisible = false;
      this.resetAddressForm();
    },
    // 提交地址弹窗事件
    bindSubmitAddress() {
      this.$refs.addressForm.validate((valid) => {
        if (valid) {
          if (this.addressDialogType === 0) {
            this.addAddress();
          } else {
            this.editAddress();
          }
        }
      });
    },
    // 新增地址
    async addAddress() {
      try {
        const id = this.userInfo.id;
        const { address, name, mobile, areaCode } = this.addressForm;
        const params = {
          memberId: id,
          address,
          name,
          areaCode,
          phone: mobile,
        };
        await addressadd(params);
        this.$message({
          message: this.$t("common.success"),
          type: "success",
        });
        this.addressVisible = false;
        this.resetAddressForm();
        this.getAddressList();
      } catch (error) {
        console.log(error);
      }
    },
    // 编辑地址
    async editAddress() {
      try {
        const memberId = this.userInfo.id;
        const { id, address, name, mobile, areaCode } = this.addressForm;
        const params = {
          id,
          address,
          name,
          areaCode,
          phone: mobile,
          memberId,
        };
        await addressedit(params);
        this.$message({
          message: this.$t("common.success"),
          type: "success",
        });
        this.addressVisible = false;
        this.resetAddressForm();
        this.getAddressList();
      } catch (error) {
        console.log(error);
      }
    },
    // 重置地址弹框表单
    resetAddressForm() {
      this.$refs.addressForm.resetFields();
      this.addressForm = {
        name: "",
        mobile: "",
        address: "",
        areaCode: this.userInfo.areaCode,
        id: null,
      };
    },
    // 获取地址列表
    getAddressList() {
      const id = this.userInfo.id;
      addresslist({ id }).then((r) => {
        this.addressList = r.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cancelBtn {
  width: 92px;
  height: 30px;
  background: #5ba8dc;
  border: 2px solid #659fd5;
  border-radius: 19px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.jd-label {
  font-size: 14px;
  font-weight: bold;
  color: #666;
  line-height: 28px;
  margin-left: 5px;
  font-weight: 500;
}
.jd-input {
  width: 140px;
}
.jd-company-input {
  width: 120px;
}
.tx {
  position: relative;
  z-index: 1;
  display: block;
}
.update-tx {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 46px;
  height: 46px;
  cursor: pointer;
  opacity: 0.8;
  background: #999;
  color: #000;
  border-radius: 50%;
}
.password-level {
  font-size: 16px;
  text-align: center;
  .bg-level {
    background: #94999e;
  }
  .leveldisplay {
    background: #178dcd;
    color: #fff;
  }
}
.set-pass {
  display: flex;
  & > div {
    width: 160px;
    height: 32px;
    background: #5ba8dc;
    border: 2px solid #659fd5;
    border-radius: 24px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    line-height: 30px;
    cursor: pointer;
    margin-top: 15px;
    &:not(:first-child) {
      margin-left: 20px;
    }
  }
}
.address-list {
  width: 100%;
  margin-top: 20px;
  .address-item {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size: 16px;
    color: #656865;
  }
  .item-btn {
    width: 92px;
    height: 30px;
    background: #5ba8dc;
    border: 2px solid #659fd5;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
  }
}
</style>
