<template>
  <div class="bo-stage-popup a-row" ref="stageRef" @click.stop>
    <BCBusinessStagePopup
      v-model="stageValue"
      :isEdit="listItem?.isEdit || false"
      :stageList="stageList"
      :stageFailList="stageFailList"
      :businessOppDetail="businessOppDetail"
      :maxWidth="maxWidth"
      @onClickItem="onClickItem"
      @onFail="onFail"
      @onSuccess="onSuccess"
    />
    <span class="uno-ml-6" v-if="dataIsArray && data.length > 1">{{
      `共${data.length}个`
    }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect, computed, onMounted, nextTick } from "vue";
import BCBusinessStagePopup from "@mobileUI/components/BCBusinessStagePopup/src/index.vue";
import Api from "../../api/index";
import { typeDetection } from "../../hooks/utils";
import {
  VCardItem,
  VOnChickItemParams,
  VFailParams,
  VSuccessParams,
  VStageList,
} from "../../types/interface";

interface Props {
  data: any;
  listItem: VCardItem;
  fieldConfig: any;
  tenantConfig: any;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => {
    return {};
  },
  listItem: () => {
    return {
      isEdit: false,
    };
  },
  fieldConfig: () => {
    return {};
  },
  tenantConfig: () => {
    return {};
  },
});

const emit = defineEmits<{
  (e: "onClickItem", val: VOnChickItemParams): void;
  (e: "onFail", val: VFailParams): void;
  (e: "onSuccess", val: VSuccessParams): void;
}>();

/* v-model */
let stageValue = ref<VStageList>();
const dataIsArray = computed(() => {
  return typeDetection(props.data) === "array";
});
watchEffect(() => {
  if (props.data) {
    if (dataIsArray.value) {
      stageValue.value = { key: props.data[0]?.stage.toString() };
      return;
    }
    stageValue.value = { key: props.data.toString() };
  }
});

/* 商机阶段列表 */
const stageList = computed((): VStageList => {
  return props.tenantConfig["business_stage"];
});
const stageFailList = computed((): VStageList => {
  return props.tenantConfig["business_fail_reason"];
});

/* 点击商机阶段 */
const businessOppDetail = ref({});
const onClickItem = async (params: VOnChickItemParams) => {
  if (!params.stage.type) {
    emit("onClickItem", params);
    props.listItem.on?.onClickItem(params);
  } else if (params.stage.type == "success") {
    const { data } = await Api.getBusinessDetail({
      business_id: props.listItem?.businessId,
    });
    businessOppDetail.value = data;
  }
};

/* 确认丢单 */
const onFail = (params: VFailParams) => {
  emit("onFail", params);
  props.listItem.on?.onFail(params);
};

/* 确认赢单 */
const onSuccess = (params: VSuccessParams) => {
  emit("onSuccess", params);
  props.listItem.on?.onSuccess(params);
};

/* 获取最大宽度 */
const stageRef = ref(null);
const maxWidth = ref<number>();
onMounted(() => {
  nextTick(() => {
    maxWidth.value = stageRef.value.scrollWidth;
  });
});
</script>

<style lang="scss">
.bo-stage-popup {
  display: flex;
  align-items: center;
  .bo-stage {
    .info {
      min-width: auto;
      padding: j(2) j(12);
    }

    .icon {
      margin-left: j(4);
    }
  }
  .a-row {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
  }
}
</style>
