<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 { projectConsole} from '@api/purchaser/bid'
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
import changeNav from '@components/changeNav.vue'
export default {
  components: {
    dataBreadcrumb,
    changeNav
  },
  data() {
    return {
      breads: ['投标管理', '我参与的项目 ', '工作台'],
      navs: ['工作台'],
      states: [],
	  remark:""
    }
  },
  methods: {
	  back(){
	  		this.$router.go(-1)  
	  },
  async  jump(label,url){
	  console.log(label,url)
		if(label=="项目终止"){
	  	this.$confirm('确定要终止吗？', '提示', {
			  type: 'warning'
			})
			  .then(() => {
			    this.$message.success('终止成功')
			  })
			  .catch(() => {})
		}else{
			this.$router.push(url)
		}
	},
	async getprojectConsole() {
	    try {
				  let message={}
				  message.projectId=localStorage.getItem("projectId")
				  message.type=2
	      const {
	        data,
	        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>
