<template>
  <div class="edit-add-detail detail">
    <div class="edit-add-detail-new-content">
      <div class="form-content" style="flex: 4">
        <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="8">
              <el-form-item label="救援单号">
                <span :title="detailForm.rescueNo" class="text">
                  {{ detailForm.rescueNo || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报案电话">
                <span :title="detailForm.rescueTel" class="text">
                  {{ detailForm.rescueTel || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报案时间">
                <span :title="detailForm.rescueTime" class="text">
                  {{ detailForm.rescueTime || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="救援类型">
                <span :title="detailForm.rescueType" class="text">
                  {{
                    dictionaryEscape('jylx', detailForm.rescueType + '') || '-'
                  }}
                </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.startPatrolId" class="text">
                  {{ detailForm.startPatrolName || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束站">
                <span :title="detailForm.endPatrolId" class="text">
                  {{ detailForm.endPatrolName || '-' }}
                </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.pegVal" class="text">
                  {{ detailForm.pegVal || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经度">
                <span :title="detailForm.lng" class="text">
                  {{ detailForm.lng || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="纬度">
                <span :title="detailForm.lat" class="text">
                  {{ detailForm.lat || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报案来源">
                <span :title="detailForm.rescueSrc" class="text">
                  {{
                    dictionaryEscape('baly', detailForm.rescueSrc + '') || '-'
                  }}
                </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.carCode" class="text">
                  {{ detailForm.carCode || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="故障车类">
                <span :title="detailForm.carCalss" class="text">
                  {{
                    dictionaryEscape('gzcl', detailForm.carCalss + '') || '-'
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="故障车型">
                <span :title="detailForm.carType" class="text">
                  {{ dictionaryEscape('gzcx', detailForm.carType + '') || '-' }}
                </span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="车载重量（吨）">
                <span :title="detailForm.carWeight" class="text">
                  {{ detailForm.carWeight ? detailForm.carWeight + '吨' : '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车主姓名">
                <span :title="detailForm.carUser" class="text">
                  {{ detailForm.carUser || '-' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车主电话">
                <span :title="detailForm.carUserTel" class="text">
                  {{ detailForm.carUserTel || '-' }}
                </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="24">
              <el-form-item label="占道情况">
                <!-- <div v-for="(item,index) in detailForm.occupy" :key="index" :title="item" class="text">
                  {{ dictionaryEscape('zdqk', item + '') || '-' }}；
                </div> -->
                <el-tag
                  v-for="(item, index) in detailForm.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="detailForm.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="detailForm.dispatches && detailForm.dispatches.length > 0"
            >
              <el-row
                v-for="item in detailForm.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="detailForm.car"
            >
              <el-row
                :gutter="24"
              >
                <el-col :span="8">
                  <el-form-item label="派遣车辆">
                    <span :title="detailForm.car.dispatchCarCode" class="text">
                      {{ detailForm.car.dispatchCarCode || '-' }}
                    </span>
                  </el-form-item>
                </el-col
                >
                <el-col :span="8">
                  <el-form-item label="派遣车辆类型">
                    <span :title="detailForm.car.dispatchCarType" class="text">
                      {{
                        dictionaryEscape(
                          'jycl-cllx',
                          detailForm.car.dispatchCarType + ''
                        ) || '-'
                      }}
                    </span>
                  </el-form-item>
                </el-col
                >
                <el-col :span="8">
                  <el-form-item label="派遣时间">
                    <span :title="detailForm.car.dispatchTime" class="text">
                      {{ detailForm.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="detailForm.rescueStatus == 5 || detailForm.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="detailForm.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="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-timeline class="flow-box">
            <el-timeline-item
              v-for="item in detailForm.handles"
              :key="item.id"
              :timestamp="item.handleTime"
              placement="top"
            >
              <el-card>
                <el-button 
                  round 
                  class="btn-opinion" 
                  v-if="BtnAuth('reviewComments') && item.status === 1" 
                  size="mini" type="warning" 
                  icon="el-icon-edit" 
                  @click="handleComment(item)">
                  复核意见
                </el-button>
                <div class="header">
                  <div class="title">
                    事件处置耗时：{{ formatMinite(item.timeConsuming) }}
                  </div>
                  <div class="title ">
                    事件处置状态：
                    <span :class="`status status-${item.status}`">
                      {{ dictionaryEscape('sjczzt', String(item.status)) || '-'}}
                    </span>
                  </div>
                </div>
                <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="event-detail">
                  事件复核意见：{{ item.opinion || '-'  }}
                </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>
      <super-dialog
        v-model="commentDialog"
        title="复核意见"
        width="400"
        top="30vh"
      >
        <el-form
          ref="commentForm"
          :model="commentForm"
          label-position="left"
          label-width="100px"
        >
          <el-form-item label="复核意见">
            <el-input type="textarea" rows="6" v-model="commentForm.opinion" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveComment">确定</el-button>
          <el-button @click="commentDialog = false">取消</el-button>
        </span>
      </super-dialog>
    </div>
  </div>
</template>

<script>
import {dictionaryEscape} from '@/utils/dictionary'
import {tableDetail, updateRescueStep} from '@/api/patrolAndRescue/obstacleClearingRescue/rescueRegistration'
import PubSub from 'pubsub-js'
import utils from '@/utils/utils.js'
import SuperDialog from '@/components/SuperDialog/index.vue'
export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components:{
    SuperDialog
  },
  data() {
    return {
      detailForm: {},
      pubSub: null,
      eventStatus: 0,
      confirmLoading: false,
      reverse: true,
      eventNode: '登记',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      map: null,
      mapLoading: true,
      mapDefaultOptions: {
        center: [106.5507, 29.5647] /*地图中心点*/,
        zoom: 9 /*地图默认缩放等级*/
      },
      markers: [],
      commentDialog: false,
      commentForm: {
        opinion: ''
      },
      commentloading: false,
      id: ''
    }
  },
  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.id = data.id
        this.eventStatus = data.status
        this.getDetail(data.id)
      }
    })
  },
  methods: {
    async saveComment(){
      if(!this.commentForm.opinion){
        this.$message.warning('请输入复核意见')
        return
      }
      try{
        this.commentloading = true
        const {state, message} = await updateRescueStep(this.commentForm)
        // 此处调用保存接口
        if(state){
          this.$message.success('保存成功')
          this.commentDialog = false  
          this.getDetail(this.id)
        }else{
          this.$message.error(message || '保存失败')
        }
      }catch(err){
        this.$message.error(err.message || '保存失败')
      }finally{
        this.commentloading = false
      }
    },
    handleComment(item){
      console.log(item)
      this.commentForm = item
      this.commentDialog = true
    },
    BtnAuth(btnCode) {
      return utils.BtnAuth(btnCode)
    },
    dictionaryEscape,
    formatMinite(minite) {
      if (!minite || minite <= 0) return '-'
      if (minite < 60) {
        return minite + '分钟'
      } else {
        let hours = Math.floor(minite / 60)
        let minutes = minite % 60
        return hours + '小时' + (minutes > 0 ? minutes + '分钟' : '')
      }
    },
    // 附件预览list
    getFilePreviewUrlList(files) {
      let srcList = files.map((item) => {
        return item.filePreviewUrl
      })
      return srcList
    },
    // 打开页面执行
    openPage() {
    },
    changePage(pageName = '', type = '') {
      if (!pageName) return
      this.$emit('changePage', pageName, (_) => {
        PubSub.publish(pageName, {type})
      })
    },
    // 关闭页面执行
    closePage() {
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        pubSub: this.pubSub
      })
      this.$nextTick((_) => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },
    mapLoad() {
      this.mapLoading = false
    },
    // 获取详情
    async getDetail(id) {
      const {occupy = '', ...detailForm} = await tableDetail(id)
      this.detailForm = {
        ...detailForm
      }
      this.detailForm.occupy = occupy.split(',')
    }
  },
  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;
    position: relative;
  }

  .btn-opinion{
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .header {
    display: flex;

    .title {
      width: 50%;
    }
    .status{
      display: inline-block;
      padding: 2px 8px;
    }
    .status-0 {
      background-color: $--color-success;
    }
    .status-1 {
      background-color: $--color-warning;
      margin-right: 12px;
    }

    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>
