<template>
  <div>
    <div class="container">
      <div class="search">
        <van-search
          v-model="inputValue"
          placeholder="客官你要搜索点什么"
          shape="round"
          @search="onSearch"
        >
        </van-search>
      </div>
      <van-tabs
        type="card"
        @click="onClick"
        title-active-color="#fff"
        title-inactive-color="#2D476A"
        class="tab"
        background="#F8F8F8"
      >
        <van-tab title="已上架">
          <div class="list">
            <div class="good">
              <div class="left">
                <img src="../../../public/img/goods.png" />
              </div>
              <div class="center">
                <div class="name">商品名称商品名称商品名称商品名称商品</div>
                <h3>￥888</h3>
              </div>
              <div class="right">
                <div class="sj" color="#75B2FD" >下架</div>
              </div>
            </div>
            <div class="good">
              <div class="left">
                <img src="../../../public/img/goods.png" />
              </div>
              <div class="center">
                <div class="name">商品名称商品名称商品名称商品名称商品</div>
                <h3>￥888</h3>
              </div>
              <div class="right">
                <div class="sj" color="#75B2FD">下架</div>
              </div>
            </div>
            <div class="good">
              <div class="left">
                <img src="../../../public/img/goods.png" />
              </div>
              <div class="center">
                <div class="name">商品名称商品名称商品名称商品名称商品</div>
                <h3>￥888</h3>
              </div>
              <div class="right">
                <div class="sj" color="#75B2FD">下架</div>
              </div>
            </div>
            <div class="good">
              <div class="left">
                <img src="../../../public/img/goods.png" />
              </div>
              <div class="center">
                <div class="name">商品名称商品名称商品名称商品名称商品</div>
                <h3>￥888</h3>
              </div>
              <div class="right">
                <div class="sj" color="#75B2FD">下架</div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="未上架">
          <div class="list">
            <div class="good">
              <div class="left">
                <img src="../../../public/img/goods.png" />
              </div>
              <div class="center">
                <div class="name">商品名称商品名称商品名称商品名称商品</div>
                <h3>￥888</h3>
              </div>
              <div class="right">
                <div class="sj" color="#75B2FD" @click="handleUpperShelf">上架</div>
              </div>
            </div>
            <div class="good">
              <div class="left">
                <img src="../../../public/img/goods.png" />
              </div>
              <div class="center">
                <div class="name">商品名称商品名称商品名称商品名称商品</div>
                <h3>￥888</h3>
              </div>
              <div class="right">
                <div class="sj" color="#75B2FD">上架</div>
              </div>
            </div>
            <div class="good">
              <div class="left">
                <img src="../../../public/img/goods.png" />
              </div>
              <div class="center">
                <div class="name">商品名称商品名称商品名称商品名称商品</div>
                <h3>￥888</h3>
              </div>
              <div class="right">
                <div class="sj" color="#75B2FD">上架</div>
              </div>
            </div>
            <div class="good">
              <div class="left">
                <img src="../../../public/img/goods.png" />
              </div>
              <div class="center">
                <div class="name">商品名称商品名称商品名称商品名称商品</div>
                <h3>￥888</h3>
              </div>
              <div class="right">
                <div class="sj" color="#75B2FD">上架</div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      lower: 2,
      higger: 1
    };
  },
  methods: {
    onSearch() {},
    onClick(name, title) {
      this.$toast(title);
      if (title == "已上架") {
        this.higger = 1;
        this.lower = 2;
      } else {
        this.higger = 2;
        this.lower = 1;
      }
    },
    handleUpperShelf() {
      this.$router.push("goodGrounding");
    }
  }
};
</script>

<style scoped>
.tab >>> .van-tabs__nav--card .van-tab {
  border-right: none;
}
.tab >>> .van-tab.van-tab--active {
  background-color: #75B2FD;
}
.sj {
  width: 64px;
  height: 32px;
  background: rgba(117, 178, 253, 1);
  border-radius: 8px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  margin-top: 20px;
}
h3 {
  font-size: 14px;
  color: rgba(208, 2, 27, 1);
  margin-top: 18px;
}
.name {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.good {
  height: 108px;
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  width: 100%;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
}
.list {
  padding: 0 16px;
  box-sizing: border-box;
}
.left,
.right,
.center {
  height: 80px;
}
.left {
  width: 80px;
  border-radius:4px;
}
.left img {
  width: 100%;
}
.center {
  width: 50%;
}
.right {
  width: 20%;
}
.tab >>> .van-tabs__nav--card {
  margin: 0;
  border: none;
  height: 40px;
}
.container {
  height: auto;
  min-height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.search {
  padding: 12px 16px;
}
.active {
  background-color: #75b2fd;
}
</style>