<template>
  <view class="container">
    <tui-list-cell :hover="false">
      <view class="fs-flex__between"><view>问题单号</view><view>{{info.problemNo}}</view></view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between"><view class="basis">道路名称</view><view>{{info.roadName}}</view></view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between"><view>养护级别</view><view>{{info.curingLevelName}}</view></view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between"><view>养护组长</view><view>{{info.leaderUserName}}</view></view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between">
        <view>紧急程度</view>
        <view>
          <tui-text v-if="info.pressingType == 1" type="primary" text="特急"></tui-text>
          <tui-text v-else-if="info.pressingType == 2" type="primary" text="紧急"></tui-text>
          <tui-text v-else-if="info.pressingType == 3" type="primary" text="一般"></tui-text>
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between">
        <view>指派状态</view>
        <view>
          <tui-text v-if="info.distributeStatus == 2" text="已指派" type="success"></tui-text>
          <tui-text v-else text="待指派" type="danger"></tui-text>
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between">
        <view>领导确认状态</view>
        <view>
          <tui-text v-if="info.leaderConfrimStatus == 1" text="待确认" type="warning"></tui-text>
          <tui-text v-else-if="info.leaderConfrimStatus == 2" text="已确认" type="success"></tui-text>
          <tui-text v-else-if="info.leaderConfrimStatus == 3" text="已拒绝" type="danger"></tui-text>
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between"><view>问题来源</view><view>{{info.problemSourceName}}</view></view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between">
        <view class="basis">具体位置</view>
        <view @click="openMap(info.lat, info.lon, info.lonLatAddress)">
          <tui-text type="primary" decoration="underline" :text="info.lonLatAddress"></tui-text>
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between"><view>提交日期</view><view>{{info.createTime}}</view></view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between"><view class="basis">问题描述</view><view>{{info.remark}}</view></view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between">
        <view>问题图片</view>
        <view class="fs-flex">
          <view class="fs-ml20" v-for="(value, key) in info.imgList">
            <tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('imgList',key)"></tui-lazyload-img>
          </view>
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :hover="false">
      <view class="fs-flex__between">
        <view>街景图片</view>
        <view class="fs-flex">
          <view class="fs-ml20" v-for="(value, key) in info.streetImgList">
            <tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('streetImgList',key)"></tui-lazyload-img>
          </view>
        </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :hover="false" unlined>
      <view class="fs-flex__between fs-safe__area">
        <view>远景图片</view>
        <view class="fs-flex">
          <view class="fs-ml20" v-for="(value, key) in info.longRangeImgList">
            <tui-lazyload-img radius="12rpx" width="150rpx" height="150rpx" mode="aspectFill" :src="value" @click="previewImage('longRangeImgList',key)"></tui-lazyload-img>
          </view>
        </view>
      </view>
    </tui-list-cell>
  </view>
</template>

<script>
import { apiCaseDetail } from '@/api/work'
export default {
  data() {
    return {
      info: {}
    }
  },
  onLoad(options) {
    this.getCaseDetail(options.problem_no)
  },
  methods: {
    // 获取问题详情
    getCaseDetail(problem_no) {
      apiCaseDetail({data:{problem_no}}).then(res => {
        this.info = res.data
      })
    },
    // 图片预览
    previewImage(index, key) {
      const imageList = this.info[index]
      uni.previewImage({
        current: imageList[key],
        loop: true,
        urls: imageList
      })
    },
    // 查看地图
    openMap(latitude, longitude, address) {
      uni.openLocation({
        latitude: latitude,
        longitude: longitude,
        address: address
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.basis {
  flex-basis: 180rpx;
  flex-shrink: 0;
}
</style>
