<template>
  <div class="accountsetting-container">
    <a-modal v-model="visible" title="设置图标" @cancel="modalcancel" on-ok="handleOk">
      <div class="container">
        <div class="cropper-content">
          <div class="cropper-box">
            <div class="cropper">
              <vue-cropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :canMoveBox="option.canMoveBox" :height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge" :mode="option.mode" @realTime="realTime"></vue-cropper>
            </div>
          </div>
          <div class="previewcontainer">
            <!-- 图标预览框 -->
            <p>预览</p>
            <div :style="previewStyle3" class="show-preview">
              <div :style="previews.div" class="preview">
                <img :src="previews.url" :style="previews.img" />
              </div>
            </div>
            <div class="btncontainer">
              <!-- <a-button @click="restaricon">重置</a-button> -->
              <a-button @click="changeavatar">确定</a-button>
              <a-button @click="modalcancel">取消</a-button>
            </div>
          </div>
        </div>
      </div>
      <template slot="footer">{{ &nbsp; }}</template>
    </a-modal>
    <div class="accountcontent w">
      <div class="accountSetList">
        <div class="userinfobox">
          <div class="avatarbox">
            <i @click="uploadavatar" style="cursor: pointer">
              <span class="iconfont icon-morentouxiang" v-if="!userbaseInfo.imgSrc"></span>
              <img :src="userbaseInfo.imgSrc" alt v-else />
              <div class="mask">
                <div>修改头像</div>
              </div>
            </i>
            <input type="file" ref="updateicon" @change="filepick($event)" style="display: none" />
          </div>
          <div class="username" v-if="userinfo.userName">Hi,{{ userinfo.userName }}</div>
          <div class="username" v-else>Hi,{{ userinfo.hidetel }}</div>
        </div>
        <div class="priceinfo">
          <ul style="display: none">
            <li @click="pushto('/accountsetting/myintegral')" :class="{ tagactive: activelist === 6 }">
              <span>
                <i class="iconfont icon-jifen"></i>我的积分
              </span>
              <span>
                <span>{{ userpoint >= 0 ? userpoint : "--" }}分</span>
                <i class="iconfont icon-youjiantou"></i>
              </span>
            </li>
            <li @click="pushto('/accountsetting/mycard')" :class="{ tagactive: activelist === 7 }">
              <span>
                <i class="iconfont icon-kaquan"></i>我的卡券
              </span>
              <span>
                <span>{{ cardinfo.recordCount ? cardinfo.recordCount : "0" }}张</span>
                <i class="iconfont icon-youjiantou"></i>
              </span>
            </li>
            <li @click="pushto('/accountsetting/mybalance')" :class="{ tagactive: activelist === 8 }">
              <span>
                <i class="iconfont icon-yue"></i>我的余额
              </span>
              <span>
                <span>{{ userbalance >= 0 ? userbalance : "0" }}元</span>
                <i class="iconfont icon-youjiantou"></i>
              </span>
            </li>
          </ul>
        </div>
        <ul>
          <li @click="pushto('/accountsetting/boundtel')" :class="{ tagactive: activelist === 1 }">
            <span>
              <i class="iconfont icon-gerenzhongxin-bangdingshouji"></i>绑定手机
            </span>
            <span>
              <span>{{ userinfo.hidetel }}</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <li @click="pushto('/accountsetting/boundwx')" :class="{ tagactive: activelist === 2 }">
            <span>
              <i class="iconfont icon-weixin1"></i>绑定微信
            </span>
            <span>
              <span v-if="userinfo.openIdAppDTDL">已绑定</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <!-- <li
            @click="pushto('/accountsetting/boundbankcard')"
            :class="{ tagactive: activelist === 3 }"
            style="display: none"
          >
            <span
              ><i class="iconfont icon-bangdingyinhangka"></i>绑定银行卡</span
            ><span
              ><span>{{ userbanklist.length }}张</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>-->
        </ul>
        <ul>
          <li @click="pushto('/accountsetting/loginpsw')" :class="{ tagactive: activelist === 0 }">
            <span>
              <i class="iconfont icon-gerenzhongxin-mima"></i>登录密码
            </span>
            <span>
              <span>已设置</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <!-- <li
            @click="pushto('/accountsetting/realname')"
            :class="{ tagactive: activelist === 4 }"
            style="display: none"
          >
            <span><i class="iconfont icon-shimingrenzheng"></i>实名认证</span
            ><span
              ><span v-if="userinfo.realName">已认证</span
              ><span v-else>未认证</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>-->
        </ul>
        <!-- <ul>
          <li @click="pushto('/accountsetting/bocaiTV')" :class="{ tagactive: activelist === 9 }">
            <span>
              <i class="iconfont icon-tv"></i>伯才TV
            </span>
            <span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
        </ul> -->
      </div>
      <div class="rightcontent">
        <keep-alive :include="['boundwx']">
          <router-view :userinfo="userinfo" :userbanklist="userbanklist" :userpoint="userpoint" :userbalance="userbalance"></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userBaseInfoApi,
  getUserBankListApi,
  userBalanceApi,
  getPointApi,
  // uploadUserAvatarApi,
  userCardApi,
} from '../../../api/userinfo'
import { VueCropper } from 'vue-cropper'
import request from '@/utils/request'

export default {
  inject: ['reload'],
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {
    VueCropper,
  },

  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      userinfo: {}, // 用户基础信息
      userbalance: '',
      userpoint: '',
      activelist: '',
      userbanklist: [],
      cardinfo: {},
      visible: false,
      previewStyle3: {},
      previews: {},
      userbaseInfo: JSON.parse(localStorage.getItem('LOGIN_DATA')),
      option: {
        // 裁剪图片配置
        img: '', // 裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
        outputType: 'png', // 裁剪生成图片的格式（jpeg || png || webp）
        info: true, // 图片大小信息
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 150, // 默认生成截图框宽度
        autoCropHeight: 150, // 默认生成截图框高度
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        // full: false, // false按原比例裁切图片，不失真
        // fixedBox: false, // 固定截图框大小，不允许改变
        // canMove: false, // 上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        // original: false, // 上传图片按照原始比例渲染
        // centerBox: false, // 截图框是否被限制在图片里面
        height: true, // 是否按照设备的dpr 输出等比例图片
        infoTrue: true, // true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 290, // 限制图片最大宽度和高度
        enlarge: 1, // 图片根据截图框输出比例倍数
        mode: 'auto', // 图片默认渲染方式
      },
    }
  },
  // 计算属性
  computed: {
    path() {
      return this.$route.fullPath
    },
  },
  // 侦听器
  watch: {
    path() {
      this.changeactive()
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getUserInfo()
    this.changeactive()
    this.getuserbnak()
    this.getUserBalanceInfo()
    this.getPoint()
    this.getcardcount()
    console.log(this.userbaseInfo)
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    async getUserInfo() {
      try {
        const { data } = await userBaseInfoApi()
        if (data.status === 200) {
          this.userinfo = data.data
          console.log(this.userinfo)
          const beforetel = this.userinfo.tel.substr(0, 3)
          const aftertel = this.userinfo.tel.substr(7, 4)
          this.userinfo.hidetel = beforetel + '****' + aftertel
          const beforeId = this.userinfo.IDCard.substr(0, 1)
          const afterId = this.userinfo.IDCard.substr(17, 1)
          this.userinfo.hideId = beforeId + '****************' + afterId
          const hidename = this.userinfo.realName.substr(this.userinfo.realName.length - 1, 1)
          // this.userinfo.hidename =  hidename;
          let newstr = ''
          for (let i = 0; i < this.userinfo.realName.length - 1; i++) {
            newstr += '*'
          }
          this.userinfo.hidename = newstr + hidename
          console.log(aftertel)
          console.log(beforetel)
        }
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    pushto(url) {
      this.$router.push(url)
    },
    changeactive() {
      if (this.path.indexOf('/loginpsw') > -1) {
        this.activelist = 0
      } else if (this.path.indexOf('/boundtel') > -1) {
        this.activelist = 1
      } else if (this.path.indexOf('/boundwx') > -1) {
        this.activelist = 2
      } else if (this.path.indexOf('/boundbankcard') > -1) {
        this.activelist = 3
      } else if (this.path.indexOf('/realname') > -1) {
        this.activelist = 4
      } else if (this.path.indexOf('/myintegral') > -1) {
        this.activelist = 6
      } else if (this.path.indexOf('/mycard') > -1) {
        this.activelist = 7
      } else if (this.path.indexOf('/mybalance') > -1) {
        this.activelist = 8
      } else if (this.path.indexOf('/bocaiTV') > -1) {
        this.activelist = 9
      }
    },
    async getuserbnak() {
      try {
        const { data } = await getUserBankListApi()
        console.log(data)
        this.userbanklist = data.data
        this.userbanklist.forEach((ele) => {
          ele.newbankNo = ele.bankNo.substr(14, 4)
        })
        // const newdata = this.userbanklist.bankNo.substr(14, 4);
        // console.log(newdata);
      } catch (error) {
        console.log(error)
      }
    },
    async getUserBalanceInfo() {
      try {
        const { data } = await userBalanceApi()
        this.userbalance = data.data.balance / 100

        console.log(data)
        console.log(this.userbalance)
      } catch (error) {
        console.log(error)
      }
    },
    async getPoint() {
      try {
        const { data } = await getPointApi()
        console.log(data)
        this.userpoint = data.data.pointTotal
      } catch (error) {
        console.log(error)
      }
    },
    async getcardcount() {
      try {
        const { data } = await userCardApi()
        console.log(data)
        this.cardinfo = data.data
      } catch (error) {
        console.log(error)
      }
    },
    uploadavatar() {
      //上传头像
      this.$refs.updateicon.click()
    },
    filepick(e) {
      console.log(this.$refs.updateicon)
      console.log(e)
      const that = this
      this.visible = true
      const imgFile = new FileReader()
      imgFile.readAsDataURL(this.$refs.updateicon.files[0])
      imgFile.onload = function () {
        that.option.img = this.result
      }
      // this.option.img = window.URL.createObjectURL(
      //   this.$refs.updateicon.files[0]
      // )
      this.filelength = this.$refs.updateicon.files.length
    },
    realTime(data) {
      // data.div.height = "50px";
      // data.div.width = "50px";
      // data.w = 50;
      // data.h = 50;
      console.log(data)

      var previews = data
      var h = 0.5
      var w = 0.2
      this.previewStyle1 = {
        width: previews.w + 'px',
        height: previews.h + 'px',
        overflow: 'hidden',
        margin: '0',
        zoom: h,
      }

      this.previewStyle2 = {
        width: previews.w + 'px',
        height: previews.h + 'px',
        overflow: 'hidden',
        margin: '0',
        zoom: w,
      }

      // 固定为 100 宽度
      this.previewStyle3 = {
        width: previews.w + 'px',
        height: previews.h + 'px',
        overflow: 'hidden',
        margin: '0',
        zoom: 100 / previews.w,
      }

      // 固定为 100 高度
      this.previewStyle4 = {
        width: previews.w + 'px',
        height: previews.h + 'px',
        overflow: 'hidden',
        margin: '0',
        zoom: 100 / previews.h,
      }
      this.previews = data
    },
    modalcancel() {
      this.visible = false
      this.$refs.updateicon.value = ''
      this.filelength = this.$refs.updateicon.files.length

      // console.log(this.filelength)
    },
    changeavatar() {
      let that = this
      this.$refs.cropper.getCropBlob((data) => {
        // const that = this;
        // do something
        // console.log(data)
        const imgFile = new FileReader()
        imgFile.readAsDataURL(data)
        imgFile.onload = function () {
          let formData1 = new FormData()
          formData1.append('imgName', 'abc.png')
          formData1.append('userImg', this.result)

          request({
            method: 'post',
            url: '/yishoudan/user/changeUserImgsrc',
            data: formData1,
            withCredentials: true,
            // headers: {'Content-Type': 'application/x-www-form-urlencoded'}

            headers: {
              'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime(),
            },
          })
            .then(({ data }) => {
              console.log(data)
              console.log()
              if (data.status === 200) {
                let userinfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
                // userinfo.imgSrc =;
                localStorage.setItem('LOGIN_DATA', JSON.stringify({ ...userinfo, imgSrc: data.data.url }))
                that.reload()
              }
            })
            .catch((error) => {
              console.log(error)
            })
          console.log(data)
        }
        this.visible = false
      })

      // console.log(this.avatarready)
      // console.log(this.filelength)
      this.AvatarWaringmsgshow = false
    },
  },
}
</script>

<style scoped lang="less">
.accountcontent {
  // height: 1000px;
  margin-top: 16px;
  // background-color: pink;
  display: flex;
  .accountSetList {
    width: 346px;
    // height: 500px;
    // background-color: skyblue;
    margin-right: 16px;
    .userinfobox {
      width: 346px;
      height: 158px;
      background: #ffffff;
      border-radius: 0px;
      padding: 24px 0;
      text-align: center;
      border: 1px solid #ededed;
      .avatarbox {
        margin: 0 auto;
        width: 64px;
        position: relative;

        &:hover {
          .mask {
            display: block;
          }
        }
        img {
          display: block;
          width: 64px;
          height: 64px;
          border-radius: 50%;
        }
        i {
          width: 64px;
          height: 64px;
          color: #ff4400;
          > span {
            font-size: 64px;
            line-height: 64px;
          }
          .mask {
            position: absolute;
            display: none;
            width: 64px;
            height: 64px;
            left: 0;
            top: 0;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.7);

            div {
              position: relative;
              padding: 2px;
              width: 40px;
              margin-top: 11px !important;
              margin-left: 13px !important;
              font-size: 14px;
              line-height: 19px;
              font-weight: bold;
              letter-spacing: 2px;
              color: rgba(255, 255, 255, 0.8);
              top: 0;
              right: 0;
              left: 0;
              bottom: 0;
              margin: auto;
            }
          }
        }
      }
      .username {
        margin-top: 18px;
      }
    }
    .priceinfo {
      margin-top: 16px;
      ul {
        // margin-top: 16px;
        // padding: 0 16px;
        background-color: #fff;
        border-radius: 0px;
        overflow: hidden;
        li {
          position: relative;
          display: flex;
          padding: 16px 16px 16px 16px;

          line-height: 24px;
          justify-content: space-between;
          border-bottom: 1px solid #ededed;
          cursor: pointer;
          &:nth-child(-n + 2):after {
            position: absolute;
            content: '';
            display: inline-block;
            height: 1px;
            width: 314px;
            bottom: -1px;
            left: 16px;
            background-color: #f3f4f4;
          }
          span:first-of-type {
            font-size: 16px;
            i:first-of-type {
              margin-right: 12px;
              font-size: 20px;
              vertical-align: middle;
            }
          }
          span:last-of-type {
            span {
              color: #999999;
              font-size: 14px;
            }
            i {
              color: #888;
              font-size: 22px;
              vertical-align: middle;
            }
          }
          &:hover {
            // background-color: #ff4400 !important;
            color: #ff4400;
            span {
              span {
                color: #ff4400;
              }
              i {
                color: #ff4400;
              }
            }
            i {
              color: #ff4400;
            }
          }
        }
      }
    }
    > ul {
      background-color: #fff;
      margin-top: 16px;
      // padding: 0 16px;
      border-radius: 0px;
      overflow: hidden;
      border: 1px solid #ededed;
      li {
        position: relative;
        display: flex;
        padding: 16px;
        line-height: 24px;
        justify-content: space-between;
        cursor: pointer;
        &:not(:last-child) {
          // border-bottom: 1px solid #ededed;
        }
        &:nth-child(-n + 3):after {
          position: absolute;
          content: '';
          display: inline-block;
          height: 1px;
          width: 314px;
          bottom: -1px;
          left: 16px;
          background-color: #f3f4f4;
        }
        > span:first-child {
          font-size: 16px;
          display: flex;
          align-items: center;
          i {
            margin-right: 12px;
            font-size: 20px;
          }
        }
        > span:last-child {
          line-height: 22px;
          span {
            color: #999;
            font-size: 14px;
          }
          > i {
            color: #888;
            // margin-left: 12px;
            vertical-align: middle;

            font-size: 22px;
          }
        }
        &:hover {
          // background-color: #ff4400 !important;
          color: #ff4400;
          span {
            span {
              color: #ff4400;
            }
            i {
              color: #ff4400;
            }
          }
          i {
            color: #ff4400;
          }
        }
      }
    }
  }
  .rightcontent {
    width: 838px;
    min-height: 600px;
    padding: 0 16px;
    background-color: #fff;
    border: 1px solid #ededed;
  }
}

::v-deep .ant-modal-footer {
  display: none;
}
::v-deep .ant-modal-header {
  height: 48px;
  border-bottom: 0px solid #000;
}
::v-deep .ant-modal-title {
  font-size: 20px;
  font-weight: 400;
  text-align: left;
  color: #222222;
  line-height: 28px;
}
::v-deep .ant-modal-content {
  margin-top: 100px;
  width: 576px;
  height: 409px;
}

::v-deep .vue-cropper {
  width: 290px !important;
  margin: 0 !important;
}
.cropper-content {
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  /deep/ .cropper-box {
    flex: 1;
    width: 100%;
    .cropper-view-box,
    .cropper-crop-box {
      border-radius: 50%;
    }
    .cropper-crop-box {
      .cropper-face {
        border-radius: 50%;
      }
      span:last-child {
        // display: none;
        span:nth-child(5) {
          display: none;
        }
        span:nth-child(7) {
          display: none;
        }
        span:nth-child(10) {
          display: none;
        }
        span:nth-child(12) {
          display: none;
        }
      }
    }
    .cropper {
      width: auto;
      height: 300px;
    }
  }
  .previewcontainer {
    text-align: center;
    margin-right: 50px !important;
    p {
      margin-bottom: 20px;
      margin-left: -150px;
    }
  }
  .show-preview {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #666;
    .preview {
      overflow: hidden;
      background: #cccccc;
    }
  }
}

.btncontainer {
  position: absolute;
  bottom: 25px;
  button {
    margin: 9px;
    height: 35px;
    width: 63px;
  }
  button:nth-child(1) {
    margin-left: -25px;
  }
}
</style>
