<template>
	<div>
		<div class="content">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<changeNav :navs="navs"></changeNav>
			<h1>项目状态:{{remark}}</h1>
			<div class="flex state">
				<!-- <ul class="flex-left">
          <li v-for="(item,index) in states" :key="index" class="flex">
            <div>{{ item.title }}</div>
            <ul class="inside flex">
              <li v-for="(mods,index) in item.modulars" :key="index" class="flex-center">
				<div class="active" @click="jump(mods.label,mods.url)">{{ mods.label }}</div>
              </li>
            </ul>
          </li>
        </ul> -->
				<ul class="flex">
					<li v-for="(item,index) in states" :key="index">
						<el-button type="primary" @click="jump(item.button,item.uri)">{{ item.button }}</el-button>
					</li>
				</ul>
			</div>
			<div class="centerButton">
				<el-button type="primary" @click="back">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		projectEnd
	} from '@api/common/list'
	import {
		projectConsole
	} from '@api/purchaser/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import changeNav from '@components/changeNav.vue'
	export default {
		components: {
			dataBreadcrumb,
			changeNav
		},
		data() {
			return {
				states: [],
				breads: ['招标管理', '招标项目管理 ', '工作台'],
				navs: ['工作台'],
				remark: ""
			}
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			jump(label, url) {
				if (label == "项目终止") {
					this.$confirm('确定要终止吗？', '提示', {
							type: 'warning'
						})
						.then(async () => {
							let projectId = localStorage.getItem("projectId")
							const {
								msg,
								code
							} = await projectEnd(projectId)
							if (code == 200) {
								this.$message({
									message: msg,
									type: 'success',
									duration: 1500
								})
								setTimeout(() => {
									this.$router.go(-1)
								}, 1500)
							} else {
								this.$message.error(msg)
							}

						})
						.catch(() => {})
				} else {
					this.$router.push(url)
				}
			},
			async getprojectConsole() {
				try {
					let message = {}
					message.projectId = localStorage.getItem("projectId")
					message.type = 1
					const {
						data,
						msg,
						code
					} = await projectConsole(message)
					if (code == 200) {
						this.states = data
						this.remark = data[0].remark
					} else {
						this.$message.error(msg)
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
		created() {
			this.getprojectConsole()
		}
	}
</script>

<style scoped>
	.state {
		margin-top: 30px;
		/* 	margin-left: 50px; */

	}

	.state>ul {
		flex-wrap: wrap;
	}

	.state>ul>li {
		margin-right: 50px;
		margin-bottom: 50px;
		cursor: pointer;
	}

	/* .flex-left>li {
		font-weight: bold;
		font-size: 20px;
  height: 50px;
  line-height: 50px;
	}

	.flex-left>li>div {
		margin-right: 50px;
		padding-right: 30px;
		border-right: 1px solid #000;
	}

	.inside>li>div {
        padding: 0 10px;
		background: #ccc;
		color: #ffff;
		font-size: 14px;
		margin-right: 30px;
		border-radius: 2px;
		line-height: 30px;
		height: 30px;
	}
	.inside>li>.active{
		background: #2288EE
	} */
</style>
