<template>
	<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
	<view>
		<view class="set-box bg-white pb-5">
			<uv-form :model="form" ref="uForm" :rules="rules" :errorType="errorType" labelWidth="80">
				<uv-form-item label="跟进商机:" prop="name">
					<uv-input v-model="businessName" border="none" disabled disabledColor="#ffffff" />
				</uv-form-item>
				<uv-form-item label="跟进状态:" prop="followStatus" @click="followShow" required>
					<uv-input v-model="followName" placeholder="选择跟进状态" disabled disabledColor="#ffffff">
						<template v-slot:suffix>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="跟进方式:" prop="recordType" @click="selectShow" required>
					<uv-input v-model="recordTypeName" disabled disabledColor="#ffffff" placeholder="选择跟进方式">
						<template v-slot:suffix>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item :label-position="labelPosition" label="下次跟进 :" @click="createTimeShow">
					<uv-input v-model="nextTime" placeholder="选择跟进时间" disabled disabledColor="#ffffff">
						<template v-slot:suffix>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item required label="跟进内容:" prop="content">
					<uv-textarea v-model="form.content" placeholder="请输入跟进内容"></uv-textarea>
				</uv-form-item>
			</uv-form>
			<view class="mt-5" style="text-align: center;">
				<view class="mb-3">
					<uv-button @click="submit(false)" :ripple="true" color="#09b4f1">立即提交</uv-button>
				</view>
			</view>
		</view>
		<!-- 选择跟进方式 -->
		<uv-action-sheet :actions="selectList" ref="selectShowRef" title="请选择跟进方式"
			@select="recordTypeClick"></uv-action-sheet>
		<!-- 选择跟进状态 -->
		<uv-action-sheet :actions="followList" ref="followStatusShowRef" title="请选择跟进状态"
			@select="followClick"></uv-action-sheet>
		<uv-datetime-picker ref="datetimePicker" v-model="timeValue" mode="datetime"
			@confirm="createTimeChange"></uv-datetime-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getDictData,
		createRecord
	} from '@/api/customer'
	import {
		formatDateTime
	} from '@/utils/util'
	const title = ref('添加商机跟进')
	const selectList = ref([])
	const followList = ref([])
	const followName = ref('')
	const lists = ref([])
	const content = ref('')
	const recordTypeName = ref('')
	const timeValue = ref(Number(new Date()))
	const form = ref({
		name: '',
		nexxTime: '',
		recordType: '',
		followStatus: '',
		content: '',
		types: 'business',
	})
	const businessId = ref(0)
	const businessName = ref('')
	const errorType = ref('message')
	const nextTime = ref('')
	const rules = ref({
		followStatus: [{
			required: true,
			message: '请选择跟进状态',
			trigger: ['change', 'blur']
		}, ],
		recordType: [{
			required: true,
			message: '请选择跟进方式',
			trigger: ['change', 'blur']
		}, ],
		content: [{
			required: true,
			message: '请填写跟进内容',
			trigger: ['change', 'blur']
		}, ],
	})

	onLoad((e) => {
		businessId.value = e.businessId
		businessName.value = e.businessName

		getBaseConfig()
	})

	const followStatusShowRef = ref()
	const followShow = () => {
		followStatusShowRef.value.open()
	}

	const selectShowRef = ref()
	const selectShow = () => {
		selectShowRef.value.open()
	}

	const datetimePicker = ref()
	const createTimeShow = () => {
		unref(datetimePicker).open()
	}


	// 获取配置字段
	const getBaseConfig = async () => {
		followList.value = await getDictData({
			type: 'follow_status'
		})
		selectList.value = await getDictData({
			type: 'follow_type'
		})
	}

	// 选择跟进方式
	const recordTypeClick = (index) => {
		recordTypeName.value = index.name
		form.value.recordType = index.value
	}
	// 选择跟进状态
	const followClick = (index) => {
		followName.value = index.name
		form.value.followStatus = index.value
	}
	const createTimeChange = (e) => {
		form.value.nextTime = e.value
		nextTime.value = formatDateTime(e.value)
	}


	// 提交跟进
	const uForm = ref()
	const submit = (val) => {
		uForm.value.validate().then(res => {
			onSubmit()
		}).catch(errors => {
			uni.showToast({
				icon: 'error',
				title: '校验失败'
			})
		})
	}
	// 开始提交跟进
	const onSubmit = async () => {
		form.value.typesId = businessId.value
		form.value.content = '【' + followName.value + '】' + form.value.content
		await createRecord(form.value)

		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.set-box {
		padding: 0rpx 22rpx;
		margin-bottom: 80rpx;

		.option {
			.text {
				color: #747474;
				font-size: 26rpx;
				text-align: justify;
				padding-bottom: 15rpx;
			}

			.input-box {
				width: 200rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>