<template>
  <div id="print" ref="print" class="show" style="width: 100%">
    <div class="no-print" style="text-align: center">
      <el-button class="no-print" type="small" style="float: bottom" icon="el-icon-download" size="mini" @click="printBtn">打印保存页面</el-button>
    </div>
    <el-form :model="formData" label-position="right" label-width="80px">
      <el-card class="box-card">
        <el-descriptions title="基本信息" border :column="2">
          <el-descriptions-item label="发布人">{{ formData.oper }}</el-descriptions-item>
          <el-descriptions-item label="站点名称">{{ formData.siteName }}</el-descriptions-item>
          <el-descriptions-item label="站点位置">{{ formData.position }}</el-descriptions-item>
          <el-descriptions-item label="站点类型"><dict-tag :options="dict.type.site_type" :value="formData.siteType" /></el-descriptions-item>
          <el-descriptions-item label="处理状态">
            <el-tag v-show="formData.status == 'Untreated'" type="warning">未处理</el-tag>
            <el-tag v-show="formData.status == 'Processed'" type="success">已处理</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="责任部门">
            <span v-if="formData.department!=''">
              <span v-for="(item,i) in formData.department.split('|')" :key="i">{{ unitMap[item]+"、" }}</span>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="扣评分">{{ formData.integral/10 }}</el-descriptions-item>
          <el-descriptions-item span="2" label="问题备注">{{ formData.remark }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="box-card">
        <el-descriptions title="问题列表" :column="1" direction="vertical">
          <el-descriptions-item v-for="item in formData.matter.split('|')">
            {{ matterList[item] != undefined ? matterList[item] : '' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="box-card">
        <el-descriptions title="问题图片/视频" direction="vertical" :column="1">
          <el-descriptions-item class="img" label="问题图片">
            <span v-show="formData.imgList.length<1">无图片</span>
            <img
              v-for="img in formData.imgList"
              style="width: 30%; height: 240px;padding-left: 1%"
              :src="img"
            >
          </el-descriptions-item>
          <el-descriptions-item label="问题视频">
            <span v-show="formData.video.length<1">无视频</span>
            <video
              v-show="formData.video.length>0"
              style="object-fit:fill"
              controls
              width="400"
              height="240"
              :src="formData.video"
            >
              您的浏览器不支持Video标签。
            </video>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card v-show="formData.status=='Processed'" class="box-card">
        <el-descriptions title="处理结果" :column="1" border direction="vertical">
          <el-descriptions-item label="处理人">{{ formData.handler }}</el-descriptions-item>
          <el-descriptions-item label="处理内容">{{ formData.handText }}</el-descriptions-item>
          <el-descriptions-item label="处理图片" class="img">
            <img
              v-for="img in formData.handImgList"
              style="width: 30%; height: 240px;padding-left: 1%"
              :src="img"
            >
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { findProblemInfo } from '@/api/problemInfo'
import Print from '@/utils/print'
import { getUnitList } from '@/api/unit'
export default {
  name: 'ProInfo',
  dicts: ['site_type'],
  data() {
    return {
      matterList: [],
      unitMap: {},
      formData: {
        oper: 0,
        handler: 0,
        imgs: '',
        imgList: [],
        handImgList: [],
        video: '',
        siteId: 0,
        position: '',
        matter: '',
        siteType: '',
        remark: '',
        status: '',
        handImgs: '',
        handText: '',
        department: '',
      }
    }
  },
  async created() {
    await this.getUnitList()
    const res = await findProblemInfo({ ID: this.$route.query.Id })
    if (res.code === 0) {
      this.formData = res.data.reproblemInfo
      if (this.formData.imgs.length > 0) {
        this.formData.imgList = this.formData.imgs.split('|')
      } else {
        this.formData.imgList = []
      }
      if (this.formData.handImgs.length > 0) {
        this.formData.handImgList = this.formData.handImgs.split('|')
      } else {
        this.formData.handImgList = []
      }
      const temp = res.data.reproblemInfo.matterList
      for (const index in temp) {
        this.matterList[temp[index].ID] = temp[index].problem
      }
      this.dialogFormVisible = true
    }
  },
  methods: {
    getUnitList() {
      const params = {
        page: 1,
        pageSize: 99999999,
      }
      getUnitList(params).then(res => {
        if (res.code == 0) {
          res.data.list.forEach((unit, index) => {
            this.unitMap[unit.ID.toString()] = unit.unitName
          })
        }
      })
    },
    printBtn() {
      Print(this.$refs.print)
      // window.print()
      return
    }
  }
}
</script>

<style scoped>
@media print {
  .print_hide {
    display: none;
  }

  .print_content {
    margin-top: 20px !important;
  }
}
.box-card {
  margin-bottom: 3px;
}
</style>
