<template>
  <div class="bc-edit-mobile" data-weiling-mobile-ui-bc-edit-mobile>
    <div class="mobile-list">
      <template v-for="(item, index) in inputValueArr">
        <div class="mobile-item">
          <div @click="onDelete(index)" class="icon">
            <WlSvgIcon type="prohibitFill" width="18" height="18" color="#919699" />
          </div>
          <div class="input-wrap text">
            <WlInput
              :need-debounce="false"
              v-model="inputValueArr[index]"
              clearable
              @onChange="onChange"
            />
          </div>
        </div>
      </template>
    </div>
    <div v-if="need_add" class="mobile-item" @click="onAdd">
      <div class="icon">
        <WlSvgIcon type="add" width="18" height="18" color="#919699" />
      </div>
      <div class="text add">
        <p class="add-text">添加手机号</p>
      </div>
    </div>
  </div>
</template>

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

<script lang="ts" setup>
import { ref, unref } from "vue";
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";
import WlInput from "@mobileUI/components/WlInput/src/index.vue";
type Props = {
  data: string[];
  need_add?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  need_add: true,
  data: () => [],
});
const emit = defineEmits<{
  (e: "update:data", val: string[]);
}>();

const inputValueArr = ref<string[]>(props.data);

const onChange = () => {
  emit("update:data", unref(inputValueArr));
};

const onDelete = (index) => {
  inputValueArr.value = inputValueArr.value.splice(index, 1);
};

const onAdd = () => {
  // 如果最后一个输入框没有数据，才进行添加
  if (inputValueArr.value[inputValueArr.value.length - 1]) {
    inputValueArr.value.push("");
  }
};
</script>

<style lang="scss">
.bc-edit-mobile[data-weiling-mobile-ui-bc-edit-mobile] {
  background-color: #f6f6f6;
  border-radius: j(8);

  .mobile-item {
    @extend %flex-middle;
    padding-right: j(10);

    .icon {
      padding: 0 j(20) 0 j(16);
      font-size: j(20);
      cursor: pointer;
    }

    .reduce {
      color: rgba(255, 86, 77, 1);
    }

    .add {
      color: rgba(28, 159, 255, 1);
    }

    .text {
      flex: 1;
      padding: j(3);
      font-weight: 400;
      font-size: j(17);
      color: var(--wl-text-color-title-2);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .add {
      border-bottom: 1px solid transparent;

      .add-text {
        min-height: j(44);
        width: 100%;
        border-bottom: none;
        @extend %flex-middle;
      }
    }
  }
}
</style>
