<template>
	<view class="typeList">
		<view class="title">{{isMultiMode?`请选择科室`:`请指定类型`}}</view>
		<div class="content">
			<div class="list" v-for="(item,index) in list" :key="index">
				<div class="rowOne">{{item.name}}</div>
				<div class="rowTwo" v-if="isMultiMode">
					{{`负责人：${item.employees}`}}
				</div>
				<view class="checkBtn" @click="checkedHandle(item)">
					<image :src="(checkedItems.map(v=>v.id)).includes(item.id) ?`../../static/check-checkbox.png`:`../../static/check-no.png`">
					</image>
				</view>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		props: {
			isMultiMode: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				checkedIndex: 0,
				
			}
		},
		computed: {
			rightIcon: function() {
				return this.checked ? 'check-checkbox' : 'check-no';
			},
			...mapState({
				typeList: state => state.creatingSituations.typeList,
				zhinengDepartments:state => state.creatingSituations.zhinengDepartments,
			}),
			list(){
				if(this.isMultiMode){
					return this.zhinengDepartments.list.map(v=>({
						  name:v.name,
						  id:v.id,
						  employees:(v.employeeList.map(v=>v.employeeName)).join(',')
					}))
				}else{
					return this.typeList.list
				}
			},
			checkedItems(){
				if(this.isMultiMode){
					return this.zhinengDepartments.checkedItems
				}else{
					return this.typeList.checkedItems
				}
			}
		},
		watch: {
			isMultiMode(prev, cur) {
				 if (prev) {
				 	//职能科室
				 	this.getZhinengDepartments();
				 } 
			}
		},
		mounted() {
            if(!this.isMultiMode){
				 this.getTypes();
			}
		},
		methods: {
			checkedHandle(item) {
				let _checkedItems = this.checkedItems;
				let findIndex = _checkedItems.findIndex(v=>v.id == item.id);
				
				console.log({_checkedItems,item})
				if(findIndex != -1){
					_checkedItems.splice(findIndex,1)  
				}else{
					_checkedItems.push(item)
				}
	
				this.myCommit('checkedItems',_checkedItems)
			},
			getTypes: function() {
				this.$store.dispatch({
					type: 'creatingSituations/commActions',
					key: 'getTypeLists',
					data: {
						filter: 0
					}
				}).then((data) => {
					if (data) {
						console.log({data});
						this.myCommit('list', data);
					}
				});
			},
			getZhinengDepartments: function() {
				this.$store.dispatch({
					type: 'creatingSituations/commActions',
					key: 'getZhinengDepartments',
				}).then((data) => {
					if (data) {
						this.myCommit('list', data);
					}
				});
			},
			/**
			 * 更新typeList和zhinengDepartments数据
			 * @param {Object} key 要更新的属性
			 * @param {Object} value 值
			 */
			myCommit: function(key, value) {
				if(this.isMultiMode){
					 let data = {...this.zhinengDepartments};
					 data[key] = value;
					 this.$store.commit({
					 	type: 'creatingSituations/comChangeState', 
					 	key: 'zhinengDepartments', 
					 	data
					 });
				}else{
					 let data = {...this.typeList};
					 data[key] = value;
					 this.$store.commit({
					 	type: 'creatingSituations/comChangeState', 
					 	key: 'typeList', 
					 	data
					 });
				}
				
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.typeList {
		.title {
			height: 30rpx;
			font-size: 30rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #292C33;
			line-height: 30rpx;
			margin-bottom: 35rpx;
		}

		.content {
			background-color: #fff;

			.list {
				position: relative;
				padding: 31.25rpx;

				.rowOne {
					font-size: 25rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
				}

				.rowTwo {
					font-size: 20rpx;
					height: 20rpx;
					line-height: 20rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666E80;
					margin-top: 25rpx;
				}

				.checkBtn {
					position: absolute;
					top: 3rpx;
					right: 12.5rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: 87.5rpx;
					height: 87.5rpx;

					image {
						width: 25rpx;
						height: 25rpx;
					}
				}

				&::after {
					position: absolute;
					bottom: 0;
					content: '';
					width: 90%;
					height: 0.63rpx;
					background: #DADEE6;
				}
			}
		}
	}
</style>
