<template>
  <div class="edit-add-detail detail">
    <div class="edit-add-detail-new-content">
      <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">
            <el-col :span="24">
              <el-form-item label="事件标题">
                <span :title="detailForm.eventName" class="text">
                  {{ detailForm.eventName || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报案电话">
                <span :title="detailForm.eventTel" class="text">
                  {{ detailForm.eventTel || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件发生时间">
                <span :title="detailForm.eventTime" class="text">
                  {{ detailForm.eventTime || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件来源">
                <span :title="detailForm.eventSrc" class="text">
                  {{
                    dictionaryEscape('sjly', detailForm.eventSrc + '') || '-'
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属路段">
                <span :title="detailForm.roadName" class="text">
                  {{ detailForm.roadName || '-' }}
                </span>
              </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-col :span="8">
              <el-form-item label="开始点位桩号全值">
                <span :title="detailForm.pegSVal" class="text">
                  {{ detailForm.pegSVal || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束点位桩号全值">
                <span :title="detailForm.pegEVal" class="text">
                  {{ detailForm.pegEVal || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行驶方向">
                <span :title="detailForm.direction" class="text">
                  {{
                    dictionaryEscape('xsfx', detailForm.direction + '') || '-'
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件等级">
                <span :title="detailForm.eventLevel" class="text">
                  {{
                    eventChange(detailForm.eventLevel)
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联事件">
                <span :title="detailForm.eventNo" class="text">
                  {{ detailForm.eventNo ? 'NO.' + detailForm.eventNo : '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="事件类型">
                <span :title="detailForm.eventType" class="text">
                  {{ dictionaryEscape('lx_sjlxxq', detailForm.eventType + '') || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="肇事车辆/故障车辆">
                <span :title="detailForm.causeCar" class="text">
                  {{ detailForm.causeCar || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注">
                <span :title="detailForm.memo" class="text">
                  {{ detailForm.memo || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <template>
            <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 :data="detailForm.compensationDetailsSingle" style="width: 100%">
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="项目类别"
                prop="propertyTypeId"
                width="160"
              >
                <template v-slot="{row}">
                  {{ dictionaryEscape('lsxmlx', row.propertyTypeId) || '-' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="项目明细"
                min-width="100"
                prop="propertySubjectName"
              >
              </el-table-column>
              <el-table-column align="center" label="单位" prop="unit" width="160">
              </el-table-column>
              <el-table-column align="center" label="数量" prop="num" width="160">
              </el-table-column>
              <el-table-column
                align="center"
                label="赔偿标准"
                prop="price"
                width="160"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="小计(元)"
                prop="totle"
                width="160"
              >
              </el-table-column>
            </el-table>
          </template>
          <template>
            <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 :data="detailForm.compensationDetailsDouble" style="width: 100%">
              <el-table-column
                align="center"
                label="序号"
                type="index"
                width="60"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="金额"
                prop="totle"
              >
              </el-table-column>
              <el-table-column
                :formatter="({memo}) => memo || '-'"
                align="center"
                label="备注"
                prop="memo"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {dictionaryEscape} from '@/utils/dictionary'
import {tableDetail} from '@/api/patrolAndRescue/roadDamageComp/roadDamageRegister'
import PubSub from 'pubsub-js'

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  data() {
    return {
      detailForm: {},
      pubSub: null,
      eventGradeOptions: [
        {label: '无等级', value: 0},
        {label: '1级', value: 1},
        {label: '2级', value: 2},
        {label: '3级', value: 3},
        {label: '4级', value: 4}
      ]
    }
  },
  computed: {},
  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: {
    dictionaryEscape,
    eventChange(value) {
      return this.eventGradeOptions.find(item => item.value === value)?.label || ''
    },
    // 打开页面执行
    openPage() {
    },
    // 关闭页面执行
    closePage() {
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        pubSub: this.pubSub
      })
      this.$nextTick((_) => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },
    // 获取详情
    async getDetail(id) {
      this.detailForm = await tableDetail(id)
      if (!this.detailForm.compensationDetails) {
        this.detailForm.compensationDetailsSingle = []
        this.detailForm.compensationDetailsDouble = []
      } else {
        this.detailForm.compensationDetailsSingle = this.detailForm.compensationDetails.filter(item => item.propertySubjectType === '1')
        this.detailForm.compensationDetailsDouble = this.detailForm.compensationDetails.filter(item => item.propertySubjectType === '2')
      }
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
.edit-add-detail-new-content {
  width: 100%;
  display: flex;
  height: 0;
  flex: 1;
  //column-gap: 20px;

  .form-content {
    flex: 4;
  }

  .map-content {
    flex: 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: $--system-border-color3 0.5px 0.5px 5px 1px;

    ::v-deep.marker-tip {
      position: relative;
      background-image: url('~@/assets/img/patrolAndRescue/inspection-points-icon.png');
      background-size: cover;
      width: 48px !important;
      height: 48px !important;
      z-index: 999;

      &::after {
        position: absolute;
        content: '救援点位置';
        left: 100%;
        top: 8px;
        width: 80px;
        height: 25px;
        font-size: 16px;
        color: $--color-warning;
        text-align: center;
        line-height: 25px;
        padding: 5px 10px;
        background-color: rgba(darken($--color-warning, 70%), 0.9);
        border-radius: 3px;
        box-shadow: 0 0 6px rgba($--color-warning, 0.8);
        border: none;
        z-index: 999;
      }
    }
  }
}

.flow-box {
  ::v-deep.el-timeline-item__timestamp {
    font-size: 16px;
    color: #fff;
  }

  .el-card {
    background-color: #144871;
    border-radius: 5px;
  }

  .header {
    display: flex;

    .title {
      width: 50%;
    }

    margin-bottom: 10px;
  }

  .event-detail {
    // padding: 10px 0;
    margin-bottom: 10px;
  }

  .dispose-img {
    display: flex;
    gap: 10px;

    .el-image {
      border-radius: 5px;
      box-sizing: border-box;
    }
  }

}

::v-deep.el-backtop {
  background: transparent;
}

::v-deep.top-box {
  background: rgba(10, 38, 61, .5);
}

.corporate-customers {
  .edit-add-detail-new-content {
    ::v-deep .form-content {
      border-radius: 0 !important;
      box-shadow: none !important;
    }
  }
}
</style>
