<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="callcode">
            <el-select v-model="form.callcode" filterable placeholder="请选择申请人" @change="userChange" style="width: 214px;">
                <el-option v-for="item in userData" :key="item.userName" :label="item.nickName+'('+item.dept.deptName+')'" :value="item.userName" />
            </el-select>
        </el-form-item>
        <el-form-item label="申请人电话" prop="callnum">
            <el-input v-model="form.callnum" placeholder="请输入申请人电话" />
        </el-form-item>
        
        <el-form-item label="客户数量" prop="patientnum">
            <el-input-number v-model="form.patientnum" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="陪护数量" prop="caresnum">
            <el-input-number v-model="form.caresnum" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="医护数量" prop="doctornum">
            <el-input-number v-model="form.doctornum" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="目的地" prop="destination">
            <el-input v-model="form.destination" />
        </el-form-item>
        <el-form-item label="发车时间" prop="needtime">
            <el-date-picker v-model="form.needtime" type="datetime" placeholder="请选择时间" />
        </el-form-item>
        <el-form-item label="车辆类型" prop="cartype">
            <el-select v-model="form.cartype" filterable placeholder="Select">
                <el-option v-for="item in carTypeData" :key="item.value" :label="item.title" :value="item.title" />
            </el-select>
        </el-form-item>
        <el-form-item label="转运说明" prop="remark">
            <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
        <el-form-item label="是否完结">
            <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 user from '../user.vue';
import { createPageData, editPageData,getPageDetail } from '@/api/main/system/system';

import useSelectStore from '@/store/commonSelect/common';

import moment from 'moment';

const childrenTypes = ref([]);
const orderRef = ref();
const formRef = ref()
const { proxy } = getCurrentInstance();
const userData =ref([])
const carTypeData = ref([])
// do not use same name with ref
const form = ref({
    workordercate:[],   // 工单类型
    callnum: '', // 客户电话 
    callcode: '', // 客户姓名
    patientnum: '', // 客户数量 
    caresnum: '', // 陪护数量
    doctornum: '',   // 医护数量
    destination: '', // 目的地 
    needtime: '', // 发车时间
    cartype: '',   // 车辆类型
    remark: '', // 转运说明 
    isend: false, // 是否完结
})

const rules = reactive({
    workordercate: [
        { required: true, message: '请选择工单类型', trigger: 'blur' },
    ],
    patientnum: [
        { required: true, message: '请输入客户数量', trigger: 'blur' },
    ],
    caresnum: [
        { required: true, message: '请输入陪护数量', trigger: 'blur' },
    ],
    doctornum: [
        { required: true, message: '请输入医护数量', trigger: 'blur' },
    ],
    destination: [
        { required: true, message: '请输入目的地', trigger: 'blur' },
    ],
    needtime: [
        { required: true, message: '请选择发车时间', trigger: 'blur' },
    ],
    cartype: [
        { required: true, message: '请选择车辆类型', trigger: 'blur' },
    ],
    remark: [
        { required: true, message: '请输入转运说明', trigger: 'blur' },
    ]


});
const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => ({}),
    }
});
watch(props, (nweProps) => {
    initMethod(nweProps)
});
onMounted(() => {
  initMethod(props);
});
function getdetail(id) {
    getPageDetail("/order/carworkorder/"+id).then((res)=>{
        const carData=res.data

        form.value.workorderId = carData.carworkorderId
        form.value.workordercode =carData.workordercode
        form.value.firsttype = carData.firsttype
        form.value.customerno = carData.customerno
        form.value.workordercate = Number(carData.workordercate)

        form.value.callnum = carData.callnum
        form.value.callcode = carData.callcode
        form.value.patientnum = carData.patientnum
        form.value.caresnum = carData.caresnum
        form.value.doctornum = carData.doctornum
        form.value.destination = carData.destination
        form.value.needtime = carData.needtime
        form.value.cartype = carData.cartype
        form.value.remark = carData.remark

        form.value.isend = carData.isend
    })
}
function initMethod() {
    childrenTypes.value = useSelectStore().dictOrderTypeList;
    userData.value =  useSelectStore().userData;
    carTypeData.value = useSelectStore().dictCarTypeList;
    console.log(carTypeData.value);
    if (props.orderInfo.workordercode) {
        getdetail(props.orderInfo.workordercode) 
        
    }
    if (props.orderInfo.callId) {
        form.value.callId = props.orderInfo.callId
        form.value.callnum = props.orderInfo.callnum
        
    }
}

// async function customerDetail(customerno) {
//     const resultData = await getPageListData('/patient/patient',{phoneNumber:customerno});
//     form.value.caller =  resultData.data[0].name
// }
function getUserName(callnum) {
    const obj =userData.value.find(function(i){
        return i.phonenumber === val
    });
    form.value.callcode = obj.userName
}
const emit = defineEmits([ "updateSuccess" ]);
function userChange(val) {
    console.log(userData.value);
    const obj =userData.value.find(function(i){
        return i.userName === val
    });
    form.value.callnum = obj.phonenumber

}
const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      
      form.value.customerno = form.value.callnum
      form.value.workordercate = form.value.workordercate[form.value.workordercate.length-1]
      form.value.needtime = moment(form.value.needtime).format('YYYY-MM-DD HH:mm:ss')
      form.value.isend = form.value.isend ?1:0
      if (props.orderInfo.workorderId) {
        editPageData('/order/carworkorder', form.value).then((data) => {
            proxy.$modal.msgSuccess('编辑成功！');
            resetForm()
            emit('updateSuccess');
          });
      }else{
        createPageData('/order/carworkorder', 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>