<template>
  <!-- 签证办理流程 -->
  <div :class="`box-border   w-full rounded-xl ${props?.isFlag ? 'bg-[#FAFAFA] ' : 'bg-[#fff]'} `">
    <h1 :class="`w-full text-sm ${props?.isFlag ? 'text-center pt-11' : ''}`">签证办理流程</h1>
    <div
      id="handlingProcedure"
      class="relative box-border pl-10 pt-15 pr-23 flex flex-wrap items-center justify-between"
    >
      <div
        v-for="(item, index) in PAY_PROCESS"
        :key="index + new Date() + 'procedure'"
        :class="`relative ${itemsWidth(index)}  mb-18 mr-13  flex flex-wrap justify-center items-start`"
      >
        <div class="w-full">
          <div class="w-18 h-18 shrink-0 mx-auto">
            <img
              class="w-full h-full object-cover"
              :src="state >= item?.state ? item?.iconOrange : item?.icon"
              alt=""
            />
          </div>
          <p
            :class="`line-clamp-1 pt-8 text-center  text-sm font-blod leading-xl ${state >= item.state ? 'text-[#FD9A00]' : 'text-black-6'}`"
          >
            {{ item.itemTitle }}
          </p>
        </div>

        <template v-if="index < 2">
          <div
            v-if="index !== PAY_PROCESS.length - 1"
            class="w-23 h-13 absolute right-[-35.2px] bottom-2"
          >
            <img
              class="w-full h-full object-cover"
              v-if="state >= item.state"
              :src="orange_pay_arrow_right"
              alt=""
            />
            <img class="w-full h-full object-cover" v-else :src="pay_arrow_right" alt="" />
          </div>
        </template>
        <template v-else-if="index > 2">
          <div
            v-if="index !== PAY_PROCESS.length - 1"
            class="w-23 h-12 absolute right-[-35.2px] bottom-2"
          >
            <img
              class="w-full h-full object-cover"
              v-if="state >= item.state"
              :src="orange_pay_arrow_left"
              alt=""
            />
            <img class="w-full h-full object-cover" v-else :src="pay_arrow_left" alt="" />
          </div>
        </template>
        <div
          v-else-if="index == 2"
          :class="`absolute -bottom-55 -right-23 w-26 h-64 border-[2px] border-dashed  ${state >= item.state ? 'border-[#FF9300]' : 'border-[#D9D9D9]'} rounded-r-[18px]  border-l-transparent`"
        ></div>
        <template v-else></template>
      </div>
    </div>
  </div>
</template>
<script setup>
// 未支付流程的图标
import online_order_payment from '@/assets/img/visa/online_order_payment.svg' //
import submit_visa_information from '@/assets/img/visa/submit_visa_information.svg' //
import platform_preliminary_review from '@/assets/img/visa/platform_preliminary_review.svg' //
import submit_to_the_embassy from '@/assets/img/visa/submit_to_the_embassy.svg'
import successful_checkout from '@/assets/img/visa/successful_checkout.svg'
import express_delivery from '@/assets/img/visa/express_delivery.svg'
import orange_pay_arrow_right from '@/assets/img/visa/orange_pay_arrow_right.svg'
import pay_arrow_right from '@/assets/img/visa/pay_arrow_right.svg'
import pay_arrow_left from '@/assets/img/visa/pay_arrow_left.svg'
import orange_pay_arrow_left from '@/assets/img/visa/orange_pay_arrow_left.svg'
import orange_online_order_payment from '@/assets/img/visa/orange_online_order_payment.svg' //
import orange_submit_visa_information from '@/assets/img/visa/orange_submit_visa_information.svg' //
import orange_platform_preliminary_review from '@/assets/img/visa/orange_platform_preliminary_review.svg' //
import orange_submit_to_the_embassy from '@/assets/img/visa/orange_submit_to_the_embassy.svg'
import orange_successful_checkout from '@/assets/img/visa/orange_successful_checkout.svg'
import orange_express_delivery from '@/assets/img/visa/orange_express_delivery.svg'

// 支付流程的定义 PayProcess
const PAY_PROCESS = [
  {
    icon: online_order_payment,
    state: 0,
    iconOrange: orange_online_order_payment,
    itemTitle: '联系客服预审'
  },
  {
    icon: submit_visa_information,
    state: 0,
    iconOrange: orange_submit_visa_information,
    itemTitle: '提交签证资料'
  },
  {
    icon: platform_preliminary_review,
    state: 0,
    iconOrange: orange_platform_preliminary_review,
    itemTitle: '平台初审'
  },

  {
    icon: express_delivery,
    state: 2,
    iconOrange: orange_express_delivery,
    itemTitle: '使馆邮寄'
  },
  {
    icon: successful_checkout,
    state: 2,
    iconOrange: orange_successful_checkout,
    itemTitle: '成功出签'
  },
  {
    icon: submit_to_the_embassy,
    state: 1,
    iconOrange: orange_submit_to_the_embassy,
    itemTitle: '提交使馆'
  }
]

const props = defineProps({
  payState: {
    type: Number,
    required: false,
    default: -1
  },
  isFlag: {
    type: Boolean,
    required: false,
    default: false
  }
})

const state = computed(() => {
  if (props?.payState === 3) {
    return 0
  } else {
    return props?.payState
  }
})

const itemsWidth = (index) => {
  if (index == 2 || index == 5) {
    return 'w-[18%]'
  } else {
    return 'w-[25%]'
  }
}
</script>

<style lang="scss" scoped></style>
