<template>
  <div>
    <div class="miantitle">
      <span>项目管理</span>
      <span> / 商机列表</span>
      <span> / 项目详情</span>
    </div>
    <div class="app-container">
      <el-card class="box-card noborder pad16 overflows">
        <div class="head">
          <div class="titles">
            <img src="@/assets/images/project/headimg.png" class="headimg">
            <strong class="text">重庆市轨道交通3号线二期工程4标段施工总承包</strong>
            <div class="locks">
              <img v-if="islock == true" src="@/assets/images/project/lock.png">
              <img v-else src="@/assets/images/project/lockopen.png">
              仅自己可见
              <div class="delform">
                <div class="words">{{islock==true?"是否将项目权限修改为他人可见?":"是否将项目权限修改为仅自己可见?"}}</div>
                <div>
                  <div class="btnsmall btn_primary h28">确定</div>
                  <div class="btnsmall btn_cancel h28">取消</div>
                </div>
              </div>
            </div>
          </div>
          <div class="contets">
            <div class="det-con">
              <span>项目类型：</span>
              <span>轨道交通</span>
            </div>
            <div class="det-con">
              <span>项目类别：</span>
              <span>城市轨道交通</span>
            </div>
            <div class="det-con">
              <span>投资估算（万元）：</span>
              <span>21</span>
            </div>
            <div class="det-con">
              <span>建设地点：</span>
              <span>重庆市-渝中区</span>
            </div>
            <div class="det-con">
              <span>商务团队：</span>
              <span>李力</span>
            </div>
          </div>
          <div class="schedule">
            <div class="child" v-for="(item,index) in schedulelist" @mouseover="hover(index)" @mouseleave="hover(-1)" @click="choose(index)">
              <img v-if="index == lastindex" src="@/assets/images/project/pro_2.png">
              <img v-else-if="index == thisindex" src="@/assets/images/project/pro_3.png">
              <img v-else src="@/assets/images/project/pro_1.png">
              <span :class="{'now':index == thisindex}">{{item}}</span>
            </div>

          </div>
        </div>
      </el-card>

      <el-card class="box-card noborder">
        <div class="tabslist">
          <div class="tab" v-for="(item,index) in tabslist" :class="{'on':thistag == item.tag}" @click="getCom(item.tag)">
            <span>{{item.name}}</span>
          </div>
        </div>
      </el-card>
      <!--项目概览-->
      <xmsl v-if="thistag == 'xmsl'"></xmsl>
      <!--建设内容-->
      <jsnr v-if="thistag == 'jsnr'"></jsnr>
    </div>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import xmsl from './component/xmsl.vue'
  import jsnr from './component/jsnr.vue'
  export default {
    name: 'detail',
    components: {xmsl,jsnr},
    data(){
      return {
        schedulelist: ['立项审批','招标计划','招标公告','开标阶段','中标结果'],
        lastindex: 0,//上一个点击步骤
        thisindex: 1,//当前点击步骤
        tabslist:[//项目信息展示板块
          {tag:'xmsl',name:'项目速览'},
          {tag:'jsnr',name:'建设内容'},
          {tag:'lxr',name:'联系人'},
          {tag:'gjjl',name:'跟进记录'},
          {tag:'gzdb',name:'工作代办'},
          {tag:'xgqy',name:'相关企业'},
          ],
        thistag:'xmsl',
        islock:true,//仅自己可见
      }
    },
    methods: {

      //进度条悬浮、点击事件
      hover(index){
        this.lastindex = index
      },
      choose(index){
        this.thisindex = index
      },
      //内容组件切换
      getCom(tag){
        console.log(tag)
        this.thistag = tag
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 0;
  }
  .miantitle{
  color: #232323;
  font-size: 12px;
  margin: 12px 24px;
  >span{
    opacity: 0.4;
    &:last-child{opacity:0.8}
  }
}
  .head{
    .titles{
      line-height: 31px;
      .headimg{
        float: left;
        margin-right: 16px;
      }
      .text{
        font-size: 16px;
        line-height: 31px;

        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      }
      .locks{
        display: inline-block;
        margin-left: 16px;
        height: 24px;
        background: #F3F4F5;
        border-radius: 12px;
        padding: 0 8px;
        font-size: 12px;
        color: #4f4f4f;
        line-height: 24px;
        cursor: pointer;
        font-weight: 400;
        position: relative;
        &:hover{
          background-color: #DFE0E2;
        }
        >img{
          float: left;
          width: 16px;
          margin-top: 3px;
          margin-right: 2px;
        }
      }
    }
    .contets{
      padding: 15px 0 20px;
      .det-con{
        font-size: 14px;
        display: inline-block;
        padding-right: 43px;
        &:last-child{
          padding-right: 0;
        }
        span:nth-child(2n-1){
          color: #a7a7a7;
        }
      }
    }
    .schedule{
      display: flex;
      padding-bottom: 8px;
      .child{
        cursor: pointer;
        margin-right: 4px;
        color: #4f4f4f;
        /*color: rgb(79,79,79);*/
        position: relative;
        width: 137px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        >img{
          left: 0;
          top: 0;
          position: absolute;
          width: 100%;
          z-index: 0;
        }
        >span{
          position: relative;
          z-index: 1;
          &.now{
            color: #fff;
          }
        }
      }
    }
    .delform{
      right: -79px;
      top: 33px;
      width: 252px;
    }
  }
  .tabslist{
    padding: 0 24px;
    display: flex;
    height: 48px;
    .tab{
      font-size: 16px;
      line-height: 46px;
      margin-right: 32px;
      cursor: pointer;
      &:hover{
        color: #0081FF;
      }
      &.on{
        color: #0081FF;
        font-weight: 700;
        border-bottom: 2px solid #0081FF;
      }
    }
  }
</style>
