<template>
  <view>
    <view class="sort">
      <u-tabs
        :list="list1"
        @click="click"
        lineWidth="30"
        lineColor="#5992bb"
        :activeStyle="{
          color: '#5992bb',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#000',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"
      />
      <view class="list">
        <Image
          src="https://cdn.uviewui.com/uview/album/1.jpg"
          @tap="$Router.push('/pages/business/service/index')"
        />
        <view>
          <view class="item-text"
            >【养车】标题标题标题标题标题标题标题标题……</view
          >
          <view class="item-flex">
            <view class="star">
              <u-rate :count="count" v-model="value" :size="14" />
              <text class="line">|</text>
              <text class="points">4.93分</text>
            </view>
            <view>989单</view>
          </view>
          <view class="list-item">
            <view>
              <view class="price"
                >券后价
                <text class="price-item">￥</text>
                <text class="price-count">19</text>
              </view>
              <view class="gate-rate">
                <text>门市价</text>
                <text class="gate-rate-item">￥30</text>
              </view>
            </view>
            <view class="appoint">
              <text class="appoint-item" @click="show = true">预约</text>
              <text class="Buy" @tap="$Router.push('/pages/business/buy/index')"
                >购买</text
              >
            </view>
          </view>
        </view>
      </view>

      <!-- 预约弹出框的实现 -->
      <u-popup
        :show="show"
        mode="center"
        @close="close"
        @open="open"
        :round="20"
      >
        <view class="popupContent">
          <text class="popupItem">预约服务</text>
          <view class="server">
            <view class="popup-title">时间</view>
            <!-- <view @click="showDate = true">请选择时间</view> -->
            <u--input placeholder="请选择时间" border="bottom" clearable />
            <!-- 点击时间的弹框 -->
            <!-- <u-datetime-picker :showDate="showDate" v-model="value1" mode="datetime" /> -->
            <view class="popup-title">联系方式</view>
            <u--input placeholder="请输入联系方式" border="bottom" clearable />
          </view>
          <u-button type="primary" shape="circle" size="small" text="确定" />
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      showDate: false,
      value1: Number(new Date()),
    };
  },
  methods: {
    click(item) {
      console.log('item', item);
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
  },
};
</script>

<style lang="scss" scoped>
/*商家服务分类的是实现 */
.sort {
  background-color: #fff;

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

    Image {
      width: 180px;
      height: calc(100% - 20rpx);
      margin: 10rpx 20rpx 10rpx 0;
    }

    .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;

      .price {
        font-size: 32rpx;
        font-weight: bold;
        color: #fa3534;

        .price-item {
          font-size: 24rpx;
          margin-left: 10rpx;
        }

        .price-count {
          font-size: 44rpx;
        }
      }

      .gate-rate {
        color: #c9c9c9;
        font-size: 26rpx;
        margin: 16rpx 0 0 40rpx;

        .gate-rate-item {
          text-decoration: line-through;
        }
      }

      .appoint {
        width: 80px;
        height: 32px;
        display: flex;
        margin-top: 20px;
        font-size: 14px;

        .appoint-item {
          width: 40px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          display: inline-block;
          box-sizing: border-box;
          border-radius: 16px 0 0 16px;
          border: 1px solid #ec5729;
        }

        .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;
        }
      }
    }
  }
}

/* 弹框的样式 */
.popupContent {
  width: 600rpx;
  height: 400rpx;
  padding: 30rpx;
  box-sizing: border-box;

  .popupItem {
    font-size: 34rpx;
    font-weight: bold;
  }

  .server {
    margin: 20rpx 0 20rpx 30rpx;
  }
}
</style>
