<template>
	<el-main style="padding:0 20px;">

		<el-steps :active="3" finish-status="success" align-center style="margin-bottom:40px;">
			<el-step title="立项"></el-step>
			<el-step title="调研"></el-step>
			<el-step title="设计"></el-step>
			<el-step title="开发"></el-step>
			<el-step title="完成"></el-step>
		</el-steps>

		<div class="make">
			<div class="make-left">
				<el-button type="primary">主要操作</el-button>
				<el-button>次要操作</el-button>
				<el-button>次要操作</el-button>
				<el-dropdown>
					<el-button icon="el-icon-arrow-down"></el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>更改状态</el-dropdown-item>
							<el-dropdown-item>发送队列</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="make-right">
				<el-button type="danger" plain icon="el-icon-delete"></el-button>
			</div>
		</div>

		<el-card shadow="never" header="统计">
			<sc-echarts ref="chart" height="150px" :option="option"></sc-echarts>
		</el-card>

		<el-card shadow="never">
			<el-tabs>
				<el-tab-pane label="基础信息">
					<el-descriptions :column="2" border>
					    <el-descriptions-item label="ID">5001</el-descriptions-item>
					    <el-descriptions-item label="名称">scEcharts</el-descriptions-item>
						<el-descriptions-item label="参与者">
							<el-tag size="small">Sakuya</el-tag>
							<el-tag size="small">Lolowan</el-tag>
						</el-descriptions-item>
					    <el-descriptions-item label="类型">数据</el-descriptions-item>
					    <el-descriptions-item label="创建时间">2010-10-10</el-descriptions-item>
						<el-descriptions-item label="进度">70%</el-descriptions-item>
					</el-descriptions>
				</el-tab-pane>
				<el-tab-pane label="详细信息">
					<el-empty description="没有详细信息" :image-size="80"></el-empty>
				</el-tab-pane>
			</el-tabs>
		</el-card>

		<el-card shadow="never" header="日志">
			<el-timeline style="padding-left: 10px;padding-top: 10px;">
				<el-timeline-item v-for="(item, index) in logs" :key="index" :timestamp="item.timestamp" :color="index==0?'#409EFF':''">
					<div class="log-item">
						<el-avatar class="avatar" :size="24" :src="item.icon"></el-avatar>
						<span class="user">{{item.user}}</span>
						<p>{{item.content}}</p>
					</div>
					<div v-if="item.msg" class="log-msg">
						<el-alert :title="item.msg" :closable="false"></el-alert>
					</div>
				</el-timeline-item>
			</el-timeline>
		</el-card>

	</el-main>
</template>

<script>
	import scEcharts from '@/components/scEcharts';

	export default {
		components: {
			scEcharts
		},
		data() {
			return {
				option: {
					grid: {
						top: '10px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '15px',
						itemStyle: {
							borderRadius:[15, 15, 0, 0]
						}
					},
					{
						data: [110, 180, 120, 120, 60, 90, 110],
						type: 'line',
						smooth: true
					}]
				},
				logs: [
					{
						user: 'Lolowan',
						icon: 'img/avatar2.gif',
						content: '完成设计',
						msg: '@Sakuya 设计完成了，赶紧开发吧',
						timestamp: '2021-10-13 13:41:19'
					},
					{
						user: 'Sakuya',
						icon: 'img/avatar.jpg',
						content: '完成调研',
						msg: '',
						timestamp: '2021-10-11 22:08:30'
					},
					{
						user: 'Sakuya',
						icon: 'img/avatar.jpg',
						content: '创建立项',
						msg: '',
						timestamp: '2021-10-10 08:31:23'
					},
				]
			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	.el-card {margin-bottom: 15px;}
	.make {margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;}
	.log-item {display: flex;align-items: center;font-size: 13px;}
	.log-item .user {color: #333;margin: 0 10px;display: inline-block;}
	.log-item p {color: #666;}
	.log-msg {margin-top: 10px;}
</style>
