<template>
  <super-dialog
    v-model="isShowDialog"
    :modal="false"
    :title="'完结记录单'"
    :top="top"
    :width="width"
    v-bind="$attrs"
    @closed="closed"
    @open="open"
  >
    <div class="corporate-customers">
      <div :style="{height}" class="edit-add-detail detail">
        <div class="edit-add-detail-new-content">
          <div class="form-content" style="flex: 4">
            <el-form
              ref="formInfo"
              :model="resurcDetailForm"
              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="8">
                  <el-form-item label="救援单号">
                <span :title="resurcDetailForm.rescueNo" class="text">
                  {{ resurcDetailForm.rescueNo || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="报案电话">
                <span :title="resurcDetailForm.rescueTel" class="text">
                  {{ resurcDetailForm.rescueTel || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="报案时间">
                <span :title="resurcDetailForm.rescueTime" class="text">
                  {{ resurcDetailForm.rescueTime || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="救援类型">
                <span :title="resurcDetailForm.rescueType" class="text">
                  {{
                    dictionaryEscape('jylx', resurcDetailForm.rescueType + '') || '-'
                  }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="所属路段">
                <span :title="resurcDetailForm.roadName" class="text">
                  {{ resurcDetailForm.roadName || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开始站">
                <span :title="resurcDetailForm.startPatrolId" class="text">
                  {{ resurcDetailForm.startPatrolName || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="结束站">
                <span :title="resurcDetailForm.endPatrolId" class="text">
                  {{ resurcDetailForm.endPatrolName || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="行驶方向">
                <span :title="resurcDetailForm.direction" class="text">
                  {{
                    dictionaryEscape('xsfx', resurcDetailForm.direction + '') || '-'
                  }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="事件点位桩号全值">
                <span :title="resurcDetailForm.pegVal" class="text">
                  {{ resurcDetailForm.pegVal || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经度">
                <span :title="resurcDetailForm.lng" class="text">
                  {{ resurcDetailForm.lng || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="纬度">
                <span :title="resurcDetailForm.lat" class="text">
                  {{ resurcDetailForm.lat || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="报案来源">
                <span :title="resurcDetailForm.rescueSrc" class="text">
                  {{
                    dictionaryEscape('baly', resurcDetailForm.rescueSrc + '') || '-'
                  }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="事发天气">
                <span :title="resurcDetailForm.weather" class="text">
                  {{ resurcDetailForm.weather || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="故障车牌">
                <span :title="resurcDetailForm.carCode" class="text">
                  {{ resurcDetailForm.carCode || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="故障车类">
                <span :title="resurcDetailForm.carCalss" class="text">
                  {{
                    dictionaryEscape('gzcl', resurcDetailForm.carCalss + '') || '-'
                  }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="故障车型">
                <span :title="resurcDetailForm.carType" class="text">
                  {{ dictionaryEscape('gzcx', resurcDetailForm.carType + '') || '-' }}
                </span>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="车载重量（吨）">
                <span :title="resurcDetailForm.carWeight" class="text">
                  {{ resurcDetailForm.carWeight ? resurcDetailForm.carWeight + '吨' : '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车主姓名">
                <span :title="resurcDetailForm.carUser" class="text">
                  {{ resurcDetailForm.carUser || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车主电话">
                <span :title="resurcDetailForm.carUserTel" class="text">
                  {{ resurcDetailForm.carUserTel || '-' }}
                </span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="派遣队伍">
                    <span :title="resurcDetailForm.teamName" class="text">
                      {{ resurcDetailForm.teamName || '-' }}
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="占道情况">
                    <!-- <div v-for="(item,index) in resurcDetailForm.occupy" :key="index" :title="item" class="text">
                      {{ dictionaryEscape('zdqk', item + '') || '-' }}；
                    </div> -->
                    <el-tag
                      v-for="(item, index) in resurcDetailForm.occupy"
                      :key="index"
                      :type="item < 1 ? 'success' : 'danger'"
                      style="margin-right: 5px"
                    >
                      {{ dictionaryEscape('zdqk', item + '') || '-' }}
                    </el-tag>
                  </el-form-item>
                </el-col>
              </el-row>
              <template v-if="resurcDetailForm.rescueStatus > 0">
                <div class="rows">
                  <div class="rows-left">
                    <div class="rows-hr"></div>
                  </div>
                  <div class="rows-title">
                    <div class="text-overflow">救援派遣人员信息</div>
                  </div>
                </div>
                <template
                  v-if="resurcDetailForm.dispatches && resurcDetailForm.dispatches.length > 0"
                >
                  <el-row
                    v-for="item in resurcDetailForm.dispatches"
                    :key="item.id"
                    :gutter="24"
                  >
                    <el-col :span="8">
                      <el-form-item label="派遣人员">
                    <span :title="item.dispatchUserName" class="text">
                      {{ item.dispatchUserName || '-' }}
                    </span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="派遣人员电话">
                    <span :title="item.dispatchUserTel" class="text">
                      {{ item.dispatchUserTel || '-' }}
                    </span>
                      </el-form-item>
                    </el-col
                    >
                    <el-col :span="8">
                      <el-form-item label="派遣时间">
                    <span :title="item.dispatchTime" class="text">
                      {{ item.dispatchTime || '-' }}
                    </span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </template>
                <template v-else>
                  <div style="text-align: center; color: #c0c4cc; padding: 10px 0">
                    暂无救援派遣人员信息...
                  </div>
                </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>
                <template
                  v-if="resurcDetailForm.car"
                >
                  <el-row
                    :gutter="24"
                  >
                    <el-col :span="8">
                      <el-form-item label="派遣车辆">
                    <span :title="resurcDetailForm.car.dispatchCarCode" class="text">
                      {{ resurcDetailForm.car.dispatchCarCode || '-' }}
                    </span>
                      </el-form-item>
                    </el-col
                    >
                    <el-col :span="8">
                      <el-form-item label="派遣车辆类型">
                    <span :title="resurcDetailForm.car.dispatchCarType" class="text">
                      {{
                        dictionaryEscape(
                          'jycl-cllx',
                          resurcDetailForm.car.dispatchCarType + ''
                        ) || '-'
                      }}
                    </span>
                      </el-form-item>
                    </el-col
                    >
                    <el-col :span="8">
                      <el-form-item label="派遣时间">
                    <span :title="resurcDetailForm.car.dispatchTime" class="text">
                      {{ resurcDetailForm.car.dispatchTime || '-' }}
                    </span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </template>
                <template v-else>
                  <div style="text-align: center; color: #c0c4cc; padding: 10px 0">
                    暂无救援派遣车辆信息...
                  </div>
                </template>

                <!-- v-if="resurcDetailForm.rescueStatus == 5 || resurcDetailForm.rescueStatus == 6" -->
                <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="resurcDetailForm.costs" style="width: 100%">
                    <el-table-column
                      align="center"
                      label="序号"
                      type="index"
                      width="70"
                    />
                    <el-table-column
                      align="center"
                      label="发票单号"
                      prop="invoiceNo"
                      width="180"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="应收金额"
                      prop="shouldMoney"
                      width="80"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="实收金额"
                      prop="actualMoney"
                      width="80"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="收费类型"
                      prop="costType"
                      width="100"
                    >
                      <template v-slot="{row}">
                        {{ dictionaryEscape('sflx', row.costType + '') || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="支付方式"
                      prop="payType"
                      width="100"
                    >
                      <template v-slot="{row}">
                        {{ dictionaryEscape('zffs', row.payType + '') || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="支付时间"
                      min-width="180"
                      prop="costTime"
                    ></el-table-column>
                  </el-table>
                </template>
              </template>
            </el-form>
          </div>
          <div class="form-content" style="flex: 3">
            <el-form
              ref="formInfo"
              :model="resurcDetailForm"
              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-timeline class="flow-box">
                <el-timeline-item
                  v-for="item in resurcDetailForm.handles"
                  :key="item.id"
                  :timestamp="item.createTime"
                  placement="top"
                >
                  <el-card>
                    <div class="header">
                      <div class="title">
                        事件处置环节：{{
                          dictionaryEscape('jy_czlc', item.rescueNode + '') || '-'
                        }}
                      </div>
                      <div class="title">事件处置人：{{ item.handleUserName }}</div>
                    </div>
                    <div class="header">
                      <div class="title">
                        事件处置人所属队伍：{{ item.handleTeamName }}
                      </div>
                      <div class="title">事件处置时间：{{ item.handleTime }}</div>
                    </div>
                    <div class="event-detail">
                      事件处置情况：{{ item.handleInfo }}
                    </div>
                    <div class="dispose-img">
                      <el-image
                        v-for="file in item.files"
                        :key="file.id"
                        :preview-src-list="getFilePreviewUrlList(item.files)"
                        :src="file.filePreviewUrl"
                        style="width: 100px; height: 100px"
                      >
                      </el-image>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import {dictionaryEscape} from '@/utils/dictionary'

export default {
  name: 'DetailPage',
  components: {
    SuperDialog
  },
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    top: {
      default: '14vh',
      type: String
    },
    width: {
      default: '80%',
      type: String
    },
    height: {
      default: '65vh',
      type: String
    },
    detailForm: {
      default: () => {
      },
      type: Object
    }
  },
  data() {
    return {
      resurcDetailForm: {}
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  methods: {
    dictionaryEscape,
    // 附件预览list
    getFilePreviewUrlList(files) {
      let srcList = files.map((item) => {
        return item.filePreviewUrl
      })
      return srcList
    },
    // 打开页面执行
    open() {
      this.getDetail(this.detailForm.id)
    },
    // 获取详情
    async getDetail(id) {
      const {occupy = '', ...resurcDetailForm} = await tableDetail(id)
      this.resurcDetailForm = {
        ...resurcDetailForm
      }
      this.resurcDetailForm.occupy = occupy.split(',')
    },
    closed() {
      this.isShowDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-add-detail {
  padding: 0 !important;
}

.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>
