<template>
    <el-form :model="form" ref="orderRef" label-width="150" style="width: 800px" :rules="rules">

        <el-form-item label="工单类型" prop="workordercate">
            <el-cascader v-model="form.workordercate" :props="{value: 'id',}" placeholder="请选择工单类型" :options="childrenTypes" filterable />
        </el-form-item>
        <el-form-item label="客户姓名" prop="caller">
            <el-input v-model="form.caller" placeholder="请输入客户姓名" />
        </el-form-item>
        <el-form-item label="客户电话" prop="callnum">
            <el-input v-model="form.callnum" placeholder="请输入客户电话" />
        </el-form-item>
        
        <el-form-item label="咨询内容" prop="content">
            <el-input v-model="form.content" type="textarea" />
        </el-form-item>
        <el-form-item label="是否完结" prop="delivery">
            <el-switch v-model="form.isend" />
        </el-form-item>
    </el-form>
    <div class="order-layout" style=" width: 100%;">
        <div style="text-align: center; margin: 0 auto; margin-bottom: 100px;">
            <el-button @click="resetForm()">重置</el-button>
            <el-button type="primary" @click="onSubmit(orderRef)">提交</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import useSelectStore from '@/store/commonSelect/common';
import { createPageData, editPageData,getPageListData } from '@/api/main/system/system';
import { getUnprefixNuber } from '@/utils';

const { proxy } = getCurrentInstance();

const childrenTypes = ref([]);
const orderRef = ref();
const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => ({}),
    }
});
const emit = defineEmits([ "updateSuccess" ]);

watch(props, (nweProps) => {
    console.log(nweProps);
    initMethod(nweProps)
});
onMounted(() => {
    initMethod(props)
});
function initMethod(props) {
    childrenTypes.value = useSelectStore().dictOrderTypeList;
    if (props.orderInfo.workordercode) {
        form.value.workorderId = props.orderInfo.workorderId
        form.value.workordercode = props.orderInfo.workordercode
        form.value.firsttype = props.orderInfo.firsttype
        form.value.customerno = props.orderInfo.customerno
        form.value.workordercate = props.orderInfo.workordercate

        form.value.callnum = props.orderInfo.callnum
        form.value.caller = props.orderInfo.caller
        form.value.content = props.orderInfo.content
        form.value.isend = props.orderInfo.isend
    }
    if (props.orderInfo.callId) {
        form.value.callId = props.orderInfo.callId
        form.value.callnum = getUnprefixNuber(props.orderInfo.callnum) 
        customerDetail(form.value.callnum)
    }
}
async function customerDetail(customerno) {
    const resultData = await getPageListData('/patient/patient',{phoneNumber:customerno});
    form.value.caller =  resultData.data[0].name
}
// do not use same name with ref
const form = ref({
    firsttype:1000,
    workordercate: [],   // 工单类型
    callnum: '', // 客户电话 
    caller: '', // 客户姓名
    content: '',   // 咨询内容
    isend: false, // 是否完结 
})

const rules = reactive({
    workordercate: [
        { required: true, message: '请选择工单类型', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ]
});

const onSubmit = (formEl) => {
    if (!formEl) return
   formEl.validate((valid, fields) => {
    if (valid) {
      form.value.firsttype =props.orderInfo.type*1
      form.value.customerno = form.value.callnum
      form.value.workordercate = form.value.workordercate[form.value.workordercate.length-1]
      form.value.isend = form.value.isend ?1:0
      if (props.orderInfo.workorderId) {
        editPageData('/order/workorder', form.value).then((data) => {
            proxy.$modal.msgSuccess('编辑成功！');
            resetForm()
            emit('updateSuccess');
          });
      }else{
        createPageData('/order/workorder', form.value).then((data) => {
            proxy.$modal.msgSuccess('提交成功！');
            resetForm()
            emit('updateSuccess');
        })
      }
      
    } else {
      console.log('error submit!', fields)
    }
  })
}
function resetForm() {
    if (!orderRef.value) return
    orderRef.value.resetFields()
}
</script>