<template>
    <div class="app-container">
        <!-- 报废审核 -->
        <TableModel
            :config="config"
            :sendApi="getForecastWasteListApi"
            :handleWidth="`160px`"
        >
            <template slot="export">
                <el-row :gutter="10" class="mb8">
                    <el-button
                        type="success"
                        plain
                        icon="el-icon-download"
                        size="mini"
                        >导出数据</el-button
                    >
                </el-row>
            </template>

            <!-- 列表操作栏 -->
            <template slot="handle" slot-scope="data">
                <el-button
                    size="mini"
                    type="text"
                    v-for="btn in config.handleBtn"
                    :key="btn.id"
                    @click="handleBtn(data, btn.id)"
                >
                    {{ btn.btn_title }}
                </el-button>
            </template>
        </TableModel>

        <!-- 弹框 -->
        <DialogModel
            :dialogConfig="dialogConfig"
            @closeDialogOuter="closeDialogOuter"
            @closeDialogInner="closeDialogInner"
        >
            <!-- 弹框外层内容  查看 审核 审核详情-->
            <template slot="outerContent">
                <template v-if="!detailsConfig.detailsShow">
                    <TableModel
                        :config="dialogConfig"
                        ref="dialogTbRef"
                        :sendApi="getForecastWasteListApi"
                        @getTableSelectionChange="getDialogTbChange"
                    ></TableModel>
                    <el-row
                        v-if="dialogConfig.outerTitle === '审核'"
                        class="dialog-common-btn"
                    >
                        <el-button
                            size="mini"
                            type="success"
                            @click="handlePass"
                            >通过</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleReject"
                            >驳回</el-button
                        >
                    </el-row>
                </template>

                <!-- 审核详情 -->
                <template v-else>
                    <TableModel
                        :config="detailsConfig"
                        :sendApi="getForecastWasteListApi"
                    />
                </template>
            </template>

            <!-- 弹框内层内容 -->
            <template slot="innerContent">
                <el-row>
                    <el-col :span="4">请输入驳回原因</el-col>
                    <el-col :span="20">
                        <el-input
                            v-model="rejectReason"
                            type="textarea"
                            :rows="6"
                            ref="rejectReasonRef"
                        />
                    </el-col>
                </el-row>

                <el-row class="dialog-common-btn">
                    <el-button size="mini" plain @click="handleCancelInner"
                        >取 消</el-button
                    >
                    <el-button
                        size="mini"
                        type="warning"
                        @click="handleSubmitInner"
                        >保 存</el-button
                    >
                </el-row>
            </template>
        </DialogModel>
    </div>
</template>

<script>
    import { getForecastWasteListApi } from '@/api/scrap/forecastWaste.js'
    import TableModel from '@/components/TableModel'
    import DialogModel from '@/components/DialogModel'
    import { config, dialogConfig, detailsConfig } from './config.js'
    export default {
        components: {
            TableModel,
            DialogModel,
        },
        data() {
            return {
                config,
                dialogConfig,
                detailsConfig,
                getForecastWasteListApi,
                /* 选中的列表数据 */
                selectionList: [],
                /* 驳回原因 */
                rejectReason: '',
            }
        },
        methods: {
            /* 按钮操作 */
            handleBtn(row, id) {
                console.log(row, id, '操作按钮')
                switch (id) {
                    case 1:
                        this.dialogConfig.outerTitle = '查看'
                        this.dialogConfig.outerWidth = '70%'
                        this.dialogConfig.isSelShow =
                            this.detailsConfig.detailsShow = false
                        break
                    case 2:
                        this.dialogConfig.outerTitle = '审核'
                        this.dialogConfig.outerWidth = '70%'
                        this.dialogConfig.isSelShow = true
                        this.detailsConfig.detailsShow = false
                        break
                    case 3:
                        this.dialogConfig.outerTitle = '审核详情'
                        this.dialogConfig.outerWidth = '40%'
                        this.detailsConfig.detailsShow = true
                        break
                }

                this.dialogConfig.outerVisible = true
            },
            /* 关闭外层弹框 */
            closeDialogOuter(val) {
                this.dialogConfig.outerVisible = val
            },
            /* 关闭内层弹框 */
            closeDialogInner(val) {
                this.dialogConfig.innerVisible = val
            },
            /* 获取弹框内表格选中数据 */
            getDialogTbChange(list) {
                this.selectionList = list
            },
            /* 审核通过 */
            handlePass() {
                if (this.selectionList.length < 1) {
                    this.$message.error('请勾选列表数据')
                    return
                }
                this.dialogConfig.outerVisible = false
            },
            /* 审核驳回 */
            handleReject() {
                if (this.selectionList.length < 1) {
                    this.$message.error('请勾选列表数据')
                    return
                }
                /* 先打开内测弹框 */
                this.dialogConfig.innerTitle = '驳回原因'
                this.dialogConfig.innerVisible = true
            },

            /* 驳回原因页面取消 */
            handleCancelInner() {
                this.dialogConfig.innerVisible = false
            },
            /* 驳回原因页面保存 */
            handleSubmitInner() {
                if (!this.rejectReason) {
                    this.$message.error('请输入驳回原因')
                    return
                }
                this.dialogConfig.innerVisible = false
                /* 当驳回成功 重新查询列表回显数据 */
                this.$nextTick(() => {
                    this.$refs.dialogTbRef.getList()
                })
            },
        },
        watch: {
            dialogConfig: {
                handler(newVal) {
                    /* 监听外层弹框关闭 清空勾选的数据 */
                    console.log(newVal.outerVisible, '**')
                    if (!newVal.outerVisible) {
                        this.selectionList = []
                    }
                },
                deep: true,
            },
        },
    }
</script>
