<template>
	<view class="view">
		<view class="block">
			<view style="">
				<text style="color: #f8285a; margin-right: 4px"
					>*</text
				>
				资质名称
			</view>
			<view
				class="value"
				@tap="
					showPicker('enterprise_qua', 'qualificationName')
				"
			>
				<view
					class="input-textarea"
					v-if="prove.qualificationName"
				>
					{{
						$dict.echoDicValue(
							dictMap.enterprise_qua,
							prove.qualificationName
						)
					}}
				</view>
				<view
					class="input-textarea"
					style="color: #808080"
					v-else
				>
					请选择资质名称
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="block">
			<view style="">
				<text style="color: #f8285a; margin-right: 4px"
					>*</text
				>
				资质编号
			</view>
			<view class="value">
				<input
					class="input-value"
					type="text"
					:adjust-position="true"
					cursorSpacing="32"
					placeholder-class="txt"
					placeholder="请输入资质编号"
					v-model="prove.enterpriseAuth"
				/>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<!--   <view class="block">
      <view style="">
        <text style="color: #f8285a; margin-right: 4px">*</text>
        办理时间
      </view>
      <view class="value" @tap="showCalendar('handleDate')">
        <view class="input-textarea" v-if="prove.handleDate">
          {{ prove.handleDate }}
        </view>
        <view class="input-textarea" style="color: #808080" v-else>
          请选择办理时间
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view> -->
		<view class="block">
			<view style="">
				<text style="color: #f8285a; margin-right: 4px"
					>*</text
				>
				长期有效
			</view>
			<view
				class="value"
				style="flex-direction: row-reverse"
			>
				<u-switch v-model="prove.isLong"></u-switch>
			</view>
		</view>

		<view
			class="block"
			v-if="!prove.isLong"
		>
			<view style="">
				<text style="color: #f8285a; margin-right: 4px"
					>*</text
				>
				到期时间
			</view>
			<view
				class="value"
				@tap="showCalendar('expiryDate')"
			>
				<view
					class="input-textarea"
					v-if="prove.expiryDate"
				>
					{{ prove.expiryDate }}
				</view>
				<view
					class="input-textarea"
					style="color: #808080"
					v-else
				>
					请选择到期时间
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="upload-wrapper">
			<view
				class="wd-flex"
				style="
					justify-content: space-between;
					align-items: center;
					width: 100%;
				"
			>
				<view style="">
					<text style="color: #f8285a; margin-right: 4px"
						>*</text
					>
					资质照片
				</view>
				<view style="color: #808080">要求清晰有效</view>
			</view>
			<u-upload
				:fileList="prove.photo"
				@afterRead="addPhoto"
				@delete="delPhoto"
				:maxCount="1"
				width="101"
				height="101"
			></u-upload>
		</view>

		<cs-bottom-wrapper>
			<view class="operation">
				<button
					class="btn green"
					@tap="submit"
				>
					保存
				</button>
			</view>
		</cs-bottom-wrapper>
		<u-picker
			:show="picker.show"
			:columns="picker.data"
			@cancel="closePicker"
			closeOnClickOverlay
			keyName="label"
			ref="uPicker"
			@close="closePicker"
			@confirm="confirmPicker"
		></u-picker>
		<uni-calendar
			ref="calendarRef"
			:insert="false"
			@confirm="confirmCalendar"
		/>
	</view>
</template>

<script>
	import { uploadFile } from '@/api/system/file.js'
	import { getDictBatchByType } from '@/api/system/dict.js'
	import {
		updateProve,
		createProve,
	} from '@/api/enterprise/prove.js'
	export default {
		data() {
			return {
				enterpriseId: '',
				prove: {
					id: '',
					qualificationName: '',
					expiryDate: '',
					enterpriseAuth: '',
					photo: [],
					isLong: false,
				},
				dictMap: {},
				// 选择器
				picker: {
					show: false,
					// 做表单中键的缓存用
					key: null,
					data: [],
				},
				// 日历控件
				calendar: {
					// 做表单中键的缓存用
					key: null,
				},
			}
		},
		onLoad(res) {
			this.getDict()
			uni.setNavigationBarTitle({
				title: res.prove ? '编辑资质' : '新增资质',
			})
			if (res.enterpriseId) {
				this.enterpriseId = res.enterpriseId
			}
			if (res.prove) {
				this.prove = JSON.parse(res.prove)
			}
		},
		methods: {
			/**
			 * 获取字典
			 */
			async getDict() {
				const dict = await getDictBatchByType({
					type: ['enterprise_qua'].join(','),
				})
				this.dictMap = {
					...dict.data,
				}
			},
			/**
			 * 选择图片并上传
			 * @param {Object} e
			 */
			async addPhoto(e) {
				uni.showLoading({
					title: '正在上传...',
				})
				this.prove.photo.push({
					...e.file,
					status: 'uploading',
					message: '上传中',
				})
				uploadFile({
					name: `file`,
					filePath: e.file.url,
				}).then(res => {
					this.prove.photo = []
					this.prove.photo.push({
						...res.data,
						status: 'success',
						message: '',
					})
					uni.hideLoading()
				})
			},
			/**
			 * 删除图片
			 * @param {Object} e
			 */
			delPhoto(e) {
				this.prove.photo = []
			},
			/**
			 * 选择器确认回调
			 * @param {Object} e
			 */
			confirmPicker(e) {
				const { value } = e
				this.prove[this.picker.key] = value[0].value
				this.closePicker()
			},
			/**
			 * 关闭选择器
			 */
			closePicker() {
				this.picker = {
					show: false,
					key: '',
					data: [],
				}
			},
			showPicker(dict, key) {
				this.picker.data.push(this.dictMap[dict])
				this.picker.key = key
				this.picker.show = true
			},
			/**
			 * 显示日历
			 * @param {Object} key 表单中需要赋值的键
			 */
			showCalendar(key) {
				this.$refs.calendarRef.open()
				this.calendar = {
					key,
				}
			},
			/**
			 * 日历选中之后的回调
			 * @param {Object} e
			 */
			confirmCalendar(e) {
				this.prove[this.calendar.key] = e.fulldate
				this.closeCalendar()
			},
			/**
			 * 关闭日历
			 */
			closeCalendar() {
				this.calendar = {
					key: null,
				}
			},
			async submit() {
				const valide = await this.verifyForm()
				if (!valide) return
				if (this.prove.id) {
					uni.showLoading({
						title: '更新中...',
					})
					const data = { ...this.prove }
					data.files = this.prove.photo.map(p => p.id)
					data.expiryDate = new Date(
						this.prove.expiryDate
					).getTime()
					updateProve(data).then(res => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '操作成功',
						})
						uni.$emit('prove', this.prove)
						uni.navigateBack()
					})
				} else if (this.enterpriseId) {
					uni.showLoading({
						title: '更新中...',
					})
					const data = { ...this.prove }
					data.files = this.prove.photo.map(p => p.id)
					data.expiryDate = new Date(
						this.prove.expiryDate
					).getTime()
					data.enterpriseId = this.enterpriseId
					createProve(data).then(res => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '操作成功',
						})
						uni.$emit('prove', this.prove)
						uni.navigateBack()
					})
				} else {
					uni.$emit('prove', this.prove)
					uni.navigateBack()
				}
			},
			async hanlderApi() {
				if (this.prove.id) {
				} else {
				}
			},
			async verifyForm() {
				const msgMap = {
					qualificationName: '请填写资质名称',
					expiryDate: '请选择到期日期',
					enterpriseAuth: '请填写资质编号',
					photo: '请上传资质照片',
				}
				const keys = Object.keys(this.prove).filter(i => {
					if (!Object.hasOwn(msgMap, i)) {
						return false
					}
					if (i == 'expiryDate' && this.prove.isLong)
						return false
					if (!this.prove[i] && i) return i
					if (
						typeof this.prove[i] == 'object' &&
						this.prove[i].length == 0
					)
						return i
				})
				if (keys.length > 0) {
					const msg = keys
						.map(i => {
							return msgMap[i]
						})
						.join('\n')
					uni.showToast({
						icon: 'none',
						title: msg,
					})
					return false
				}
				return true
			},
			async changeIsLong(e) {
				this.prove.isLong = !this.prove.isLong
			},
		},
	}
</script>

<style lang="scss" scoped>
	.view {
		padding: 12px;
		display: flex;
		flex-flow: column nowrap;
		gap: 12px;
		overflow: hidden;
		overflow-y: scroll;
		max-height: 100vh;
		padding-bottom: 12vh;
	}
	.block {
		display: flex;
		flex-flow: row nowrap;
		background-color: #fff;
		padding: 12px;
		border-radius: 8px;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		.value {
			flex: 1;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			gap: 4px;
			.input-value {
				flex: 1;
				text-align: right;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.input-textarea {
				flex: 1;
				display: -webkit-box;
				overflow: hidden;
				text-align: right;
				max-height: 3rem;
				line-height: 1rem;
				text-overflow: ellipsis;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				word-break: break-all;
			}
		}
	}

	.upload-wrapper {
		display: flex;
		flex-flow: column nowrap;
		background-color: #fff;
		padding: 12px;
		border-radius: 8px;
		gap: 12px;
	}

	.operation {
		padding: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		.btn {
			flex: 1;
			border-radius: 8px;
			display: flex;
			padding: 12px 0;
			align-items: center;
			justify-content: center;
		}
		.green {
			background-color: $cs-color-main;
			color: #fff;
		}
	}
</style>
