<template>
  <div style="height: 100%; margin-top: 10px; overflow: auto;">
    <div style="color: #D9D9D9;">
        <div>发生较大及以上质量事故的工程直接判定为0分；发生一般质量事故的工程工程质量模块的分值在原有基础上直接扣除50%的分值。</div>
        <div style="margin-top: 5px;">工程存在质量缺陷的，每出现1个质量缺陷，工程质量模块分值在原有分值基础上折减15%；最高折减50%。</div>
    </div>
    <div class="flex-box">
        <div class="flex-item">
            <el-image :src="require('@/assets/images/icon_jiaoda.png')" style="width: 40px; height: 40px; margin-right: 15px;"></el-image>
            <div class="txt">较大及以上质量事故：</div>            
            <div class="num">{{info.zdsg_num || 0}}</div>
        </div>
        <div class="flex-item">
            <el-image :src="require('@/assets/images/icon_yiban.png')" style="width: 40px; height: 40px; margin-right: 15px;"></el-image>
            <div class="txt">一般质量事故：</div>            
            <div class="num" style="color: #BD60E9;">{{info.ybsg_num || 0}}</div>
        </div>
        <div class="flex-item">
            <el-image :src="require('@/assets/images/icon_quexian.png')" style="width: 40px; height: 40px; margin-right: 15px;"></el-image>
            <div class="txt">质量缺陷：</div>            
            <div class="num" style="color: #EB9334;">{{info.zlqx_num || 0}}</div>
        </div>
        <div class="flex-item">
            <el-image :src="require('@/assets/images/icon_leiji.png')" style="width: 40px; height: 40px; margin-right: 15px;"></el-image>
            <div class="txt">累计扣分：</div>            
            <div class="num">{{info.score_per || 0}}<span class="unit">%</span></div>
        </div>
    </div>
    <el-table
      border
      class="dialog-data-table"
      :data="tableData"
      v-loading="loading"
      :element-loading-background="loadingBG"
    >
      <el-table-column label="类型" align="left" prop="type_str" width="190"></el-table-column>
      <el-table-column label="描述" align="left" prop="remark"></el-table-column>
      <el-table-column label="附件" align="center" prop="file" width="110">
        <template slot-scope="scope">
            <el-popover trigger="click" v-if="scope.row.files_list && scope.row.files_list.length > 0">
                <div slot="reference"><i class="el-icon-link" style="font-size: 20px;"></i></div>
                <div style="display: flex">
                    <template v-for="item in scope.row.files_list">
                        <div class="pop-img" v-if="item.url" style="cursor: pointer; margin-right: 10px;">
                            <el-image v-if="getFileType(item.url)['type'] == 'pdf'" @click="pdfView(item.url)" :src="require('@/assets/images/icon_pdf.png')" fit="contain" style="width: 40px; height: 40px"></el-image>
                            <el-image v-else :src="item.url" fit="contain" :preview-src-list="[item.url]" style="width: 40px; height: 40px"></el-image>
                        </div>
                    </template>
                </div>
            </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getSGQXData } from "@/api/dataStatis";
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    tabnamenow:{
      type: String,
      default: 'ZLPD'
    }
  },
  data() {
    return {
        info: {},
      tableData: [],
      loading: false,
      loadingBG: "rgba(0, 0, 0, 0.2)",
    };
  },
  methods: {
    getData() {
      let id = this.tabnamenow == 'ZLPD' ? this.data.id : this.data.project_id
        getSGQXData(id).then((res) => {
            this.info = res.data.project || {}
            this.tableData = res.data.list || {}
        })
    },
    pdfView(url){
        window.open(url)
    },
    getFileType(url) {
        var urlArr = url.split('.');
        var ext = urlArr[urlArr.length - 1];
        var icon = '';
        var type = '';
        switch(ext){
            case 'jpg':
            case 'jpeg':
            case 'png':
            case 'gif':
            case 'bmp':
                icon = 'img.png';
                type = 'image';
                break;
            case 'pdf':
                icon = 'icon-pdf1';
                type = 'pdf';
                break;
            case 'mp4':
                icon = 'icon-shipin1';
                type = 'video';
                break;
            case 'doc':
            case 'docx':
                icon = 'icon-word';
                type = 'doc';
                break;
        }
        return { 'icon': icon, 'type': type };
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="less" scoped>
.flex-box{
    display: flex;
    justify-content: space-between;
    margin: 10px 0 20px;
    .flex-item{
        background: #12407F;
        border-radius: 4px;
        width: calc(25% - 8px);
        color: #FFFFFF;
        font-size: 14px;
        padding: 10px;
        display: flex;
        align-items: center;
        .num{
            font-size: 20px;
            color: #EB3434;
            margin-left: 5px;
            .unit{
                font-size: 10px;
                margin-left: 5px;
            }
        }
    }
}
</style>