<template>
  <div class="photo-detail" v-if="pageShow">
    <AiGroup noBorder>
      <h2>{{ info.content }}</h2>
      <div class="status-name" :class="'status-'+ info.eventStatus">{{ $dict.getLabel('clapEventStatus',info.eventStatus) }}</div>
    </AiGroup>
    <AiGroup description noBorder labelColor="#999">
      <AiItem label="姓名" :value="info.name"/>
      <AiItem label="联系方式" :value="info.phone"/>

      <AiItem label="事件类型" :value="info.groupName"/>
      <AiItem label="上报位置" :value="info.address"/>

      <AiItem label="所属地区" :value="info.areaName"/>
      <AiItem label="现场照片" top-label>
        <image v-for="(item, index) in info.files" @click="previewImg(item.url,info.files)" :key="index" :src="item.url"/>
        <span v-if="!info.files.length">暂无照片</span>
      </AiItem>
    </AiGroup>
    <u-gap height="24"/>
    <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/>
    <u-gap height="24"/>
    <AiGroup noBorder v-if="currentTab=='0'">
      <AiStep v-for="(item,i) in process" :key="item.id" :index="i">
        <div class="flex start">
          <div class="fill stepTitle" v-text="item.systemExplain"/>
          <div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
        </div>
        <div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
         <image class="content_img" :src="e.accessUrl" v-for="(e, indexs) in item.files" :key="indexs" @click="previewImg(e.accessUrl,item.files)"/>
        <u-gap height="48"/>
      </AiStep>
      <div class="bottomBtn" v-show="info.eventStatus > 1 && !info.evaluation" @click="$linkTo(`./evaluate?id=${info.id}`)">去评价</div>
    </AiGroup>
    <div v-if="currentTab=='1'">
      <div v-if="info.evaluation" class="evaluation">
        <div class="rate">
          <span class="title">心愿评价：</span>
          <span><u-rate active-color="#F8B425" v-model="info.evaluation.evaluationScore"
          inactive-color="#b2b2b2" gutter="20" disabled></u-rate></span>
        </div>
        <div class="detail">
          <div class="titles">评价详情：</div>
          <div>{{ info.evaluation.evaluationDetail }}</div>
        </div>
        <div class="photo" v-if="info.evaluation.files.length">
          <div class="titles">照片</div>
          <div>
            <image class="content_img" :src="v.accessUrl" v-for="(v, ind) in info.evaluation.files" :key="ind" @click="previewImg(v.accessUrl,info.evaluation.files)"/>
          </div>
        </div>
      </div>
      <AiEmpty :description="`暂无数据`" class="emptyWrap" v-else/>
    </div>
    <!-- <div class="btn">
      <div class="subBtn" v-show="info.eventStatus == 0" @click="$linkTo(`./PhotoForm?id=${info.id}`)">修改微心愿</div>
    </div> -->
  </div>
</template>

<script>
export default {
  appName: "微心愿详情",
  data() {
    return {
      pageShow: false,
      info: {},
      result: {},
      currentTab: 0,
      evaluation: {}
    }
  },
  computed: {
    process() {
      const list = this.info?.processList
      if (this.evaluation.id) {
        const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation
        list.splice(0, 0, {
          id, doTime, doExplain,
          systemExplain: `${createUserName}完成评价 (${score}星评价)`
        })
      }
      return list
    }
  },
  onLoad(query) {
    this.$loading()
    this.$dict.load('clapEventStatus').then(() => {
      this.getInfo(query.id)
    })
  },
  methods: {
    getInfo(id) {
      this.$instance.post(`/app/appclapeventinfopingchang/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          this.$nextTick(() => {
            this.pageShow = true
          })
        }
      }).finally(() => this.$hideLoading())
    },
    previewImg(url,imgList) {
      let imgs = imgList.map(v => v.url)
      uni.previewImage({
        urls: imgs,
        current: url
      })
    },
  }
}
</script>

<style lang="scss">
::v-deep .itemContent image {
  width: 220px;
  height: 220px;
  margin-right: 8px;
}
.photo-detail {
  padding: 32px 0 130px;
  margin-bottom: 60px;
  background: #fff;

  h2 {
    line-height: 1.3;
    margin-bottom: 26px;
    color: #333333;
    text-align: justify;
    font-size: 40px;
    padding-right: 32px;
    box-sizing: border-box;
  }

  ::v-deep.stepTitle {
    min-height: 44px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 32px;
  }

  .stepTime {
    line-height: 44px;
  }

  .stepContent {
    color: #343D65;
  }

  .status-name {
    width: 96px;
    height: 44px;
    line-height: 44px;
    margin-bottom: 20px;
    text-align: center;
    background: #FF883C;
    color: #fff;
    font-size: 26px;
    border-radius: 8px;

    &.status-1, &.status-evaluation {
      background: #1AAAFF;
    }

    &.status-2 {
      background: #42D784;
    }

    &.status-3 {
      background: #FF4466;
    }
  }
}

.evaluation {
  padding: 0 32px;
  box-sizing: border-box;
  
  .rate {
    display: flex;
    padding-bottom: 24px;
    box-sizing: border-box;
    justify-content: space-between;
    border-bottom: 1px solid #DDDDDD;
  }
  .detail,
  .photo {
    padding: 24px 0;
  }
  .detail {
    border-bottom: 1px solid #DDDDDD;
  }
}

.title,
.titles {
  color: #999999;
}

.titles {
  margin-bottom: 15px;
}

.content_img {
  width: 200px;
  height: 200px;
  margin-right: 8px;
}

.bottomBtn {
  margin: 16px 32px 16px 0;
}

.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 120px;
  width: 100%;
  padding: 16px 32px;
  box-sizing: border-box;
  background: #F3F6F9;
  .subBtn {
    height: 88px;
    width: 100%;
    background: #2D7DFF;
    color: #fff;
    line-height: 88px;
    text-align: center;
    border-radius: 16px;
  }
}
</style>
