<template>
  <super-dialog
    v-model="isShowDialog"
    :modal="false"
    :title="'高速公路清障救援作业确认单导出预览'"
    :top="top"
    :width="width"
    v-bind="$attrs"
    @closed="closed"
    @open="open"
  >
    <div :style="{height}" class="rescueInfo-dialog">
      <div ref="btnPanel" class="btn-box">
        <el-button
          :loading="downloadLoading"
          class="btn btn-plus"
          icon="el-icon-download"
          size="small"
          type="primary"
          @click="exportData"
        >Excel 导出
        </el-button>
      </div>
      <table style="margin-bottom: 20px;display: inline-table;">
        <tr>
          <th class="th-title" colspan="8" style="font-size: 18px">高速公路清障救援作业确认单（事故）</th>
        </tr>
        <tr>
          <td class="th-title" colspan="8">被施救车辆基础信息</td>
        </tr>
        <tr>
          <td class="title" width="12.5%">被施救车辆车牌</td>
          <td width="12.5%">{{ detailInfo.carCode || '/' }}</td>
          <td class="title" width="12.5%">被施救方电话</td>
          <td width="12.5%">{{ detailInfo.carUserTel || '/' }}</td>
          <td class="title" width="15%">车型</td>
          <td width="11%">{{ detailInfo.carTypeText || '/' }}</td>
          <td class="title" width="11.5%">车类</td>
          <td width="12.5%">{{ detailInfo.carClassText || '/' }}</td>
        </tr>
        <tr>
          <td class="title">清障救援开始时间</td>
          <td colspan="3">
            {{ detailInfo.rescueYear }}年{{ detailInfo.rescueMonth
            }}月{{ detailInfo.rescueDay }}日{{ detailInfo.rescueHour }}时{{ detailInfo.rescueMinute }}分
          </td>
          <td class="title">清障救援位置（桩号）</td>
          <td colspan="3">{{ detailInfo.pegVal || '/' }}</td>
        </tr>
        <tr>
          <td class="th-title" colspan="8">清障救援服务项目明细及金额</td>
        </tr>
        <tr>
          <td class="title">服务内容概述</td>
          <td colspan="7">{{ detailInfo.handleInfo || '/' }}</td>
        </tr>
        <tr>
          <td class="title">收费金额总计</td>
          <td colspan="7">{{ detailInfo.totalMoney || '/' }} 元</td>
        </tr>
        <tr>
          <td class="th-title" colspan="8">清障救援服务评价</td>
        </tr>
        <tr>
          <td class="title">清障救援服务评价</td>
          <td colspan="7">{{ detailInfo.revisitResult || '/' }}</td>
        </tr>
        <tr>
          <td class="title">事故救援监督人员签字</td>
          <td colspan="3">{{ detailInfo.eventUserName || '/' }}</td>
          <td class="title">救援人员签字</td>
          <td colspan="3">{{ detailInfo.acceptUserName || '/' }}</td>
        </tr>
      </table>
    </div>
  </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import {getDictionaryByCode} from '@/utils/dictionary'
import {filePreview, exportDataFileUser} from '@/api/patrolAndRescue/obstacleClearingRescue/rescueInquiry'

export default {
  name: 'FileDialog',
  props: {
    isShow: {
      default: false,
      type: Boolean
    },
    top: {
      default: '14vh',
      type: String
    },
    width: {
      default: '60%',
      type: String
    },
    height: {
      default: '65vh',
      type: String
    },
    fileInfo: {
      default() {
        return {}
      },
      type: Object
    }
  },
  components: {
    SuperDialog
  },
  data() {
    return {
      detailInfo: {},
      downloadLoading: false
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.isShow
      },
      set(val) {
        this.$emit('update:isShow', val)
      }
    }
  },
  methods: {
    getDictionaryByCode,
    async exportData() {
      this.downloadLoading = true
      try {
        let param = {
          'groupRelation': 'AND',
          'groupTree': {},
          'pageBean': {
            'page': 1,
            'pageSize': 10,
            'showTotal': true
          },
          'params': {},
          'querys': [
            {
              'group': 'main',
              'operation': 'EQUAL',
              'parentGroup': '',
              'property': 'ri.id_',
              'relation': 'AND',
              'value': this.fileInfo.id
            }
          ],
          'sorter': [
            {
              'direction': 'ASC',
              'property': ''
            }
          ]
        }
        await exportDataFileUser(param)
        this.$message.success(`数据导出成功`)
      } finally {
        this.downloadLoading = false
      }
    },
    // 打开弹层时触发
    open() {
      this.getDetailData()
    },
    // 关闭弹层触发
    closed() {
      this.detailInfo = {}
    },
    // 获取详情
    async getDetailData() {
      let param = {
        'groupRelation': 'AND',
        'groupTree': {},
        'pageBean': {
          'page': 1,
          'pageSize': 10,
          'showTotal': true
        },
        'params': {},
        'querys': [
          {
            'group': 'main',
            'operation': 'EQUAL',
            'parentGroup': '',
            'property': 'ri.id_',
            'relation': 'AND',
            'value': this.fileInfo.id
          }
        ],
        'sorter': [
          {
            'direction': 'ASC',
            'property': ''
          }
        ]
      }
      this.detailInfo = await filePreview(param)
    }
  }
}
</script>

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

.btn-box {
  margin-bottom: 15px;
  text-align: right;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.th-title {
  color: #f0f0f0;
  font-size: 16px;
  font-weight: bold;
}

.title {
  color: #f0f0f0;
  font-size: 14px;
  font-weight: bold;
}

th, td {
  border: 1px solid rgba(67, 161, 255, 0.5);
  padding: 10px;
  text-align: center;
  background-color: #103b5e;
  color: #c3cad0;
  font-size: 14px;
}
</style>