<template>
  <view class="container">
    <view class="appoint" v-for="(item,index) of init_list">
      <view class="appoint-list">
        <view class="appoint-title">{{ item.simpleMerchantVO.name }}</view>
        <view class="appoint-address">{{ item.simpleMerchantVO.address }}</view>
        <view class="appoint-flex">
          <!-- <Image src="https://cdn.uviewui.com/uview/album/1.jpg" /> -->
          <image class="img" :src="
              error || !loaded
                ? 'https://cdn.uviewui.com/uview/album/10.jpg'
                : item.simpleMerchantVO.logo
            " mode="scaleToFill"></image>
          <view class="appoint-text">
            <view>业务：洗车……</view>
            <view>时间：2023年06月18日</view>
            <view>联系方式：{{ item.mobile }}</view>
          </view>
        </view>
        <view class="appoint-goto">
          <u-button class="detail" text="详情" @click="handlerSkipGoodsDetail(item,index)"></u-button>
          <u-button class="cancel" text="取消" @click="handlerClearItem(item,index)"></u-button>
        </view>
      </view>
    </view>
    <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></view>
</template>

<script>
  import { maintainReservations } from "@/api/mine.js"
  export default {
    data() {
      return {
        queryParams:{
          size:10
        },

        init_list:[]//初始化列表
      };
    },
    mounted() {
      this.handlerInitList()
    },
    methods: {
      // 初始化列表
      handlerInitList(){
        maintainReservations(this.queryParams).then(res=>{
          this.init_list = res.data
          console.log('init_list',this.init_list);
        })
      },
      // 点击取消商品
      handlerClearItem(){
        uni.showToast({
          title:'么有',
          icon:'none'
        })
      },
      // 点击跳转到商品详情
      handlerSkipGoodsDetail(item, index) {
        uni.navigateTo({
          url: `/pages/business/service/detail?id=${item.id}`
        })
      },
    },
  };
</script>

<style lang="scss" scoped>
  page{
    background-color: #efefef;
  }
  .container{
    padding: 20rpx;
  }
  .appoint {
    .history {
      font-size: 38rpx;
      margin: 20rpx 10rpx;
      font-weight: bold;
    }
  }

  .appoint-list {
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    .appoint-title {
      font-size: 38rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      color: #090909;
    }

    .appoint-address {
      font-size: 32rpx;
      margin: 20rpx;
      padding-bottom: 20rpx;
      color: #000000;
      border-bottom: 2rpx solid #E5E5E5;
    }


    .appoint-flex {
      display: flex;
      .img {
        width: 210rpx;
        height: 160rpx;
        display: block;
        margin-right: 15rpx;
      }
      .appoint-text {
        font-size: 28rpx;
        >view {
          margin-bottom: 26rpx;
        }
      }
    }
    .appoint-goto {
      display: flex;
      .detail,.cancel{
        width: 45%;
        border-radius: 20rpx;
      }
      .detail{
        background-color: #6C9FC3;
        color: #fff;
      }
    }
  }
</style>
