<template>
  <view class="appoint">
    <view class="appoint-list">
      <view class="appoint-title" @tap="$Router.push('/pages/business/service/index')">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
      <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
      <view class="appoint-flex">
        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
        <view class="appoint-text">
          <view>业务：洗车……</view>
          <view>时间：2023年06月18日</view>
          <view>联系方式：18285564342</view>
        </view>
        <view class="appoint-goto">
          <view class="detail" @tap="$Router.push('/pages/user/appointDetail/index')">详情</view>
          <view class="cancel" @click="show = true">取消</view>
        </view>
      </view>

      <!-- 取消弹框的实现 -->
      <view>
        <u-modal :show="show" :title="title" :content='content'></u-modal>
      </view>
    </view>
    <view class="appoint-list">
      <view class="appoint-title" @tap="$Router.push('/pages/business/service/index')">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
      <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
      <view class="appoint-flex">
        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
        <view class="appoint-text">
          <view>业务：洗车……</view>
          <view>时间：2023年06月18日</view>
          <view>联系方式：18285564342</view>
        </view>
        <view class="appoint-goto">
          <view class="detail" @tap="$Router.push('/pages/user/appointDetail/index')">详情</view>
          <view class="cancel" @click="show = true">取消</view>
        </view>
      </view>

      <!-- 取消弹框的实现 -->
      <view>
        <u-modal :show="show" :title="title" :content='content'></u-modal>
      </view>
    </view>
    <view class="history">历史预约列表</view>
    <view class="appoint-list">
      <view class="appoint-title" @tap="$Router.push('/pages/business/service/index')">【养车】标题标题标题标题标题标题标题标题标题标题……</view>
      <view class="appoint-address">贵州省贵阳市榕江县栽麻乡小利村三组</view>
      <view class="appoint-flex">
        <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
        <view class="appoint-text">
          <view>业务：洗车……</view>
          <view>时间：2023年06月18日</view>
          <view>联系方式：18285564342</view>
        </view>
        <view class="appoint-goto">
          <view class="detail" @tap="$Router.push('/pages/user/appointDetail/index')">详情</view>
          <view class="cancel" @click="show = true">取消</view>
        </view>
      </view>

      <!-- 取消弹框的实现 -->
      <view>
        <u-modal :show="show" :title="title" :content='content'></u-modal>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      title: '取消预约',
      content: '你确定要取消当前预约吗?'
    };
  },
  methods: {
    confirm() {
      console.log(1111111111);
      this.show = false;
    },
    cancel() {
      this.show = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.appoint {
  height: 100vh;
  background-color: #efefef;

  .history {
    font-size: 38rpx;
    margin: 20rpx 10rpx;
    font-weight: bold;
  }
}

.appoint-list {
  height: 420rpx;
  padding: 10rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  box-sizing: border-box;

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

    Image {
      width: 210rpx;
      height: 160rpx;
      display: block;
      margin-right: 15rpx;
    }

    .appoint-text {
      font-size: 28rpx;

      >view {
        margin-bottom: 26rpx;
        margin-right: 20rpx;
      }
    }

    .appoint-goto {
      display: flex;
      margin-top: 100rpx;

      .detail {
        width: 90rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        color: #fff;
        border-radius: 35rpx 0 0 35rpx;
        background-color: #6c9fc3;
      }

      .cancel {
        width: 90rpx;
        height: 70rpx;
        line-height: 70rpx;
        background-color: #fff;
        border-radius: 0 35rpx 35rpx 0;
        box-sizing: border-box;
        color: #6c9fc3;
        padding-left: 10rpx;
        border: 2rpx solid #6c9fc3;
      }
    }
  }
}
</style>
