<template>
    <div>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <el-table
            v-loading="loading"
            :data="equipmentList"
        >
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column
                label="配件类型"
                align="center"
                prop="maName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="配件名称"
                align="center"
                prop="maTypeName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="规格型号"
                align="center"
                prop="partName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="单位"
                align="center"
                prop="unitName"
                :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                label="采购数量"
                align="center"
                prop="purchaseNum"
                :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                label="购置单价（元含税）"
                align="center"
                prop="purchaseTaxPrice"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="购置单价（元不含税）"
                align="center"
                prop="purchasePrice"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="出厂日期"
                align="center"
                prop="productionTime"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="相关配套资料"
                align="center"
                prop=""
            >
            <template slot-scope="scope">
                <div style="color: #02A7F0;cursor: pointer;" @click="openFileDialog(scope.row)" v-if="scope.row.isExitFile==1">报告管理</div>
                <div style="color: red;cursor: pointer;" @click="openFileDialog(scope.row)" v-if="scope.row.isExitFile==0">报告管理</div>
            </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.purchase_task_status" :value="scope.row.status"/>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="报告管理" :visible.sync="open" width="900px" append-to-body>
            <el-table :data="fileDataList" width="100%" height="350px">
                <el-table-column label="序号" type="index" width="55" align="center"/>
                <el-table-column label="报告类型" align="center" prop="dictLabel" :show-overflow-tooltip="true"/>
                <el-table-column label="类型名称" align="center" :show-overflow-tooltip="true">
                <template>
                    <div>{{this.rowData.maTypeName}}</div>
                </template>
                </el-table-column>
                <el-table-column label="规格型号" align="center" :show-overflow-tooltip="true">
                <template>
                    <div>{{this.rowData.partName}}</div>
                </template>
                </el-table-column>
                <!-- <el-table-column label="报告日期" align="center" prop="orgName" :show-overflow-tooltip="true"/>
                <el-table-column label="截止有效期" align="center" prop="orgName" :show-overflow-tooltip="true"/> -->
                <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                <div style="display: flex;align-items: center;justify-content: center;">
                    <!-- <el-upload ref="upload" :limit="1" :headers="upload.headers"
                    :action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                    :on-success="handleFileSuccess"   :auto-upload="true"
                    >
                    <el-button size="mini" type="text" @click="beforeFileUpload(scope.row)">
                            上传
                    </el-button>
                    </el-upload> -->

                    <el-button size="mini" type="text" @click="picturePreviewFile(scope.row)" v-if="scope.row.fileListTemp!=0">
                        查看
                    </el-button>
                </div>


                </template>
            </el-table-column>
            </el-table>
        </el-dialog>

        <!-- 图片查看弹窗 -->
        <el-dialog :visible.sync="dialogVisible" width="500px" height="500px" >
            <img width="100%" height="500px" :src="dialogImageUrl"  />
        </el-dialog>

        <!-- 文件查看列表 -->
        <el-dialog title="文件列表" :visible.sync="dialogVisibleFile" width="500px" height="500px" >
            <el-table :data="fileListInfo" width="100%" height="350px">
                <el-table-column label="序号" type="index"  width="55" align="center"/>
                <el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true"/>
                <el-table-column label="操作" align="center" >
                    <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="picturePreview(scope.row)" v-if="scope.row.url" >
                        查看
                    </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>

<script>
import { getPartTypeCheckInfo,getPartTypeFileList } from '@/api/part/partArrived';
import { uploadPurchaseFile, } from "@/api/purchase/goodsAccept";
import { getToken } from '@/utils/auth'
export default {
    name: 'QueryTools',
    dicts: ['purchase_task_status'],
    components: {
        // UploadImg,
    },
    props: {
        isView: {
            type: Boolean,
            default: () => {
                return false
            },
        },
        queryTaskId: {
            type: [String, Number],
            default: () => {
                return ''
            },
        },
        queryId: {
            type: [String, Number],
            default: () => {
                return ''
            },
        },
    },
    data() {
        return {
            fixCodeList:["否","是"],
            //任务ID
            taskId: '',
            // 遮罩层
            loading: true,
            //任务数据
            taskInfo: {},
            // 表格数据
            equipmentList: [],
            // 是否显示弹出层
            open: false,
            rowData:{},
            fileDataList: [
                {dictLabel:"合格证",fileType:"0",name:"",url:""},
                {dictLabel:"型式试验报告",fileType:"1",name:"",url:""},
                {dictLabel:"出厂检测报告",fileType:"2",name:"",url:""},
                {dictLabel:"第三方检测报告",fileType:"3",name:"",url:""},
                {dictLabel:"其他",fileType:"4",name:"",url:""},
            ],
            //上传
            upload: {
                // 设置上传的请求头部
                headers: { Authorization: 'Bearer ' + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + '/file/upload'
            },
            //图片查看弹窗
            dialogImageUrl: '',
            dialogVisible: false,
            dialogVisibleFile: false,
            fileListInfo:[],
        }
    },
    computed: {

    },
    mounted() {
        this.taskId = this.queryTaskId
        this.id = this.queryId
        this.getTaskInfo()
    },
    methods: {
        //获取任务详情-列表数据
        getTaskInfo() {
            this.loading = true
            getPartTypeCheckInfo({taskId:this.taskId,id:this.id}).then((response) => {
                this.taskInfo = response.data
                this.equipmentList = response.data.partTypeCheckDetailsList
                this.equipmentList.forEach((item) => {
                    item.fixCode = this.fixCodeList[Number(item.fixCode)]
                })
                this.loading = false
            })
        },
        //文件管理
        openFileDialog(row){
          this.rowData=row;
          this.fileDataList = [{dictLabel:"合格证",fileType:"0",name:"",url:"",fileList:[],fileListTemp:[]},
                {dictLabel:"型式试验报告",fileType:"1",name:"",url:"",fileList:[],fileListTemp:[]},
                {dictLabel:"出厂检测报告",fileType:"2",name:"",url:"",fileList:[],fileListTemp:[]},
                {dictLabel:"第三方检测报告",fileType:"3",name:"",url:"",fileList:[],fileListTemp:[]},
                {dictLabel:"其他",fileType:"4",name:"",url:"",fileList:[],fileListTemp:[]}]
          this.getFileData()
          this.open=true
        },
        getFileData(){
          let param = {
            modelId:this.rowData.partId,
            taskType:13,
            taskId:this.rowData.taskId
          }
          getPartTypeFileList(param).then((response) => {
            if(response.data.length>0){
                response.data.forEach(item=>{
                    let index = this.fileDataList.findIndex(v => v.fileType == item.fileType)
                    item.fileDetailList.forEach(item2=>{
                        this.fileDataList[index].fileList.push({
                            name:item2.name,
                            url:item2.url
                        })
                        this.fileDataList[index].fileListTemp.push({
                            name:item2.name,
                            url:item2.url
                        })
                    })
                })
            }
            }).catch(() => {
            })
        },
        beforeFileUpload(row){
          this.rowData.fileType=row.fileType;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
          if(response.code==200){
            if(this.taskId==""){//新增逻辑
                // console.log(response)
                // console.log(this.rowData)
                // console.log(this.rowData.bmFileInfos)
                let obj = {
                    "taskId": this.taskId,
                    "taskType": "0",
                    "name": response.data.name,
                    "url": response.data.url,
                    "modelId": this.rowData.typeId,
                    "fileType": this.rowData.fileType,
                    //   "dictLabel": this.rowData.dictLabel,
                }
                //根据文件上传返回更新文件管理弹窗内容
                let index = this.fileDataList.findIndex(v=>v.fileType==this.rowData.fileType)
                this.fileDataList[index].name = response.data.name
                this.fileDataList[index].url = response.data.url
                //判断当前上传的文件是否已上传过-再往机具类型数据中插入
                if(this.rowData.bmFileInfos.length>0){
                    let index2 = this.rowData.bmFileInfos.findIndex(v=>v.fileType==this.rowData.fileType)
                    if(index2>-1){//相同类型文件重复上传-替换
                        this.rowData.bmFileInfos.splice(index2,0,obj)
                    }else{//不存在相同类型文件-添加
                        this.rowData.bmFileInfos.push(obj)
                    }
                }else{
                    this.rowData.bmFileInfos.push(obj)
                }

            }else{//编辑逻辑
                let param = {
                "taskId": this.taskId,
                "taskType": "0",
                "name": response.data.name,
                "url": response.data.url,
                "modelId": this.rowData.typeId,
                "fileType": this.rowData.fileType,
                //   "dictLabel": this.rowData.dictLabel,
                }
                uploadPurchaseFile(param).then((response) => {
                    this.$modal.msgSuccess('上传成功')
                    this.getFileData()
                }).catch(() => {
                    this.$modal.msgError('上传失败')
                })
            }
          }
        },

        picturePreviewFile(row) {
            this.fileListInfo = row.fileListTemp

            this.dialogVisibleFile = true
        },

        //图片查看
        picturePreview(file) {
          this.dialogImageUrl = file.url.replaceAll('#','%23');
          const parts = file.name.split('.');
          const extension = parts.pop();
          if(extension === 'doc' || extension === 'DOC' || extension === 'docx' || extension === 'DOCX' || extension === 'pdf' || extension === 'PDF'){
            const windowName = file.name;
            window.open(file.url,windowName)
          }else{
            this.dialogVisible = true
          }
        },

        /** 导出按钮操作 */
        handleExport() {
          const formatTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
          };

          const currentTime = formatTime(new Date());
            this.download('/material/part_arrived/exportDetails',{taskId:this.taskId},`配件到货详情_${currentTime}.xlsx`)
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
    .el-upload--picture-card {
        display: none;
    }
}
.custom-textarea {
    width: 300px;
    height: 100px;
}
.accept-img {
    color: #409eff;

    .a-two {
        margin-left: 20px;
    }
}

.left-tip {
    font-size: 16px;
    letter-spacing: 1px;
}
</style>
