<!-- // 用药提醒首页 -->
<template>
  <div class="remind_lists">
    <div class="empoty" v-if="!showList">
      <div class="empory_img">
        <img :src="require('@/assets/images/remind/empty.png')" />
      </div>
      <div class="add_button" @click="$router.push({ name: 'drugStorehouse' })">添加</div>
    </div>

    <div class="centerain" v-if="showList">
      <div class="list" v-for="(item,index) in reminds" :key="index">
        <img :src="item.clocks[0].IsUse?openstate:closestate" />
        <div class="list_left">
          <img :src="productImages[index].ProductImgUrl" />
        </div>
        <div class="list_right">
          <h2 class="ellips">{{item.ProductName}}</h2>
          <p>每次{{item.Dosage}}{{item.clocks[0].Unit}},{{item.Usage}}</p>
          <div class="time_list">
            <div v-for="(item1,index) in item.clocks" :key="index">{{item1.hour}}:{{item1.minute}}</div>
          </div>
        </div>
        <div class="list_icon" @click="handIcon(item.ProductCode)">
          <img :src="require('@/assets/images/remind/icon.png')" alt />
        </div>
      </div>

      <div class="add_button" @click="$router.push({ name: 'drugStorehouse' })">添加</div>
      <div class="service">
        <!-- <img :src="require('@/assets/images/remind/service.png')" /> -->
      </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>
    <!-- <van-dialog v-model="alertshow" show-cancel-button @confirm="confirm"></van-dialog> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // alertshow: true,
      show: false,
      showList: true,
      actions: [{ name: "修改" }, { name: "关闭" }, { name: "删除" }],
      ProductCode: this.$route.query.ProductCode || "",
      Data: [],
      remindDrugs: [],
      reminds: [],
      productImages: [],
      listproductCode: "",
      openstate: require("@/assets/images/remind/open.png"),
      closestate: require("@/assets/images/remind/close.png")
    };
  },
  created() {
    this.GetGrugReminds();
  },
  methods: {
    onCancel() {
      this.show = false;
    },
    confirm() {
      this.SaveDrugRemindState(false, false, 2);
    },
    handIcon(ProductCode) {
      this.show = !this.show;
      this.listproductCode = ProductCode;
    },
    GetGrugReminds() {
      var obj = {
        ProductCode: ""
      };
      this.LJ_LOADING();
      this.$http.GetGrugReminds(obj).then(res => {
        this.$toast.clear();
        if (res.data.IsSuccess) {
          this.Data = res.data.ResultObject;
          if (res.data.ResultObject.remindDrugs.length <= 0) {
            this.showList = false;
          }
          this.remindDrugs = res.data.ResultObject.remindDrugs;
          this.productImages = res.data.ResultObject.productImages;
          res.data.ResultObject.productImages = res.data.ResultObject.productImages.map(
            x1 => {
              x1.remindDrugs.sort((x, y) => {
                if (x.Hour < y.Hour) {
                  return -1;
                }
                if (x.Hour == y.Hour && x.Seconds < y.Seconds) {
                  return -1;
                }
                return 0;
              });
              return x1;
            }
          );
          this.reminds = res.data.ResultObject.productImages.map(x => {
            return {
              ProductName: x.ProductName,
              Dosage: x.Dosage,
              ProductCode: x.ProductCode,
              clocks: x.remindDrugs.map(y => {
                return {
                  hour: this.FillZero(y.Hour),
                  minute: this.FillZero(y.Seconds),
                  IsUse: y.IsUse,
                  Unit: y.Unit
                };
              })
            };
          });
          // console.log(this.reminds);
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    //跳转闹钟详情
    jumptoDetail(ProductCode) {
      this.$router.push({
        path: "/addRemind",
        query: { ProductCode }
      });
    },
    onSelect(item, i) {
      switch (i) {
        case 0: //修改跳转页面
          this.jumptoDetail(this.listproductCode);
          break;
        case 1: //关闭
          this.alertyesorno(true);
          // this.SaveDrugRemindState(false, false, 2);
          break;
        case 2: //删除
          this.alertyesorno(false);
          // this.SaveDrugRemindState(true, false, 1);
          break;
        default:
          break;
      }
    },
    //修改状态
    SaveDrugRemindState(del, use, UpdateBy) {
      var obj = {
        IsDelete: del || false,
        IsUse: use || false,
        UpdateBy: UpdateBy,
        ProductCode: this.listproductCode || ""
      };
      // console.log(obj);
      this.$http.SaveDrugRemindState(obj).then(res => {
        // console.log(res);
        if (res.data.IsSuccess) {
          this.GetGrugReminds();
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    alertyesorno(close, del) {
      var closetext = "关闭提醒后，将收不到提醒消息。是否确认删除？";
      var deltext = "删除提醒后，将收不到提醒消息。是否确认删除？";
      var text;
      if (close) {
        text = closetext;
        this.$dialog
          .alert({
            // title: "Hello World!", //加上标题
            message: text, //改变弹出框的内容
            showCancelButton: true //展示取消按钮
          })
          .then(() => {
            //点击确认按钮后的调用
            this.SaveDrugRemindState(false, false, 2);
          });
        // .catch(() => {
        //   //点击取消按钮后的调用
        //   // console.log("点击了取消按钮噢");
        // })
      } else {
        text = deltext;
        this.$dialog
          .alert({
            message: text,
            showCancelButton: true
          })
          .then(() => {
            this.SaveDrugRemindState(true, false, 1);
          });
      }
    },
    //自动补零
    FillZero(p) {
      return new Array(2 - (p + "").length + 1).join("0") + p;
    }
  }
};
</script>
<style lang="less" scoped>
.remind_lists {
  width: 7.5rem;
  .empoty {
    .empory_img {
      width: 7.5rem;
      height: 4.52rem;
      position: relative;
      img {
        width: 2.53rem;
        height: 2.07rem;
        position: absolute;
        top: 1.84rem;
        left: 2.49rem;
      }
    }
    .add_button {
      width: 6.7rem;
      height: 0.94rem;
      line-height: 0.94rem;
      text-align: center;
      background-color: #478bfb;
      border-radius: 0.16rem;
      font-size: 0.32rem;
      color: #ffffff;
      margin: 0.6rem 0.4rem 0 0.4rem;
    }
  }
  .centerain {
    .list {
      width: 7.1rem;
      height: 2.34rem;
      background-color: #ffffff;
      box-shadow: 0px 0.05rem 0.23rem 0px rgba(71, 139, 251, 0.25);
      border-radius: 0.16rem;
      margin: 0.49rem 0.2rem 0 0.2rem;
      display: flex;
      position: relative;
      img {
        position: absolute;
        width: 1.05rem;
        height: 0.31rem;
      }
      .list_left {
        width: 1.73rem;
        height: 100%;
        position: relative;
        img {
          width: 1.12rem;
          height: 1.12rem;
          position: absolute;
          top: 0.61rem;
          left: 0.61rem;
        }
      }
      .list_right {
        width: 4.3rem;
        height: 100%;
        margin-left: 0.33rem;
        text-align: left;
        h2 {
          width: 100%;
          font-size: 0.32rem;
          color: #333333;
          margin-top: 0.3rem;
          height: 0.35rem;
          line-height: 0.35rem;
        }
        p {
          width: 100%;
          line-height: 0.5rem;
          font-size: 0.24rem;
          color: #adadad;
        }
        .time_list {
          display: flex;
          flex-flow: row wrap;
          margin-top: 0.15rem;
          width: 100%;
          height: 1rem;
          div {
            height: 0.32rem;
            line-height: 0.32rem;
            border-radius: 0.08rem;
            border: solid 1px #478bfb;
            padding: 0 0.15rem;
            font-size: 0.22rem;
            color: #666;
            margin-right: 0.2rem;
          }
        }
      }
      .list_icon {
        width: 0.8rem;
        height: 0.65rem;
        img {
          width: 0.09rem;
          height: 0.35rem;
          margin-top: 0.3rem;
        }
      }
    }
    .add_button {
      width: 6.7rem;
      height: 0.94rem;
      line-height: 0.94rem;
      text-align: center;
      background-color: #478bfb;
      border-radius: 0.16rem;
      font-size: 0.32rem;
      color: #ffffff;
      margin: 0.6rem 0.4rem 0 0.4rem;
    }
    .service {
      width: 100%;
      height: 0.88rem;
      margin-top: 4rem;
      position: relative;
      img {
        width: 0.88rem;
        height: 0.88rem;
        position: absolute;
        top: 0;
        left: 6.18rem;
      }
    }
    .share {
      line-height: 1rem;
      font-size: 0.24rem;
      color: #333333;
      span {
        font-size: 0.28rem;
        color: #478bfb;
      }
    }
    .van-popup--bottom.van-popup--round {
      button:nth-child(1) {
        span {
          color: #478bfb;
        }
      }
      button:nth-child(3) {
        span {
          color: #f93232;
        }
      }
    }
  }
}
</style>
