<template>
  <view class="sort">
    <u-swipe-action>
      <u-swipe-action-item :options="options1" :key="index" v-for="(itm, index) of item"
        @click="handlerClearItem(itm,index)">
        <view class="list" @click='handlerRouterSkip(itm)'>
          <view class="list-img">
            <image class="img" :src=" itm.logo" mode="scaleToFill"></image>
          </view>

          <view class="list-main">
            <view class="item-text">{{ itm.name }}</view>
            <!-- <view class="item-flex">
              <view class="star">
                <u-rate :count="itm.score" disabled v-model="itm.score" :size="14" />
                <text class="line">|</text>
                <text class="points">{{ itm.score }}分</text>
              </view>
              <view>{{ itm.specialPrice }}单</view>
              <view></view>
            </view> -->
            <view class="list-item">
              <view class="item-l">{{ itm.description }}</view>
              <view class="item-r"></view>
            </view>
          </view>
        </view>
      </u-swipe-action-item>
    </u-swipe-action>
  </view>
</template>

<script>
  import {
    cancelFavorite
  } from '@/api/client/business.js';
  export default {
    data() {
      return {
        show: false,
        showDate: false,
        value1: Number(new Date()),
        count: 2,
        value: 10,
        options1: [{
          text: '删除'
        }]
      };
    },
    props: ['item'],
    mounted() {},
    methods: {
      click(item) {},
      open() {},
      close() {
        this.show = false;
      },
      // 点击跳转1
      handlerRouterSkip(item) {
        uni.navigateTo({
          url: `/pages/client/clientPackage/serviceDetail/index?id=${item.id}&shopId=${item.merchantId}`,
        });
      },
      // 点击取消
      handlerClearItem(item, index) {
        cancelFavorite(item.id).then(res => {
          if (res.code == 'OK') {
            uni.showToast({
              title: '取消成功',
              icon: 'none'
            })
            this.$emit('uploadIniList', 1)
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            })
            return
          }
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  /*商家服务分类的是实现 */

  .sort {
    min-height: 100vh;

    .list {
      height: 250rpx;
      background-color: #fff;
      padding: 20rpx;
      margin-bottom: 20rpx;
      display: flex;

      .list-img {
        width: 260rpx;
        height: 100%;
        background-color: #ec5729;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .list-main {
        width: calc(100% - 280rpx);
      }

      .item-text {
        font-weight: bold;
        margin: 10rpx 0 10rpx;
        color: #333;
      }

      .item-flex {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        margin: 0 20rpx 10rpx 0;
        color: #0d0d0d66;

        .star {
          display: flex;

          .line {
            margin-left: 16rpx;
            margin-top: 5rpx;
            font-size: 22rpx;
          }

          .points {
            color: #ff4b04;
            font-size: 22rpx;
            margin-top: 6rpx;
            margin-left: 10rpx;
          }
        }
      }

      .list-item {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;

        .item-l {
          width: 80%;
          color: #cfcfcf;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
          -webkit-box-orient: vertical; // 从上到下垂直排列子元素
          -webkit-line-clamp: 2; //显示的行数
        }

        .item-r {
          color: #252525;

          .Buy {
            width: 40px;
            height: 32px;
            color: #fff;
            line-height: 32px;
            text-align: center;
            display: inline-block;
            border-radius: 0 16px 16px 0;
            background-color: #ec5729;
            padding-bottom: 20rpx;
          }
        }
      }
    }
  }


  .swipe-action {
    background-color: #EFEFEF;
    box-sizing: border-box;

    &__content {

      &__text {
        font-size: 15px;
        color: $u-main-color;
      }
    }
  }
</style>
