<template>
  <div class="photo-detail">
    <AiGroup noBorder>
      <h2>{{ info.content }}</h2>
      <div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
      <div style="height:20px;"></div>
    </AiGroup>
    <AiGroup description noBorder labelColor="#999">
      <AiItem label="事件类型" :value="info.groupName"/>
      <AiItem label="所属网格" :value="info.girdName"/>
      <AiItem label="上报时间" :value="info.createTime"/>
      <AiItem label="照片" class="not-line">
        <div class="flex wrap">
          <image class="fill imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
        </div>
        <span v-if="!hasFiles(info.files)">暂无照片</span>
      </AiItem>
    </AiGroup>
    <u-gap height="24" v-if="result.doExplain"/>
    <AiGroup title="处理详情" description noBorder labelColor="#999" v-if="result.doExplain">
      <AiItem label="处理结果" top-label :value="result.doExplain"/>
      <AiItem label="照片" class="not-line">
        <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="!hasFiles(result.files)">暂无照片</span>
      </AiItem>
    </AiGroup>
    <!-- <u-gap height="24" v-if="info.judgeName"/>
    <AiGroup title="研判信息" description noBorder labelColor="#999" v-if="info.judgeName">
      <AiItem label="事件研判"><span class="risk-level" :class="`level`+info.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', info.judgeRiskLevel) }}</span></AiItem>
      <AiItem label="当事人姓名" :value="info.judgeName"/>
      <AiItem label="性别" :value="$dict.getLabel('sex', info.judgeSex)"/>
      <AiItem label="联系电话" :value="info.judgePhone"/>
      <AiItem label="家庭住址" :value="info.judgeAddress"/>
      <AiItem label="纠纷类别" :value="$dict.getLabel('qujingDisputeCategory', info.judgeDisputeCategory)"/>
      <AiItem label="排查内容" class="not-line">
        <span v-for="(item, index) in info.judgeRiskList" :key="index">
          <span v-if="index > 0">,</span>{{ $dict.getLabel('qujingRisk', item) }}
        </span>
      </AiItem>
    </AiGroup>
    <u-gap height="24" v-if="info.mediateAreaName"/>
    <AiGroup title="调解信息" description noBorder labelColor="#999" v-if="info.mediateAreaName">
      <AiItem label="调解主体" :value="info.mediateAreaName" />
      <AiItem label="涉及金额" :value="info.mediateAmount"/>
      <AiItem label="调解员" :value="info.mediatePerson"/>
      <AiItem label="参加人" :value="info.mediateMember || '无'"/>
      <AiItem label="调解时间" :value="info.mediateDate"/>
      <AiItem label="调处思路、措施及主要过程" :value="info.mediateInfo"/>
      <AiItem label="调处结果" class="not-line" value="调解成功" />
    </AiGroup> -->
    <u-gap height="24"/>
    <u-tabs :list="tabs" :current="currentTab" @change="v=>currentTab=v"/>
    <u-gap height="24" bg-color="#fff"/>
    <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"/>
        <u-gap height="48"/>
      </AiStep>
    </AiGroup>
    <AiEvaluation v-if="currentTab=='1'" :bid="info.id" type="show"/>
    <AiEvaluation v-if="info.eventStatus == 3" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
      <div class="bottomBtn">去评价</div>
    </AiEvaluation>
  </div>
</template>

<script>
export default {
  appName: "随手拍详情",
  data() {
    return {
      info: {},
      result: {},
      currentTab: 0,
      evaluation: {}
    }
  },
  computed: {
    detailStatus: v => {
      const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
      return {
        cls: 'status-' + status,
        label: !v.evaluation.id ? v.$dict.getLabel('qujingEventStatus', 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;
    },
    tabs: v => {
      const tabs = [{name: "办理进度"}];
      if (!!v.evaluation?.id) {
        tabs.push({name: "我的评价"});
      }
      return tabs;
    },
  },
  onShow() {
    this.getInfo()
  },
  onLoad(query) {
    this.id = query.id
    this.getInfo()
    this.$dict.load(['qujingEventStatus', 'qujingDoStatus', 'qujingEventType', 'sex', 'qujingRisk', 'qujingRiskLevel', 'qujingDisputeCategory'])
  },
  methods: {
    getInfo() {
      this.$loading()
      this.$instance.post(`/app/appclapeventinfoqujing/queryDetailById?id=${this.id}`).then(res => {
        if (res?.data) {
          this.info = res.data
          if (['3', '4'].includes(res.data.eventStatus) && res.data.groupName != '矛盾调解') {
            this.result = res.data.processList[0]
          }
          if (this.info.judgeRisk) {
            this.info.judgeRiskList = this.info.judgeRisk.split(',')
          }
        }
      }).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,
      });
    },
    hasFiles(files) {
      return files?.length > 0;
    },
  },
};
</script>

<style lang="scss">
.photo-detail {
  padding: 32px 0 160px;
  margin-bottom: 60px;
  // background: #fff;

  h2 {
    line-height: 1.3;
    margin-bottom: 26px;
    color: #333333;
    text-align: justify;
    font-size: 40px;
  }

  ::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;
    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;
    // }

    &.status-0 {
      background: #ff883c;
    }

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

    &.status-3 {
      background: #42d784;
    }

    &.status-4 {
      background: #ff4466;
    }
  }

  .imageItem {
    min-width: 30%;
    height: 30vw;
    flex-shrink: 0;
    margin-right: 16px;
    margin-bottom: 16px;

    &:nth-of-type(3n) {
      margin-right: 0;
    }
  }

  .not-line {
    .AiItem {
      .normal {
        border: none !important;
        min-height: 112px !important;
      }
    }
  }

  ::v-deep .AiGroup {
    .groupHeader {
      padding-top: 16px !important;
    }
  }

  .level1 {
    color: #3D88F5;
  }

  .level2 {
    color: #52C75B;
  }

  .level3 {
    color: #FF883C;
  }

  .level4 {
    color: #FF3C3C;
  }

}
</style>
