<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { SalespersonButtom } from '@/components/SalespersonList'
import { DesignerButtom } from '@/components/designerList'
import { WorkerButtom } from '@/components/WorkerList'
import  { ElButton,ElMessage} from 'element-plus'
import { assignSalesman,assignDesigner,assignWorker} from '@/api/order'

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})
//
// const ishidden = computed(() => props.currentRow?.type === 1)

const menu = [
  {
    field: 'real_name',
    label: '用户'
  },
  {
    field: 'phone',
    label: '联系方式'
  },
  {
    field: 'address',
    label: '地址',
	span: 24,
  },
  {
    field: 'store.name',
    label: '门店',
	span: 24,
  },
  {
    field: 'salesperson',
    label: '业务员',
	span: 24,
	slots: {
		default: (data)=> {
			if(data.salesperson_id) {
				return (
					<>{data.salesperson.name}</>
				)
			}else if(data.step <= 3){
				return (
				  <>
				    <SalespersonButtom
				      v-model={data.salesperson_id}
				      onChange={(res) => {
				        checkedSalesperson(res)
				      }}
				    ></SalespersonButtom>
					 <ElButton type="primary"  style="margin-left: 10px;" onClick={()=> setSalesperson()}>确定</ElButton>
				  </>
				)
			}else {
				return (
				<></>
				)
			}
			
		}
	}
  },
  {
    field: 'designer',
    label: '设计师',
	span: 24,
	slots: {
		default: (data)=> {
			if(data.designer_id > 0) {
				return (
					<>{data.designer.name}</>
				)
			}else if(data.step == 1){
				return (
				  <>
				    <DesignerButtom
				      v-model={data.designer_id}
				      onChange={(res) => {
				        checkedDesigner(res)
				      }}
				    ></DesignerButtom>
					 <ElButton type="primary"  style="margin-left: 10px;" onClick={()=> setDesigner()}>确定</ElButton>
				  </>
				)
			}else {
				return (
				<></>
				)
			}
			
		}
	}
  },
  {
    field: 'worker',
    label: '安装工',
	span: 24,
	slots: {
		default: (data)=> {
			if(data.worker_id > 0) {
				return (
					<>{data.worker.name}</>
				)
			}else if(data.step == 3){
				return (
				  <>
				    <WorkerButtom
				      v-model={data.worker_id}
				      onChange={(res) => {
				        checkedWorker(res)
				      }}
				    ></WorkerButtom>
					 <ElButton type="primary"  style="margin-left: 10px;" onClick={()=> setWorker()}>确定</ElButton>
				  </>
				)
			}else {
				return (
				<></>
				)
			}
			
		}
	}
  },
  {
    field: 'price',
    label: '金额'
  },
  {
    field: 'area',
    label: '面积'
  },
  {
    field: 'area',
    label: '面积'
  },
  {
    field: 'add_time',
    label: '创建时间'
  },
  {
    field: 'mark',
    label: '备注',
	span: 24,
  },
]
const salesperson = ref({})
const designer = ref({})
const worker = ref({})
const emit = defineEmits(['checkedSalesperson','checkedWorker','checkedDesigner']) // 定义事件

const setSalesperson = async () => {
	console.log(props.currentRow.id)
	if(!salesperson.value.id) return ElMessage.error('请选择业务员');
	await assignSalesman(props.currentRow.id,{salesperson_id: salesperson.value.id})
	ElMessage({
	  type: 'success',
	  message: `指派成功`
	})
	emit('checkedSalesperson', salesperson)
}
const setWorker = async () => {
	if(!worker.value.id) return ElMessage.error('请选择安装工');
	await assignWorker(props.currentRow.worker_order.id,{designer_id: worker.value.id})
	ElMessage({
	  type: 'success',
	  message: `指派成功`
	})
	emit('checkedWorker', worker)
}
const setDesigner = async () => {
	if(!designer.value.id) return ElMessage.error('请选择设计师');
	await assignDesigner(props.currentRow.designer_order.id,{designer_id: designer.value.id})
	ElMessage({
	  type: 'success',
	  message: `指派成功`
	})
	emit('checkedDesigner', designer)
}
const checkedDesigner = (e) => {
	console.log(e,'xuanz')
	designer.value = e
}
const checkedWorker = (e) => {
	console.log(e,'xuanz')
	worker.value = e
}
const checkedSalesperson = (e) => {
	console.log(e,'xuanz')
	salesperson.value = e
}

const detailSchema = ref<DescriptionsSchema[]>(menu)
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>
