<template>
  <div class="edit-add-detail detail show-scrollbar">
    <div v-loading="formLoading" class="edit-add-detail-new-content" element-loading-background="rgba(10 ,38 ,61, 1)"
         element-loading-text="巡检结果加载中...">
      <div class="form-content">
        <el-form ref="formInfo" :model="detailForm" class="detail-form" label-position="right" label-suffix="：">
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">
                巡检基础信息
              </div>
            </div>
          </div>
          <el-row :gutter="24" style="flex-wrap: wrap" type="flex">
            <el-col :span="8">
              <el-form-item label="所属路段">
                <template v-slot:default>
                  <div class="tag-box">
                    <el-tag v-for="(item, index) in detailForm.roadCode" :key="index" effect="dark" size="medium ">
                      {{ item }}
                    </el-tag>
                    <!--                    <el-tag effect="dark" size="medium ">-->
                    <!--                      {{ detailForm.roadCode }}-->
                    <!--                    </el-tag>-->
                  </div>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班次">
                <span :title="dictionaryEscape('bc-xjrw', detailForm.workclass)" class="text">
                  {{ dictionaryEscape('bc-xjrw', detailForm.workclass) || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="巡检类型">
                <span :title="dictionaryEscape('xjlx-xjrw', detailForm.type)" class="text">
                  {{ dictionaryEscape('xjlx-xjrw', detailForm.type) || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="往返类型">
                <span :title="dictionaryEscape('wflx-xjrw', detailForm.inspectType)" class="text">
                  {{ dictionaryEscape('wflx-xjrw', detailForm.inspectType) || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="巡检队伍">
                <span :title="detailForm.teamName" class="text">
                  {{ detailForm.teamName || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="巡检里程">
                <span :title="detailForm.mileage" class="text">
                  {{ detailForm.mileage }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="天气">
                <span :title="detailForm.weather" class="text">
                  {{ detailForm.weather || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="巡检开始时间">
                <span :title="detailForm.startTime" class="text">
                  {{ detailForm.startTime || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="巡检结束时间">
                <span :title="detailForm.endTime" class="text">
                  {{ detailForm.endTime || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="巡检人员">
                <template v-slot:default>
                  <div class="tag-box">
                    <el-tag v-for="(item, index) in detailForm.inspectUsersName" :key="index" effect="dark"
                            size="medium" type="warning">
                      {{ item }}
                    </el-tag>
                    <!--                    <el-tag effect="dark" size="medium" type="warning">-->
                    <!--                      {{ detailForm.inspectUsersName }}-->
                    <!--                    </el-tag>-->
                  </div>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始巡检站">
                <span :title="detailForm.startPatrolName" class="text">
                  {{ detailForm.startPatrolName || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束巡检站">
                <span :title="detailForm.endPatrolName" class="text">
                  {{ detailForm.endPatrolName || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>

          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">
                应巡查点位清单
              </div>
            </div>
          </div>
          <el-table ref="multipleSelection" :data="planPatrolDetails" border class="table-list" max-height="400px"
                    row-key="indicatorId" stripe>
            <el-table-column :index="index => index + 1" align="center" label="序号" type="index" width="70" />
            <el-table-column :formatter="({ name }) => name || '-'" align="center" label="点位名称" min-width="110"
                             prop="name" show-overflow-tooltip />
            <el-table-column :formatter="({ direction }) => dictionaryEscape('xsfx', direction) || '-'" align="center"
                             label="方向" min-width="70" prop="direction" show-overflow-tooltip />
            <el-table-column :formatter="({ pegVal }) => pegVal || '-'" align="center" label="点位桩号" min-width="80"
                             prop="pegVal" show-overflow-tooltip />
            <el-table-column :formatter="({ type }) => dictionaryEscape('xcdwlx', type) || '-'" align="center"
                             label="点位类型" min-width="80" prop="type" show-overflow-tooltip />
            <el-table-column :formatter="({ content }) => content || '-'" align="center" label="内容" min-width="80"
                             prop="content" show-overflow-tooltip />
            <el-table-column :formatter="({ category }) => dictionaryEscape('xcdwlb', category) || '-'" align="center"
                             label="点位类别" min-width="80" prop="category" show-overflow-tooltip />
          </el-table>


        </el-form>
      </div>

      <div class="form-content">
        <el-form ref="formInfo" :model="detailForm" class="detail-form" label-position="right" label-suffix="：">
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">
                巡检结果记录
              </div>
            </div>
          </div>
          <el-row :gutter="24" style="flex-wrap: wrap" type="flex">
            <el-col :span="24">
              <el-timeline>
                <el-timeline-item v-for="(item, index) in detailForm.resultDetails" :key="index" :class="[
                  item.inspectStatus === '1' ? 'success-item' : '',
                  item.inspectStatus === '0' ? 'error-item' : '',
                  (item.id === resultActiveId || index + 1 === detailForm.resultDetails.length) ? 'high-light-item' : ''
                ]" :icon="item.icon" :timestamp="item.inspectTime" hide-timestamp placement="top">
                  <!--  首位  -->
                  <template v-if="index === 0 && detailForm.endTime">
                    <div class="timeline-timestamp">
                      {{ item.inspectTime }} （结束巡检）
                    </div>
                  </template>
                  <!--  末尾  -->
                  <template v-else-if="index + 1 === detailForm.resultDetails.length && detailForm.startTime ">
                    <div class="timeline-timestamp">
                      {{ item.inspectTime }} （开始巡检）
                    </div>
                  </template>
                  <template v-else>
                    <div class="timeline-timestamp" style="cursor: pointer">
                      {{ item.inspectTime }}
                    </div>
                    <div class="timeline-content">
                      <el-row :gutter="24" style="flex-wrap: wrap" type="flex">
                        <el-col :span="6">
                          <el-form-item label="点位桩号">
                            <span :title="item.pegVal" class="text">
                              {{ item.pegVal ? item.pegVal : '-' }}
                            </span>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="点位类别">
                            <!--                            <span :title="dictionaryEscape('xcdwlb', JSON.stringify(item.category))" class="text">-->

                            <!--                            </span>-->
                            <el-tag effect="dark" size="medium ">
                              {{ dictionaryEscape('xcdwlb', JSON.stringify(item.category)) || '-' }}
                            </el-tag>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="状态">
                            <div v-if="item.inspectStatus" class="tag-box">
                              <el-tag :type="item.inspectStatus === '1' ? 'success' : 'danger'" effect="dark"
                                      size="mini">
                                {{ dictionaryEscape('xcdwzt', item.inspectStatus) }}
                              </el-tag>
                            </div>
                            <span v-else class="text">-</span>
                          </el-form-item>
                        </el-col>
                        <!--                        <el-col :span="6">-->
                        <!--                          <el-form-item label="上报手机">-->
                        <!--                            <span :title="item.reportTel" class="text">-->
                        <!--                              {{ item.reportTel || '-' }}-->
                        <!--                            </span>-->
                        <!--                          </el-form-item>-->
                        <!--                        </el-col>-->
                        <!--                        <el-col :span="24">-->
                        <!--                          <el-form-item label="巡检时间">-->
                        <!--                            <span :title="item.inspectTime" class="text">-->
                        <!--                              {{ item.inspectTime || '-' }}-->
                        <!--                            </span>-->
                        <!--                          </el-form-item>-->
                        <!--                        </el-col>-->
                        <el-col v-if="item.inspectStatus === '0'" :span="8">
                          <el-form-item label="异常处理方式">
                            <span :title="dictionaryEscape('xcycclfs', item.handleType)" class="text">
                              {{ dictionaryEscape('xcycclfs', item.handleType) || '-' }}
                            </span>
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item label="巡检情况">
                            <span :title="item.inspectInfo" class="text">
                              {{ item.inspectInfo || '-' }}
                            </span>
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item label="巡检图片">
                            <div v-if="item.fileUrlArr && item.fileUrlArr.length" class="image-box">
                              <el-image v-for="(fileUrl, index) in item.fileUrlArr" :key="index"
                                        :preview-src-list="item.fileUrlArr" :src="fileUrl">
                              </el-image>
                            </div>
                            <template v-else>-</template>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                </el-timeline-item>
              </el-timeline>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <el-backtop :visibility-height="20" target=".detail-form">
      <div class="top-box">UP</div>
    </el-backtop>
  </div>
</template>

<script>
import {tableDetail} from '@/api/patrolAndRescue/roadWatch/inspectionResults'
import PubSub from 'pubsub-js'
import {dictionaryEscape} from '@/utils/dictionary'
import {tableDetail as planDetail} from '@/api/patrolAndRescue/roadWatch/inspectionPlan'
import styles from '@/assets/css/element-variables.scss' // 引入导出的 SCSS 变量

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {},
  data() {
    return {
      detailForm: {},
      formLoading: true,
      planPatrolDetails: [], // 巡检计划详情
      resultActiveId: '',
      centerCoords: null, // 中心点
      pubSub: null
    }
  },
  computed: {
    previewUrl: _ => window.context.portal + '/file/onlinePreviewController/v1/getFileById_'
  },
  watch: {
    componentName: {
      handler(newVal) {
        if (newVal === this.$options.name) {
          this.openPage()
        } else {
          this.closePage()
        }
      }
    }
  },
  mounted() {
    this.pubSub = PubSub.subscribe('DetailPage', (_, data) => {
      if (data.id) {
        this.getDetail(data.id)
      }
    })
  },
  methods: {
    // 获取详情
    async getDetail(id) {
      try {
        this.detailForm = await tableDetail(id)
        if (this.detailForm.resultDetails) {
          this.detailForm.resultDetails = this.detailForm.resultDetails.map(i => ({
            ...i,
            icon: 'el-icon-location',
            // scss变量颜色
            markColor: styles[`color_${i.inspectStatus === '1' ? 'success' : 'danger'}`],
            markType: i.inspectStatus === '1' ? 'success' : 'danger',
            // fileUrlArr: []
            fileUrlArr: i.files ? i.files.map(file => {
              return file.filePreviewUrl ? file.filePreviewUrl : ''
            }) : []
          }))
        }
        if (this.detailForm.result) {
          if (this.detailForm.result.startTime) {
            this.detailForm.resultDetails.push({
              inspectTime: this.detailForm.result.startTime,
              icon: 'el-icon-truck'
            })
          }
          if (this.detailForm.result.endTime) {
            this.detailForm.resultDetails.unshift({
              inspectTime: this.detailForm.result.endTime,
              icon: 'el-icon-success'
            })
          }
        }
        this.detailForm = {
          ...this.detailForm,
          ...this.detailForm.result,
          resultDetails: this.detailForm.resultDetails
        }

        const hasCommCode = this.detailForm.roadCode && this.detailForm.roadCode.includes(',')
        if (hasCommCode) {
          this.detailForm.roadCode = this.detailForm.roadCode.split(',').filter(i => i)
        } else {
          this.detailForm.roadCode = [this.detailForm.roadCode]
        }

        const hasCommName = this.detailForm.inspectUsersName && this.detailForm.inspectUsersName.includes(',')
        if (hasCommName) {
          this.detailForm.inspectUsersName = this.detailForm.inspectUsersName.split(',').filter(i => i)
        } else {
          this.detailForm.inspectUsersName = [this.detailForm.inspectUsersName]
        }
        // 获取巡检计划内容，并绘制计划巡查点位
        if (this.detailForm.planId !== '') {
          await this.getPlanDetail(this.detailForm.planId)
        }
      } finally {
        this.formLoading = false
      }
    },

    // 获取巡检计划内容，并绘制计划巡查点位
    async getPlanDetail(planId) {
      const {planPatrolDetails = []} = await planDetail(planId)
      this.planPatrolDetails = planPatrolDetails
    },

    // 打开页面执行
    openPage() {
      // this.$refs.mineMap?.map?.resize() // 根据地图的 container 元素的尺寸调整地图的大小。
    },

    // 关闭页面执行
    closePage() {
      const {pubSub} = this
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {pubSub})

      this.$nextTick(_ => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },

    dictionaryEscape
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";

.edit-add-detail {
  .edit-add-detail-new-content {
    width: 100%;
    display: flex;
    height: 0;
    flex: 1;
    column-gap: 20px;
    border-radius: 10px;
    overflow: hidden;

    .form-content {
      flex: 2;

      ::v-deep .el-timeline {
        margin-left: 6px;

        * {
          font-size: 14px;
        }

        @mixin timeline-item-style($node-timestamp-color, $node-opacity: 0.35, $timestamp-opacity: 0.65) {
          .el-timeline-item__node {
            background-color: transparent;
            opacity: $node-opacity;
            transition: all 0.15s;

            i {
              color: $node-timestamp-color;
              font-size: 22px;
            }
          }

          .el-timeline-item__tail {
            border-color: $node-timestamp-color;
            opacity: $node-opacity;
            transition: all 0.15s;
          }

          .el-timeline-item__content {
            .timeline-timestamp {
              color: $node-timestamp-color;
              opacity: $timestamp-opacity;
              font-size: 16px;
              margin-bottom: 10px;
              display: flex;
              column-gap: 4px;
              transition: all 0.15s;

              &:hover {
                opacity: 1;
              }
            }

            .timeline-content {
              color: $--color-text-placeholder;

              .el-form-item {
                margin-bottom: 0;
              }
            }
          }
        }


        .el-timeline-item {
          @include timeline-item-style($--color-warning); // 使用默认的透明度值

          &.success-item {
            @include timeline-item-style($--color-success);
          }

          &.error-item {
            @include timeline-item-style($--color-danger);
          }

          &.high-light-item {
            @include timeline-item-style(_, 1, 1); // 高亮项使用完全不透明
          }
        }
      }

      .image-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 15px;
        margin: 5px 0;

        ::v-deep .el-image {
          width: 100px;
          height: 100px;
          border-radius: 4px;
          user-select: none;
          position: relative;
          transition: all 0.15s;
          box-shadow: 3px 3px 10px rgba(darken($--system-background-color, 30%), 0.3);

          .el-image__inner {
            transition: transform 0.2s;
            position: absolute;
          }

          &:hover {
            .el-image__inner {
              transform: scale(1.5);
            }
          }

          .el-image__error {
            background-color: $--system-box-color2;
          }

          .el-image__placeholder {
            background-color: $--color-text-placeholder;
          }

          &:has(.el-image__error, .el-image__placeholder) {
            box-shadow: none;
          }
        }
      }
    }

    .map-content {
      flex: 2;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid darken($--system-border-color2, 10%);

      /* 自定义标记样式 */
      ::v-deep .mine-map {

        /* 自定义标记样式 */
        .plan-mark {
          width: 40px;
          height: 40px;
        }

        @mixin popup-styles($color: $--color-warning,
          $font-size: 14px) {
          $popup-bg-color: rgba($--color-black, 0.85);
          $popup-shadow-color: rgba($color, 0.7);

          .minemap-popup-tip {
            border-width: 6px;
            border-top-color: $popup-bg-color;
            filter: drop-shadow(3px 3px 3px $popup-shadow-color); // 添加阴影
          }

          .minemap-popup-content {
            box-shadow: 0 0 4px $popup-shadow-color;
            background-color: $popup-bg-color;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-size: $font-size;
            color: $color;
          }
        }

        .plan-mark-popup {
          @include popup-styles(); // 默认是 warning 颜色

          .minemap-popup-content {
            font-weight: 400;
          }

          &.success {
            @include popup-styles($--color-success, 15px); // 成功状态
          }

          &.danger {
            @include popup-styles($--color-danger, 15px); // 危险状态
          }
        }
      }
    }
  }
}
</style>
