<template>
  <div class="desc-container">
    <div class="desc-title">
      <span>{{projectName}}</span>
    </div>
    <div class="desc-detail">
      <span class="desc_text" v-if="studyNum && subject">{{newStudyNum}}人已学/{{subject}}</span>
    </div>
  </div>
</template>
<script>
import CommonSpliteLine from "@/components/common/common-splite-line";
export default {
  name: "common-description",
  data() {
    return {

    };
  },
  props: {
    projectName: {
      type: String,
      default: ""
    },
    studyNum: {
      type: Number,
      default: 0
    },
    subject: {
      type: String,
      default: ""
    }
  },
  computed: {
    newStudyNum: function() {
      if(this.studyNum > 1000 && this.studyNum < 10000) {
        return ((Math.round((this.studyNum / 1000) * 10) / 10)  + 'K');
      }else if(this.studyNum > 10000) {
        return ((Math.round((this.studyNum / 10000) * 10) / 10)  + 'W');
      }else {
        return this.studyNum;
      }
    }
  },
  created() {},
  mounted() {

  },
  methods: {

  }
};
</script>
<style lang="less" scoped>
.desc-container {
  padding: 20px 15px;
  .desc-title {
    display: flex;
    padding-bottom: 0px;
    line-height: 22px;
    font-weight: 700;
    span {
      font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
      font-size: 18px;
      font-weight: 700;
      color: #333333;
    }
  }
  .desc-detail {
    display: flex;
    position: relative;
    word-break: normal;
    // margin-bottom: 40px;
    // height: 60px;
    .desc_text {
      padding-top: 6px;
      font-size: 13px;
      color: #676869;
      line-height: 25px;
      letter-spacing: 1px;
      word-wrap: break-word;
      word-break: break-all;
      // word-break: normal;
      text-align: justify;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

}

</style>
