<template>
	<view class="p-2">
		<u-navbar title="编辑资料" back-icon-color="#fff" title-size="34" title-color="#fff"
			:background="{background:'#6ACDBB'}"></u-navbar>
		<view class="flex-col b-r-8 white p-row-32 m-b-2" v-if="role==1">
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border">
				<d-text text="头像" color="#6C7380"></d-text>
				<view class="flex-row flex-ali-center">
					<u-image width="80rpx" height="80rpx" shape="circle" :src="doctorInfo.DoctorInfo.avatar"
						@click="selectAct">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="m-l-16" @click="selectAct">
						<u-icon name="arrow-right" color="#A7ABB0" size="32"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border">
				<d-text text="姓名" color="#6C7380"></d-text>
				<d-text :text="doctorInfo.DoctorInfo.name" color="#31353D"></d-text>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border">
				<d-text text="门店" color="#6C7380"></d-text>
				<d-text :text="`${doctorInfo.store.store.name}`" color="#31353D"></d-text>
				<!-- <u-input type="select" style="width: 500rpx;" maxlength="550" input-align="right"
					:select-open="showHosp" :placeholder="`${doctorInfo.hosped ||doctorInfo.store.store.name}`"
					@click="showHosp=true"></u-input> -->
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32">
				<d-text text="职称" color="#6C7380"></d-text>
				<!-- <d-text :text="doctorInfo.DoctorInfo.title.name ||docInfo.titles[0].name" color="#31353D"></d-text> -->
				<u-input type="select" input-align="right" :select-open="show"
					:placeholder="doctorInfo.positionsed || doctorInfo.DoctorInfo.title.name"
					@click="show=true"></u-input>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32">
				<d-text text="科室" color="#6C7380"></d-text>
				<!-- <d-text :text="doctorInfo.DoctorInfo.depart.name || docInfo.depart[0].name" color="#31353D"></d-text> -->
				<u-input type="select" input-align="right" :select-open="showDepart"
					:placeholder="doctorInfo.departed||doctorInfo.DoctorInfo.depart.name"
					@click="showDepart=true"></u-input>
			</view>
		</view>

		<view class="flex-col b-r-8 white p-row-32 m-b-2" v-if="role==2">
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border">
				<d-text text="头像" color="#6C7380"></d-text>
				<view class="flex-row flex-ali-center">
					<u-image width="80rpx" height="80rpx" shape="circle" :src="docInfo.avatar" @click="selectActed">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<view class="m-l-16" @click="selectActed">
						<u-icon name="arrow-right" color="#A7ABB0" size="32"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border">
				<d-text text="姓名" color="#6C7380"></d-text>
				<d-text :text="docInfo.name" color="#31353D"></d-text>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32">
				<d-text text="职称" color="#6C7380"></d-text>
				<d-text :text="docInfo.titles.name" color="#31353D"></d-text>
				<!-- <u-input type="select" input-align="right" :select-open="show" :placeholder="docInfo.positionsed || docInfo.titles[0].name"
					@click="show=true"></u-input> -->
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border">
				<d-text text="门店" color="#6C7380"></d-text>
				<d-text :text="`${docInfo.store['name']}`" color="#31353D"></d-text>
				<!-- <u-input type="select" style="width: 500rpx;" maxlength="550" input-align="right"
					:select-open="showHosp" :placeholder="`${docInfo.hosped ||docInfo.store['name']}`" @click="showHosp=true"></u-input> -->
			</view>
			<!-- <view class="flex-row flex-jus-sp flex-ali-center p-col-32">
				<d-text text="科室" color="#6C7380"></d-text>
				<d-text :text="docInfo.depart.name" color="#31353D"></d-text>
				<u-input type="select" input-align="right" :select-open="showDepart"
					:placeholder="docInfo.departed||docInfo.depart[0].name" @click="showDepart=true"></u-input>
			</view> -->
		</view>

		<view class="flex-col b-r-8 white p-row-32 m-b-2" v-if="role==1">
			<view class="flex-row flex-ali-start flex-ali-center p-col-32 bottom-border">
				<d-text text="主治疾病"></d-text>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border">
				<d-text text="擅长" color="#6C7380"></d-text>
				<view class="flex-row flex-ali-center">
					<d-text :text="doctorInfo.DoctorInfo.good_at" className="content-c m-r-16" @click="isAbout=true"
						v-if="!isAbout" width="500rpx"></d-text>
					<!-- <u-icon name="arrow-right" color="#A7ABB0" size="32"></u-icon> -->
				</view>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border" v-if="isAbout">
				<view class="flex-col bg b-r-8 p-row-16" style="width: 646rpx;">
					<u-input v-model="doctorInfo.DoctorInfo.good_at" placeholder="请填写" type="textarea" :maxlength="500"
						auto-height />
					<d-text :text="`${doctorInfo.DoctorInfo.good_at?doctorInfo.DoctorInfo.good_at.length:0}/500`"
						color="#C4C7CC" width="614" align="right"></d-text>
				</view>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32">
				<d-text text="简介" color="#6C7380"></d-text>
				<view style="width: 500rpx;" @click="isIntro=true" v-if="!isIntro">
					{{doctorInfo.DoctorInfo.intro}}
				</view>
			</view>
			<view class="flex-row flex-jus-sp flex-ali-center p-col-32 bottom-border" v-if="isIntro">
				<view class="flex-col bg b-r-8 p-row-16" style="width: 646rpx;">
					<u-input v-model="doctorInfo.DoctorInfo.intro" placeholder="请填写" type="textarea" :maxlength="500"
						auto-height />
					<d-text :text="`${doctorInfo.DoctorInfo.intro?doctorInfo.DoctorInfo.intro.length:0}/500`"
						color="#C4C7CC" width="614" align="right"></d-text>
				</view>
			</view>
		</view>
		<view class="flex-col white b-r-8" v-if="role==1">
			<view class="flex-row flex-jus-sp flex-ali-center p-32">
				<d-text text="医师资格证书" color="#6C7380"></d-text>
			</view>
			<view class="img" v-if="doctorInfo.DoctorPracticing">
				<image v-for="(item,index) in JSON.parse(doctorInfo.DoctorPracticing.qualification)" :key="index"
					:src="item">
				</image>
			</view>
		</view>
		<view class="flex-col white b-r-8" v-if="role==2 && docInfo.practings">
			<view class="flex-row flex-jus-sp flex-ali-center p-32">
				<d-text text="药师资格证书" color="#6C7380"></d-text>
			</view>
			<view class="img" v-if="docInfo.practings">
				<image v-for="(item,index) in JSON.parse(docInfo.practings.qualification)" :key="index" :src="item">
				</image>
			</view>
		</view>

		<view class="flex-col white b-r-8" v-if="role==1 && doctorInfo.DoctorPracticing">
			<view class="flex-row flex-jus-sp flex-ali-center p-32">
				<d-text text="医师执业证书" color="#6C7380"></d-text>
			</view>
			<view class="img" v-if="doctorInfo.DoctorPracticing">
				<image v-for="(item,index) in JSON.parse(doctorInfo.DoctorPracticing.practicing)" :key="index"
					:src="item">
				</image>
			</view>
		</view>

		<view class="flex-col white b-r-8" v-if="role==2 && docInfo.practings">
			<view class="flex-row flex-jus-sp flex-ali-center p-32">
				<d-text text="药师执业证书" color="#6C7380"></d-text>
			</view>
			<view class="img" v-if="docInfo.practings">
				<image v-for="(item,index) in JSON.parse(docInfo.practings.practicing)" :key="index" :src="item">
				</image>
			</view>
		</view>
		<view class="flex-col white b-r-8" v-if="role==1 && doctorInfo.DoctorPracticing">
			<view class="flex-row flex-jus-sp flex-ali-center p-32">
				<d-text text="职称证书" color="#6C7380"></d-text>
			</view>
			<view class="img" v-if="doctorInfo.DoctorPracticing">
				<image v-for="(item,index) in JSON.parse(doctorInfo.DoctorPracticing.title)" :key="index" :src="item">
				</image>
			</view>
		</view>

		<view class="flex-col white b-r-8" v-if="role==2 && docInfo.practings" style="margin-bottom: 180rpx;">
			<view class="flex-row flex-jus-sp flex-ali-center p-32">
				<d-text text="职称证书" color="#6C7380"></d-text>
			</view>
			<view class="img" v-if="docInfo.practings">
				<image v-for="(item,index) in JSON.parse(docInfo.practings.title)" :key="index" :src="item">
				</image>
			</view>
		</view>


		<u-picker cancel-color="#2979FF" confirm-text="确定" :safe-area-inset-bottom="true" v-model="show" @confirm="sel"
			mode="selector" :default-selector="[0]" range-key="name" :range="positions" title="职称"
			:mask-close-able="false" @cancel="cancel">
		</u-picker>
		<u-picker cancel-color="#2979FF" confirm-text="确定" :safe-area-inset-bottom="true" v-model="showDepart"
			@confirm="selDeaprt" mode="selector" :default-selector="[0]" range-key="name" :range="officeList" title="科室"
			:mask-close-able="false" @cancel="cancel">
		</u-picker>
		<u-picker cancel-color="#2979FF" confirm-text="确定" :safe-area-inset-bottom="true" v-model="showHosp"
			@confirm="selHosp" mode="selector" :default-selector="[0]" range-key="name" :range="hospitalList" title="门店"
			:mask-close-able="false" @cancel="cancel">
		</u-picker>

		<!-- 修改按钮 -->
		<view class="m-t-32 footer" v-if="role==1">
			<u-button :throttle-time="0" type="primary"
				:custom-style="{ width:'684rpx' ,backgroundColor:'#6ACDBB',color:'#fff'}" shape="circle" @click="edit"
				:ripple="true" :loading="loading">保存编辑</u-button>
		</view>
	</view>
</template>

<script>
	import {
		hospitalList,
		info,
		officeList,
		personalData,
		professionalList,
		toUpload,
		infoEdit,
		toUploaded
	} from "@/api/all.js";
	import { chooseAvatarImage } from '@/common/js/select-avatar-image.js';
	import { checkProfileTexts, handleSecurityError, SCENE_PROFILE } from '@/common/js/content-security.js';
	export default {
		data() {
			return {
				doctorInfo: [],
				docInfo: [],
				role: uni.getStorageSync('role') || 1,
				show: false,
				showDepart: false,
				showHosp: false,
				isAbout: false,
				isIntro: false,
				positions: [],
				positionsed: "",
				Hosp: [],
				Depart: [],
				Hosped: "",
				Departed: "",
				hospitalList: [],
				officeList: [],
				yard_id: "",
				title_id: "",
				depart_id: "",
				work_avator: "",
				// 内容安全 baseline：详情加载完成后快照
				_securityBaseline: {},
			}
		},
		computed: {
			// getAvatar() {
			// 	if (this.role == 1) {
			// 		let doctorInfo = uni.getStorageSync('doctorInfo')
			// 		let url = require(`@/static/image/${doctorInfo.DoctorInfo.user.role%2==0?'nv':'nan'}.png`);
			// 		// console.log(info, 'ddd')
			// 		return doctorInfo.DoctorInfo['avatar'] ? doctorInfo.DoctorInfo['avatar'] : doctorInfo
			// 			.DoctorInfo.user.role == 1 ? url : url
			// 	} else {
			// 		let docInfo = this.docInfo
			// 		let url = require(`@/static/image/nv.png`);
			// 		// console.log(info, 'ddd')
			// 		return docInfo['avatar'] ? docInfo['avatar'] : url
			// 	}
			// }
		},
		created() {
			if (this.role == 1) {
				this.getDoctor()
			} else if (this.role == 2) {
				this.getInfo()
			}
		},
		onLoad() {

		},
		methods: {
			sel(e) {
				this.positionsed = this.positions[e[0]].name
				this.title_id = this.positions[e[0]].id
				if (this.role == 1) {
					this.doctorInfo = {
						...this.doctorInfo,
						positionsed: this.positions[e[0]].name
					}
				} else if (this.role == 2) {
					this.docInfo = {
						...this.docInfo,
						positionsed: this.positions[e[0]].name
					}
				}
			},
			selDeaprt(e) {
				this.Departed = this.officeList[e[0]].name
				this.depart_id = this.officeList[e[0]].id
				if (this.role == 1) {
					this.doctorInfo = {
						...this.doctorInfo,
						departed: this.officeList[e[0]].name
					}
				} else if (this.role == 2) {
					this.docInfo = {
						...this.docInfo,
						departed: this.officeList[e[0]].name
					}
				}
			},
			selHosp(e) {
				this.Hosped = this.hospitalList[e[0]].name
				this.yard_id = this.hospitalList[e[0]].id
				if (this.role == 1) {
					this.doctorInfo = {
						...this.doctorInfo,
						hosped: this.hospitalList[e[0]].name
					}
				} else if (this.role == 2) {
					this.docInfo = {
						...this.docInfo,
						hosped: this.hospitalList[e[0]].name
					}
				}
			},
			cancel() {
				this.show = false
			},
			professionalList() {
				professionalList({
					store_id: uni.getStorageSync('store_id') || 11001,
					type: this.role,
				}).then(res => {
					if (res.errcode != -1) {
						this.positions = res.data
					} else {
						this.$toast(res.msg)
					}
				})
			},
			gethospital() {
				hospitalList({
					id: -1,
					store_id: uni.getStorageSync('store_id') || 11001,
				}).then(res => {
					if (res.errcode != -1) {
						this.hospitalList = res.data
					} else {
						this.$toast(res.msg)
					}
				})
			},
			getoffice() {
				officeList({
					store_id: uni.getStorageSync('store_id') || 11001,
				}).then(res => {
					if (res.errcode != -1) {
						this.officeList = res.data.departments
					} else {
						this.$toast(res.msg)
					}
				})
			},

			async getInfo() {
				let res = await personalData({
					store_id: uni.getStorageSync('store_id') || '11001'
				})

				if (res.errcode == 0) {
					// console.log(res.data, 'wd');
					this.docInfo = res.data;
					this._securityBaseline = {
						good_at: (res.data && res.data.good_at) || '',
						intro: (res.data && res.data.intro) || '',
					};
					this.$nextTick(() => {
						this.loading = false;
					});
				} else {
					this.$toast(res.msg);
					this.loading = false;
				}
			},
			async getDoctor() {
				let res = await info({
					store_id: uni.getStorageSync('store_id') || '11001'
				})

				if (res.errcode == 0) {
					// console.log(res, 'wd');
					this.doctorInfo = res.data;
					this._securityBaseline = {
						good_at: (res.data.DoctorInfo && res.data.DoctorInfo.good_at) || '',
						intro: (res.data.DoctorInfo && res.data.DoctorInfo.intro) || '',
					};
					this.$nextTick(() => {
						this.loading = false;
					});
				} else {
					this.$toast(res.msg);
					this.loading = false;
				}
			},

			selectActed(){
				chooseAvatarImage({
					formData: {
						store_id: uni.getStorageSync('store_id') || '11001',
					},
					onSuccess: (res) => {
						const req = this.$u.test.jsonString(res.data) ? JSON.parse(res.data) : res.data;
						if (req.errcode == 0) {
							toUploaded({
								store_id: uni.getStorageSync('store_id') || '11001',
								avatar: req.data.url,
							}).then((uploadRes) => {
								if (uploadRes.errcode == 0) {
									this.getInfo();
									this.$toast('编辑成功');
								}
							});
						} else {
							this.$toast(res.msg);
						}
					},
				});
			},

			selectAct() {
				chooseAvatarImage({
					formData: {
						store_id: uni.getStorageSync('store_id') || '11001',
					},
					onSuccess: (res) => {
						const req = this.$u.test.jsonString(res.data) ? JSON.parse(res.data) : res.data;
						if (req.errcode == 0) {
							toUpload({
								store_id: uni.getStorageSync('store_id') || '11001',
								avatar: req.data.url,
							}).then((uploadRes) => {
								if (uploadRes.errcode == 0) {
									this.getDoctor();
									this.$toast('编辑成功');
								}
							});
						} else {
							this.$toast(res.msg);
						}
					},
				});
			},
			// 保存编辑
			async edit() {
				try {
					await checkProfileTexts({
						good_at: this.doctorInfo.DoctorInfo.good_at,
						intro: this.doctorInfo.DoctorInfo.intro,
					}, this._securityBaseline, SCENE_PROFILE);
				} catch (e) {
					handleSecurityError(e);
					return;
				}
				infoEdit({
					title_id: this.title_id,
					yard_id: this.yard_id,
					depart_id: this.depart_id,
					good_at: this.doctorInfo.DoctorInfo.good_at || '',
					intro: this.doctorInfo.DoctorInfo.intro || '',
					work_avator: this.work_avator,
					store_id: uni.getStorageSync('store_id') ||
						'11001',
				}).then(res => {
					if (res.errcode != -1) {
						this.$toast('保存成功')
						if (this.role == 1) {
							this.getDoctor()
						} else if (this.role == 2) {
							this.getInfo()
						}
						this.show = false
						this.showDepart = false
						this.showHosp = false
						this.isAbout = false
						this.isIntro = false

						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 900)
					} else {
						this.$toast(res.msg)
					}
				})
			},
		},
		mounted() {
			this.professionalList()
			this.getoffice()
			this.gethospital()
		},
		onShow() {
			if (this.role == 1) {
				this.getDoctor()
			} else if (this.role == 2) {
				this.getInfo()
			}
		}
	}
</script>
<style>
	page {
		background-color: #F9FAFB;
	}
</style>
<style scoped lang="scss">
	.img {
		background: #fff;
		display: flex;
		margin: 0 auto;

		image {
			width: 324rpx;
			height: 188rpx;
			border-radius: 12rpx;
			margin: 10rpx;
		}
	}

	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0%;
		margin-left: 5%;
		bottom: env(safe-area-inset-bottom);
	}
</style>
