<template>
  <div class="wrapper" :style="{ background: background }">
    <div class="left">
      <div class="title">
        <u-icon :name="icon" size="14"></u-icon>
        <span>{{ state.title }}</span>
        <span>{{ state.time }}</span>
      </div>
      <div class="item">{{ state.fileName }}</div>
    </div>
    <div class="right" v-if="showProgress">
      <u-line-progress :percentage="state.studyProgress" :showText="false" activeColor="#1989FA" height="10" />
      <span style="margin-left: 5px">{{ state.studyProgress || 0 }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    itemData: {
      type: Object,
      default: () => {}
    },
    background: {
      type: String,
      default: '#F4F9FE'
    },
    showProgress: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: '/static/images/imgs/shiping.png'
    }
  },
  data() {
    return {
      state: {
        title: '',
        time: '',
        item: '',
        progress: 0
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.state = this.itemData
    }, 300)
  },
  methods: {
    handleItem() {
      console.log('🚀 ~ handleItem ~ handleItem:', this.state)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  min-height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 10px 0;

  .left {
    margin-left: 12px;
    width: 60%;

    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-weight: 400;
      font-size: 13px;
      color: #676767;
      :first-child {
        margin-right: 2px;
      }
      :nth-child(2) {
        margin-right: 20px;
      }
    }

    .item {
      max-height: 80px;
      width: 160px;
      font-size: 14px;
      color: #333;
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow: auto;
    }
  }

  .right {
    margin-right: 12px;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
