<template>
  <div class="content">
    <table>
      <tr>
        <th class="title">问题类型:</th>
        <td>{{ detail.typeName }}</td>

      </tr>
      <tr>
        <th class="title">任务名称:</th>
        <td>{{ detail.missionName }}</td>
      </tr>
      <tr>
        <th class="title">巡检时间:</th>
        <td>{{ detail.inspectionTime }}</td>
      </tr>
      <tr>
        <th class="title">问题图片:</th>
        <td>
          <img
            v-for="(item,index) in fileImageList"
            :key="index"
            :src="item.src"
          >
        </td>
      </tr>
      <tr v-show="detail.handlerResult">
        <th class="title">处理后描述:</th>
        <td>{{ detail.handlerResult }}</td>
      </tr>
      <tr v-show="detail.handlerImage">
        <th class="title">处理后图片:</th>
        <td>
          <img
            v-for="(item,index) in handlerImageList"
            :key="index"
            :src="item.src"
          >
        </td>
      </tr>
      <tr>
        <th class="title">处理人:</th>
        <td>{{ detail.handlerUserName }}</td>
      </tr>
      <tr v-show="detail.handlerTime">
        <th class="title">处理时间:</th>
        <td>{{ detail.handlerTime }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import { reactive, toRefs, watch, onMounted } from 'vue'
export default {
  props: {
    detail: {
      type: Object,
      default: () => { }
    }
  },
  setup(props) {
    const data = reactive({
      detail: props.detail,
      fileImageList: [],
      handlerImageList: []
    })

    watch(() => props.detail, (value) => {
      if (JSON.stringify(value) !== '{}') {
        const fileImageList = value.fileMarkerUrl.split(',')
        data.fileImageList = []
        fileImageList.map((item) => {
          const obj = {}
          obj.src = new URL(item, import.meta.url).href
          data.fileImageList.push(obj)
        })
        data.handlerImageList = []
        if (value.handlerImage) {
          const handlerImageStr = value.handlerImage.split(',')
          handlerImageStr.map((item) => {
            const obj = {}
            obj.src = new URL(item, import.meta.url).href
            data.handlerImageList.push(obj)
          })
          // console.log(data.handlerImageList, '444')
        }
      }
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>
<style lang='scss' scoped>
.content {
  box-sizing: border-box;
  padding: 25px 5px;
}
table {
  width: 100%;
  height: 90px;
  font-size: 15px;
  font-family: Noto Sans SC-Regular, Noto Sans SC;
  font-weight: 400;
  border-collapse: collapse;
  background: #2c2c2c;

  img {
    width: 56px;
    height: 56px;
    margin: 5px 0;
  }
  .title {
    color: #8b8b8b;
  }
  td {
    box-sizing: border-box;
    padding-left: 11px;
    display: flex;
    align-items: center;
  }
  // td {
  //   padding: 5px 11px;
  //   display: flex;
  // }
}
table,
td,
th {
  border: 1px solid #707070;
  color: white;
  font-weight: 400;
}
</style>
