<!-- // 添加用药提醒 -->
<template>
  <div class="container" v-if="drupData.product">
    <div class="drugs">
      <div class="list">
        <div class="list_left">
          <img :src="drupData.product.ProductImgUrl" />
        </div>
        <div class="list_right">
          <h2 class="ellips">{{drupData.product.ProductName}}</h2>
        </div>
        <div class="list_icon" @click="sheetshow = true">
          <img :src="require('@/assets/images/remind/icon.png')" alt />
        </div>
      </div>

      <div class="usage">
        <div class="usage_list">
          <div>
            <span>用法</span>
            <div class="inputClass" @click="handleinput">
              <div class="s_ipt">
                <p>{{SelectOption}}</p>
              </div>
              <div class="drapdown" v-show="showdrapdown">
                <p
                  v-for="(item, index) in option"
                  :key="index"
                  @click="link(index,item)"
                  :style="{color:item.check?'#478bfb':'#b9b9b9'}"
                >{{item.name}}</p>
              </div>
              <img
                v-if="showdrapdown"
                :src="require('@/assets/images/remind/icon_2.png')"
                class="sj"
              />
              <img v-else :src="require('@/assets/images/remind/icon_3.png')" class="sj" />
            </div>
          </div>
          <div>
            <span>用量</span>
            <div class="input-all">
              <div class="inputClass2">
                <input type="text" v-model="SelectOption2" />
                <div>{{Unit}}</div>
              </div>
              <div class="input-warn">你可以根据医嘱设定用量</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="PromptText">
          <van-checkbox v-model="checked" shape="square"></van-checkbox>
          <p>消息提醒时，是否隐藏药品名称</p>
        </div>
      </div>
    </div>
    <div class="setdate">
      <p>时间设置</p>
      <div v-for="(item,index) in drupData.remindDrugs" :key="index">
        <div class="icon" @click="deleteitem(item)">
          <img :src="require('@/assets/images/remind/icon_4.png')" />
        </div>
        <div class="date_name">提醒时间{{index+1}}</div>
        <div class="date" @click="revise(index,item)">
          {{FillZero(Number(item.Hour))}}:{{FillZero(Number(item.Seconds))}}
          <img
            :src="require('@/assets/images/remind/icon_5.png')"
          />
        </div>
      </div>
    </div>
    <div class="date-btn" @click="addremind(6)">添加闹钟</div>
    <div class="save-date" @click="savedate">保存</div>
    <van-dialog title="选择时间" showCancelButton v-model="onshow" @confirm="confirm" ref="datealert">
      <van-datetime-picker v-model="currentTime" type="time" :min-hour="0" :max-hour="23" />
      <div class="maohao">:</div>
    </van-dialog>
    <van-action-sheet
      v-model="sheetshow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      ProductImgUrl: "",
      showdrapdown: false, //点击下拉显示
      checked: false, //复选框
      show: false,
      sheetshow: false,
      currentTime: "12:00",
      showList: true,
      onshow: false, //添加闹钟弹窗
      jt1: require("@/assets/images/remind/icon_2.png"),
      jt2: require("@/assets/images/remind/icon_3.png"),
      actions: [{ name: "更换" }],
      SelectOption: "内服",
      SelectOption2: "",
      option: [
        { name: "内服", check: true },
        { name: "外用", check: false }
      ],
      option2: [{ name: "内服" }, { name: "外用" }],
      drupData: [{ product: { ProductImgUrl: "" } }],
      // drupData: [],
      ProductCode: this.$route.query.ProductCode || "",
      DrugRemindListData: [],
      dateindex: null, //当前选中,
      reviseopen: false,
      Unit: ""
    };
  },
  created() {
    this.GetGrugReminds();
  },
  methods: {
    filter(type, options) {
      if (type === "minute") {
        return options.filter(option => option % 5 === 0);
      }
      return options;
    },
    //自动补零
    FillZero(p) {
      return new Array(2 - (p + "").length + 1).join("0") + p;
    },
    //获取时钟
    getHours(str) {
      var pos = str.indexOf(":");
      return Number(str.substring(0, pos));
    },
    //获取分钟
    getsecond(str) {
      var pos = str.indexOf(":");
      return Number(str.substring(pos + 1, str.length));
    },
    //添加闹钟弹窗
    addremind(max) {
      if (this.drupData.remindDrugs.length >= max) {
        this.$toast(`亲，这边建议最多可设置${max}个`);
        return;
      }
      this.onshow = true;
    },
    //修改弹窗
    revise(index, item) {
      this.dateindex = index;
      this.reviseopen = true;
      this.currentTime = item.Hour + ":" + item.Seconds;
      // console.log(item);
      this.onshow = true;
    },
    onCancel() {
      this.show = false;
    },
    handIcon() {
      this.show = !this.show;
    },
    handleinput() {
      this.showdrapdown = !this.showdrapdown;
    },
    jumpHome() {
      this.$router.push({
        path: "/remind"
      });
    },
    savedate() {
      var usage = this.SelectOption2.toString().trim();
      if (usage == "") {
        this.$toast("亲，这边建议填写用量哦~");
        return;
      } else if (this.drupData.remindDrugs.length <= 0) {
        this.$toast("亲，这边建议设置闹钟哦~");
      } else {
        var obj = {
          RemindDrugs: this.drupData.remindDrugs
        };

        this.getFaceResult(obj);
      }
    },
    link(index, item) {
      this.option.map((item, index) => {
        item.check = false;
      });
      var el = event.currentTarget;
      item.check = !item.check;
      this.SelectOption = this.option[index].name;
    },
    confirm() {
      var hour = this.getHours(this.currentTime);
      var second = this.getsecond(this.currentTime);
      if (
        this.drupData.remindDrugs.find(
          v => v.Hour == hour && v.Seconds == second
        )
      ) {
        this.$toast(`亲，这边建议设置的闹钟不可以重复设置`);
        return;
      }
      //判断修改还是添加
      if (this.reviseopen) {
        this.reviseopen = false;
        // var hour = this.getHours(this.currentTime);
        // var second = this.getsecond(this.currentTime);
        // if (
        //   this.drupData.remindDrugs.find(
        //     v => v.Hour == hour && v.Seconds == second
        //   )
        // ) {
        //   this.$toast(`亲，这边建议设置的闹钟不可以重复设置`);
        //   return;
        // }
        this.drupData.remindDrugs[this.dateindex].Hour = hour;
        this.drupData.remindDrugs[this.dateindex].Seconds = second;

        this.drupData.remindDrugs.forEach(item => {
          this.$set(item, "IsHideName", this.checked);
          this.$set(item, "SelectOption2", this.checked);
        });

        // this.drupData.remindDrugs[this.dateindex].IsHideName = this.checked;

        var obj = {
          remindDrugs: this.drupData.remindDrugs
        };
        this.SaveDrugRemindList(obj);
      } else {
        // var hour = this.getHours(this.currentTime);
        // var second = this.getsecond(this.currentTime);

        // if (
        //   this.drupData.remindDrugs.find(
        //     v => v.Hour == hour && v.Seconds == second
        //   )
        // ) {
        //   this.$toast(`亲，这边建议设置的闹钟不可以重复设置`);
        //   return;
        // }
        var obj = {
          remindDrugs: [
            {
              ID: "",
              UserID: "",
              ProductCode: this.ProductCode,
              ProductName: this.drupData.product.ProductName,
              IsHideName: this.checked,
              Usage: this.SelectOption,
              Dosage: this.SelectOption2,
              Hour: hour,
              Seconds: second,
              CreateTime: "",
              UpdateTime: "",
              IsUse: true,
              IsDelete: false,
              LastClocked: ""
            }
          ]
        };
        this.SaveDrugRemindList(obj);
      }
    },
    GetGrugReminds() {
      var obj = {
        ProductCode: this.ProductCode
      };
      this.LJ_LOADING();
      this.$http.GetGrugReminds(obj).then(res => {
        this.$toast.clear();
        if (res.data.IsSuccess) {
          res.data.ResultObject.remindDrugs.sort((x, y) => {
            if (x.Hour < y.Hour) {
              return -1;
            }
            if (x.Hour == y.Hour && x.Seconds < y.Seconds) {
              return -1;
            }
            return 0;
          });
          this.drupData = res.data.ResultObject;
          if (this.drupData.productUsage !== null) {
            this.SelectOption2 = this.drupData.productUsage.Dosage;
            this.SelectOption = this.drupData.productUsage.Usage;
            this.Unit = this.drupData.productUsage.Unit;
          }
          this.checked = res.data.ResultObject.remindDrugs[0].IsHideName;
          // else {
          //   this.Unit = this.drupData.product.Unit;
          // }
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    deleteitem(item) {
      // console.log(item);
      var text = "是否确认删除闹钟？";
      this.$dialog
        .alert({
          // title: "Hello World!", //加上标题
          message: text, //改变弹出框的内容
          showCancelButton: true //展示取消按钮
        })
        .then(() => {
          //点击确认按钮后的调用
          this.$set(item, "IsDelete", true);
          this.DrugRemindListData.push(item);
          var obj = {
            RemindDrugs: this.DrugRemindListData
          };
          this.SaveDrugRemindList(obj);
        });
    },
    SaveDrugRemindList(obj, save) {
      this.$http.SaveDrugRemindList(obj).then(res => {
        if (res.data.IsSuccess) {
          this.GetGrugReminds();
          if (save) {
            this.$toast("保存成功");
          }
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    SaveDrugRemindState() {
      var obj = {
        IsDelete: true,
        IsUse: true,
        UpdateBy: 2,
        ProductCode: "string"
      };
      this.$http.GetGrugReminds(obj).then(res => {
        if (res.data.IsSuccess) {
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    onSelect(item, i) {
      if (i == 0) {
        this.$router.push({
          path: "/drugStorehouse"
        });
      }
    },
    async getFaceResult(obj) {
      var { data } = await this.$http.SaveDrugRemindList(obj);
      if (data.IsSuccess) {
        this.jumpHome();
      }
    }
  },
  watch: {
    SelectOption(newValue) {
      this.drupData.remindDrugs.map(item => {
        this.$set(item, "Usage", newValue);
      });
    },
    SelectOption2(newValue) {
      this.drupData.remindDrugs.map(item => {
        this.$set(item, "Dosage", newValue);
      });
    }
  }
};
</script>
<style lang="less" scoped>
@bordercolor: #c7dbfd;
@baseBlue: #478bfb;
/deep/ .van-hairline--top {
  color: #478bfb;
}
/deep/.van-picker__toolbar {
  display: none;
}
/deep/ .van-picker-column__item--selected {
  color: @baseBlue;
}
/deep/ .van-picker__frame {
  border-top: 0.01rem solid @bordercolor;
  border-bottom: 0.01rem solid @bordercolor;
}
/deep/ .van-picker__frame {
  width: 4rem;
  position: absolute;
  left: 50%;
  margin-left: -2rem;
}
@bluecolor: #478bfb;
@graycolor: #b9b9b9;
@qiangray: #f1f1f1;
/deep/ .van-checkbox__label {
  color: @graycolor;
}
/deep/ .van-picker__columns {
  border-top: 0.01rem solid @qiangray;
  border-bottom: 0.01rem solid @qiangray;
}
/deep/ .van-dialog__content {
  position: relative;
}
.maohao {
  font-size: 0.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.15rem;
  margin-top: -0.5rem;
  width: 0.3rem;
  height: 1rem;
  line-height: 1rem;
  font-weight: bold;
}
.container {
  width: 7.5rem;
  .drugs {
    width: 7.1rem;
    // height: 4.66rem;
    background-color: #ffffff;
    box-shadow: 0px 0.05rem 0.23rem 0px rgba(51, 51, 51, 0.1);
    border-radius: 0.16rem;
    margin: 0.2rem;
    // padding-bottom: 0.25rem;
    .usage_list {
      .sj {
        position: absolute;
        right: 0.3rem;
        top: 0.32rem;
        width: 0.3rem;
        height: 0.3rem;
        object-fit: contain;
        z-index: 20;
      }
      > div {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        // height: 1rem;
        line-height: 1rem;
        position: relative;
        padding: 0.1rem 0;
        > span {
          width: 20%;
          height: 0.45rem;
          line-height: 0.45rem;
          font-size: 0.35rem;
          text-align: center;
        }
        .inputClass {
          display: inline-block;
          width: 70%;
          height: 0.8rem;
          line-height: 0.8rem;
          color: @graycolor;
          text-align: left;
          position: relative;
          font-size: 0.28rem;

          > div {
            border: 0.01rem solid @bluecolor;
            width: 100%;
            background-color: #ffffff;
            p {
              margin-left: 0.25rem;
            }
          }
          .drapdown {
            height: auto;
            position: absolute;
            top: 0.6rem;
            z-index: 10;
            border-radius: 0 0 0.1rem 0.1rem;
            border-top: none;
          }
          .s_ipt {
            position: absolute;
            top: 0;
            height: 0.8rem;
            z-index: 9;
            border-radius: 0.1rem;
            color: @bluecolor;
          }
        }
        .input-all {
          height: 1.2rem;
          width: 70%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
          justify-content: space-between;
          .input-warn {
            height: 0.3rem;
            line-height: 0.3rem;
            color: red;
            text-align: left;
          }
          .inputClass2 {
            display: inline-block;
            width: 100%;
            height: 0.8rem;
            line-height: 0.8rem;
            color: @graycolor;
            text-align: left;
            position: relative;
            font-size: 0.28rem;
            border: 0.01rem solid @bluecolor;
            border-radius: 0.1rem;
            overflow: hidden;
            input {
              padding-left: 0.25rem;
              color: @bluecolor;
              flex: left;
              width: 80%;
              height: 100%;
            }
            > div {
              float: right;
              width: 20%;
              height: 100%;
              border-left: 0.01rem solid @bluecolor;
              text-align: center;
              color: #000;
            }
          }
        }
      }
    }
    .list {
      height: 1.5rem;
      display: flex;
      .list_left {
        width: 1.73rem;
        height: 100%;
        img {
          width: 1.12rem;
          height: 1.12rem;
          margin-top: 0.21rem;
        }
      }
      .list_right {
        width: 4.3rem;
        height: 100%;
        margin-left: 0.33rem;
        text-align: left;
        h2 {
          width: 100%;
          line-height: 0.6rem;
          font-size: 0.32rem;
          color: #333333;
          margin-top: 0.4rem;
        }
      }
      .list_icon {
        width: 0.8rem;
        height: 0.65rem;
        img {
          width: 0.09rem;
          height: 0.35rem;
          margin-top: 0.3rem;
        }
      }
    }
    .usage {
      width: 6.73rem;
      // height: 2.24rem;
      border-top: 0.01rem solid @qiangray;
      border-bottom: 0.01rem solid @qiangray;
      margin-left: 0.18rem;
    }
    .PromptText {
      height: 0.7rem;
      line-height: 0.7rem;
      font-size: 0.25rem;
      color: @graycolor;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      width: 94%;
      margin: 0 auto;
      > p {
        margin-left: 0.25rem;
      }
    }
  }
  .setdate {
    width: 80%;
    margin: 0.5rem auto;
    p {
      font-size: 0.35rem;
      text-align: left;
    }
    > div {
      width: 100%;
      height: 1.07rem;
      line-height: 1.07rem;
      margin: 0.35rem auto;
      background-color: #ffffff;
      box-shadow: 0px 0.05rem 0.23rem 0px rgba(51, 51, 51, 0.1);
      border-radius: 0.16rem;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-around;
      .icon {
        width: 0.26rem;
        height: 0.26rem;
        line-height: 0.26rem;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .date_name {
        font-size: 0.33rem;
        width: 60%;
        text-align: left;
      }
      .date {
        width: 1rem;
        color: @graycolor;
        font-size: 0.3rem;
        height: 0.26rem;
        line-height: 0.26rem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        img {
          width: 0.16rem;
          height: 0.28rem;
        }
      }
    }
  }
  .date-btn {
    width: 2.3rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    background-color: @bluecolor;
    border-radius: 0.2rem;
    margin: 0.5rem auto;
    color: #fff;
    font-size: 0.3rem;
  }
  .save-date {
    width: 7rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    background-color: @bluecolor;
    border-radius: 0.2rem;
    margin: 0.5rem auto;
    color: #fff;
    font-size: 0.3rem;
  }
}
</style>
