<template>
  <el-popover 
    ref="popoverRef" 
    placement="bottom" 
    :width="300" 
    @after-enter="afterEnterOrders">
    <div>
      <el-input
        ref="multiOrdersRef"
        v-model="stateMultiOrders.inputMultiOrders"
        :rows="5"
        type="textarea"
        placeholder="请输入单号或以逗号(,)分开，每行一个"
      />
      <div class="text-right">
        <el-button type="danger" link @click="hanlClearOrderIdList">
          清除
        </el-button>
        <el-button type="success" link @click="confirmMultiOrders">
          确定
        </el-button>
      </div>
    </div>
    <template #reference>
      <el-input
        ref="currentInputRef"
        v-model="modelValue[field]"
        placeholder="单号"
        @focus="focusOrderId"
      />
    </template>
  </el-popover>
</template>
<script lang="ts" setup>
import { ref, reactive, unref, nextTick } from "vue";

const props = defineProps<{
  field: string;
  modelValue: Recordable; //当前行的响应数据
}>();
const emit = defineEmits(["update:modelValue", "getMultiOrders"]);

const multiOrdersRef = ref();
const popoverRef = ref();
const stateMultiOrders = reactive({
  inputMultiOrders: "",
  inputOrders: "",
});

// popover显示结束事件
const afterEnterOrders = async () => {
  await nextTick();
  if (!unref(multiOrdersRef)) return;
  await nextTick();
  unref(multiOrdersRef)?.focus();
  if (props.field) {
    stateMultiOrders.inputMultiOrders =
      props.modelValue[props.field].join("\n");
  }
};
// 单号聚焦事件
const focusOrderId = async () => {
  afterEnterOrders();
};
const hanlClearOrderIdList = () => {
  stateMultiOrders.inputMultiOrders = "";
  stateMultiOrders.inputOrders = "";
  emit("getMultiOrders", []);
};
// 确定单号按钮
const confirmMultiOrders = () => {
  const orders = stateMultiOrders.inputMultiOrders.split(/,|，| |\r|\n/);
  const orderIdList = orders.filter((item) => item);
  stateMultiOrders.inputOrders = orders.join(",");
  unref(popoverRef)?.hide()
  emit("getMultiOrders", orderIdList);
};
</script>
<style lang="scss" scoped></style>
