<template>
  <view class="card" @click="jumpToOrderDetail">
    <view class="top">
      {{ data.activityTitle }}
    </view>
    <view :class="['tag', `tag-${data.status}`]">
      {{ data.status_dictText }}
    </view>
    <view class="flex row">
      <view class="row-label">联系人：</view>
      <view class="row-content">{{ data.name }}</view>
    </view>
    <view class="flex row">
      <view class="row-label">下单时间：</view>
      <view class="row-content">{{ data.createTime }}</view>
    </view>
    <view class="flex row">
      <view class="row-label">联系电话：</view>
      <view class="row-content">{{ data.phone }}</view>
    </view>
    <view class="flex bottom">
      <view class="flex row">
        <text class="row-label">总价格：</text>
        <text class="flex row-content price">¥<text class="highlight">{{ data.payAmount }}</text></text>
      </view>
      <view class="flex btns">
        <!-- 订单状态 0待支付 1已支付 2已完成 -->
        <!-- 待支付 -->
        <template v-if="data.status == 0">
          <button class="btn" @click.stop="onPay">立即支付</button>
        </template>
        <!-- 已支付 -->
        <template v-else-if="data.status == 1">
          <button class="btn" @click.stop="onContactMentor">联系导师</button>
          <button class="btn" @click.stop="onFinish">已完成</button>
        </template>
        <!-- 已完成 -->
        <template v-else-if="data.status == 2">
          <button class="btn" @click.stop="onApplyService">申请售后</button>
          <button class="btn" @click.stop="onComment">立即评价</button>
        </template>
        <!-- 售后 -->
        <!-- todo -->
        <!-- <template v-else-if="data.status == 4">
          
        </template> -->
      </view>
    </view>
  </view>
</template>

<script>

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      onPay() {
        this.$utils.navigateTo(`/pages_order/order/orderPay/index?id=${this.data.id}`)
      },
      onContactMentor() {
        this.$emit('contatcMentor', this.data.teacherPhone)
      },
      onComment() {
        this.$emit('comment')
      },
      onApplyService() {
        // todo
        const obj = {
          id: this.data.id
        }
        this.$emit('applyService', obj)
      },
      jumpToOrderDetail() {
        if (this.data.status == 0) { // 待支付
          this.$utils.navigateTo(`/pages_order/order/orderPay/index?id=${this.data.id}`)
        } else {
          this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
        }
      },
      async onFinish() {
        try {
          await this.$fetch('updateOrder', { id: this.data.id, status: '2' }) // 订单状态 0待支付 1已支付 2已完成

          this.$emit('statusChange')
        } catch (err) {

        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../styles/tag.scss';

  .card {
    position: relative;
    width: 100%;
    padding: 40rpx 32rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 2rpx solid #FFFFFF;
    border-radius: 32rpx;
  }

  .tag {
    position: absolute;
    top: 0;
    right: 0;
  }

  .top {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 1.4;
    color: #181818;
  }

  .row {
    margin-top: 16rpx;
    justify-content: flex-start;
    column-gap: 4rpx;

    font-family: PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 1.4;

    &-label {
      color: #8B8B8B;
    }

    &-content {
      color: #393939;
    }
  }

  .row + .row {
  }

  .bottom {
    margin-top: 16rpx;
    justify-content: space-between;

    .price {
      column-gap: 8rpx;
      font-family: PingFang SC;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 1.4;
      color: #FF4800;

      .highlight {
        font-size: 32rpx;
      }
    }

    .btns {
      flex: 1;
      justify-content: flex-end;
      column-gap: 16rpx;
    }

    .btn {
      padding: 10rpx 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;
      color: #393939;
      border: 2rpx solid #252545;
      border-radius: 32rpx;
    }
  }
</style>
