<!-- // 用药提醒首页 -->
<template>
  <div class="container">
    <div class="bg">
      <div class="tu_logo">
        <img :src="require('@/assets/images/remind/tu_2.png')" />
        <h2>{{FillZero(data.Hour)}}:{{FillZero(data.Seconds)}}</h2>
      </div>
      <p>您设置的用药提醒时间已经到了哦,记得根据医嘱按时用药哦</p>
      <div class="part_2">
        <div class="list">
          <div class="list_left">
            <img :src="data.productImgUrl" />
          </div>
          <div class="list_right">
            <h2 class="ellips">{{data.ProductName}}</h2>
            <p>{{data.Usage}},每次{{data.Dosage}}{{data.Unit}}</p>
          </div>
        </div>
      </div>
      <div class="list_icon" @click="handeicon">
        <img :src="require('@/assets/images/remind/icon.png')" alt />
      </div>
    </div>
    <div class="share">
      觉得功能好用，可
      <span @click="$router.push({ name: 'share' })">分享</span>给您的亲朋好友
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      actions: [{ name: "修改" }],
      data: [],
      id: location.href.split("ID=")[1],
      ProductCode: ""
    };
  },
  created() {
    this.GetDrugRemind(this.id);
  },
  methods: {
    handeicon() {
      this.show = !this.show;
    },
    FillZero(p) {
      return new Array(2 - (p + "").length + 1).join("0") + p;
    },
    onCancel() {
      this.show = false;
    },
    onSelect(item, i) {
      if (i == 0) {
        this.$router.push({
          path: "/addRemind",
          query: { ProductCode: this.ProductCode }
        });
      }
    },
    GetDrugRemind(id) {
      this.$http.GetDrugRemind(id).then(res => {
        if (res.data.IsSuccess) {
          this.data = res.data.ResultObject;
          this.ProductCode = this.data.ProductCode;
          // console.log(res);
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.ellips {
  overflow: hidden;
  text-overflow: ellipsis;
  // display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
@garycolor: #f1f1f1;
/deep/ .van-hairline--top {
  color: #478bfb;
}
.tu_logo {
  width: 100%;
  margin-top: 0.95rem;
  > img {
    width: 1.92rem;
    height: 2rem;
    object-fit: contain;
  }
  h2 {
    font-size: 0.75rem;
    margin: 0.25rem auto;
  }
}
.container {
  .bg {
    width: 5.98rem;
    // height: 7.75rem;
    margin: 1.5rem auto 0;
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 0 0.2rem 0.05rem rgba(51, 51, 51, 0.08);
    border-radius: 0.16rem;
    .list_icon {
      width: 0.8rem;
      height: 0.65rem;
      position: absolute;
      right: 0;
      top: 0;
      img {
        width: 0.09rem;
        height: 0.35rem;
        margin-top: 0.3rem;
      }
    }
    p {
      height: 1rem;
      line-height: 0.4rem;
      font-size: 0.3rem;
    }
    .part_2 {
      border-top: 0.01rem solid @garycolor;
      width: 95%;
      margin: 0.8rem auto 0;
      .list {
        width: 100%;
        height: 2.34rem;
        background-color: #ffffff;
        -webkit-box-shadow: 0px 0.05rem 0.23rem 0px rgba(71, 139, 251, 0.1);
        box-shadow: 0px 0.05rem 0.23rem 0px rgba(71, 139, 251, 0.1);
        border-radius: 0.16rem;
        margin: 0.2rem 0;
        display: flex;
        flex-flow: row nowrap;
        position: relative;
        justify-content: space-between;
        .list_left {
          width: 1.73rem;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        .list_right {
          width: 4.3rem;
          height: 100%;
          margin-left: 0.33rem;
          text-align: left;
          h2,
          p {
            width: 100%;
            line-height: 0.6rem;
            font-size: 0.32rem;
            color: #333333;
            margin-top: 0.3rem;
          }
        }
      }
      .ewm {
        object-fit: contain;
        width: 2.25rem;
        height: 2.26rem;
        margin: 0 auto;
      }
    }
  }
  .share {
    line-height: 1rem;
    font-size: 0.24rem;
    color: #333333;
    span {
      font-size: 0.28rem;
      color: #478bfb;
    }
  }
}
</style>
