<template>
  <el-button
    v-if="statusData.isClick"
    :class="['status', type]"
    :type="statusData.cl.split('-')[1]"
    plain
    @click="onClick"
  >
    {{ statusData.text }}
    <el-icon><ArrowRight /></el-icon>
  </el-button>
  <div v-else :class="['status', statusData.cl, type]">
    {{ statusData.text }}
  </div>
</template>

<script setup>
  /**
   * @property {String} from  使用页面 index | detail
   * @property {Object} order 订单详情
   * @property {String} type  状态类型(status_code在订单上,其余在item上)
   * @property {Object} item  商品详情
   */
  import { computed } from 'vue';
  import { useModal } from '@/sheep/hooks';
  import sheep from '@/sheep';
  import OrderDispatch from '../dispatch.vue';
  import AftersaleDetail from '../../aftersale/detail.vue';
  import OrderRefund from '../refund.vue';

  const emit = defineEmits(['updateList']);
  const props = defineProps({
    from: {
      type: String,
      default: 'index',
    },
    order: {
      type: Object,
    },
    type: {
      type: String,
    },
    item: {
      type: Object,
    },
  });

  const statusData = computed(() => {
    let data = {
      cl: '',
      text: '',
      isClick: false,
    };
    switch (props.type) {
      // 订单总状态
      case 'status_code':
        switch (props.order.status_code) {
          case 'cancel': // 已取消
            data.cl = 'status-danger';
            break;
          case 'closed': // 交易关闭
            data.cl = 'status-danger';
            break;
          case 'unpaid': // 待付款
            data.cl = 'status-info';
            break;
          case 'nosend': // 待发货
            data.cl = 'status-warning';
            break;
          case 'noget': // 待收货
            data.cl = 'status-warning';
            break;
          case 'nocomment': // 待评价
            data.cl = 'status-warning';
            break;
          case 'commented': // 已评价
            data.cl = 'status-success';
            break;
          case 'apply_refund': //申请退款中
            data.cl = 'status-danger';
            break;
          case 'refund_completed': // 退款完成
            data.cl = 'status-success';
            break;
          case 'refund_agree': // 退款已同意
            data.cl = 'status-success';
            break;
          case 'groupon_ing': // 等待成团
            data.cl = 'status-warning';
            break;
          case 'groupon_invalid': // 拼团失败
            data.cl = 'status-danger';
            break;
          case 'completed': // 交易完成
            data.cl = 'status-success';
            break;
        }
        data.text = props.order.status_text;
        break;
      // 发货
      case 'dispatch':
        switch (props.item.dispatch_status) {
          case -1:
            data.cl = 'status-danger';
            break;
          case 0: // 未发货
            data.cl = 'status-info';
            break;
          case 1: // 已发货
            data.cl = 'status-warning';
            break;
          case 2: // 已收货
            data.cl = 'status-success';
            break;
        }
        data.text = props.item.dispatch_status_text;
        break;
      // 售后
      case 'aftersale':
        switch (props.item.aftersale_status) {
          case -1: // 拒绝
            data.cl = 'status-danger';
            break;
          case 0: // 未申请
            data.cl = 'status-info';
            break;
          case 1: // 申请售后
            data.cl = 'status-warning';
            break;
          case 2: // 售后完成
            data.cl = 'status-success';
            break;
        }
        data.text = props.item.aftersale_status_text;
        data.isClick = props.item.btns.includes('aftersale_info');
        break;
      // 退款
      case 'refund':
        switch (props.item.refund_status) {
          case 0: // 主动退款
            data.cl = 'status-info';
            break;
          case 1: // 同意退款
            data.cl = 'status-success';
            break;
          case 2: // 退款完成
            data.cl = 'status-success';
            break;
        }
        data.text = props.item.refund_status_text;
        break;
      // 评价 TODO: 是否需要 btns 控制
      case 'comment':
        switch (props.item.comment_status) {
          case 0: // 待评价
            data.cl = 'status-warning';
            data.text = props.item.comment_status_text;
            break;
          case 1: // 已评价
            data.cl = 'status-success';
            data.text = '查看评价';
            break;
        }
        break;
    }
    return data;
  });

  function onClick() {
    if (props.type == 'dispatch') {
      onOpenDispatch();
    } else if (props.type == 'aftersale') {
      onOpenAftersale();
    } else if (props.type == 'refund') {
      onOpenRefund();
    } else if (props.type == 'comment') {
      onOpenComment();
    }
  }

  function onOpenDispatch() {
    useModal(
      OrderDispatch,
      {
        title: '订单发货',
        data: props.order,
      },
      {
        confirm: () => {
          emit('updateList');
        },
      },
    );
  }

  function onOpenAftersale() {
    useModal(
      AftersaleDetail,
      {
        title: '售后详情',
        id: props.item.ext.aftersale_id,
      },
      {
        confirm: () => {
          emit('updateList');
        },
      },
    );
  }

  function onOpenRefund() {
    useModal(
      OrderRefund,
      {
        title: '退款',
        class: 'refund-dialog',
        type: 'order.refund',
        data: {
          id: props.order.id,
          item_id: props.item.id,
          money: props.item.pay_fee,
          suggest_refund_fee: props.item.suggest_refund_fee,
        },
      },
      {
        confirm: () => {
          emit('updateList');
        },
      },
    );
  }

  function onOpenComment() {
    console.log('查看评价功能暂未实现');
  }
</script>

<style lang="scss" scoped>
  .status {
    width: fit-content;
    height: 26px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 400;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    &.status_code {
      background: transparent !important;
      padding: 0;
    }
    &.dispatch {
      height: 18px;
      padding: 0 6px;
      // font-size: 12px;
      // font-weight: 400;
      border-radius: 9px;
      // display: flex;
      // align-items: center;
      // justify-content: center;
    }

    &.refund {
      height: 14px;
      padding: 0 4px;
      background: transparent !important;
    }

    &.status-primary {
      color: var(--el-color-primary);
      background: var(--sa-background-hex-active);
    }

    &.status-success {
      color: #52c41a;
      background: rgba(82, 196, 26, 0.16);
    }

    &.status-warning {
      color: #faad14;
      background: rgba(250, 173, 20, 0.16);
    }

    &.status-danger {
      color: #ff4d4f;
      background: rgba(255, 77, 79, 0.16);
    }

    &.status-info {
      color: #999999;
      background: rgba(153, 153, 153, 0.16);
    }
  }
</style>
