<template>
  <uv-popup ref="popup" mode="bottom" @change="popupChange" v-if="showComponents">
    <view class="step-content">
      <uv-steps :current="info.active" dot direction="column" v-if="info.type === 0">
        <uv-steps-item title="创建完成" active-color="#95dc7e" :customStyle="customStyle">
          <template v-slot:title>
            <text class="content-item">创建完成</text>
          </template>
        </uv-steps-item>
        <uv-steps-item v-if="showStep2">
          <template v-slot:title>
            <text class="content-item">{{ info.title1 }}</text>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">待区域管理员分发</text>
          </template>
        </uv-steps-item>
        <uv-steps-item title="审核通过待下发">
          <template v-slot:title>
            <text class="content-item">审核通过待下发</text>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">审核通过已下发</text>
          </template>
        </uv-steps-item>
      </uv-steps>
      <uv-steps
        :current="info.active"
        dot
        direction="column"
        active-color="#95dc7e"
        inactive-color="#999"
        v-if="info.type === 1"
      >
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">创建完成</text>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">{{ info.title2 }}</text>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">{{ info.title3 }}</text>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">待区域管理员拆解审核</text>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">待商务管理员拆解审核</text>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">待事业部分管领导拆解审核</text>
          </template>
        </uv-steps-item>
        <uv-steps-item>
          <template v-slot:title>
            <text class="content-item">拆解完成</text>
          </template>
        </uv-steps-item>
      </uv-steps>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const showComponents = ref(false)

const customStyle = {
  height: '120rpx'
}

const popup = ref()

const showStep2 = ref(true)

const info = reactive({
  title1: '待营销中心分管领导审批',
  title2: '待运营管理员分发审核',
  title3: '待服务商管理员拆解',
  active: 1,
  type: 0
})

const show = (item: any) => {
  showComponents.value = true
  info.type = item.parentId === 0 ? 0 : 1
  info.title1 = '待营销中心分管领导审批'
  info.title2 = '待运营管理员分发审核'
  info.title3 = '待服务员管理员拆解'
  info.active = 1

  if (item.parentId == 0) {
    showStep2.value = item.planType === 'QRT' ? false : true

    if (item.planState === 'PASSED') {
      if (!item.children) {
        info.active = 2
      } else {
        info.active = item.execScoreValue > 0 ? 5 : 3
      }
    } else if (item.planState === 'REJECTED') {
      info.title1 = '营销中心分管领导拒绝'
    }
  } else {
    if (item.planState === 'PASSED') {
      if (!item.planDetails) {
        info.active = 2
      } else {
        switch (item.planDetails.detailsState) {
          case 'INIT':
            info.active = 3
            break
          case 'CKT1':
            info.active = 4
            break
          case 'CKT2':
            info.active = 5
            break
          case 'PASSED':
            info.active = 7
            break
          case 'REJECTED':
            info.active = 2
            info.title3 = '拆解审核失败，待服务员管理员重新拆解'
            break
          default:
            break
        }
      }
    } else if (item.planState === 'REJECTED') {
      info.title2 = '运营管理员分发审核拒绝'
    }
  }

  setTimeout(() => {
    popup.value.open()
  }, 250)
}

const popupChange = (flag: any) => {
  if (!flag.show) {
    showStep2.value = true
    showComponents.value = false
  }
}

defineExpose({ show })
</script>

<style lang="scss" scoped>
.step-content {
  height: 80vh;
  padding: 30rpx;
}
.content-item {
  height: 120rpx;
}
:deep(.uv-steps-item__line) {
  height: 120rpx !important;
}
</style>
