<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>
          <td class="th-title" colspan="6">巡查信息</td>
        </tr>
        <tr>
          <td class="title" width="16%">巡查班组</td>
          <td width="18%">{{ detailInfo.teamName || '/' }}</td>
          <td class="title" width="16%">日期</td>
          <td width="17%">{{ detailInfo.taskDate || '/' }}</td>
          <td class="title" width="16%">天气</td>
          <td width="17%">{{ detailInfo.weather || '/' }}</td>
        </tr>
        <tr>
          <td class="title">巡查路段</td>
          <td>{{ detailInfo.roadName || '/' }}</td>
          <td class="title">起止里程</td>
          <td>
            {{ detailInfo.startMileage || '0' }}KM~{{
              detailInfo.endMileage || '0'
            }}KM
          </td>
          <td class="title">当日巡查里程</td>
          <td>{{ detailInfo.mileage || '0' }}KM</td>
        </tr>
        <tr>
          <td class="title">巡查车辆</td>
          <td>{{ detailInfo.carCode || '/' }}</td>
          <td class="title">巡查人员</td>
          <td>{{ detailInfo.inspectUsersName || '/' }}</td>
          <td class="title">记录人员</td>
          <td>{{ detailInfo.createName || '/' }}</td>
        </tr>
        <tr>
          <td class="th-title" colspan="6">出车检查</td>
        </tr>
        <tr>
          <td class="title">车辆外观</td>
          <td>{{ detailInfo.carAppearance || '/' }}</td>
          <td class="title">机油/冷却水</td>
          <td>{{ detailInfo.carEngine || '/' }}</td>
          <td class="title">标牌/锥标/灭火器</td>
          <td>{{ detailInfo.carFfe || '/' }}</td>
        </tr>
        <tr>
          <td class="title">灯光/警报器</td>
          <td>{{ detailInfo.carLight || '/' }}</td>
          <td class="title">刹车/转向</td>
          <td>{{ detailInfo.carOp || '/' }}</td>
          <td class="title">仪表盘里程</td>
          <td>{{ detailInfo.startMileage || '0' }}KM</td>
        </tr>
        <tr>
          <td class="title">时间</td>
          <td class="title">地点或桩号</td>
          <td class="title" colspan="2">现场情况及发现问题</td>
          <td class="title" colspan="2">有无异常情况及处理意见</td>
        </tr>
        <tr
          v-for="(item, index) in detailInfo.results"
          v-if="detailInfo.results && detailInfo.results.length > 0"
          :key="index"
        >
          <td>{{ item.inspectTime }}</td>
          <td>{{ item.name }}</td>
          <td colspan="2">{{ item.inspectInfo }}</td>
          <td colspan="2">{{ item.handInfo }}</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/roadWatch/abnormalHandling'

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: 't.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: 't.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>
