<script setup lang="ts">
import { computed, ref } from "vue"
import { useVModel } from "@vueuse/core"

import { rules } from "./rules"

const props = defineProps<{ visible: boolean; index: number; data: any }>()
const emit = defineEmits(['submit'])

const data = useVModel(props, 'data')
const visible = useVModel(props, 'visible')

const title = computed(() => props.index === -1 ? '添加联系人' : '编辑联系人')
const formRef = ref<any>(null)


async function submit(){
  try{
    await formRef.value.validate()
    emit('submit', props.index)    
    visible.value = false
  }catch(err){
    console.log(err)
  }
}

</script>

<template>
  <ElDialog :title="title" center v-model="visible">
    <ElForm :gutter="10" label-width="80px" :rules="rules" :model="data" ref="formRef">
      <ElRow>
        <ElCol :span="12">
          <ElFormItem label="联系人" prop="contactor">
            <ElInput v-model="data.contactor" placeholder="联系人" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem label="电话" prop="commobile">
            <ElInput  v-model="data.commobile" placeholder="电话" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem label="职位" prop="position">
            <ElInput  v-model="data.position" placeholder="职位" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem label="部门" prop="comdepart">
            <ElInput  v-model="data.comdepart" placeholder="部门" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem label="微信号" prop="wxaccount">
            <ElInput  v-model="data.wxaccount" placeholder="微信号" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem label="QQ" prop="qqaccount">
            <ElInput  v-model="data.qqaccount" placeholder="QQ" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem label="邮箱" prop="email">
            <ElInput  v-model="data.email" placeholder="邮箱" />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <div class="flex justify-end">
            <ElButton type="primary" @click="submit">保存</ElButton>
            <ElButton @click="visible = false">取消</ElButton>
          </div>
        </ElCol>
      </ElRow>
    </ElForm>
  </ElDialog>
</template>
