<template>
  <view class='container' @click='handlerClearPop'>
    <view class="collect-list">
      <u-tabs :list="listCollect" @click="clickCollect" lineWidth="30" lineColor="#5992bb" :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }" :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
    </view>

    <u-divider text="以下是您收藏的商家"></u-divider>

    <view class='favoutire-box'>
      <view class='item-box' v-for="(item,index) of init_list" :key='index'>
        <view class='item-left'>
          <image src='@/static/QR57a.jpg' class='img'></image>
        </view>
        <view class='item-right'>
          <view class='name'>{{ item.name }}</view>
          <view class='favourite'>{{ item.favouriteNumb }}人收藏</view>
          <view class='price-box'>
            <view class="price-left">¥{{ item.price }}</view>
            <view class="price-right" @click.stop='handlerShowPop(item,index)'>
              <u-icon name="more-dot-fill" color="#000" size="16"></u-icon>
            </view>
            <view class="pop-box" v-show="item.show">
              <view class="pop-item" @click='handlerSkipShow(item,index)'>进店逛逛</view>
              <view class="pop-item" @click='handlerDeleteItem(item,index)'>删除</view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        listCollect: [{
            id: 1,
            name: '商家',
          },
          {
            id: 1,
            name: '服务',
          },
        ],
        init_list: [{
            name: '测试店铺1',
            favouriteNumb: 120,
            price: 85,
            show: false
          },
          {
            name: '测试店铺2',
            favouriteNumb: 5201,
            price: 96,
            show: false
          },
          {
            name: '测试店铺3',
            favouriteNumb: 12,
            price: 41,
            show: false
          },
        ],
        indexs: 0
      }
    },
    methods: {
      clickCollect(e) {
        // this.init_list = []
        this.indexs = e.index
        switch (e.index) {
          case 0:
            // this.handlerInitList()
            break;
          case 1:
            // this.handlerInitGoodsList()
            break;
        }
      },
      // 点击显示
      handlerShowPop(item, index) {
        this.init_list.map(rs => {
          if (rs.show) {
            rs.show = false
          }
        })
        item.show = true
      },
      // 清除showPop
      handlerClearPop() {
        this.init_list.map(rs => {
          if (rs.show) {
            rs.show = false
            console.log("@@@@rs", rs)
          }
        })
        console.log("@@@@@@@")
      },
      // 进店逛逛
      handlerSkipShow() {
        uni.showToast({
          title: '进店',
          icon: 'none'
        })
      },
      // 删除
      handlerDeleteItem() {
        uni.showToast({
          title: '删除',
          icon: 'none'
        })
      }
    }
  }
</script>

<style lang='scss' scope>
  page {
    background-color: #F9F9F9;
  }

  .container {
    font-size: 28rpx;
    width: 100%;
    min-height: 100vh;

    .collect-list {
      display: flex;
      height: 70rpx;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      margin-bottom: 40rpx;
    }

    .notic-b {
      text-align: center;
      margin: 24rpx 0;
    }

    .favoutire-box {
      padding: 0 32rpx;
      width: calc(100% - 64rpx);

      .item-box {
        display: flex;
        background-color: #fff;
        width: 100%;
        margin-bottom: 24rpx;
        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);

        .item-left {
          .img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16px;
          }
        }

        .item-right {
          width: calc(100% - 180rpx);
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .name {
            color: #333333;
          }

          .favourite {
            color: #999999;
            font-size: 24rpx;
          }

          .price-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;

            .price-left {
              color: #EB3636;
              font-weight: bold;
            }

            .price-right {}

            .pop-box {
              width: 166rpx;
              position: absolute;
              right: -4%;
              bottom: -340%;
              padding: 24rpx;
              border-radius: 16rpx;
              background-color: #fff;
              box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);

              .pop-item {
                text-align: center;
                margin-bottom: 16rpx;
              }

              .pop-item:last-child {
                margin: 0;
              }
            }
          }
        }
      }

      .item-box:last-child {
        margin: 0;
      }
    }
  }
</style>
