<template>
	<view class="all_path">
		<view class="headers">
			<text>全岗位路径图</text>
			<view class="go_to" @click="goSearch">
				<text class="text">筛选</text>
				<image class="img" src="../../static/images/learnpath/uotdown.png" mode=""></image>
			</view>
		</view>
		<view class="path">
			<view class="item">
				<image class="img" src="../../static/images/learnpath/thispath.png" mode=""></image>
				<text class="text">当前路径</text>
			</view>
			<view class="item">
				<image class="img" src="../../static/images/learnpath/otherpath.png" mode=""></image>
				<text class="text">其他路径</text>
			</view>
			<view class="item">
				<image class="img" src="../../static/images/learnpath/notpath.png" mode=""></image>
				<text class="text">其他路径(无权限)</text>
			</view>
		</view>
		<view class="table">
			<view class="table-container">
			    <table width="100%">
			      <thead>
			        <tr style="background: #F0F6FC;">
			          <th class="first" align="center"><view class="text">
			          </view></th>
			          <th v-for="item in titleList" align="center">{{ item.title }}</th>
			        </tr>
			      </thead>
			      <tbody>
			        <tr v-for="item,index in preparedData" :key="index">
			          <td class="first" align="center"><view class="text">{{ item.isOtherPosition == 1 ? item.positionName + '(' + item.organizationName + ')' : item.positionName }}</view></td>
			          <td align="center" v-for="t,i in item.bandCodes">
			            <image 
			               v-if="(t && t.isMajorPosition) "
			              src="@/static/images/learnpath/thispath.png" 
			              mode="aspectFit"
			            />
			            <image 
			              v-else-if="(t && t.permission)"
			              src="@/static/images/learnpath/otherpath.png" 
			              mode="aspectFit"
			            />
			            <image 
			              v-else-if="!(t && t.permission)"
			              src="@/static/images/learnpath/notpath.png" 
			              mode="aspectFit"
			            />
						<text v-else></text>
			          </td>
			        </tr>
			      </tbody>
			    </table>
			  </view>
		</view>
	</view>
</template>

<script>
	import { getFullJobPath } from "@/api/modules/growth.js"
	export default {
		data() {
			return {
				 gridData: [{
					 name: '市场企划岗',
					 marketStatus: 0,
					 saleStatus: 1,
					 productStatus: 2,
					 FAEStatusL: 0,
					 salesManagement: 1
				   }, {
					 name: '销售岗',
					 marketStatus: 1,
					 saleStatus: 2,
					 productStatus: 1,
					 FAEStatusL: 0,
					 salesManagement: 1
				   }, {
					 name: '产品企划岗',
					 marketStatus: 2,
					 saleStatus: 0,
					 productStatus: 0,
					 FAEStatusL: 0,
					 salesManagement: 1
				   }, {
					 name: 'FAE岗',
					 marketStatus: 0,
					 saleStatus: 1,
					 productStatus: 2,
					 FAEStatusL: 0,
					 salesManagement: 1
				   }, {
					 name: '销售管理岗位',
					 marketStatus: 1,
					 saleStatus: 2,
					 productStatus: 0,
					 FAEStatusL: 0,
					 salesManagement: 1
				}],
				pathData: [],
				titleList: [],
				preparedData: [],
			}
		},
		onLoad() {
			getFullJobPath().then(res=>{
			  if(res.code == 200){
				this.pathData = res.data
				this.titleList = this.pathData.allBandCodeList
				this.preparedData = this.integrateTableData(this.pathData);
				this.titleList = this.titleList.map(item=>({
				  title: item,
				}))
				// this.titleList.unshift({
				//   title: ''
				// })
				console.log(this.titleList,'titleList')
			  }
			})
		},
		methods: {
			integrateTableData(data) {
			    const { growFullPositionPathBoItemList, allBandCodeList } = data;
			    const bandCodeIndexMap = new Map(allBandCodeList.map((code, index) => [code, index]));
			    const integratedDataMap = new Map();
			    growFullPositionPathBoItemList.flat().forEach(item => {
			        const key = `${item.positionName}-${item.organizationName}-${item.isOtherPosition}`;
			
			        if (!integratedDataMap.has(key)) {
			          integratedDataMap.set(key, {
			            positionName: item.positionName,
			            organizationName: item.organizationName,
			            isOtherPosition: item.isOtherPosition,
			            bandCodes: new Array(allBandCodeList.length).fill(null),
			          });
			        }
			        item.bandCodes.split(',').forEach(code => {
			          const codeTrimmed = code.trim();
			          const index = bandCodeIndexMap.get(codeTrimmed);
			          if (index !== undefined) {
			            integratedDataMap.get(key).bandCodes[index] = { growId: item.growId, permission: item.permission ,isMajorPosition:item.isMajorPosition };
			          }
			        });
			      });
			      const integratedDataArray = Array.from(integratedDataMap.values());
			      console.log(integratedDataArray,'integratedDataArray')
			      return integratedDataArray;
			},
			goSearch(){
				uni.navigateTo({
					url: '/pages/learnPath/pathSearch'
				})
			},
		}
	}
</script>

<style>
.all_path{
	padding: 0 30rpx;
	padding-top: 38rpx;
	background: #fff;
	height: 100vh;
	.table {
	  .table-container {
	    width: 100%;
	    overflow-x: auto;
	  }
	  table {
	    width: 100%;
	    border-collapse: collapse;
	  }
	  
	  th {
	    padding: 12px 20px;
	    text-align: center;
	    border: 2rpx solid #F0F6FC;
	    background: #F0F6FC;
	  }
	  td{
		  padding: 12px 16px;
		  text-align: center;
		  border: 2rpx solid #F0F6FC;
		  color: #333333;
		  font-weight: 400;
		  font-size: 28rpx;
	  }
	  
	  th {
	    font-weight: bold;
	    color: #387DF7;
	  }
	  .first{
		  display: block;
	  	  text-align: center;
		  .text{
			width: 212rpx;
			  border-collapse: collapse;
		  }
	  }
	  
	  tbody tr:nth-child(odd) {
	    background-color: #ffffff;
	  }
	  
	  tbody tr:hover {
	    background-color: rgba(0, 0, 0, .05);
	  }
	  
	  image {
	    width: 40rpx;
	    height: 36rpx;
	    vertical-align: middle;
	  }
	}
	
	.headers{
		/* margin-top: 38rpx; */
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #333333;
		.go_to{
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;
			top: 0;
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				text-align: left;
				margin-right: 16rpx;
			}
			.img{
				width: 24rpx;
				height: 16rpx;
			}
		}
	}
	.path{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		.item{
			display: flex;
			align-items: center;
			.img{
				width: 40rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
			}
		}
	}
}
</style>
