<!-- 用户主页 -->
<template>
  <main>
    <header>
      <div>
        <div>
          <img
            v-if="!UserData && UserData.HeadImg"
            src="../../../assets/images/default.png"
            alt
          />
          <img
            v-if="UserData && UserData.HeadImg"
            :src="UserData.HeadImg"
            alt
          />
        </div>
        <p>
          {{ UserData.NickName }}
          <!-- <span>用户</span> -->
        </p>
      </div>
    </header>

    <div>
      <div class="option">
        <router-link
          :to="item.url"
          v-for="(item, index) in options"
          :key="index"
          class="option-item animated van-hairline--bottom"
          :class="index % 2 == 0 ? `slideInLeft` : `slideInRight`"
        >
          <img :src="icon[index]" :alt="item.title" class="icon" />
          <p>{{ item.title }}</p>
          <van-icon name="arrow" />
        </router-link>
      </div>
    </div>
    <!--<Map @getLocation="getLocation" :isShow="false"></Map>-->
  </main>
</template>

<script>
import { patientUserIcon } from "@/assets/js/icon.js";
// import Map from "@/components/map";

export default {
  components: { Map },
  name: "user",
  data() {
    return {
      UserData: "",
      Location: {},
      options: [
        {
          url: "/familyMember",
          title: "家庭成员"
        },
        {
          url: "/allOrder",
          title: "坐诊详情"
        },
        {
          url: "/surgeryList",
          title: "手术预约记录"
        },
        {
          url: "/MyPayVideo",
          title: "我购买的健康视频"
        },
        {
          // url: "/MyFollow",
          url: '/attention',
          title: "关注的医生"
        },
        {
          url: "/MyCollection",
          title: "收藏的课程"
        },
        {
          url: "/likeVideo",
          title: "喜欢的视频"
        },
        {
          url: "/myAddress",
          title: "我的地址"
        },
        // {
        //     url: "/ljluck",
        //     title: "亮建优医福利惠"
        // }
      ], //个人中心选项
      icon: patientUserIcon //图标
    };
  },
  created() {
    this.GetPatientInfo();
  },
  methods: {
    // 当用户第一次进入时  GetPatientInfo 返回信息里经纬度为 null  调用改方法修改用户经纬度 确认用户位置且无法更改
    UpdateAccount() {
      var obj = {
        Longitude: this.Location.lng,
        Latitude: this.Location.lat,
        RegionCode: this.Location.adcode,
        Region: this.Location.province + this.Location.city
      };
      this.$http.UpdateAccount(obj).then(res => {
        console.log(res);
      });
    },

    GetPatientInfo() {
      this.$http.GetPatientInfo().then(res => {
        if (res.data.IsSuccess) {
          this.UserData = res.data.ResultObject;
          // 病人本地信息
          if (!this.UserData.Longitude && !this.UserData.Latitude) {
            this.map.getLocation({
              success: e => {
                console.log(e);
                this.Location = e;
                this.UpdateAccount();
              },
              error: e => {
                console.log(e);
              }
            });
          }
          sessionStorage.setItem("patientInfo", JSON.stringify(this.UserData));
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
main i {
  font-size: 0.3rem;
  color: #cccccc;
  vertical-align: sub;
}

main {
  box-sizing: border-box;
  width: 100vw;
  overflow-x: hidden;
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 1rem;

  header {
    position: relative;
    height: 3rem;
    width: 100%;
    box-shadow: 0 0 14px 5px #e4e4e4;
    box-sizing: border-box;
    padding: 0 0.3rem;
    background-image: linear-gradient(-50deg, #3f64f6 0%, #64b0f9 100%);
    z-index: 1;

    &::before {
      position: absolute;
      content: "";
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2.3rem;
      background: url("../../../assets/images/mask_bg.png") no-repeat
        bottom/100%;
      opacity: 0.3;
    }

    > div {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 100%;
      z-index: 2;

      > div {
        display: inline-block;
        width: 1.27rem;
        min-width: 1.27rem;
        height: 1.27rem;
        min-height: 1.27rem;
        border-radius: 50%;
        overflow: hidden;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }

      p {
        // width: 55%;
        flex: 1;
        text-align: left;
        box-sizing: border-box;
        padding-left: 0.2rem;
        font-size: 0.3rem;
        color: #fff;

        span {
          display: inline-block;
          width: 0.74rem;
          height: 0.3rem;
          line-height: 0.3rem;
          background-color: #fd5b5b;
          color: #fff;
          font-size: 0.18rem;
          text-align: center;
          line-height: 0.3rem;
          border-radius: 3px;
          margin-left: 0.2rem;
          vertical-align: middle;
        }
      }
    }
  }
}

.option {
  box-shadow: 0 0 14px 5px #e4e4e4;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  background: #dfdbdb67;

  > .option-item {
    display: block;
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.3rem;
    background: #fff;

    &:nth-of-type(2),
    &:nth-of-type(5) {
      margin-top: 0.2rem;
    }

    span {
      display: inline-block;
      min-width: 1rem;
      min-height: 0.97rem;
      width: 1rem;
      height: 0.97rem;
      -webkit-background-size: 4.16rem 5.88rem;
      background-size: 4.16rem 5.88rem;
    }

    p {
      // width: 100%;
      flex: 1;
      text-align: left;
      box-sizing: border-box;
      padding-left: 0.2rem;
      font-size: 0.28rem;
      color: #333333;
    }
  }
}
.icon {
  display: block;
  width: 0.4rem;
}
</style>
