<!--选择日期弹窗-->
<template>
  <div>
    <van-search v-model="value" placeholder="药品搜索" @search="search(value)" />
    <van-tabs
      v-model="active"
      swipeable
      title-active-color="#478bfb"
      animated
      color="#478bfb"
      @change="handleDruglist( active)"
    >
      <van-tab title="全部用药">
        <ul class="shop_list">
          <van-list
            v-model="list2.loading"
            :finished="list2.finished"
            finished-text="没有更多了"
            @load="GetDrugList"
          >
            <li
              v-for="(item,index) in  allshopdata"
              :key="index"
              @click="jumptoDetail(item.ProductCode)"
            >
              <img :src="item.ProductImgUrl" />
              <div>
                <h2>{{item.ProductName}}</h2>
                <p>{{item.Introduction}}</p>
              </div>
              <div>
                <img :src="require('@/assets/images/remind/icon_6.png')" />
              </div>
            </li>
          </van-list>
        </ul>
      </van-tab>
      <van-tab title="药品库">
        <ul class="shop_list">
          <li
            v-for="(item,index) in userdrugdata"
            :key="index"
            @click="jumptoDetail(item.ProductCode)"
          >
            <img :src="item.ProductImgUrl" />
            <div>
              <h2>{{item.ProductName}}</h2>
              <p>{{item.Introduction}}</p>
            </div>
            <div>
              <img :src="require('@/assets/images/remind/icon_6.png')" />
            </div>
          </li>
          <div class="nonetext" v-if="userdrugdata.length<=0">没有更多了</div>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name: "drugStorehouse",
  data() {
    return {
      active: 0,
      page2: {
        pageIndex: 1,
        pageSize: 10
      },
      list1: {
        finished: false,
        loading: true
      },
      list2: {
        finished: false,
        loading: true
      },
      value: null,
      allshopdata: [],
      userdrugdata: [],
      searchuserdrugdata: [],
      phone: "15920322765"
    };
  },
  created() {
    this.GetDrugList();
  },
  methods: {
    handleDruglist(yes) {
      if (yes == 1) {
        this.GetUserDrugList();
      }
    },
    //药品库
    GetUserDrugList() {
      this.LJ_LOADING();
      this.$http.GetUserDrugList().then(res => {
        if (res.data.IsSuccess) {
          this.$toast.clear();
          this.userdrugdata = res.data.ResultObject;
          console.log(res);
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    //全部商品
    GetDrugList(name) {
      var obj = {
        pageIndex: this.page2.pageIndex,
        pageSize: this.page2.pageSize,
        name: name || ""
      };
      this.LJ_LOADING();
      this.$http.GetDrugList(obj).then(res => {
        this.$toast.clear();
        if (res.data.IsSuccess) {
          this.list2.loading = false;
          this.allshopdata = [...this.allshopdata, ...res.data.ResultObject];
          // this.userdrugdata = this.allshopdata;
          // 全部加载完成;
          if (this.allshopdata.length == res.data.Pager.TotalItemCount) {
            this.list2.finished = true;
          }
          this.page2.pageIndex++;
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    },
    //跳转闹钟详情
    jumptoDetail(ProductCode) {
      this.$router.push({
        path: "/addRemind",
        query: { ProductCode }
      });
    },
    search(value) {
      this.page2 = {
        pageIndex: 1,
        pageSize: 10
      };
      let searchtext = value.replace(/(^\s*)|(\s*$)/g, "");

      if (this.active == 0) {
        this.allshopdata = [];
        this.GetDrugList(searchtext);
      } else {
        this.searchuserdrugdata = [];
        this.userdrugdata.forEach(item => {
          if (item.ProductName == null) return;
          if ((item.ProductName + "").indexOf(searchtext) !== -1) {
            this.searchuserdrugdata.push(item);
          }
        });
        this.userdrugdata = this.searchuserdrugdata;
      }
    }
  },
  watch: {}
};
</script>
<style scoped lang='less'>
@bluecolor: #478bfb;
@graycolor: #999999;
/deep/ .van-search__content {
  border: 0.01rem solid @bluecolor;
  border-radius: 0.2rem;
}
/deep/ .van-tabs__wrap {
  width: 60%;
}
/deep/ .van-tabs__nav--line {
  border: none;
}
.ellips2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ellips {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.shop_list {
  width: 100%;
  padding: 0.1rem 0;
  li {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 0.05rem 0.23rem 0 rgba(51, 51, 51, 0.1);
    border-radius: 0.16rem;
    width: 7rem;
    height: 1.6rem;
    margin: 0.5rem auto;
    img {
      width: 1.13rem;
      height: 1.14rem;
      object-fit: contain;
    }
    > div:nth-child(2) {
      width: 60%;
      height: 100%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      text-align: left;
      h2 {
        font-size: 0.3rem;
        height: 0.35rem;
        line-height: 0.35rem;
        text-align: left;
        .ellips();
      }
      p {
        color: @graycolor;
        .ellips2();
      }
    }
    > div:last-child {
      width: 10%;
      height: 1.6rem;
      line-height: 1.6rem;
      img {
        width: 0.36rem;
        height: 0.36rem;
        object-fit: contain;
      }
    }
  }
}
.nonetext {
  color: #757575;
  font-size: 0.25rem;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
}
</style>