<template>
  <div>
    <WlActionSheet
      v-model="popupVisible"
      :actions="list"
      cancel-text="取消"
      :selectedClose="false"
      teleport="body"
      close-on-click-action
      @cancel="popupVisible = false"
      @select="onSelect"
    >
    </WlActionSheet>
    <WlPopup
      position="bottom"
      round
      v-model="fieldVisible"
      style="height: fit-content"
      @onClose="onCloseField"
    >
      <div
        class="fail-popup"
        data-weiling-mobile-ui-bc-business-stage-popup-fail-popup
      >
        <div class="header">
          <WlHeader :showBack="false">
            <p>其他</p>
            <template v-slot:header_part_left>
              <p class="canel" @click.stop="onCloseField">取消</p>
            </template>
            <template v-slot:header_part_right>
              <p
                class="confirm"
                :style="`color: ${message ? '' : 'var(--wl-text-color-placeholder)'}`"
                @click.stop="onConfirmField"
              >
                完成
              </p>
            </template>
          </WlHeader>
        </div>
        <div class="wl-textarea-wrap">
          <WlTextarea
            class="wl-textarea"
            v-model="message"
            rows="2"
            autosize
            autofocus
            type="textarea"
            :maxlength="50"
            placeholder="请输入丢单原因（必填）"
            show-word-limit
          />
        </div>
      </div>
    </WlPopup>
  </div>
</template>

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

<script setup lang="ts">
import { showConfirmDialog } from "vant";
import { ref, watch, watchEffect } from "vue";
import type { ActionSheetAction } from "vant";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";
import WlHeader from "@mobileUI/components/WlHeader/src/index.vue";
import WlTextarea from "@mobileUI/components/WlTextarea/src/index.vue";
import WlActionSheet from "@mobileUI/components/WlActionSheet/src/index.vue";

type Props = {
  modelValue?: boolean;
  list?: ActionSheetAction[];
};

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

type TStageActionFilterData = Pick<TBusiness.TStageActionData, "stage_value">;

const emit = defineEmits<{
  (e: "onConfirm", val: TStageActionFilterData);
  (e: "onConfirmField", val: TStageActionFilterData);
  (e: "update:modelValue", val: boolean);
}>();

const message = ref("");
const fieldVisible = ref(false);
const fieldItemData = ref(null);
const popupVisible = ref(false);

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

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

const onSelect = (item) => {
  const { type = "" } = item;
  if (type === "ipt") {
    fieldVisible.value = true;
    fieldItemData.value = item;
  } else {
    showConfirmDialog({
      message: "确认丢单",
      title: "",
      confirmButtonColor: "rgba(255, 69, 69, 1)",
    }).then(() => {
      emit("onConfirm", { stage_value: item });
    });
  }
};

const onCloseField = () => {
  fieldVisible.value = false;
  popupVisible.value = false;
};

const onConfirmField = () => {
  if (!message.value) return;
  showConfirmDialog({
    message: "确认丢单",
    title: "",
    confirmButtonColor: "rgba(255, 69, 69, 1)",
  }).then(() => {
    emit("onConfirmField", {
      stage_value: {
        fail_reason_desc: message.value,
        ...fieldItemData.value,
      },
    });
    fieldVisible.value = false;
    popupVisible.value = false;
  });
};
</script>

<style lang="scss">
.fail-popup[data-weiling-mobile-ui-bc-business-stage-popup-fail-popup] {
  .header {
    .canel {
      font-size: j(16);
      color: #0e0e0e;
      padding-left: j(16);
    }

    .confirm {
      font-size: j(16);
      color: rgba(28, 159, 255, 1);
      padding-right: j(16);
    }
  }

  .wl-textarea-wrap {
    padding: j(10) j(10) j(50) j(10);

    .wl-textarea {
      padding: j(10);
      border: 1px solid var(--wl-line-color-dark);
      box-sizing: border-box;
      border-radius: j(6);
    }
  }
}
</style>
