<template>
  <div class="photo-detail">
    <u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32" 
      :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
    <div class="header-content-bg">
      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
    </div>
    <div class="border-r">
      <AiGroup noBorder description abelColor="#999">
        <h2>{{ info.content }}</h2>
        <div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
        <AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/>
        <AiItem label="事件类型" :value="info.groupName"/>
        <AiItem label="所属网格" :value="info.girdName"/>
        <AiItem label="上报时间" :value="info.createTime"/>
        <AiItem label="照片" top-label v-if="info.files && info.files.length">
          <div class="flex wrap">
            <image class="imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
          </div>
        </AiItem>
      </AiGroup>
    </div>
    <!-- <u-gap height="24"/>
    <AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999">
      <AiItem label="处理结果" top-label :value="result.doExplain"/>
      <AiItem label="照片" top-label>
        <div class="flex wrap">
          <image class="fill imageItem" v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
        </div>
        <span v-if="!result.files.length">暂无照片</span>
      </AiItem>
    </AiGroup> -->
    <!-- <u-gap height="24"/> -->
    <!-- <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/> -->
    <div class="border-r pad-b252">
      <div class="tab-content">
        <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="currentTab == index ? 'active' : ''">{{ item.name }}
          <span class="active-line" v-if="currentTab == index"/>
        </div>
      </div>
      <u-gap height="24"/>
      <AiGroup noBorder v-if="currentTab=='0'">
        <AiStep v-for="(item,i) in process" :key="item.id" :index="i">
          <div class="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"/>
          <div class="imgs">
            <img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)"/>
          </div>
          <u-gap height="48"/>
        </AiStep>
      </AiGroup>
    </div>
    
    <AiEvaluation v-if="currentTab=='1' && showEvaluation" :bid="info.id" type="show"/>
    <AiEvaluation v-if="info.eventStatus > 1 && showEvaluation" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
      <div class="footer">
        <div class="btn">去评价</div>
      </div>
    </AiEvaluation>
  </div>
</template>

<script>
export default {
  appName: "居民上报详情",
  customNavigation: true,
  data() {
    return {
      info: {},
      result: {},
      currentTab: 0,
      evaluation: {},
      id: '',
      showEvaluation: false,
      // tabList: [{name:'办理进度'},{name:'我的评价'}],
      backgroundNavbar: {
        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
        backgroundSize: 'cover',
      },
    }
  },
  computed: {
    detailStatus: v => {
      const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
      return {
        cls: 'status-' + status,
        label: !v.evaluation.id ? v.$dict.getLabel('clapEventStatus', v.info.eventStatus) : "已评价"
      }
    },
    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
    },
    tabList() {
      var list =  !this.evaluation.id ? [{name:'办理进度'}] : [{name:'办理进度'},{name:'我的评价'}]
      return list
    }
  },
  onShow() {
    this.showEvaluation = false
    this.getInfo()
  },
  onLoad(query) {
    this.id = query.id
    this.$dict.load(['clapEventStatus', 'residentEventSource'])
  },
  methods: {
    tabClick(index) {
      this.currentTab = index
      if(!this.currentTab) {
        this.getInfo()
      }
    },
    getInfo() {
      this.$loading()
      this.$instance.post(`/app/apppatrolreportinfov2/queryDetailById?id=${this.id}`).then(res => {
        if (res?.data) {
          this.info = res.data
          if (res.data.eventStatus > 1) {
            this.result = res.data.processList[0]
          }
          this.showEvaluation = true
        }
      }).finally(() => this.$hideLoading())
    },
    previewResult(url) {
      uni.previewImage({
        urls: this.result.files.map(v => v.url),
        current: url
      })
    },

    preview(url) {
      uni.previewImage({
        urls: this.info.files.map(v => v.url),
        current: url
      })
    },
    previewImage(images, img) {
      uni.previewImage({
        urls: images.map(v => v.url),
        current: img
      })
    },
  }
}
</script>

<style lang="scss">
.photo-detail {
  // padding: 32px 0 160px;
  // margin-bottom: 60px;
  // background: #fff;
  .header-content-bg {
    width: 100%;
    position: fixed;
    z-index: -1;
    img {
      width: 100%;
      height: 592px;
    }
  }
  .border-r {
    width: calc(100% - 64px);
    margin: 0 0 32px 32px;
    background-color: #fff;
    border-radius: 16px;
  }
  .pad-b252 {
    padding-bottom: 252px;
  }
  ::v-deep .AiGroup {
    padding: 32px 0 32px 32px;
    box-sizing: border-box;
    background-color: none!important;
  }
  h2 {
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 36px;
    color: #333;
    letter-spacing: 0;
    line-height: 56px;
    margin-bottom: 16px;
  }

  ::v-deep .normal {
    line-height: 44px;
    font-family: PingFangSC-Regular;
    font-size: 32px;
    color: #333;
  }

  ::v-deep .topLabel {
    border-bottom: 0!important;
  }

  ::v-deep .stepTitle {
    line-height: 44px;
    font-family: PingFangSC-Regular;
    font-size: 32px;
    color: #333;
    margin-bottom: 8px;
  }

  .stepTime {
    line-height: 40px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #999;
    margin-bottom: 16px;
  }

  .stepContent {
    line-height: 40px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #333;
    margin-bottom: 16px;
  }

  .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;
    }
  }

  .imageItem {
    width: calc(33% - 16px);
    height: 226px;
    flex-shrink: 0;
    margin-right: 16px;
    margin-bottom: 16px;

    &:nth-of-type(3n) {
      margin-right: 0;
    }
  }
  .imgs {
    margin-top: 10px;

    img {
      width: 136px;
      height: 136px;
      border-radius: 4px;
      margin-right: 12px;
    }

    img:nth-of-type(3n) {
      margin-right: 0;
    }
  }
  .tab-content {
    .tab-item {
      display: inline-block;
      width: 50%;
      position: relative;
      height: 88px;
      line-height: 88px;
      font-size: 32px;
      color: #666;
      text-align: center;
      .active-line {
        position: absolute;
        top: 80px;
        left: 50%;
        margin-left: -40px;
        width: 80px;
        height: 4px;
        border-radius: 2px;
        background-color: #197DF0;
      }
    }
    .active {
      font-weight: 500;
      color: #333;
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F4F5FA;
    padding: 64px 64px 68px 64px;
    z-index: 9;
    .btn {
      width: calc(100% - 128px);
      line-height: 88px;
      background: #026AF2;
      border-radius: 44px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 34px;
      color: #FFF;
      text-align: center;
    }
  }
}
</style>
