<template>
  <div class="workspace-visual-container-scenario-content">
    <div class="workspace-visual-container-scenario-content-header">
      <img :src="require(`@/assets/visual/${headerIcon}`)" alt="">
      <span>数量：{{ total }}</span>
    </div>
    <div class="workspace-visual-container-scenario-content-icon">
      <img :src="require(`@/assets/visual/${contentIcon}`)" alt="">
    </div>
    <div class="workspace-visual-container-scenario-content-title">
      <span>{{ title }}</span>
    </div>
    <div class="workspace-visual-container-scenario-content-total">
      <div class="workspace-visual-container-scenario-content-total-left">
        <!-- <span class="workspace-visual-container-scenario-content-total-number">{{ statusTotal ? statusTotal.completed : 0 }}</span>
        <span class="workspace-visual-container-scenario-content-total-text">已完成</span> -->
      </div>
      <div class="workspace-visual-container-scenario-content-total-separator"></div>
      <div class="workspace-visual-container-scenario-content-total-right">
        <!-- <span class="workspace-visual-container-scenario-content-total-number">{{ statusTotal ? statusTotal.unfinished : 0 }}</span>
        <span class="workspace-visual-container-scenario-content-total-text">未完成</span> -->
      </div>
    </div>
    <div class="workspace-visual-container-scenario-content-footer">
      <div class="workspace-visual-container-scenario-content-button float_left" @click="handleClick(0)">
        <span>详情</span>
      </div>
      <div class="workspace-visual-container-scenario-content-button float_right" @click="handleClick(1)">
        <span>清单</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    total: Number,
    headerIcon: String,
    title: String,
    contentIcon: String,
    statusTotal: Object,
  },
  methods: {
    handleClick(type) {
      this.$emit('click', { type, title: this.title })
    },
  }
}
</script>

<style lang="scss">
.workspace-visual-container-scenario-content {
  padding: 10px;
  .workspace-visual-container-scenario-content-header {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    img {
      margin-right: 10px;
    }
  }
  .workspace-visual-container-scenario-content-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: #fff;
    margin: 0 auto;
    img {
      margin: 16px;
    }
  }
  .workspace-visual-container-scenario-content-title {
    font-size: 20px !important;
    font-weight: bold;
    margin-top: 25px;
    text-align: center;
  }
  .workspace-visual-container-scenario-content-total {
    text-align: center;
    .workspace-visual-container-scenario-content-total-separator {
      width: 0px;
      height: 24px;
      background: #fff;
      opacity: 0.2;
      display: inline-block;
      margin-top: 15px;
    }
    .workspace-visual-container-scenario-content-total-left {
      float: left;
      width: 90px;
    }
    .workspace-visual-container-scenario-content-total-right {
      float: right;
      width: 90px;
    }
    .workspace-visual-container-scenario-content-total-number {
      font-size: 30px;
      font-weight: bold;
      display: block;
    }
    .workspace-visual-container-scenario-content-total-text {
      font-size: 14px;
      font-weight: 400;
    }
  }
  .workspace-visual-container-scenario-content-footer {
    margin-top: 35px;
    .workspace-visual-container-scenario-content-button {
      width: 101px;
      height: 46px;
      border-radius: 10px;
      cursor: pointer;
      text-align: center;
      line-height: 46px;
      span {
        font-size: 16px;
        font-weight: 400;
      }
    }
    div:last-child {
      background: #ffffff;
    }
  }
}
</style>