<template>
    <div class="app-container">
        <!-- 预报废列表 -->
        <template v-if="!temp">
            <TableModel
                :config="config"
                :sendApi="getPreScrapListApi"
                ref="listingTbRef"
                @getTableSelectionChange="getTableSelectionChange"
                :selectable="
                    (row) => {
                        return row.taskStatus == 124
                    }
                "
            >
                <template slot="export">
                    <el-row :gutter="10" class="mb8">
                        <el-button
                            type="success"
                            plain
                            icon="el-icon-download"
                            size="mini"
                            @click="handelSubmitScrap"
                            >提交报废</el-button
                        >
                    </el-row>
                </template>

                <!-- 状态 -->
                <template slot-scope="{ data }" slot="type">
                    <el-tag size="mini" v-if="data.taskStatus == 124"
                        >待提交</el-tag
                    >
                    <el-tag
                        size="mini"
                        type="warning"
                        v-if="data.taskStatus == 58"
                        >审核中</el-tag
                    >
                    <el-tag
                        size="mini"
                        type="danger"
                        v-if="data.taskStatus == 61"
                        >已驳回</el-tag
                    >
                    <el-tag
                        size="mini"
                        type="success"
                        v-if="data.taskStatus == 59"
                        >已通过</el-tag
                    >
                </template>
                <!-- 报废来源 -->
                <template slot-scope="{ data }" slot="source">
                    <template v-if="data.scrapSource === 1">退料</template>
                    <template v-if="data.scrapSource === 2">维修</template>
                    <template v-if="data.scrapSource === 3">盘点</template>
                </template>
                <!-- 列表操作栏 -->
                <template slot="handle" slot-scope="{ data }">
                    <el-button
                        type="text"
                        size="mini"
                        @click="handlePreview(data)"
                        >查看</el-button
                    >
                    <el-button
                        type="text"
                        size="mini"
                        v-if="data.taskStatus == 124"
                        v-hasPermi="['scrap:auditing']"
                        @click="handleSubmitScrap(data)"
                        >提交报废</el-button
                    >
                    <el-button
                        type="text"
                        size="mini"
                        v-if="data.taskStatus == 61"
                        @click="handleReject(data)"
                        >驳回退料</el-button
                    >
                    <el-button
                        type="text"
                        size="mini"
                        @click="handleAuditing(data)"
                        v-if="data.taskStatus != 124"
                        >审批详情</el-button
                    >
                </template>
            </TableModel>

            <DialogModel
                :dialogConfig="dialogConfig"
                @closeDialogOuter="closeDialogOuter"
                @closeDialogInner="closeDialogInner"
            >
                <template slot="outerContent">
                    <!-- 查看内容 -->
                    <template v-if="dialogConfig.outerTitle === '查看'">
                        <TableModel
                            :sendParams="sendParams"
                            :sendApi="getDialogListApi"
                            :config="dialogConfig"
                        >
                            <template slot="imgPreview" >
                                <ImagePreview
                                    :src="`https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg`"
                                    :width="`60px`"
                                    :height="`60px`"
                                />
                            </template> </TableModel
                    ></template>

                    <!-- 审批详情 -->
                    <template v-if="dialogConfig.outerTitle === '审批详情'">
                        <AuditingDetails :auditingList="auditingList" />
                    </template>

                    <!-- 部门选择 -->
                    <template v-if="dialogConfig.outerTitle === '选择审批部门'">
                        <SelDepart @closeDepartSel="closeDepartSel" />
                    </template>
                </template>
            </DialogModel>
        </template>

        <template v-if="temp">
            <el-row type="flex" justify="space-between" class="back-text">
                <span>驳回退料</span>
                <el-button type="text" @click="handleBack">返回</el-button>
            </el-row>
            <AuditingReturn :sendParams="sendParamsAuditing" />
        </template>
    </div>
</template>

<script>
    import TableModel from '@/components/TableModel'
    import DialogModel from '@/components/DialogModel'
    import SelDepart from '../../component/selDepart.vue'
    import AuditingReturn from '../auditingReturn/index.vue' // 退料驳回页面
    import AuditingDetails from '../../component/auditingDetails.vue'
    import {
        getPreScrapListApi,
        getDialogListApi,
        submitScrapApi,
    } from '@/api/scrap/forecastWaste.js'
    import { config, dialogConfig, getSelList } from './config'
    export default {
        name: 'scrapListing',
        components: {
            TableModel,
            DialogModel,
            SelDepart,
            AuditingReturn,
            AuditingDetails,
        },
        data() {
            return {
                config,
                dialogConfig,
                getPreScrapListApi,
                getDialogListApi,
                tableSelList: [],
                sendParams: {}, // 列表查看时参数
                temp: false,
                getSelList,
                imgCommonUrl: process.env.VUE_APP_BASE_API + '/system',

                /* 提交报废申请参数 */
                submitScrapParams: {
                    taskIdList: [],
                    deptIds: [],
                },
                auditingList: [],
                sendParamsAuditing: {},
            }
        },
        created() {
            /* 获取表单下拉选数据 */
            this.getSelList()
        },
        methods: {
            /* 列表按钮操作 */
            handlePreview(row) {
                this.sendParams.taskId = row.taskId
                this.dialogConfig.outerTitle = '查看'
                this.dialogConfig.outerWidth = '70%'
                this.dialogConfig.outerVisible = true
            },
            handleSubmitScrap(row) {
                this.submitScrapParams.taskIdList.push(row.taskId)
                this.dialogConfig.outerTitle = '选择审批部门'
                this.dialogConfig.outerWidth = '50%'
                this.dialogConfig.outerVisible = true
            },
            handleAuditing(row) {
                this.auditingList = row.scrapAuditorSetList
                this.dialogConfig.outerTitle = '审批详情'
                this.dialogConfig.outerWidth = '50%'
                this.dialogConfig.outerVisible = true
            },
            handleReject(row) {
                this.sendParamsAuditing.taskId = row.taskId
                this.temp = !this.temp
            },

            /* 关闭选择审批部门弹框 */
            async closeDepartSel(val, list) {
                console.log(list, '选择的部门---')

                if (list.length < 1) {
                    this.$message.error('请选择审批部门')
                    return
                }
                list.map((e) => {
                    this.submitScrapParams.deptIds.push(e.id)
                })
                const res = await submitScrapApi(this.submitScrapParams)
                if (res.code == 200) {
                    this.$message.success('已提交成功')
                    this.dialogConfig.outerVisible = val
                    this.$refs.listingTbRef.getList()
                }
                this.submitScrapParams.deptIds =
                    this.submitScrapParams.taskIdList = []
            },
            /* 批量提交报废按钮 */
            handelSubmitScrap() {
                if (this.tableSelList.length < 1) {
                    this.$message.error('请勾选列表数据！')
                } else {
                    this.dialogConfig.outerTitle = '选择审批部门'
                    this.dialogConfig.outerWidth = '50%'
                    this.dialogConfig.outerVisible = true
                }
            },
            /* 表格复选框选中的数据 */
            getTableSelectionChange(val) {
                this.tableSelList = []
                this.tableSelList = val
                this.tableSelList.map((e) => {
                    this.submitScrapParams.taskIdList.push(e.taskId)
                })
            },
            handleBack() {
                this.temp = !this.temp
                this.dialogVisible = false
            },
            /* 外层弹框关闭 */
            closeDialogOuter() {
                this.dialogConfig.outerVisible = false
            },
            /* 内层弹框关闭 */
            closeDialogInner() {
                this.dialogConfig.innerVisible = false
            },
        },
    }
</script>
