<template>

  <div class="my">
    <div class="top">
      <img class="avatar" v-if="data.userimg" :src="$file(data.userimg)">
      <div class="_info">
        <div class="name">
          {{ $substring(data.nickname, 0, 12) }}
        </div>
        <div class="user">
          <img src="/img/my-i1.png" />{{ data.cellphone }}
        </div>
        <div class="box">
          <div class="vBase vLabel">
            {{ data.userlevelname }}
          </div>
          <div class="vBase vSub" v-if="data.col2">
            {{ data.col2name }}
          </div>
          <div class="vBase vOperation" v-if="data.col1">
            {{ data.col1name }}
          </div>
        </div>
      </div>
      <!-- v-if="data.isstudio" -->
      <div class="shopcenter">
        <img src="/img/sp.png" alt="">
        <a @click="$navigate('/Merchant')">
          商家中心
          <van-icon name="arrow-double-right" />
        </a>
      </div>
    </div>

    <div class="_wallet_">
      <div class="c">
        <div class="w" @click="$navigate('/Balance')">
          <p>
            我的余额
          </p>
          <b v-html="$toMoney(data.zijin || 0.00, 'span')"></b>
        </div>
        <div class="w">
          <a @click="$navigate('/Balance')">查看明细<van-icon name="arrow"></van-icon></a>
          <van-button color="#131313" round @click="$navigate('/Transfer')">互 转</van-button>
          <van-button color="#c10505" round @click="$navigate('/Cashout')">提 现</van-button>
        </div>
      </div>
      <div class="c_list">
        <div @click="$navigate('/Voucher')">
          <b v-html="$toMoney(data.xiaofeiquan || 0.00, 'span')"></b>
          <p>消费券</p>
        </div>
        <p></p>
        <div @click="$navigate('/CV')">
          <b v-html="$toMoney(data.gongxianzhi || 0.00, 'span')"></b>
          <p>贡献值</p>
        </div>
      </div>
    </div>

    <div class="_order">
      <div class="t">
        <!-- <b>订单列表</b> -->
        <img @click.stop="$navigate(`TradeList?TradeArea=3`)" src="/img/toTrade-1.png" alt="">
        <img @click.stop="$navigate(`TradeList?TradeArea=1`)" src="/img/toTrade-2.png" alt="">
      </div>
      <div class="c">
        <van-badge :dot="data.UnPayQty > 0" :offset="[3, -3]">
          <a @click="$navigate(`TradeList?TradeArea=3&state=0`)">
            <img src="/img/my-i7.png">
            <p>待付款</p>
          </a>
        </van-badge>
        <van-badge :dot="data.UnSendQty > 0" :offset="[3, -3]">
          <a @click="$navigate(`TradeList?TradeArea=3&state=1`)">
            <img src="/img/my-i4.png">
            <p>待发货</p>
          </a>
        </van-badge>
        <van-badge :dot="data.SendingQty > 0" :offset="[3, -3]">
          <a @click="$navigate(`TradeList?TradeArea=3&state=3`)">
            <img src="/img/my-i6.png">
            <p>待收货</p>
          </a>
        </van-badge>
        <a @click="$navigate(`TradeList?TradeArea=3&state=4`)">
          <img src="/img/my-i8.png">
          <p>已完成</p>
        </a>
      </div>
    </div>

    <div class="_menu">
      <div class="list">
        <a @click="$navigate('/Invite')">
          <img src="/img/my-i9.png">
          <p>邀请码</p>
          <div class="d4"></div>
        </a>
        <a @click="$navigate('/Team')">
          <img src="/img/my-i10.png">
          <p>我的好友</p>
          <div class="d6"></div>
        </a>
        <a @click="$navigate('/AliPayAccount')">
          <img src="/img/my-i5.png">
          <p>提现账号</p>
          <div class="d5"></div>
        </a>
      </div>
    </div>

    <div class="_gt">
      <div class="t">
        服务中心
      </div>
      <a @click.stop="$navigate('Address')">
        <div class="img">
          <img src="/img/my-i12.png" />
        </div>
        <div class="z">
          收货地址
          <p>增加/修改收货地址</p>
        </div>
        <van-icon name="arrow"></van-icon>
      </a>
      <a @click.stop="settingVisibled = true">
        <div class="img">
          <img src="/img/my-i11.png" />
        </div>
        <div class="z">
          设置中心
          <p>设置集合地</p>
        </div>
        <van-icon name="arrow"></van-icon>
      </a>
      <a @click.stop="$navigate('Service')">
        <div class="img">
          <img src="/img/my-i13.png" />
        </div>
        <div class="z">
          客服中心
          <p>若有问题请咨询客服</p>
        </div>
        <van-icon name="arrow"></van-icon>
      </a>
    </div>

    <van-action-sheet v-model:show="settingVisibled" title="设置中心" class="setting">
      <div style="height: 1rem" />
      <van-cell is-link icon="/img/set-i1.png" title="个人资料" size="large"
        @click="tempData = {}; Object.assign(tempData, data); tempData.AvatarUploader = [{ url: $file(tempData.userimg), isImage: true }]; showInfo = true;">
        <template #right-icon>
          <img class="y50" :src="$file(data.userimg)" width="29" height="29" />
        </template>
      </van-cell>
      <van-cell is-link icon="/img/set-i4.png" title="提现账户" size="large" value="管理"
        @click="$navigate('/AliPayAccount')">
      </van-cell>
      <van-cell is-link icon="/img/set-i2.png" title="登录密码" size="large" value="修改"
        @click="changePasswordVisibled = true">
      </van-cell>
      <van-cell is-link icon="/img/set-i5.png" title="退出登录" size="large" @click="logout">
        <template #right-icon> </template>
      </van-cell>
      <div style="height: 2rem" />
    </van-action-sheet>

    <van-action-sheet v-model:show="showInfo" title="个人信息">
      <van-form @submit="save">
        <van-cell-group inset>
          <van-field name="uploader" label="头像" required>
            <template #input>
              <van-uploader v-model="tempData.AvatarUploader" :after-read="upload" :max-count="1" upload-text="头像" />
            </template>
          </van-field>
          <van-field v-model="tempData.nickname" label="昵称" placeholder="请输入昵称"
            :rules="[{ required: true, message: '请填写昵称' }]" clearable required />
          <van-field v-model="tempData.cellphone" label="手机号" readonly>
            <template #button>
              不可更改
            </template>
          </van-field>
          <van-cell>
            <template #title>
              <van-button style="width: 100%" round type="primary" native-type="save" :loading="saving">保存</van-button>
            </template>
          </van-cell>
        </van-cell-group>
      </van-form>
    </van-action-sheet>

    <van-action-sheet v-model:show="changePasswordVisibled" title="修改登录密码">
      <div class="my-setting-password">
        <van-cell-group inset>
          <van-field v-model="tempPasswordData.oldpwd" type="password" label="原密码" placeholder="请输入原密码" required />
          <van-field v-model="tempPasswordData.newpwd" type="password" label="新密码" placeholder="请输入新密码" required />
          <van-field v-model="tempPasswordData.repwd" type="password" label="确认密码" placeholder="请再次输入新密码" required />
          <van-cell size="large">
            <template #title>
              <van-button round type="primary" size="large" @click="setPassword" :loading="saving">保存</van-button>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </van-action-sheet>

    <van-dialog v-model:show="showFollow" :closeOnClickOverlay="false" :showConfirmButton="false"
      style="background: transparent; display: flex; align-items: center; flex-direction: column;">
      <img :src="$file(data.FollowQRCode)" style="width: 60vw" />
      <div style="margin: 3.333vw 0">
        <span style="color: #fff">为了更好为您提供服务<br />请长按识别二维码关注公众号</span>
      </div>
      <van-button style="background: #fff; width: 60vw" @click="showFollow = false">关闭</van-button>
    </van-dialog>
  </div>

</template>

<script>
export default {
  name: 'My',
  computed: {
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      data: { userimg: '', username: '' },
      settingVisibled: false,
      changePasswordVisibled: false,
      tempPasswordData: {
        oldpwd: '',
        newpwd: '',
        repwd: '',
      },
      showInfo: false,
      saving: false,
      tempData: {},
      showFollow: false,
      hf_data: {},
      hfLoading: true,
    }
  },
  methods: {
    init() {
      this.$get('/v1/client/DUsersClient').then(data => {
        // console.log(data);
        this.data = data.data;
        this.$ls.set('username', data.data.username);
        this.$ls.set('cellphone', data.data.cellphone);
        this.$ls.set('userimg', data.data.userimg);

      })
    },
    logout() {
      this.$showConfirmDialog({
        title: "确认退出？",
      }).then(() => {
        this.$ls.remove('token');
        location.replace('#/Login');
        setTimeout(() => {
          location.reload();
        }, 100);
      }).catch(() => { });
    },
    upload(file) {
      this.tempData.userimg = file.file;
    },
    save() {
      if (this.tempData.userimg instanceof File) {
        const fd = new FormData();
        fd.append('file', this.tempData.userimg);
        fetch(`${import.meta.env.VITE_API_URL}/v1/client/DUsersClient/userimg`, {
          method: 'POST',
          headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` },
          body: fd,
        }).then(res => res.json()).then(res => {
          if (res.status !== 200) throw new Error(res.errmsg);
          this.tempData.userimg = res.data;
        }).then(() => {
          return this.$put('/v1/client/DUsersClient', {
            nickname: this.tempData.nickname,
            cellphone: this.tempData.cellphone,
          });
        }).then(() => {
          this.$showSuccessToast('保存成功');
          this.showInfo = false;
          window.location.reload();
        }).catch(err => {
          this.$showFailToast(err.errmsg || err.message || '保存失败');
        });
      } else {
        this.$put('/v1/client/DUsersClient', {
          nickname: this.tempData.nickname,
          cellphone: this.tempData.cellphone,
        }).then(() => {
          this.$showSuccessToast('保存成功');
          this.showInfo = false;
          window.location.reload();
        }).catch(err => {
          this.$showFailToast(err.errmsg || '保存失败');
        });
      }
    },
    valid(field, msg) {
      if (!field) {
        this.$showFailToast(msg);
        return false;
      }
      return true;
    },
    setPassword() {
      if (!this.tempPasswordData.oldpwd) {
        this.$showFailToast('请输入原密码');
        return;
      }
      if (!this.tempPasswordData.newpwd) {
        this.$showFailToast('请输入新密码');
        return;
      }
      if (this.tempPasswordData.newpwd !== this.tempPasswordData.repwd) {
        this.$showFailToast('两次输入的密码不一致');
        return;
      }
      this.saving = true;
      this.$post('/v1/client/DUsersClient/changepwd', {
        oldpwd: this.tempPasswordData.oldpwd,
        newpwd: this.tempPasswordData.newpwd,
      }).then((res) => {
        if (res.status !== 200) {
          this.$showFailToast(res.message || '修改失败');
          return;
        }
        this.$showSuccessToast('密码修改成功');
        this.changePasswordVisibled = false;
      }).catch(err => {
        this.$showFailToast(err.message || '修改失败');
      }).finally(() => {
        this.saving = false;
      });
    },
  }
}
</script>