<template>
  <div class="business-opportunity-card-select-stage" ref="selectStageRef">
    <BCBusinessStagePopup v-model="stagePopupData" :isEdit="data.is_edit" :stageList="stage_list"
      :stageFailList="stage_fail_list" :businessOppDetail="businessOppDetail" :is_trial="is_trial" :maxWidth="maxWidth"
      @onClickItem="onClickItem" @onFail="onFail" @onSuccess="onSuccess">
    </BCBusinessStagePopup>
  </div>
</template>

<script lang="ts">
export default {
  name: "SelectStage",
}
</script>
  
<script setup lang="ts">
import { ref, watchEffect, onMounted, nextTick } from "vue";
import BCBusinessStagePopup from "@mobileUI/components/BCBusinessStagePopup/src/index.vue";
type VPartialStagePopupData = Partial<TBusiness.TDefaultStageActionData>;
type Props = {
  is_trial?: boolean;
  modelValue?: string | number;
  data?: TBusiness.TBusinessData;
  stage_list?: TBusiness.TBusinessList[];
  stage_fail_list?: TBusiness.TBusinessList[];
  businessOppDetail?: TBusiness.TBusinessOppData;
};

const props = withDefaults(defineProps<Props>(), {
  is_trial: false,
  modelValue: "",
  data: null,
  stage_list: null,
  stage_fail_list: null,
  businessOppDetail: null
});

const emit = defineEmits<{
  (e: "onClickItem", val: any),
  (e: "onFail", val: any),
  (e: "onSuccess", val: any)
}>()

const maxWidth = ref("");
const selectStageRef = ref(null);
const stagePopupData = ref<VPartialStagePopupData>(null);

watchEffect(() => {
  stagePopupData.value = {
    key: props.modelValue + "",
  };
})

onMounted(() => {
  nextTick(() => {
    maxWidth.value = selectStageRef.value.parentElement.clientWidth
  })
})

const onClickItem = (item) => {
  emit("onClickItem", { ...item, business_data: props.data });
}

const onFail = (val) => {
  emit("onFail", { ...val, business_data: props.data });
}

const onSuccess = (data) => {
  emit("onSuccess", { ...data, business_data: props.data });
}
</script>

