<template>
  <WlPopup v-model="popupVisible" round style="height: 60%" position="bottom">
    <div
      class="success-popup"
      data-weiling-mobile-ui-bc-business-stage-popup-success-popup
    >
      <div class="header">
        <WlHeader showClose @onClose="onClose">赢单信息</WlHeader>
      </div>
      <div class="info-list">
        <div class="line">
          <template v-if="!base_info.is_company">
            <p class="label">签单客户</p>
            <div class="base-info">
              <WlUserGroups
                size="26"
                avatar_offset="-20px"
                :data="base_info.user_avatars"
              />
              <p class="name">{{ base_info.name }}</p>
            </div>
          </template>
          <template v-else>
            <p class="label">签单企业</p>
            <div class="base-info">
              <div class="company_avatar">
                <WlPic :src="base_info.company_avatar" />
              </div>
              <p class="name">{{ base_info.name }}</p>
            </div>
          </template>
        </div>
        <div class="line">
          <p class="label">赢单金额<span>*</span></p>
          <div class="info price">
            <p class="prefix">￥</p>
            <div class="content">
              <WlInput
                v-model="successData.winning_amount"
                :placeholder="pricePlaceholder"
                class="input"
                inputType="number"
                @onBlur="onBlur"
                @onFocus="onFocus"
              />

              <div class="recommand-wrap" v-if="except_amount">
                <RecommendPopover>
                  <div class="recommand">
                    <div class="pre-price">
                      <p class="text">预计成交金额：</p>
                      <p class="num">{{ successData.except_amount_text }}元</p>
                    </div>
                    <div class="add-price" @click.stop="onClickPrice">
                      <p>填入</p>
                    </div>
                  </div>
                </RecommendPopover>
              </div>
            </div>
            <p class="suffix">元</p>
          </div>
        </div>

        <div class="line">
          <p class="label">赢单日期<span>*</span></p>
          <div class="info date" @click.stop="onShowCalendar">
            <div class="prefix">
              <div class="icon">
                <WlPic :src="calendar_icon" />
              </div>
            </div>
            <div class="content">
              {{ successData.dateText }}
              <span v-show="!successData.dateText" class="placeholder"
                >请选择日期</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <WlButton class="btn canel" @onClick="onClose" pain>取消</WlButton>
        <WlButton
          class="btn confirm"
          :disabled="!submit_bnt_disabled"
          @onClick="onSubmit"
          >确定</WlButton
        >
      </div>
    </div>
  </WlPopup>
  <Calendar
    color="rgb(28,159,255)"
    :min-date="minDate"
    :max-date="maxDate"
    v-model:show="calendarVisible"
    @confirm="onSelectDate"
  />
</template>

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

<script setup lang="ts">
import { Calendar } from "vant";
import WlPic from "@mobileUI/components/WlPic";
import WlInput from "@mobileUI/components/WlInput";
import WlHeader from "@mobileUI/components/WlHeader";
import WlButton from "@mobileUI/components/WlButton";
import { formatMoment } from "@mobileUI/utils/dayjs";
import { ref, computed, watchEffect, watch } from "vue";
import RecommendPopover from "../RecommendPopover/index.vue";
import WlUserGroups from "@mobileUI/components/WlUserGroups";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";
import { calendar_icon, en_default_logo } from "@mobileUI/utils/cdn";
import { toRaw } from "vue";

type VBusinessOppFilterData = TBusiness.TBusinessOppData & {
  except_amount_text: string;
  dateText: string;
};

type Props = {
  modelValue?: boolean;
  data?: TBusiness.TBusinessOppData;
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  data: null,
});

const emit = defineEmits<{
  (e: "update:modelValue", val: boolean);
  (e: "onSubmit", val: TBusiness.TBusinessOppData);
}>();

const popupVisible = ref(false);
const calendarVisible = ref(false);
const pricePlaceholder = ref("");
const recommendPopoverVisible = ref(true);
const currentYear = new Date().getFullYear();
const minDate = ref<Date>(new Date(currentYear - 2, 1, 1));
const maxDate = ref<Date>(new Date(currentYear + 2, 12, 31));
const successData = ref<VBusinessOppFilterData>(null);

const base_info = computed(() => {
  const { company_info = null, customers = [] } = props.data || {};
  const { company_name = "", image_url = "" } =
    company_info || ({} as TBusiness.TCompanyInfo);
  const { nick_name = "" } =
    customers && customers.length > 0 ? customers[0] : {};
  const user_name =
    customers.length > 1 ? `${nick_name}等${customers.length}人` : nick_name;
  const urls = customers.slice(0, 3).map((ele) => {
    const { head_img_url = "" } = ele;
    return { avatar: head_img_url, ...ele };
  });
  return {
    is_company: !!company_info,
    name: company_info ? company_name : user_name,
    company_avatar: image_url || en_default_logo,
    user_avatars: urls,
  };
});

const submit_bnt_disabled = computed(() => {
  const { winning_date = "", winning_amount = "" } = successData.value;
  return !!(winning_date && winning_amount);
});

const except_amount = computed(() => {
  const { except_amount = "" } = props.data || {};
  return except_amount && recommendPopoverVisible.value;
});

watch(
  () => popupVisible.value,
  (val) => emit("update:modelValue", val),
);

watchEffect(() => {
  popupVisible.value = !!props.modelValue;
});

watchEffect(() => {
  const { winning_date = "", except_amount = "" } = props.data || {};
  let dateText = "";
  if (winning_date) {
    dateText = formatMoment(winning_date, "YYYY-MM-DD");
  } else {
    dateText = formatMoment(new Date().getTime(), "YYYY-MM-DD");
  }
  successData.value = {
    winning_amount: "",
    ...props.data,
    except_amount_text: except_amount,
    dateText,
    winning_date: winning_date || new Date().getTime(),
  };
});

const onShowCalendar = () => {
  calendarVisible.value = true;
};

const onClose = () => (popupVisible.value = false);

const onSelectDate = (date) => {
  const time = date.getTime();
  successData.value = {
    ...successData.value,
    winning_date: time,
    dateText: formatMoment(time, "YYYY-MM-DD"),
  };
  calendarVisible.value = false;
};

const onSubmit = () => {
  emit("onSubmit", toRaw(successData.value));
};

const onClickPrice = () => {
  const { except_amount = "" } = props.data;
  successData.value = {
    ...successData.value,
    winning_amount: except_amount,
  };
  recommendPopoverVisible.value = false;
};

const onBlur = () => (pricePlaceholder.value = "请输入金额");

const onFocus = () => (pricePlaceholder.value = "0.00");
</script>

<style lang="scss">
.success-popup[data-weiling-mobile-ui-bc-business-stage-popup-success-popup] {
  height: 100%;
  @extend %flex-direction-column;

  .header {
    @include halfBorder("bottom", rgba(238, 238, 238, 1));
  }

  .header,
  .footer {
    flex-shrink: 0;
  }

  .info-list {
    padding: j(16) j(24);
    flex: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    @extend %overflow-auto;

    .base-info {
      @extend %flex-middle;

      .company_avatar {
        width: j(31);
        height: j(31);
        border-radius: j(6);
      }

      .name {
        margin-left: j(6);
        font-size: j(14);
        color: #0e0e0e;
      }
    }

    .line {
      margin-bottom: j(16);
      @extend %flex-direction-column;

      .label {
        font-size: j(15);
        color: var(--wl-text-color-primary-3);
        margin-bottom: j(8);

        span {
          display: inline-block;
          font-size: j(16);
          color: rgba(252, 0, 0, 0.76);
          margin-left: j(6);
        }
      }

      .date,
      .price {
        border: j(1) solid var(--wl-line-color-dark);
        border-radius: j(6);
        height: j(40);
        position: relative;
        @extend %flex-middle;

        .content {
          padding: 0 16px;
          flex: 1;

          .recommand-wrap {
            position: absolute;
            right: 0;
            top: 0;
            transform: translateY(calc(-100% - 3px));

            .recommand {
              height: calc(100% - 0.05rem);
              @extend %flex-middle;

              .pre-price {
                flex: 1;
                font-size: j(14);
                height: 100%;
                box-sizing: border-box;
                padding-left: j(14);
                @extend %flex-direction-column;
                justify-content: center;

                .text {
                  color: var(--wl-text-color-secondary-2);
                }
              }

              .add-price {
                flex-shrink: 0;
                font-weight: 500;
                color: var(--wl-primary-color);
                box-sizing: border-box;
                @extend %flex-middle-center;

                p {
                  margin: j(16) 0;
                  padding: 0 j(11);
                  border-left: 1px solid rgba(28, 159, 255, 0.2);
                }
              }
            }
          }

          .placeholder {
            font-weight: 450;
            font-size: 14px;
            color: rgb(211, 211, 214);
          }
        }

        .input {
          height: 100%;
          padding: 0;
          width: 100%;
        }

        .prefix,
        .suffix {
          flex-shrink: 0;
          color: var(--wl-text-color-primary-2);

          .icon {
            width: j(12);
            height: j(12);
          }
        }

        .prefix {
          height: 100%;
          width: j(36);
          font-weight: 500;
          font-size: j(16);
          border-right: 1px solid var(--wl-line-color-dark);
          @extend %flex-middle-center;
        }

        .suffix {
          font-weight: 400;
          font-size: j(14);
          width: j(41);
          border-left: 1px solid var(--wl-line-color-dark);
          @extend %flex-middle-center;
          @include halfBorder("left", j(9));
        }
      }
    }
  }

  .footer {
    padding: j(12) j(19) j(20) j(19);
    background: #ffffff;
    border: j(1) solid #eeeeee;
    box-sizing: border-box;
    box-shadow: 0px j(-4) j(12) rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(9);
    border-radius: j(12) j(12) 0px 0px;
    width: 100%;
    @extend %flex-middle-center;

    .btn {
      flex: 1;
      height: j(42);
      border-radius: j(8);
      font-size: j(15);
      font-weight: 500;
    }

    .canel {
      margin-right: j(16);
      background-color: white;
      color: rgba(91, 91, 91, 1);
      border: 1px solid rgba(238, 238, 238, 1);
    }
  }
}
</style>
