<template>
  <el-steps
    class="status-steps-mobile sa-m-t-32"
    direction="vertical"
    :active="state.stepActive"
    :align-center="true"
    :space="80"
  >
    <el-step title="买家申请售后" :description="detailData.create_time"></el-step>
    <el-step
      title="售后申请处理中"
      :description="
        state.stepActive >= 2
          ? detailData.logs.length > 0
            ? detailData.logs[0].update_time
            : ''
          : ''
      "
    ></el-step>
    <el-step
      title="处理完成"
      :description="state.stepActive == 3 ? detailData.update_time : ''"
    ></el-step>
  </el-steps>
  <el-steps
    class="status-steps-pc sa-m-t-32"
    direction="horizontal"
    :active="state.stepActive"
    :align-center="true"
  >
    <el-step title="买家申请售后" :description="detailData.create_time"></el-step>
    <el-step
      title="售后申请处理中"
      :description="
        state.stepActive >= 2
          ? detailData.logs.length > 0
            ? detailData.logs[0].update_time
            : ''
          : ''
      "
    ></el-step>
    <el-step
      title="处理完成"
      :description="state.stepActive == 3 ? detailData.update_time : ''"
    ></el-step>
  </el-steps>
</template>
<script setup>
  import { reactive, watch } from 'vue';

  const props = defineProps(['detailData']);

  const state = reactive({
    stepActive: 1,
  });

  function changeOrderStep() {
    if (
      props.detailData.aftersale_status == -1 ||
      props.detailData.aftersale_status == -2 ||
      props.detailData.aftersale_status == 2
    ) {
      state.stepActive = 3;
    } else {
      state.stepActive = props.detailData.aftersale_status + 1;
    }
  }
  watch(
    () => props.detailData,
    () => {
      changeOrderStep();
    },
  );
</script>
<style lang="scss" scoped>
  .status-steps-mobile,
  .status-steps-pc {
    :deep() {
      .el-step__head {
        .el-step__line {
          top: 15px;
        }
        .el-step__icon {
          width: 32px;
          height: 32px;
          color: var(--sa-background-assist);
          background: var(--sa-place);
          border: 2px solid var(--sa-table-header-bg);
        }
        &.is-finish {
          .el-step__icon {
            color: var(--sa-background-assist);
            background: var(--el-color-primary);
          }
        }
      }
      .el-step__title {
        color: var(--sa-subfont);
        font-size: 14px;
        font-weight: 400;
        &.is-finish {
          color: var(--sa-subtitle);
        }
      }
      .el-step__description {
        padding: 0;
        color: var(--sa-subfont);
      }
    }
  }
  .status-steps-mobile {
    display: none;
    @media only screen and (max-width: 768px) {
      display: flex;
    }
    :deep() {
      .el-step__head {
        width: fit-content;
        .el-step__line {
          left: 15px;
        }
      }
    }
  }
  .status-steps-pc {
    display: flex;
    @media only screen and (max-width: 768px) {
      display: none;
    }
  }
</style>
