<template>
  <div class="mul-rf-select-wrap">
    <div class="mul-rf-select" @click="onShow">{{ valueText }}</div>
    <WlPopup position="bottom" round style="height: 50%" @close="onClose" v-model="popUpVisible">
      <div class="mult-select" data-weiling-mobile-ui-rf-mul-select-popup>
        <div class="header" v-if="title">
          <WlHeader showClose @onClose="popUpVisible = false">{{ title }}</WlHeader>
        </div>
        <div class="content">
          <div v-for="item in options" :key="item.key">
            <div class="item" @click.stop="onSelect(item)">
              <p class="text">{{ item.value }}</p>
              <WlRadioIcon
                :isChoosed="choosedKey.includes(item.key)"
                :isHookType="true"
                @onClick="onSelect(item)"
              />
            </div>
          </div>
        </div>
        <div class="footer">
          <WlButton type="primary" block @onClick="onSubmit">确认选择</WlButton>
        </div>
      </div>
    </WlPopup>
  </div>
</template>

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

<script lang="ts" setup>
import { ref, unref, watchEffect } from "vue";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";
import WlButton from "@mobileUI/components/WlButton/src/index.vue";
import WlRadioIcon from "@mobileUI/components/WlRadioIcon/src/index.vue";
type TMulSelect = {
  key: string;
  value: string;
};
type Props = {
  modelValue?: string[];
  options?: TMulSelect[];
  title?: string;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: () => [],
  options: () => [],
});

const emit = defineEmits<{
  (e: "onSelect", val: TMulSelect);
  (e: "update:modelValue", val: string[]);
  (e: "onSubmit", val: string[]);
}>();
const popUpVisible = ref(false);
const choosedKey = ref<string[]>([]);
const valueText = ref("");

const onClose = () => {
  popUpVisible.value = false;
};
const onShow = () => (popUpVisible.value = true);

const onSubmit = () => {
  emit("update:modelValue", unref(choosedKey));
  onClose();
};

const onSelect = (item: TMulSelect) => {
  const index = choosedKey.value.indexOf(item.key);
  if (index === -1) {
    choosedKey.value.push(item.key);
  } else {
    choosedKey.value.splice(index, 1);
  }
  emit("onSelect", item);
};

watchEffect(() => {
  // 深复制，防止在select的时候，choosedkey改变导致父级数据变化
  choosedKey.value = props.modelValue.map((ele) => ele);
  valueText.value = props.options.reduce((pre, cur) => {
    if (props.modelValue.includes(cur.key)) {
      return pre + (pre ? "," + cur.value : cur.value);
    } else {
      return pre;
    }
  }, "");
});
</script>

<style lang="scss">
.render-form[data-weiling-mobile-ui-bc-render-form] {
  .mul-rf-select-wrap {
    width: 100%;
    .mul-rf-select {
      min-height: j(30);
      width: 100%;
      @extend %flex-middle;
    }
  }
}
.mult-select[data-weiling-mobile-ui-rf-mul-select-popup] {
  height: 100%;
  @extend %flex-direction-column;

  .header {
    flex-shrink: 0;
    @include halfBorder("bottom", #eeeeee);
  }

  .content {
    flex: 1;
    overflow: auto;
    height: 100%;
    padding: 0 j(20);
    width: 100%;
    box-sizing: border-box;

    .item {
      cursor: pointer;
      padding: j(14) 0;
      @extend %flex-middle;
      @include halfBorder("bottom", #eeeeee);

      .text {
        flex: 1;
        font-weight: 500;
        font-size: j(16);
        color: #000000;
      }
    }
  }

  .footer {
    flex-shrink: 0;
    padding: j(18) j(20) j(24) j(20);
    @include halfBorder("top", #eeeeee);
  }
}
</style>
