<template>
  <view class="page-container">
   <view class="exchange-header-bg">
   	
   		<view class="header-bg-upper"></view>
   </view>
    <view class="status-bar"></view>
    <view class="page-head">
      <view class="page-head-btn" @click="back">
        <uni-icons type="back" size="26"></uni-icons>
      </view>
      <view class="page-head-title">任务中心</view>
    </view>
	<view class="exchange-header-content justify-between">
	  <view>
		  <view class="coin-num">{{data.user_coin || 0}}</view>
		  <view class="sub-text">当前拥有金币</view>
	  </view>
	  <image src="/static/images/libao.png" >
	</view>
    <view class="task-container">
      <scroll-view style="height:100%;" scroll-y="true">
        <view class="card">
          <view class="card-title">日常任务</view>
          <view class="card-content">
            <view v-for="(item, index) in data" :key="index" class="task-item align-center">
              <image :src="item.task_id < 6 ? '/static/icon/icon-task-'+ item.task_id +'.png' : '/static/icon/icon-task.png'" class="task-icon" />
              <view class="task-content">
                <view class="task-title align-center">
                  <text>{{item.task_name}}</text>
                  <view class="add-coin align-center">
                    <image src="/static/icon/icon-sign-in.png" class="coin-icon" />
                    <text>+{{item.task_coin}}</text>
                  </view>
                </view>
                <view class="task-progress">({{item.task_finish_num}}/{{item.task_num}})</view>
              </view>
              <view v-if="item.task_finish === 1" class="fisish-button is-fisish">
                已完成
              </view>
              <navigator v-else :url="item.task_type == 1 ? '/pages/user/index' : '/pages/home/index'" open-type="switchTab" hover-class="none" class="fisish-button">
                去完成
              </navigator>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { user } from '@/utils/api'

export default {
  data() {
    return {
      data: {}
    }
  },
  async onLoad() {
    await this.$onLaunched
    const token = getApp().globalData.userToken
    if (!token) {
      uni.redirectTo({
        url: '/pages/user/login'
      })
    } else {
      this.getData()
    }
  },
  methods: {
    getData() {
      user.taskList().then(res => {
        if (res.code == 1) {
          this.data = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss">
	
.page-container {
  height: 100%;
  background-color: #fff;
  .exchange-header-bg {
  	width: 100%;
  	height: 247px;
  	text-align: right;
  	background: linear-gradient(128deg, #F3BD97 0%, #DC293C 100%);
  	position: absolute;
  	left: 0;
  	top: 0;
  	.header-bg-upper {
  		position: absolute;
  		bottom: 0;
  		width: 100%;
  		height: 30%;
  		// background: linear-gradient(180deg,rgba(247,195,152,.1),#fff);
  	}
  }
  .exchange-header-content {
  	padding: 0px 10px 0px 30px;
  	position: relative;
  	z-index: 1;
  	align-items: center;
  	uni-image {
  		width: 187px;
  		height: 147px;
  	}
  	.coin-num {
  		font-size: 34px;
  		font-weight: 600;
  		color: #513120;
  	}
  
  	.sub-text {
  		font-size: 14px;
  		font-weight: 400;
  		color: #513120;
  	}
  }
  
  .task-container {
	background-color: #ffffff;
	position: relative;
	border-radius: 10px;
    uni-scroll-view {
      padding: 10px 0;
    }
    .card {
      margin: 20px 15px 0;
      .card-title {
        border: none;
      }
      .card-content {
        min-height: 300px;
        padding: 0 15px;
        .task-item {
          padding: 10px 0;
          .task-icon {
            width: 46px;
            height: 46px;
          }
          .task-content {
            margin: 0 10px;
            flex: 1 1 0%;
            .task-title {
              font-size: 14px;
              line-height: 18px;
              font-weight: 700;
              color: #1a1a2a;
              .add-coin {
                width: 45px;
                height: 18px;
                margin-left: 8px;
                background: #fff8e5;
                border-radius: 10px;
                .coin-icon {
                  width: 18px;
                  height: 18px;
                }
                uni-text {
                  flex: 1 1 0%;
                  margin-right: 4px;
                  text-align: center;
                  font-size: 12px;
                  font-weight: 500;
                  color: #f9a526;
                }
              }
            }
            .task-progress {
              font-size: 14px;
              font-weight: 400;
              color: #5e5e6a;
              margin-top: 5px;
            }
          }
          .fisish-button {
            width: 75px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: $uni-color-primary;
            border-radius: 15px;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            &.is-fisish {
              background-color: #d0d0d0;
            }
          }
        }
      }
    }
  }
}
</style>