<template>
  <el-dialog v-model="show" width="804px" top="10vh" :close-on-click-modal="false" :before-close="beforeClose">
    <template #header>
      <GapTitle title="手动下发"></GapTitle>
    </template>
    <div class="manual-distribution">
      <Form :history="history" ref="form" />
    </div>
    <template #footer>
      <el-button size="default" @click="Close">关闭</el-button>
      <el-button type="primary" size="default" @click="Submit"> 立即下发 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import GapTitle from "@/components/gap-title.vue";
import Form from "./form.vue";
import { computed, nextTick, ref, watch } from "vue";
const props = defineProps({
  // 显示隐藏开关
  visible: {
    type: Boolean,
    default: false,
  },
  //   关闭前调用
  beforeClose: {
    type: Function,
    default: null,
  },
  //   默认数据展示
  row: {
    type: Object,
    default: null,
  },
});
const history = computed(() => {
  /* 
  {
    methd:['1','2'],
    lists:[
        {
            user_id:'1111',
            user_name:'11111111',
            phone:'13011111111'
        }
    ]
  }
  */
  return props.row?.history || null;
});
const emits = defineEmits(["update:visible"]);
const form = ref(null);
// 关闭调用
const Close = async () => {
  form.value.form_ref.resetFields();
  emits("update:visible", false);
};
const show = computed({
  get() {
    return props.visible;
  },
  set() {
    Close();
  },
});
// 监听是否开启弹窗，并将已经填写的数据配置
watch(
  () => show.value,
  async (n) => {
    if (!n) return;
    await nextTick();
  },
  {
    immediate: true,
  }
);
// 关闭前调用
const beforeClose = () => {
  props.beforeClose && props.beforeClose();
  Close();
};
// 立即下发
const Submit = async () => {
  let form_valid = await form.value.Submit();
  if (!form_valid) return;
  let res = { ...form.value.form };
  console.log("res: ", res);
  await nextTick();
  Close();
};
</script>
<style lang="scss" scoped>
.manual-distribution {
  text-align: left;
  padding: 16px 16px 0;
}
</style>
