<template>
    <div class="app-container">
        <!-- 报废审核 -->
        <TableModel
            :config="config"
            :sendApi="getDispositionListApi"
            :selectable="
                (row) => {
                    return row.disposition == 0
                }
            "
            @getTableSelectionChange="getSelectionList"
            ref="tbRef"
        >
            <template slot="export" slot-scope="{ pageParams }">
                <el-row :gutter="10" class="mb8">
                    <el-button
                        plain
                        size="mini"
                        @click="handleBatchDisposition()"
                        >批量处置</el-button
                    >
                    <el-button
                        type="success"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        @click="handelExportData(pageParams)"
                        >导出数据</el-button
                    >
                </el-row>
            </template>

            <!-- 报废来源 -->
            <template slot-scope="{ data }" slot="source">
                <ScrapSource :data="data" />
            </template>

            <!-- 状态 -->
            <template slot-scope="{ data }" slot="type">
                <el-tag size="mini" v-if="data.disposition == 0">未处置</el-tag>
                <el-tag size="mini" type="success" v-if="data.disposition == 1"
                    >已处置</el-tag
                >
            </template>

            <!-- 附件信息 -->
            <template slot-scope="{ data }" slot="file">
                <el-button
                    size="mini"
                    type="text"
                    @click="handlePreviewFile(data)"
                    style="color: #67c23a"
                    v-if="data.dispositionFileUrl"
                >
                    查看附件
                </el-button>

                <template v-else>-</template>
            </template>

            <!-- 列表操作栏 -->
            <template slot="handle" slot-scope="{ data }">
                <el-button size="mini" type="text" @click="handlePreview(data)">
                    查看
                </el-button>
                <el-button
                    size="mini"
                    type="text"
                    @click="handleDisposition(data)"
                    v-if="data.disposition == 0"
                >
                    处置
                </el-button>
            </template>
        </TableModel>

        <!-- 弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
        >
            <!-- 弹框内容  查看 处置-->
            <template slot="outerContent">
                <!-- 查看内容 -->
                <template v-if="dialogConfig.outerTitle === '查看'">
                    <TableModel
                        :sendParams="sendParams"
                        :sendApi="getDialogListApi"
                        :config="dialogConfig"
                    >
                        <template slot="imgPreview">
                            <ImagePreview
                                :src="``"
                                :width="`30px`"
                                :height="`30px`"
                            />
                        </template> </TableModel
                ></template>

                <template v-else-if="dialogConfig.outerTitle === '附件信息'">
                    <el-table :data="fileList" border>
                        <el-table-column
                            label="文件名称"
                            align="center"
                            prop="fileName"
                        />
                        <el-table-column label="操作" align="center">
                            <template slot-scope="{ row }">
                                <a
                                    :href="filePreviewUrl + row.fileUrl"
                                    target="_blank"
                                    >查看</a
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else>
                    <el-row type="flex" justify="space-around">
                        <el-col :span="4">请上传处置文件</el-col>
                        <el-col>
                            <ImageUpload
                                :limit="3"
                                :fileSize="5"
                                :fileType="fileType"
                                @input="getFileList"
                            />
                        </el-col>
                    </el-row>
                    <el-row class="dialog-common-btn">
                        <el-button size="mini" plain @click="handleCancelInner"
                            >取 消</el-button
                        >
                        <el-button
                            size="mini"
                            type="primary"
                            @click="handleSubmitInner"
                            >确 定</el-button
                        >
                    </el-row>
                </template>
            </template>
        </DialogModel>
    </div>
</template>

<script>
    import {
        getDispositionListApi,
        submitDispositionApi,
        getDialogListApi,
    } from '@/api/scrap/forecastWaste.js'
    import TableModel from '@/components/TableModel'
    import DialogModel from '@/components/DialogModel'
    import ScrapSource from '../../component/scrapSource.vue'
    import { config, dialogConfig, getSelList } from './config.js'
    export default {
        components: {
            TableModel,
            DialogModel,
            ScrapSource
        },
        data() {
            return {
                config,
                dialogConfig,
                getDispositionListApi,
                getDialogListApi,
                /* 选中的列表数据 */
                selectionList: [],
                /* 驳回原因 */
                rejectReason: '',
                fileType: ['png', 'jpg', 'jpeg', 'pdf', 'doc', 'xls', 'docx'],
                uploadFileList: [],
                sendParams: {},
                fileList: [],
                tbSelectList: [],
                /* 处置提交参数 */

                dispositionParams: [],
                // dispositionParams: {
                //     taskId: '',
                //     fileUrl: '', // 附件url
                //     fileName: '', // 附件名称
                //     disposition: 1, // 处置状态 0、未通过 1、通过
                // },
                /* 附件预览地址 */
                filePreviewUrl: process.env.VUE_APP_BASE_API + '/system',
                getSelList,
            }
        },
        created() {
            this.getSelList()
        },
        methods: {
            /* 按钮操作 */
            handlePreview(row) {
                this.dispositionParams.taskId = this.sendParams.taskId =
                    row.taskId
                this.dialogConfig.outerTitle = '查看'
                this.dialogConfig.outerWidth = '70%'
                this.dialogConfig.outerVisible = true
            },
            handleDisposition() {
                this.dialogConfig.outerTitle = '处置'
                this.dialogConfig.outerWidth = '60%'
                this.dialogConfig.outerVisible = true
            },

            /* 查看附件 */
            handlePreviewFile(data) {
                this.fileList = []
                data.dispositionFileName.split(',').map((e) => {
                    let fileObj = {
                        fileName: e,
                        fileUrl: '',
                    }

                    this.fileList.push(fileObj)
                })

                data.dispositionFileUrl.split(',').map((e, index) => {
                    this.fileList[index].fileUrl = e
                })
                this.dialogConfig.outerTitle = '附件信息'
                this.dialogConfig.outerWidth = '40%'
                this.dialogConfig.outerVisible = true
            },

            /* 关闭外层弹框 */
            closeDialogOuter(val) {
                this.dialogConfig.outerVisible = val
            },

            /* 取消 */
            handleCancelInner() {
                this.dialogConfig.outerVisible = false
            },
            /* 确定 */
            async handleSubmitInner() {
                if (this.uploadFileList.length < 1) {
                    this.$message.error('请先上传图片')
                    return
                }

                let fileUrl = ''
                let fileName = ''
                this.uploadFileList.map((e) => {
                    fileUrl += e.fileUrl + ','
                    fileName += e.fileName + ','
                })
                this.dispositionParams.fileUrl = fileUrl.substring(
                    fileUrl.length - 1,
                    ',',
                )
                this.dispositionParams.fileName = fileName.substring(
                    fileName.length - 1,
                    ',',
                )

                this.dispositionParams.map((e) => {
                    e.fileUrl = fileUrl.substring(fileUrl.length - 1, ',')
                    e.fileName = fileName.substring(fileUrl.length - 1, ',')
                })
                const res = await submitDispositionApi(this.dispositionParams)

                if (res.code == 200) {
                    this.$message.success('处置成功！')
                    this.dialogConfig.outerVisible = false
                    this.$refs.tbRef()
                }
            },
            /* 获取上传后的图片信息 */
            getFileList(val) {
                this.uploadFileList = val
            },

            /* 批量处置 */
            handleBatchDisposition() {
                this.dispositionParams = []
                if (this.tbSelectList.length < 1) {
                    this.$message.error('请选择需处置的数据')
                    return
                }
                this.tbSelectList.map((e) => {
                    let prams = {
                        taskId: e.taskId,
                        fileUrl: '', // 附件url
                        fileName: '', // 附件名称
                        disposition: 1, // 处置状态 0、未通过 1、通过
                    }

                    this.dispositionParams.push(prams)
                })

                this.dialogConfig.outerTitle = '处置'
                this.dialogConfig.outerWidth = '60%'
                this.dialogConfig.outerVisible = true
            },

            /* 获取列表下拉勾选数据 */
            getSelectionList(selList) {
                console.log(selList, '选择的数据')
                this.tbSelectList = selList
            },
            /* 导出数据 */
            handelExportData(data) {
                console.log(this.tableSelList, ' this.tableSelList')
                this.download(
                    'material/scrap/exportObtainDisposalList',
                    {
                        ...data,
                    },
                    `报废处置列表_${new Date().getTime()}.xlsx`,
                )
                console.log('数据导出', data)
            },
        },
    }
</script>
