<template>
	<div class="box-data">
		<lay-scroll v-if="dataInfoObj.FHeight" :height="dataInfoObj.FHeight+'px'">
			<lay-quote>协同流程</lay-quote>
			<lay-container class="dataInfo">
				<lay-row space="10" v-if="dataProcess.head">
					<lay-col md="12" v-for="(item,index) in dataProcess.head" :key="index"
						:class="'pro-item none state'+item.FState">
						<div class="right">
							<lay-tooltip v-if="item.FChargeName&&item.FChargeName!=''" :content="item.FChargeName">
								<p>负责人：{{ item.FChargeName }}</p>
							</lay-tooltip>
							<p v-else>负责人：{{ item.FChargeName }}</p>
							<p v-if="item.FStartDate==''">发起：{{ item.FAddDate }}</p>
							<p v-if="item.FStartDate!=''">发起：{{ item.FStartDate }}</p>
							<p>完成：{{ item.FFinishDate }}</p>
							<lay-tooltip :content="item.FDesc">
								<p>结果：{{ item.FDesc }}</p>
							</lay-tooltip>
						</div>
						<div :class="'left '+(item.FName.length>6?'margin':'')">
							<span class="num">{{ item.FGroup }}</span>
							<span class="group" :title="item.FName">{{ item.FName }}</span>
						</div>
					</lay-col>
				</lay-row>
				<p class="pro-next"></p>
				<lay-row space="10" v-if="dataProcess.list">
					<lay-col md="12" v-for="(item,index) in dataProcess.list" :key="index"
						:class="'pro-item state'+item.FState">
						<div class="right">
							<lay-tooltip v-if="item.FChargeName&&item.FChargeName!=''" :content="item.FChargeName">
								<p>负责人：{{ item.FChargeName }}</p>
							</lay-tooltip>
							<p v-else>负责人：{{ item.FChargeName }}</p>
							<p v-if="item.FStartDate==''">发起：{{ item.FAddDate }}</p>
							<p v-if="item.FStartDate!=''">发起：{{ item.FStartDate }}</p>
							<p>完成：{{ item.FFinishDate }}</p>
							<lay-tooltip :content="item.FDesc">
								<p>结果：{{ item.FDesc }}</p>
							</lay-tooltip>
						</div>
						<div :class="'left '+(item.FName.length>6?'margin':'')">
							<span class="num">{{ item.FGroup }}</span>
							<span class="group" :title="item.FName">{{ item.FName }}</span>
						</div>
					</lay-col>
				</lay-row>
				<p class="pro-next"></p>
				<lay-row space="10" v-if="dataProcess.foot">
					<lay-col md="12" v-for="(item,index) in dataProcess.foot" :key="index"
						:class="'pro-item none state'+item.FState">
						<div class="right">
							<lay-tooltip v-if="item.FChargeName&&item.FChargeName!=''" :content="item.FChargeName">
								<p>负责人：{{ item.FChargeName }}</p>
							</lay-tooltip>
							<p v-else>负责人：{{ item.FChargeName }}</p>
							<p v-if="item.FStartDate==''">发起：{{ item.FAddDate }}</p>
							<p v-if="item.FStartDate!=''">发起：{{ item.FStartDate }}</p>
							<p>完成：{{ item.FFinishDate }}</p>
							<lay-tooltip :content="item.FDesc">
								<p>结果：{{ item.FDesc }}</p>
							</lay-tooltip>
						</div>
						<div :class="'left '+(item.FName.length>6?'margin':'')">
							<span class="num">{{ item.FGroup }}</span>
							<span class="group" :title="item.FName">{{ item.FName }}</span>
						</div>
					</lay-col>
				</lay-row>
			</lay-container>
			<lay-quote v-if="dataList.length>0">视图</lay-quote>
			<lay-container class="tableInfo" v-if="dataList.length>0">
				<lay-table :columns="dataColumn" :dataSource="dataList">
					<template v-slot:operator="{ data }">
						<lay-button v-if="data.seeCode!=''" size="xs" type="primary" @click="_getTeamworkView(data,1)">
							查看
						</lay-button>
						<lay-button v-if="data.outCode!=''" size="xs" type="primary" @click="_getTeamworkView(data,2)">
							导出
						</lay-button>
					</template>
				</lay-table>
			</lay-container>
		</lay-scroll>
		<lay-layer area="90%" v-model="showEditBox" title="视图查看">
			<ShowView :viewList="viewList" :viewHeight="viewHeight" @cancelClick="cancelClick"></ShowView>
		</lay-layer>
	</div>
</template>

<style scoped>
	.box-data {
		margin: 10px auto;
		display: block;
	}

	.dataInfo {
		max-width: 960px;
		margin: 14px auto 20px;
		overflow: hidden;
		clear: both;
		float: none;
	}

	.pro-item.state1 {
		background-color: rgb(50, 189, 182, 0.9);
		background-image: url('../../../assets/state1.png');
		box-shadow: 4px 4px 4px rgb(50, 189, 182, 0.4);
	}

	.pro-item.state2 {
		background-color: rgb(22, 138, 221, 0.9);
		background-image: url('../../../assets/state2.png');
		box-shadow: 4px 4px 4px rgb(22, 138, 221, 0.4);
	}

	.pro-item.none {
		float: none !important;
		display: block !important;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}

	.pro-item.none .left {
		margin-top: 11px;
	}

	.pro-item {
		background: rgb(187, 187, 187, 0.9) url('../../../assets/state0.png') no-repeat left top;
		-webkit-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		width: 48%;
		margin: 10px 1%;
		padding: 16px 5px;
		box-shadow: 4px 4px 4px rgb(187, 187, 187, 0.4);
	}

	.pro-item .left {
		width: 34%;
		display: block;
		text-align: center;
		float: left;
		margin-top: 13px;
		margin-bottom: 5px;
	}

	.pro-item .left.margin {
		margin-top: 6px;
		margin-bottom: 0;
	}

	.pro-item .left.margin .group {
		margin: 6px auto 2px;
	}

	.pro-item .left .num {
		-webkit-border-radius: 32px;
		-ms-border-radius: 32px;
		-o-border-radius: 32px;
		-moz-border-radius: 32px;
		border-radius: 32px;
		display: block;
		line-height: 32px;
		font-size: 22px;
		width: 32px;
		border: 1px solid #222;
		margin: 0 auto;
	}

	.pro-item .left .group {
		font-weight: 500;
		line-height: 22px;
		margin: 10px auto 8px;
		font-size: 16px;
		max-width: 100px;
		display: block;
		overflow: hidden;
	}

	.pro-item .right {
		width: 63%;
		display: inline-block;
		line-height: 22px;
	}

	.pro-item .right p {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis
	}

	.pro-next {
		display: block;
		background: url('../../../assets/state-next.jpg') no-repeat center;
		height: 30px;
		margin: 10px auto;
	}

	.tableInfo {
		max-width: 96%;
		margin: 20px auto;
		overflow: hidden;
		clear: both;
		float: none;
	}
</style>
<script>
	import {
		ref,
		watch
	} from 'vue';
	import {
		getTeamProcessList,
		getTeamworkView
	} from "/src/api/api/teamwork";
	import {
		getBasicRoleList
	} from "/src/api/api/user";

	import ShowView from './ShowView.vue';

	export default {
		components: {
			ShowView
		},
		setup() {
			const dataList = ref([]);
			let dataColumn = [{
					title: "视图",
					key: "name",
				},
				{
					title: "操作",
					key: "operator",
					width: "148px",
					customSlot: "operator",
					align: "center"
				}
			];
			const dataProcess = ref({});
			//总共有几种视图类型
			const viewTypeCount = ref(5);
			const showEditBox = ref(false);
			const viewList = ref([]);
			const viewHeight = ref(500);
			return {
				dataList,
				dataColumn,
				dataProcess,
				viewTypeCount,
				showEditBox,
				viewList,
				viewHeight
			}
		},
		props: {
			dataInfoObj: {
				type: Object,
				default: () => {},
			}
		},
		mounted() {
			this._getTeamProcessList();
			this._getViewList();
		},
		methods: {
			//获取流程
			async _getTeamProcessList() {
				let result = await getTeamProcessList(this.dataInfoObj.FID) || [];
				result.forEach((item) => {
					item.FAddDate = this.dateFormat(item.FAddDate);
					item.FStartDate = this.dateFormat(item.FStartDate);
					item.FFinishDate = this.dateFormat(item.FFinishDate);
				});
				let dataProcess = {
					head: result.filter(s => s.FGroup == 1) || [],
					list: result.filter(s => s.FGroup == 2) || [],
					foot: result.filter(s => s.FGroup == 3) || []
				}
				this.dataProcess = dataProcess;
			},
			//获取视图
			async _getViewList() {
				let result = await getBasicRoleList({
					FRoleType: 39
				}) || [];
				let dataList = [];
				let hasType = this.dataInfoObj.FViewType.split(',');
				console.log(result);
				console.log(hasType);
				result.forEach((item) => {
					let viewData = dataList.find(s => s.name == item.FName) || null;
					if (viewData == null) {
						if (hasType.indexOf(item.FCode) != -1) {
							viewData = {
								name: item.FName,
								seeCode: "",
								outCode: ""
							};
							if (item.FRemark.indexOf("查看") != -1) viewData.seeCode = item.FCode;
							if (item.FRemark.indexOf("导出") != -1) viewData.outCode = item.FCode;
							dataList.push(viewData);
						}
					} else {
						if (item.FRemark.indexOf("查看") != -1) viewData.seeCode = item.FCode;
						if (item.FRemark.indexOf("导出") != -1) viewData.outCode = item.FCode;
					}
				});
				console.log(dataList)
				this.dataList = dataList;
			},
			async _getTeamworkView(data, type) {
				let viewType = parseInt(type == 1 ? data.seeCode : data.outCode);
				if (type == 2) viewType = viewType - this.viewTypeCount;
				let postData = {
					FTeamID: this.dataInfoObj.FID,
					FViewType: viewType,
					FType: type,
					HalfId : this.dataInfoObj.FMaterialHalfIDs
				};
				if (this.dataInfoObj.FProgress == "100" || this.dataInfoObj.FProgress == "100%") {
					postData.FFinish = 1;
				}
				let idx = layer.load(2);
				let result = await getTeamworkView(postData);
				layer.close(idx);
				if (type == 1) {
					let list = [];
					let count = 0;
					for (let key in result) {
						list.push(result[key]);
						count += result[key].length;
					};
					if (count == 0) {
						layer.msg("请稍等，视图信息还在编辑中", {
							time: 2000,
							icon: 3
						});
					} else {
						this.viewList = list;
						this.viewHeight = Math.ceil(this.dataInfoObj.FHeight * 0.6);
						this.showEditBox = true;
					}
				} else {
					window.open(result);
				}
			},
			//日期处理
			dateFormat(dataStr) {
				if (dataStr == null || dataStr == "") return "";
				return dataStr.replace('T', ' ').split('.')[0];
			},
			cancelClick(isFirst) {
				this.$emit('cancelClick', isFirst ? isFirst : false);
			}
		}
	}
</script>
