<template>
  <div class="setting" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 安全设置 -->
    <backBar :title="$t('home.l23')"/>
    <div class="container">
      <div class="item">
        <div class="left">
          <!-- 登录密码 -->
          {{$t('setting.l2')}}
          <!-- 用于登录账号 -->
          <div class="tip">{{$t('setting.tip1')}}</div>
        </div>
        <!-- 修改 -->
        <div class="btn flex" @click="$router.push('/password')">
          {{$t('setting.btn1')}}
          <img class="arrow" src="/img/icon/right.png" alt="极度证券">
        </div>
      </div>
      <div class="item">
        <div class="left">
          <!-- 手机绑定 -->
          {{$t('setting.l3')}}
          <!-- 用于登录，提现，创建API等验证 -->
          <div class="tip">{{$t('setting.tip2')}}</div>
        </div>
        <!-- 绑定 -->
        <div @click="alterPhone" class="btn flex">
          <div v-if="userInfo.phone">{{$t('setting.btn1')}}</div>
          <!-- 未绑定 -->
          <div v-else class="label">{{$t('setting.l20')}}</div>
          <img class="arrow" src="/img/icon/right.png" alt="极度证券">
        </div>
      </div>
      <div class="item">
        <div class="left">
          <!-- 邮箱绑定 -->
          {{$t('setting.l4')}}
          <!-- 用于登录，提现，创建API等验证 -->
          <div class="tip">{{$t('setting.tip2')}}</div>
        </div>
        <div @click="alterEmail" class="btn flex">
          <div v-if="userInfo.email">{{$t('setting.btn1')}}</div>
          <!-- 未绑定 -->
          <div v-else class="label">{{$t('setting.l20')}}</div>
          <img class="arrow" src="/img/icon/right.png" alt="极度证券">
        </div>
      </div>
      <div class="item">
        <div class="left">
          <!-- 交易密码 -->
          {{$t('setting.l5')}}
          <!-- 用于登录，提现，创建API等验证，请谨慎设置并牢记 -->
          <div class="tip">{{$t('setting.tip3')}}</div>
        </div>
        <!-- 设置 -->
        <div class="btn flex" @click="$router.push('/deal')">
          <div v-if="userInfo.password_transaction == '1'">{{$t('setting.btn1')}}</div>
          <div v-else>{{$t('setting.btn3')}}</div>
          <img class="arrow" src="/img/icon/right.png" alt="极度证券">
        </div>
      </div>
      <div class="item" @click="$router.push('/frozen')">
        <div class="left">
          <!-- 账户冻结 -->
          {{$t('setting.l6')}}
          <!-- 开启此功能后，将不允许进行交易和提现。解冻可通过重新登录账户后进行申请 -->
          <div class="tip">{{$t('setting.tip4')}}</div>
        </div>
        <!-- 冻结 -->
        <div class="btn red flex">
          <img class="arrow" src="/img/icon/right.png" alt="极度证券">
        </div>
      </div>
      <div class="item">
        <div class="left">
          <!-- 账户删除 -->
          {{$t('setting.l21')}}
          <!-- 此操作将删除账户所有服务器数据，且不可恢复，请谨慎操作 -->
          <div class="tip">{{$t('setting.l22')}}</div>
        </div>
        <!-- 删除 -->
        <div class="btn" @click="deleteAccountDialog = true">
          {{$t('common.l4')}}
        </div>
      </div>
    </div>
    <van-popup v-model="alterEmailDialog" style="width: 80%;">
      <div class="pop-body">
        <!-- 修改邮箱 -->
        <div class="pop-title">{{$t('setting.ti2')}}</div>
        <!-- 为了保障账户安全，邮箱解绑、修改成功后24小时内禁止appName提币、提款。 -->
        <div class="text">
          <div>1.{{$t('setting.tip5')}}</div>
          <!-- 被解绑、修改邮箱在30天内不允许注册。 -->
          <div>2.{{$t('setting.tip6')}}</div>
        </div>
        <div class="dialog-footer flex">
          <div class="btn ltn" @click="alterEmailDialog = false">
            <!-- 关闭 -->
            {{$t('setting.btn5')}}
          </div>
          <div class="btn rtn" @click="$router.push('/email')">
            <!-- 确定 -->
            {{$t('common.l50')}}
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 修改手机 -->
    <van-popup v-model="alterPhoneDialog" style="width: 80%;">
      <div class="pop-body">
        <div class="pop-title">{{$t('setting.ti3')}}</div>
        <!-- 为了保障账户安全，手机解绑、修改成功后24小时内禁止appName提币、提款。 -->
        <div class="text">{{$t('setting.tip7')}}</div>
        <div class="dialog-footer flex">
          <div class="btn ltn" @click="alterPhoneDialog = false">
            <!-- 关闭 -->
            {{$t('setting.btn5')}}
          </div>
          <div class="btn rtn" @click="$router.push('/phone')">
            <!-- 确定 -->
            {{$t('common.l50')}}
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup round position="bottom" v-model="deleteAccountDialog">
      <div class="pop-body">
        <div class="pop-title">{{$t('setting.l21')}}</div>
        <div class="text">{{$t('setting.l22')}}</div>
        <div class="dialog-footer flex">
          <div class="btn ltn" @click="deleteAccountDialog = false">
            <!-- 关闭 -->
            {{$t('setting.btn5')}}
          </div>
          <div class="btn rtn" @click="deleteAccount">
            <!-- 确定 -->
            {{$t('common.l50')}}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import backBar from '@/components/backBar'
import { mapGetters } from 'vuex'
import { deleteUser } from '@/api/user'
export default {
  components: {
    backBar
  },
  data() {
    return {
      name: '',
      alterEmailDialog: false,
      alterPhoneDialog: false,
      deleteAccountDialog: false,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  activated() {
    this.alterEmailDialog = false
    this.alterPhoneDialog = false
    this.deleteAccountDialog = false
  },
  mounted() {},
  methods: {
    alterPhone() {
      if (this.userInfo.phone) {
        this.alterPhoneDialog = true
      } else {
        this.$router.push('/phone')
      }
    },
    alterEmail() {
      if (this.userInfo.email) {
        this.alterEmailDialog = true
      } else {
        this.$router.push('/email')
      }
    },
    deleteAccount() {
      this.fullscreenLoading = true
      deleteUser().then(() => {
        this.$notify({
          // message: '操作成功',
          message: this.$t('common.l52'),
          type: 'success'
        });
        this.$store.commit('SET_LOGIN', false)
        this.$store.commit('setAccountList', [])
        this.$store.commit('setCashInfo', {})
        this.$router.replace('/')
      }).finally(() => {
        this.fullscreenLoading = false;
      }).catch(() => {})
    }
  },
}
</script>
<style lang="less" scoped>
.container {
  padding: 0 17px;
}
.item {
  padding: 14px 0 15px;
  border-bottom: 1px solid #EDEDED;
  font-size: 18px;
  line-height: 1;
  background-color: #fff;
  position: relative;
  color: #000;
  font-weight: 600;
  display: flex;
  align-items: center;
  column-gap: 14px;
  justify-content: space-between;
  .left {
    flex: 1;
    min-width: 10%;
    max-width: 83.529%;
  }
  .tip {
    font-size: 15px;
    color: #AEB0B2;
    margin-top: 9px;
    font-weight: 400;
    line-height: 21px;
  }
  .btn {
    font-size: 15px;
    color: #AEB0B2;
    font-weight: 400;
    cursor: pointer;
    column-gap: 6px;
  }
  .arrow {
    width: 7px;
  }
}
.pop-body {
  padding: 20px;
  .pop-title {
    padding-bottom: 10px;
    font-size: 18px;
    line-height: 24px;
  }
  .text {
    padding: 30px 0;
    line-height: 18px;
    color: #606266;
  }
}

.dialog-footer {
  column-gap: 8px;
  .btn {
    flex: 1;
    text-align: center;
    line-height: 42px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid;
  }
  .ltn {
    border-color: #ACACAC;
  }
  .rtn {
    border-color: var(--color-);
    background-color: var(--color-);
    color: #fff;
  }
}
</style>