<template>
  <div
    @click.stop
    class="bo-stage"
    data-weiling-mobile-ui-bc-business-stage-popup
  >
    <template v-if="isEdit">
      <WlPopover
        v-model="actionVisible"
        trigger="click"
        placement="bottom-start"
      >
        <div
          class="business-opportunity-status-popover"
          data-weiling-mobile-ui-bc-business-stage-popup-content
          :style="popover_style"
        >
          <div
            v-for="(parent, index) in business_opportunity_stage_list"
            :key="index"
            class="list"
          >
            <div class="list-item">
              <div
                class="item-wrap"
                v-for="(item, index) in parent"
                :key="item.key"
                @click.stop="onClickItem(item)"
              >
                <div class="item" :style="item_style(item)">
                  {{ item.value }}
                </div>
                <div class="arrow" v-if="index !== parent.length - 1">
                  <WlPic :src="arrow_trg_icon" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #reference>
          <div class="info" :style="info_style">
            <p>
              {{ info_text }}
            </p>
            <div class="icon">
              <WlPic :src="select_plat_icon" />
            </div>
          </div>
        </template>
      </WlPopover>
    </template>
    <div v-else class="info" :style="info_style">
      <p>
        {{ info_text }}
      </p>
    </div>
    <Suspense v-if="failPopupVisible">
      <template #default>
        <FailPopup
          v-model="failPopupVisible"
          :list="fail_list"
          @onConfirmField="onFailConfirm"
          @onConfirm="onFailConfirm"
        />
      </template>
    </Suspense>
    <Suspense v-if="successPopupVisibe">
      <template #default>
        <SucessPopup
          v-model="successPopupVisibe"
          :data="businessOppDetail"
          @onSubmit="onPopupSuccess"
        />
      </template>
    </Suspense>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCBusinessStagePopup",
};
</script>

<script setup lang="ts">
import { computed, ref, markRaw, defineAsyncComponent } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import WlPopover from "@mobileUI/components/WlPopover/src/index.vue";
import { select_plat_icon, arrow_trg_icon } from "@mobileUI/utils/cdn";

const FailPopup = markRaw(
  defineAsyncComponent(() => import("./components/FailPopup/index.vue")),
);
const SucessPopup = markRaw(
  defineAsyncComponent(() => import("./components/SucessPopup/index.vue")),
);
const default_color = "#6236FF";
const default_background_color = "#F6F0FF";
const stage_base_setting = {
  "4": {
    color: "rgba(98, 54, 255, 1)",
    backgroundColor: "rgba(246, 240, 255, 1)",
  },
  "2": {
    color: "rgba(98, 54, 255, 1)",
    backgroundColor: "rgba(246, 240, 255, 1)",
  },
  "100": {
    color: "rgba(255, 69, 69, 1)",
    type: "success",
    backgroundColor: "rgba(255, 242, 240, 1)",
  },
  "99": {
    color: "rgba(137, 138, 141, 1)",
    type: "fail",
    backgroundColor: "rgba(242, 242, 242, 1)",
  },
};
type VPartialStagePopupData = Partial<TBusiness.TDefaultStageActionData>;
type Props = {
  modelValue: VPartialStagePopupData;
  businessOppDetail: TBusiness.TBusinessOppData;
  isEdit: boolean;
  stageList: TBusiness.TBusinessList[];
  stageFailList: TBusiness.TBusinessList[];
  maxWidth?: number | string;
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  businessOppDetail: null,
  isEdit: true,
  stageList: null,
  stageFailList: null,
  maxWidth: null,
});

const emit = defineEmits<{
  (e: "onClickItem", val: Pick<TBusiness.TStageActionData, "stage">);
  (e: "onFail", val: TBusiness.TDefaultStageActionData);
  (e: "onSuccess", val: TBusiness.TStageActionData);
  (e: "update:modelValue", val: TBusiness.TDefaultStageActionData);
}>();

const successPopupVisibe = ref(false);
const failPopupVisible = ref(false);
const actionVisible = ref(false);
const stageData = ref<TBusiness.TDefaultStageActionData>(null);

const filterData = (list, key): TBusiness.TDefaultStageActionData => {
  let data = null;
  for (let i = 0; i < 2; i++) {
    const stage = list[i];
    const len = stage.length;
    for (let i = 0; i < len; i++) {
      const ele = stage[i];
      if (ele.key == key) {
        data = ele;
      }
    }
  }
  return data;
};

const item_style = computed(() => {
  return function (item) {
    const { key = "" } = props.modelValue;
    const { key: itemKey } = item;
    const is_select = key === itemKey;
    return {
      "--color": is_select ? item.color : "rgba(0, 0, 0, 1)",
      "--backgroundColor": is_select ? item.backgroundColor : "transparent",
    };
  };
});

const info_style = computed(() => {
  const { value = "", key = "" } = props.modelValue;
  if (value) {
    const setting = stage_base_setting[key + ""];
    const {
      color = default_color,
      backgroundColor = default_background_color,
    } = setting || {};
    return {
      "--color": color,
      "--backgroundColor": backgroundColor,
    };
  } else if (key) {
    const data = filterData(business_opportunity_stage_list.value, key);
    const {
      color = default_color,
      backgroundColor = default_background_color,
    } = data || {};
    return {
      "--color": color,
      "--backgroundColor": backgroundColor,
    };
  }
  return {};
});

const info_text = computed(() => {
  const { value = "", key = "" } = props.modelValue;
  if (value) {
    return value;
  } else if (key) {
    const data = filterData(business_opportunity_stage_list.value, key) || {};
    return data.value;
  }
  return "";
});

const business_opportunity_stage_list = computed(() => {
  const fail_list = props.stageFailList || [];
  const list_len = props.stageList?.length;
  let list = [];
  let last_list = [];
  for (let i = 0; i < list_len; i++) {
    const ele = props.stageList[i];
    const { key = "" } = ele;
    if (key + "" === "99") {
      last_list.push({
        ...ele,
        fail_list,
        ...stage_base_setting[key],
      });
    } else {
      const setting = stage_base_setting[key] || {
        color: default_color,
        backgroundColor: default_background_color,
      };
      list.push({
        fail_list,
        ...ele,
        ...setting,
      });
    }
  }
  return [list, last_list];
});

const fail_list = computed(() => {
  const fail_list = (props.stageFailList ?? []).map((ele) => {
    return {
      ...ele,
      name: ele.value,
      type: ele.key + "" === "99" ? "ipt" : "",
    };
  });
  return fail_list;
});

const popover_style = computed(() => {
  if (!props.maxWidth) return {};
  if (typeof props.maxWidth === "number") {
    return {
      "max-width": props.maxWidth + "px",
    };
  }
  return {
    "max-width": props.maxWidth,
  };
});
const onClickItem = (item) => {
  const { type = "" } = item;
  stageData.value = item;
  emit("onClickItem", { stage: item });
  actionVisible.value = false;
  if (type === "success") {
    successPopupVisibe.value = true;
    failPopupVisible.value = false;
  } else if (type === "fail") {
    successPopupVisibe.value = false;
    failPopupVisible.value = true;
  } else {
    emit("update:modelValue", item);
    failPopupVisible.value = false;
    successPopupVisibe.value = false;
  }
};
const onFailConfirm = (data) => {
  emit("onFail", { ...data, stage: stageData.value });
  successPopupVisibe.value = false;
  failPopupVisible.value = false;
  emit("update:modelValue", stageData.value);
};
const onPopupSuccess = (data: TBusiness.TBusinessOppData) => {
  emit("onSuccess", { stage_value: data, stage: stageData.value });
  successPopupVisibe.value = false;
  failPopupVisible.value = false;
  emit("update:modelValue", stageData.value);
};
</script>
<style lang="scss">
.bo-stage[data-weiling-mobile-ui-bc-business-stage-popup] {
  display: inline-block;
  cursor: pointer;

  .info {
    padding: j(7) j(8);
    border-radius: 999px;
    color: var(--color);
    background-color: var(--backgroundColor);
    box-sizing: border-box;
    min-width: j(110);
    width: auto;
    @extend %flex-middle;

    p {
      flex: 1;
      text-align: center;
      width: 100%;
      @include textEllipsis(1);
    }
    .info-name {
      flex: 1;
      text-align: center;
      width: 100%;
      .text-wrap {
        min-width: 100%;
      }
    }

    .icon {
      width: j(16);
      height: j(15);
      flex-shrink: 0;
      color: rgba(193, 193, 193, 1);
    }
  }
}

.business-opportunity-status-popover[data-weiling-mobile-ui-bc-business-stage-popup-content] {
  background: #ffffff;
  box-shadow: 0px 0px j(6) rgba(0, 0, 0, 0.1);
  border-radius: j(8);
  padding: j(8);
  max-height: j(300);
  overflow: auto;
  max-width: 100%;
  box-sizing: border-box;

  .list {
    &:not(:last-child) {
      padding-bottom: j(10);
      @include halfBorder("bottom", rgba(220, 225, 229, 1), j(7), j(7));
    }

    &:not(:first-child) {
      padding-top: j(8);
    }

    .list-item {
      .item-wrap {
        @extend %flex-direction-column;
        @extend %flex-middle-center;

        .item {
          min-width: j(94);
          font-size: j(14);
          border-radius: j(4);
          color: var(--color);
          background-color: var(--backgroundColor);
          text-align: center;
          padding: j(7) j(17);
          box-sizing: border-box;
          width: 100%;
          cursor: pointer;
          @extend %flex-middle-center;

          &:not(:last-child) {
            margin-bottom: j(4);
          }

          p {
            @include textEllipsis(10);
          }
        }

        &:not(:first-child) {
          margin-top: j(4);
        }

        .arrow {
          width: j(12);
          height: j(8);
        }
      }
    }
  }
}
</style>
