<template>
	<div>
		<el-row :gutter="20">
			<el-row :gutter="20">
			<!-- 	<el-col :span="4" v-if="this.usercap.includes('chief')">
					<router-link target="_blank" :to="{path:'/managing'}">
						<div class="grid-jue1">
							<svg t="1629185957321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
							 p-id="3125" width="40" height="40">
								<path d="M657.749333 142.222222c-55.523556 0-113.777778 24.007111-145.976889 63.488-32.426667-39.480889-90.794667-63.488-145.863111-63.488H48.241778v728.177778h288.881778c109.795556-1.934222 126.634667 14.677333 135.509333 22.755556a48.924444 48.924444 0 0 1 12.970667 22.755555h52.337777a49.607111 49.607111 0 0 1 16.611556-27.534222c13.425778-9.102222 34.133333-20.252444 159.288889-18.773333h261.688889V142.222222z m-172.487111 694.044445c-35.498667-13.312-104.903111-18.887111-151.210666-18.887111H100.238222V194.56h265.671111c56.888889 0 119.694222 33.223111 119.694223 80.896v481.621333s-0.796444 45.169778-0.341334 79.075556z m240.526222-18.659556c-97.962667-1.706667-152.689778 0.796444-187.505777 18.659556V275.456c0-47.672889 63.146667-80.896 119.808-80.896h265.329777v622.933333z"
								 fill="#ffffff" p-id="3126"></path>
								<path d="M810.666667 415.288889l-79.644445-62.577778-79.758222 62.577778v-307.2h159.402667v307.2zM167.708444 332.231111h250.311112v52.337778h-250.311112zM167.708444 480.369778h250.311112v52.337778h-250.311112zM167.708444 628.508444h250.311112v52.337778h-250.311112z"
								 fill="#ffffff" p-id="3127"></path>
							</svg>
							<p>{{$t('charact.role1')}}</p>
						</div>
					</router-link>
				</el-col> -->
				<!-- <el-col :span="4" v-if="this.usercap.includes('board')">
					<router-link target="_blank" :to="{path:'/editorial'}">
						<div class="grid-jue2">
							<svg t="1629186126715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
							 p-id="3462" width="40" height="40">
								<path d="M356.693333 910.222222H91.022222V113.777778h743.310222v179.768889h-52.110222V165.888H143.132444v692.224h213.560889V910.222222z"
								 fill="#ffffff" p-id="3463"></path>
								<path d="M880.867556 781.539556v76.231111H473.088v-76.231111h407.779556M932.977778 729.429333H420.977778V910.222222h512V729.429333zM227.555556 510.065778h243.256888v52.110222H227.555556zM227.555556 381.041778h243.256888v52.110222H227.555556zM227.555556 252.131556h294.456888v52.110222H227.555556zM676.977778 372.508444a63.943111 63.943111 0 1 1-62.577778 63.943112 63.488 63.488 0 0 1 63.032889-63.943112m0-52.110222a116.053333 116.053333 0 1 0 115.256889 116.053334 115.598222 115.598222 0 0 0-115.712-116.053334z"
								 fill="#ffffff" p-id="3464"></path>
								<path d="M533.162667 768.227556l-45.169778-26.055112L622.364444 513.592889l45.169778 26.168889-134.371555 228.465778zM820.792889 768.227556L686.421333 539.761778l45.169778-26.168889 134.371556 228.579555-45.169778 26.055112z"
								 fill="#ffffff" p-id="3465"></path>
							</svg>
							<p>{{$t('charact.role2')}}</p>
						</div>
					</router-link>
				</el-col>
				<el-col :span="4" v-if="this.usercap.includes('reviewer')">
					<router-link target="_blank" :to="{path:'/peerewer'}">
						<div class="grid-jue3">
							<svg t="1629185981340" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
							 p-id="3293" width="40" height="40">
								<path d="M447.715556 910.222222H91.022222V113.777778h728.177778v327.68h-52.110222V165.888H143.132444v692.224h304.583112V910.222222zM611.214222 890.083556L542.72 910.222222l20.138667-68.380444 321.877333-321.763556L932.977778 568.32 611.214222 890.083556z"
								 fill="#ffffff" p-id="3294"></path>
								<path d="M499.256889 613.717333H343.153778l-28.216889 67.470223H251.448889L391.509333 361.813333H455.111111l138.126222 319.374223h-65.763555zM477.866667 561.265778l-56.206223-134.144-56.888888 134.144zM522.24 305.834667h136.533333v28.444444h-136.533333z"
								 fill="#ffffff" p-id="3295"></path>
								<path d="M576.284444 251.790222h28.444445v136.533334h-28.444445z" fill="#ffffff" p-id="3296"></path>
							</svg>
							<p>{{$t('charact.role3')}}</p>
						</div>
					</router-link>
				</el-col>
				<el-col :span="4" v-if="this.usercap.includes('yboard')">
					<router-link target="_blank" :to="{path:'/youthed'}">
						<div class="grid-jue4">
							<svg t="1629185867793" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
							 p-id="2957" width="40" height="40">
								<path d="M515.413333 125.155556H125.155556v796.444444h757.76V597.674667H830.577778V869.262222H177.493333V177.493333h337.92V125.155556z"
								 fill="#ffffff" p-id="2958"></path>
								<path d="M276.48 309.816889h147.911111v52.337778h-147.911111zM276.48 497.208889h147.911111v52.337778h-147.911111zM276.48 684.714667h455.111111v52.337777h-455.111111zM760.718222 174.193778l66.332445 39.708444-194.56 325.063111-50.289778 8.760889-16.042667-48.469333 194.56-325.063111M742.627556 102.4L508.928 492.885333l37.774222 113.777778 118.442667-20.593778L898.844444 195.925333 742.627556 102.4z"
								 fill="#ffffff" p-id="2959"></path>
							</svg>
							<p>{{$t('charact.role4')}}</p>
						</div>
					</router-link>
				</el-col> -->
			</el-row>

			<el-col :span="10" v-show="userrole=='reviewer'||userrole==1">
				<el-card shadow="hover">
					<div slot="header" class="clearfix">
						<span>{{$t('home.authortop')}}</span>
					</div>
					<div class="top-content">
						<span>
							<p>Welcome to the TMR Publishing Group online manuscript submission and tracking system.</p>
							<p>Please go through our instructions for authors before submitting.</p>
							<p>
								<el-link type="primary" href="/articleAdd">Click here</el-link> to submit your manuscript.
							</p>
							<el-divider></el-divider>
							<p>If you experience any problems, please contact us by publisher@tmrjournals.com</p>
						</span>
					</div>

					<!-- <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button> -->
				</el-card>
			</el-col>
			<el-col :span="14">
				<el-card shadow="hover">
					<div slot="header" class="clearfix">
						<el-badge :value="this.usermsgList.length" :hidden="this.usermsgList.length>0?false:true" class="item">
							<span>{{$t('home.usermsg')}}</span>
						</el-badge>
					</div>
					<el-table :data="usermsgList" border class="msg-table">
						<el-table-column label="Date" width="150" :formatter="dateFormate" prop="ctime"></el-table-column>
						<el-table-column label="Message" prop="content"></el-table-column>
						<el-table-column label="" width="80" align="center">
							<template slot-scope="scope">
								<el-button type="text" @click="show(scope.row)">To See</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<!--<el-col :span="12">
                 <el-card shadow="hover">
                    <div>
                    <span>add article</span>
                    <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button>
                    </div>
                    <div>
                    <span>add article</span>
                    <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button>
                    </div>
                </el-card> 
            </el-col>-->
		</el-row>
	</div>
</template>

<script>
	import Schart from 'vue-schart';
	import bus from '../common/bus';
	export default {
		name: 'dashboard',
		data() {
			return {
				name: localStorage.getItem('U_name'),
				userrole: localStorage.getItem('U_status'),
				usercap: localStorage.getItem('U_role'),
				userdata: '',
				usermsgList: []
			};
		},
		created: function() {
			// this.getUserdata();
			this.initUserMsg();
		},
		components: {
			Schart
		},
		computed: {
			role() {
				let frag = 'dads';
				switch (this.userrole) {
					case '2':
						frag = this.$t('total.author');
						break;
					case '1':
						frag = this.$t('total.editor');
						break;
					case 'reviewer':
						frag = this.$t('total.reviewers') + ' & ' + this.$t('total.author');
						break;
					case '0':
						frag = this.$t('total.admin');
						break;
				}
				return frag;
			},
			my_login_time() {
				return this.formatDate(this.userdata.last_login_time);
			}
		},
		methods: {
			// getUserdata() {
			//     this.$api
			//         .post('api/user/getUserdata', {'account':this.name})
			//         .then(res=>{
			//             if(res.code==0){
			//                 this.userdata = res.data;
			//             }else{
			//                 this.$message.error('get userinfo error');
			//                 console.log('error getuserdata');
			//             }
			//         })
			//         .catch(err=>{
			//         });
			// },
			initUserMsg() {
				this.$api.post('api/User/getUserMsg', {
					account: this.name
				}).then((res) => {
					this.usermsgList = res;
				});
			},
			dateFormate(row, column, cellValue, index) {
				return this.formatDate(cellValue);
			},
			show(row) {
				this.$api.post('api/User/changeMsgState', {
						id: row.user_msg_id
					})
					.then(res => {
						this.initUserMsg();
						this.$router.push(row.url);
					});
			},
			formatDate(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + ' ' + h + ':' + m + ':' + s;
			},
			goaddarticle() {
				this.$router.push('/articleAdd');
			}
		}
	};
</script>


<style scoped>
	.msg-table {
		text-align: center;
	}

	.add-button {
		display: block;
		margin: 50px auto;
	}

	.top-content {
		padding: 2px;
	}

	.top-content span {
		font-family: Arial, Helvetica, sans-serif;
		display: block;
		padding: 2px;
		font-size: 14px;
		line-height: 1.5;
	}

	.grid-jue1,
	.grid-jue2,
	.grid-jue3,
	.grid-jue4 {
		margin: 10px 10px 20px 10px;
		padding: 20px 20px 26px 20px;
		color: #fff;
		border-radius: 5px;
	}

	.grid-jue1 p,
	.grid-jue2 p,
	.grid-jue3 p,
	.grid-jue4 p {
		margin-left: 50px;
		margin-top: -30px;
	}

	.grid-jue1:hover,
	.grid-jue2:hover,
	.grid-jue3:hover,
	.grid-jue4:hover {
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
	}

	.grid-jue1 {
		background-image: linear-gradient(to right, #1c66c0, #118bb3);
	}

	.grid-jue2 {
		background-image: linear-gradient(to right, #e26a2d, #f5953c);
	}

	.grid-jue3 {
		background-image: linear-gradient(to right, #4640c4, #7959e1);
	}

	.grid-jue4 {
		background-image: linear-gradient(to right, #cc3646, #e84651);
	}
</style>
