<template>
  <view>
    <view
      class="abnormal-op"
      v-if="
        (order.status === 17 && (order.flag & 24) === 0) ||
        (order.status === 22 && (order.flag & 32) === 0) ||
        (order.status === 18 && (order.flag & 64) === 0)
      "
    >
      <view class="title">{{ title }}</view>
      <view class="op">
        <view class="btn-confirm" @click.stop="handleConfirm">{{
          confirmText
        }}</view>
      </view>
    </view>
    <view
      class="abnormal-dealed"
      v-if="
        (order.status === 17 && (order.flag & 24) !== 0) ||
        (order.status === 22 && (order.flag & 32) !== 0) ||
        (order.status === 18 && (order.flag & 64) !== 0)
      "
    >
      {{ title }}
      <text class="agree" v-if="(order.flag & 24) === 8">[已同意]</text>
      <text class="refuse" v-if="(order.flag & 24) === 24"
        >[已拒绝]请联系:18048531223</text
      >
      <text
        class="agree"
        v-if="(order.flag & 32) === 32 || (order.flag & 64) === 64"
        >[已发单]</text
      >
      <text><slot></slot></text>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
interface propsType {
  title: string
  confirmText: string
  order: AnyObject
}
defineProps<propsType>()

const emits = defineEmits<{
  (e: 'handleCancel'): void
  (e: 'handleConfirm'): void
}>()

// 点击取消
function handleCancel() {
  emits('handleCancel')
}

// 点击确定
function handleConfirm() {
  emits('handleConfirm')
}
</script>
  
<style lang="scss" scoped>
.abnormal-op {
  height: 90rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;
  padding: 0 20rpx;
  background: linear-gradient(to right, #e8edd8, white);

  .title {
    color: #333;
    font-weight: bold;
  }

  .op {
    display: flex;
    align-items: center;

    .btn-cancel,
    .btn-confirm {
      color: #fff;
      background-color: $jx-primary;
      padding: 7rpx 30rpx;
      border-radius: 7rpx;
    }

    .btn-cancel {
      margin-right: 40rpx;
      background-color: #f60d58;
    }
  }
}

.abnormal-dealed {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  background: white;
  color: #333;

  text {
    font-weight: bold;
    display: inline-block;
    margin-left: 10rpx;
  }

  .agree {
    color: green;
  }

  .refuse {
    color: red;
  }
}
</style>
  