<template>
	<el-dialog
		:visible.sync="isOpenDia"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelHandle"
		custom-class="contractDialog-dia"
		center
		:title="item.CompanyName"
		width="55%">
			<div class="dialog-cont">
				<el-table
					:data="contractList"
					ref="authTable"
					border
					height="300"
				>
					<el-table-column label="合同编号" align="center">
						<template slot-scope="scope">{{ scope.row.ContractCode }}</template>
					</el-table-column>
					<el-table-column label="合同金额" align="center">
						<template slot-scope="scope">{{ scope.row.Money }}</template>
					</el-table-column>
					<el-table-column label="付款方式" align="center">
						<template slot-scope="scope">{{ scope.row.PayMethod }}</template>
					</el-table-column>
					<el-table-column label="付款渠道" align="center">
						<template slot-scope="scope">{{
							scope.row.PayChannel
						}}</template>
					</el-table-column>
					<el-table-column label="服务期限" align="center">
						<template slot-scope="scope">{{ 
							scope.row.StartDate + '~' + scope.row.EndDate	
						|formatTime}}</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="120">
						<template slot-scope="scope">
							<el-popover
							placement="right"
							width="400"
							trigger="click">
								<div style="display: flex;justify-content:space-between;font-size:16px">
									<h3>查看权限</h3>
									<!-- <i class="el-icon-close" style="font-size:20px"></i> -->
								</div>
								<ul style="margin-top:20px;">
									<li style="margin-bottom: 15px;display:flex;align-items:center;flex-wrap:wrap;" v-for="auth in perssionList" :key="auth.ClassifyName">
										<span style="color: #409EFF;margin-right: 10px;">{{auth.ClassifyName}}:</span>
										<template v-for="sub_auth in auth.PermissionList">
											<el-tag
												size="mini"
												style="margin: 5px 8px;"
												:key="sub_auth.ChartPermissionId">
												{{sub_auth.ChartPermissionName}}
											</el-tag>
										</template>
									</li>
								</ul>
								<span class="editsty" slot="reference" @click="openDia(scope.row)">查看权限详情</span>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="bot_dia">
				<el-button type="primary" @click="cancelHandle">关闭</el-button>
			</div>
	</el-dialog>	
</template>

<script>
import { dataMainInterface } from '@/api/api.js'
export default {
	props: {
		isOpenDia: {
			type: Boolean,
		},
		item: {
			type: Object,
		},
		date: {
			type: String
		}
	},
	watch: {
		item(nval) {
			if(nval.selectType==='系统合同/上传附件'){
				this.getContractDetailList()
			}else{
				this.getContractList();
			}
			
		}
	},
	data() {
		return {
			contractList:[],
			perssionList:[]
		};
	},
	methods: {
		/* 获取合同列表 */
		getContractList() {
			dataMainInterface.companyContractList({
				CompanyId: this.item.CompanyId,
				EndDate: this.date,
				PageSize: 40,
				CurrentIndex:1
			}).then(res => {
				if(res.Ret === 200) {
					this.contractList = res.Data.List
				}
			})
		},

		getContractDetailList(){
			dataMainInterface.companyContractDetailList({
				CompanyContractId:this.item.CompanyContractId,
				ContractId:this.item.ContractId
			}).then(res => {
				if(res.Ret === 200) {
					this.contractList = res.Data.List
				}
			})
		},

		cancelHandle() {
			this.$emit('cancel')
		},
		/* 打开权限 */
		openDia(row) {
			this.perssionList = row.PermissionList;
		}
	},
	created() {},
	mounted() {
	},
};
</script>
<style lang="scss">
.contractDialog-dia {
	.el-dialog__header{
		background: #fff !important;
	}
	.el-dialog__title {
		color: #333 !important;
	}
	.el-dialog__close {
		color: #909399 !important;
	}
	.bot_dia {
		display: flex;
		justify-content: center;
		margin: 30px 0 20px;
	}
	.pop-header {
	}
}
</style>
