<template>
  <view>
    <Navbar title="学习任务" :showHome="true" />
    <div class="content">
      <ProSelect v-if="this.userType != '00'" @selectPro="selectPro" />
      <div class="item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
        <div class="item-wrapper">
          <u--image :src="item.url" width="80" height="80" radius="5"></u--image>
          <div class="item-content">
            <div class="item-title">{{ item.name }}</div>
            <div class="progress">
              <u-line-progress
                :percentage="item.learningProgress || 0"
                :showText="false"
                activeColor="#1989FA"
                height="10"
              />
              <div style="margin: 5px 0">学习进度：{{ item.learningProgress || 0 }}%</div>
            </div>
          </div>
        </div>
        <div class="item-time">{{ item.learningDate }}</div>
      </div>
      <div style="height: 30px;"></div>
      <u-divider text="暂无数据" v-if="list.length == 0"></u-divider>
    </div>
  </view>
</template>

<script>
import { getLearningTaskList } from '@/api/educationTraining'
import config from '@/config'
import ProSelect from 'pages/component/Proselect'

export default {
  components: { ProSelect },
  data() {
    return {
      // 列表数据
      list: [],
      userType: uni.getStorageSync('userInfo').userType // 用户类型
    }
  },
  onShow() {
    this.$nextTick(() => {
      console.log('onShow-学习任务', this.userType)
      if (this.userType == '00') {
        this.getLearningTaskList()
      } else {
      }
    })
  },
  onLoad() {
    // this.getLearningTaskList()
  },
  methods: {
    // 点击列表项
    handleItem(item) {
      console.log('item', item)
      // learningDate 为学习期限 2021-10-01 ~ 2021-10-31, 不在期限内不可学习
      const startDate = item.learningDate.split(' ~ ')[0]
      const endDate = item.learningDate.split(' ~ ')[1] + ' 23:59:59'
      const now = new Date().getTime()
      if (now < new Date(startDate).getTime() || now > new Date(endDate).getTime()) {
        uni.showToast({
          title: '不在学习期限内',
          icon: 'none'
        })
        return
      }
      const params = {
        id: item.id,
        name: item.name,
        learningDate: item.learningDate
      }
      uni.navigateTo({
        url: '/pages/learningTasks/learningTasksDetails?params=' + JSON.stringify(params)
      })
    },
    // 获取学习任务列表
    async getLearningTaskList(params = { userType: this.userType }) {
      const res = await getLearningTaskList(params)
      console.log('res', res)
      this.list = res.data
      this.list.forEach(item => {
        item.filePath = item.filePath.replace(/\\/g, '/')
        item.url = config.fileUrl2 + item.filePath
      })
      console.log('🚀 ~ getLearningTaskList ~ this.list:', this.list)
    },
    // 选择工程
    selectPro(pro) {
      console.log('🚀 ~ selectPro ~ 选择工程:', pro)
      this.getLearningTaskList({ proId: pro.proId, userType: this.userType })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;
  font-size: 12px;
  word-wrap: break-word; // 自动换行
  word-break: break-all; // 强制换行

  .item {
    padding: 10px;
    height: 100px;
    background: #f4f9fe;
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .item-wrapper {
      display: flex;
      justify-content: flex-start;

      .item-content {
        width: 49%;
        margin-left: 10px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .item-title {
          font-size: 16px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .item-time {
      text-align: right;
      color: #676767;
    }
  }
}
</style>
