<template>
  <scroll-view :scrollY="true" class="task-detail" v-if="detail">
    <view class="detail-title">基础信息</view>
    <view class="basic-info info-block">      
      <view class="name detail-item">
        <text class="key">任务名称</text>
        <text class="value">{{detail.task_name}}</text>        
      </view>
      <view class="name detail-item">
        <text class="key">任务类型</text>
        <text class="value">{{detail.type_name}}</text>        
      </view>
      <view class="name detail-item">
        <text class="key">发布人</text>
        <text class="value">{{detail.author_nickname}}</text>        
      </view>
      <view class="name detail-item">
        <text class="key">参与人</text>
        <text class="value">{{detail.receiver_users.map(item => item.nickname).join(',')}}</text>        
      </view>
      <view class="name detail-item">
        <text class="key">开始时间</text>
        <text class="value">{{detail.start_time}}</text>        
      </view>
      <view class="name detail-item">
        <text class="key">结束时间</text>
        <text class="value">{{detail.end_time}}</text>        
      </view>
    </view>

    <view class="detail-title">任务描述</view>
    <view class="desc-info info-block">
      {{detail.task_desc || '暂无'}}
    </view>

    <view class="detail-title">其他信息</view>
    <view class="extend-info info-block" >
      <dynamic-view v-for="(item, key) in detail?.attr_list" :key="key" :data="item"></dynamic-view>
    </view>

    <view class="detail-title">
      反馈记录
    </view>
    <view class="feedback-info info-block">
      <data-empty v-if="!detail.step_list?.length"></data-empty>
      <view class="feedback-item" v-for="(item, key) in detail.step_list" :key="key">
        <view class="user-info">
          <image class="avatar" :src="item.author_avatar" mode="widthFix"></image>
          <view class="name">{{item.author_nickname}}</view>
          <text class="time">{{item.create_time}}</text>
        </view>
        <view class="content">
          <text class="text">{{item.feed_back}}</text>
        </view>
        <photo-wall v-if="item.img_list" :urls="item?.img_list.map(i => i.url)"></photo-wall>
      </view>
    </view>

  </scroll-view>
</template>

<script lang="ts" setup>
  import { getCurrentInstance } from "@tarojs/taro";
  import { onMounted } from "@vue/runtime-core";
  import { useRequest } from "vue-vulcan";
  import PhotoWall from 'src/components/photo-wall.vue';
  import DynamicView from 'src/components/dynamic-view.vue';

  const [detail, request] = useRequest<TaskData>('/getTaskDetail', {auto: false});

  onMounted(() => {
    const ins = getCurrentInstance();
    const id = ins.router.params.id;
    request({id});
  })
</script>

<style lang="less">
  page{
    width: 100%;
    height :100%;
  }
  .task-detail{    
    background: #efefef;
    width: 100%;
    height: 100%;
    .detail-title{
      padding: 20px;
    }
    .desc-info{
      color: #999;
    }
    .feedback-info{
      .feedback-item{
        padding: 10px;
        margin-bottom: 10px;
        border-bottom: 2px solid #f7f7f7;
        .user-info{
          .avatar{
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 10px;
          }
          .name{
            padding: 10px;
            font-weight: bold;
          }
          .time{
            color: #999;
          }
        }
        .content{
          padding-left: 30px;
          padding-top: 20px;
        }
      }
    }
    .info-block{
      background: #fff;
      margin-bottom: 20px;
      padding :20px;
      .detail-item{
        margin: 15px 0;
        padding: 15px 0;
        border-bottom: 1px solid #efefef;
        display: flex;
        justify-content: space-between;
        font-size: small;
        .value{
          color: #888;
          width: 400px;
          text-align: right;
        }
      }
    }
  }
</style>