<template>
  <div class="more-data">
    <div class="ls-row">
      <div class="row-header title">
        <span class="icon iconfont icon-jichuxinxi"></span>
        <span>项目明细</span>
      </div>
    </div>

    <div class="contain">
      <div @click="handleJump('projectProduct')"
           class="data-item">
        <div>
          <span class="iconfont icon-chanpin1"></span>
        </div>
        <span>项目产品管理</span>
      </div>
      <div @click="handleJump('sampleProgress')"
           class="data-item">
        <div class="bg57B9">
          <span class="iconfont icon-chanpin1"></span>
        </div>
        <span>样品进度</span>
      </div>
      <div @click="handleJump('projectTask')"
           class="data-item">
        <div class="bgF6AB">
          <span class="iconfont icon-wupin"></span>
        </div>
        <span>项目任务</span>
      </div>
      <div @click="handleJump('projectCompetitive')"
           class="data-item">
        <div class="bgE99C">
          <span class="iconfont icon-xiangmu1"></span>
        </div>
        <span>竞品信息</span>
      </div>
      <div @click="handleJump('projectProgress')"
           class="data-item">
        <div class="bgF6AB">
          <span class="iconfont icon-jingpin"></span>
        </div>
        <span>项目重要进展</span>
      </div>
      <div @click="handleJump('projectMember')"
           class="data-item">
        <div class="bgF46C">
          <span class="iconfont icon-chengyuan"></span>
        </div>
        <span>项目成员</span>
      </div>
      <div @click="handleJump('projectDocument')"
           class="data-item">
        <div class="bgE99C">
          <span class="iconfont icon-baogao1"></span>
        </div>
        <span>项目文档管理</span>
      </div>
      <div @click="handleOperaLog"
           class="data-item">
        <div class="bg57B9">
          <span class="iconfont icon-bumen"></span>
        </div>
        <span>流程日志</span>
      </div>
      <div v-if="showApplovalLog"
           @click="handleJump('applovalLog')"
           class="data-item">
        <div>
          <span class="iconfont icon-shenpi"></span>
        </div>
        <span>审批日志</span>
      </div>
    </div>
    <operation-log :bus-id="this.projectId"
                   ref="operaLogRef">
    </operation-log>
  </div>
</template>

<script>
export default {
  name: 'more-data',
  methods: {
    handleJump (name) {
      this.$router.push({
        name: name,
        params: { projectId: this.projectId, busId: this.projectId }
      })
    },
    handleOperaLog () {
      this.$refs.operaLogRef.showPopup = true
    }
  },
  props: {
    projectId: {
      type: String,
      default: ''
    },
    showApplovalLog: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style type="text/css" scoped lang="scss">
.more-data {
  background-color: #fff;
  margin-top: 20px;
  padding-bottom: 20px;

  .contain {
    display: flex;
    flex-wrap: wrap;

    .data-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 26px;
      padding: 0px;
      border: none;

      div:first-child {
        width: 108px;
        height: 108px;
        background: #4f94f3;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px;

        .iconfont {
          font-size: 50px;
          color: #fff;
        }
      }
      div.bg57B9 {
        background: #57b986;
      }
      div.bgF6AB {
        background: #f6ab41;
      }
      div.bgE99C {
        background: #e99c5a;
      }
      div.bgF46C {
        background: #f46c6c;
      }
    }
  }
}
</style>
