<template>
	<div class="cancer-dialog">
		<div class="list-box remain-table">
			<div class="remain-table-hd">
				<p>当前病种</p>
				<!-- <i class="iconfont iconfujian"></i> -->
				<p v-show="canEdit"><span @click.stop="tempDialog = true" class="link"><i class="el-icon-link"></i>关联模板</span></p>
			</div>
			<div class="remain-table-input">
				<p>
					<span>病种</span>
					<el-input v-if="canEdit" size="mini" maxlength="50" show-word-limit placeholder="请输入病种" @blur="setDatas" v-model="diseases"/>
					<span v-else>{{diseases}}</span>
				</p>
				<p>
					<span>时间</span>
					<el-input v-if="canEdit" size="mini" maxlength="50" show-word-limit placeholder="请输入时间" @blur="setDatas" v-model="diseaseTimes"/>
					<span v-else>{{diseaseTimes}}</span>
				</p>
			</div>
			<div class="remain-table-hd">
				<p>复查项目</p>
				<p v-show="canEdit">操作</p>
			</div>
			<div class="remain-table-bd">
				<template>
					<div class="pro-item" v-for="(i,index) in diseaseArrCopy" :key="i.id">
						<div class="pro-item-left">
							<p v-if="!canEdit">{{(index+1) + '.' + i.label}}</p>
							<el-input v-model="i.label" @input="setDatas" v-if="canEdit" size="mini" maxlength="50" placeholder=""></el-input>
						</div>
						<div class="pro-item-right" v-if="canEdit">
							<!-- <span class="blue" v-if="!i.edit" @click="i.edit = true">编辑</span> -->
							<span class="red" @click="deleteItem(i,index)">删除</span>
							<!-- <span class="blue" v-if="i.edit" @click="saveCancer(i,index)">保存</span> -->
							<!-- <span class="red" v-if="i.edit" @click="cancelCancer(i,index)">取消</span> -->
						</div>
					</div>
					<div class="pro-item add" @click="addProject" v-if="canEdit">
						<i class="el-icon-plus"></i>
						<span>添加项目</span>
					</div>
				</template>
			</div>
		</div>
		<el-dialog
			title="关联病种模板"
			append-to-body
			top="30vh"
			width="450px"
			:close-on-click-modal="false"
			:visible.sync="tempDialog"
			:before-close="() => handleClose(5)"
			class="aegle-dialog">
			<div class="temp-box">
				<div class="label">
					<span>请选择病种<sup style="color:#E92626">*</sup></span>
					<el-select size="small" v-model="disease" @change="diseaseTime = ''" filterable popper-class="cancer-sel-popper"  placeholder="请选择">
						<template v-for="s in cancerArr">
							<el-option v-if="s.desc.length > 22" :value="s.id" :key="s.id" :label="s.desc">
								<el-tooltip popper-class="temp-ellipsis" :open-delay="300" :content="s.desc" placement="top">
									<p style="margin:0">{{s.desc.substring(0,22)}}...</p>
								</el-tooltip>
							</el-option>
							<el-option v-else :label="s.desc" :value="s.id" :key="s.id"></el-option>
						</template>
						<el-option value="其他" label="其他"></el-option>
					</el-select>
				</div>
				<div class="label">
					<span>请选择时间<sup style="color:#E92626">*</sup></span>
					<el-select size="small" @change="getProject" v-model="diseaseTime" popper-class="cancer-sel-popper" filterable placeholder="请输入/选择">
						<el-option v-for="i in cancerSecond" :value="i.id" :key="i.id" :label="i.desc"></el-option>
						<el-option value="其他" label="其他"></el-option>
					</el-select>
				</div>
			</div>
			<div slot="footer" class="dtl-dialog-footer">
				<el-button size="small" @click="handleClose(5)">取消</el-button>
				<el-button size="small" type="primary" @click="handleClose(6)">完成</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {
  getCancerDict,
} from "@/request/cm.js";
import {DonMessage} from '@/axios/message.js'
const $message = new DonMessage()
import {cloneDeep} from 'lodash'
export default {
    name: 'AegleCancerDialog',
	props: {
		reminder: [String,Number],
		canEdit: {
			type: Boolean,
			default: true
		},
		a: String,
		b: String,
		arr: Array
	},
	data() {
		return {
			cancerArr: [],
			diseaseArr:[],
			diseaseArrCopy: [],
			disease: '',
			diseases: '',
			diseaseTime: '',
			diseaseTimes: '',
			cancerObj: {
				diseases: '',
				diseaseTimes: ''
			},
			tempDialog: false
		}
	},
	computed: {
		maxLength(){
			let num = 0;
			this.diseaseArrCopy.forEach(item => {
				if(!item.first) num +=1;
			})
			return num
		},
		cancerSecond() {
      if(this.disease == '其他') {
        this.cancerObj.diseases = '其他'
        return []
      }
      const arr = this.cancerArr.filter(item => {
        return item.id == this.disease
      })
      this.cancerObj.diseases = arr.length ? arr[0].desc : '';
      return arr.length ? arr[0].cdict : []
    }
	},
	watch: {
		tempDialog(v){
			if(v) this.getCancerDict()
		},
		a(v) {
			this.diseases = v;
		},
		b(v) {
			this.diseaseTimes = v;
		},
		arr(v){
			this.diseaseArrCopy = cloneDeep(v)
		}
	},
	mounted() {
		this.diseases = this.a;
		this.diseaseTimes = this.b;
		this.diseaseArrCopy = cloneDeep(this.arr)
	},
	methods: {
		//获取癌肿
    async getCancerDict() {
      const { data, code, msg } = await getCancerDict();
      this.cancerArr = code == 0 ? data : []
    },
		//得到默认项目
  	getProject(e) {
    	if(e == '其他'){
    	  this.cancerObj.diseaseTimes = '其他'
    	  this.diseaseArr = []
    	  return
    	}
    	let arr = this.cancerSecond.filter(item => {
    	  return item.id == e
    	})
    	this.cancerObj.diseaseTimes = arr.length ? arr[0].desc : '';
    	this.diseaseArr = arr[0].cdict.map(item => {
      	return {
        	label: item.desc,
        	text: item.desc,
        	edit: true,
        	first: true
        }
      })
    },
		//癌肿弹窗按钮点击操作
    handleClose(type) {
      if(type == 6){
        if(!this.disease) return $message.error('请选择病种');
        if(!this.diseaseTime) return $message.error('请选择时间');
				this.diseases = this.cancerObj.diseases;
				this.diseaseTimes = this.cancerObj.diseaseTimes;
				this.diseaseArrCopy = cloneDeep(this.diseaseArr)
				this.setDatas()
      }
      this.disease = '';
      this.diseaseTime = '';
      this.diseaseArr = []
      this.cancerObj.diseases = '';
      this.cancerObj.diseaseTimes = '';
			this.tempDialog = false
    },
		//添加常规提醒项目
    addProject() {
      if(this.maxLength > 9) return $message.error('最多可增加10个选项，且每个限制50字中文');
    //   const status = this.diseaseArrCopy.some(item => item.edit);
    //   if(status) return $message.error('请先保存正在编辑中的项目');
      this.diseaseArrCopy.push({
        label: '',
        text: '',
        edit: true,
        first: false
      })
			this.setDatas()
    },
		setDatas() {
			this.$emit('set',{diseases:this.diseases,diseaseTimes: this.diseaseTimes,arr: cloneDeep(this.diseaseArrCopy)})
		},
		//删除癌肿项目
		deleteItem(d,index){
      if(this.diseaseArrCopy.length == 1) return $message.error('至少要有一条检查项目')
      this.diseaseArrCopy.splice(index,1)
			this.setDatas()
    },
		//癌肿项目编辑取消
    cancelCancer(d,index){
      if(!d.text){
        this.diseaseArrCopy.splice(index,1)
      }
      d.label = d.text;
      d.edit = false
			this.setDatas()
    },
		//保存癌肿项目
    saveCancer(d,index) {
      if(!d.label || !d.label.trim()){
        $message.error('该检查项目不能为空')
        return
      }
      d.text = d.label.trim()
      d.edit = false
			this.setDatas()
    },
	}
}
</script>
<style lang="less" scoped>
.cancer-dialog {
	font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
	margin-bottom: 20px;
	.list-box {
		p {
        margin: 0;
        color: rgba(0,0,0,0.80);
        letter-spacing: 0.21px;
        sup {
          color: #E92626;
        }
      }
		.remain-table {
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			text-align: left;
			color: rgba(0,0,0,0.70);
			margin-bottom: 20px;
			&-hd {
				display: flex;
				height: 44px;
				border: 1px solid #D9D9D9;
				background-color: #F6F9FF;
				justify-content: space-between;
				align-items: center;
				padding: 0 12px;
				flex: 1;
				p {
					height: 100%;
					display: flex;
					align-items: center;
				}
				p:first-child {
					flex: 1;
					.el-input {
						flex: 1;
						margin-left: 10px;
					}
				}
				p:last-child {
					box-sizing: border-box;
					// width: 90px;
					padding-left: 12px;
					.link {
						width: 80px;
						display: block;
						height: 24px;
						line-height: 22px;
						color: #1890FF;
						border: 1px solid #1890FF;
						color: #1890FF;
						font-size: 14px;
						cursor: pointer;
						text-align: center;
						border-radius: 2px;
						i {
							font-size: 14px;
						}
						&:hover {
							opacity: 0.8;
						}
					}
				}
			}
			&-input {
				display: flex;
				align-items: center;
				padding: 12px;
				border-right: 1px solid #D9D9D9;
				border-left: 1px solid #D9D9D9;
				p {
					flex: 1;
					display: flex;
					align-items: center;
					&:first-child {
						margin-right: 12px;
					}
					span {
						margin-right: 12px;
						font-size: 14px;
					}
					.el-input {
						flex: 1;
					}
				}
			}
			&-bd {
				height: auto;
				border: 1px solid #D9D9D9;
				border-top: none;
				// min-height: 200px;
				box-sizing: border-box;
				.pro-item {
					display: flex;
					height: 40px;
					align-items: center;
					padding: 0 12px;
					border-bottom: 1px solid rgba(0,0,0,0.06);
					&-left {
						flex: 1;
						padding-right: 12px;
						color: rgba(0,0,0,0.70);
						p {
							color: rgba(0,0,0,0.70);
						}
					}
					&-right {
						// width: 60px;
						padding-left: 12px;
						display: flex;
						justify-content: space-between;
						box-sizing: border-box;
						span {
							cursor: pointer;
							&:hover,
							&:active {
								opacity: 0.8;
							}
						}
						.red {
							color: #E92626;
							
						}
						.blue {
							color: #1890FF;
						}
					}
				}
				.pro-item.add {
					width: 100%;
					justify-content: center;
					color: #1890ff;
					cursor: pointer;
					border-bottom: none;
				}
				/deep/ .el-empty .el-empty__description{
					margin: 0!important;
				}
			}
		}
	}
}

</style>
<style lang="less">
.aegle-dialog {
  .temp-box {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    .label {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      >span {
        color: rgba(0,0,0,0.80);
        padding-bottom: 8px;
      }
      .el-select,
      .el-input {
        width: 100%
      }
    }
  }
}
.cancer-sel-popper {
	.el-select-dropdown__wrap {
		margin-bottom: 0!important;
		overflow-x: hidden;
	}
}
</style>