<template>
    <!-- 审批管理列表页 -->
    <div class="approve-list-wrap approve-page-wrap" v-if="isETAApprove">
        <div class="head-tab">
            <el-tabs v-model="activeTab" @tab-click="handleClick">
                <el-tab-pane label="待处理" name="pending"></el-tab-pane>
                <el-tab-pane label="已处理" name="processed"></el-tab-pane>
                <el-tab-pane label="我发起的" name="originate"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="approve-list">
            <div class="select-box">
                <el-cascader v-model="classify"
                    placeholder="请选择关联报告" clearable
                    :options="classifyTree"
                    :props="{value:'ClassifyId',label:'ClassifyName',children:'Children'}"
                    @change="handleCurrentChange(1)">
                </el-cascader>
                <div class="select-time-box">
                    <el-select v-show="activeTab!=='pending'" v-model="timeType" 
                        @change="handleCurrentChange(1)"
                        placeholder="时间类型" style="max-width:120px;" class="custom-select">
                        <el-option label="提交时间" :value="1" />
                        <el-option label="处理时间" :value="2" v-if="activeTab==='processed'"/>
                        <el-option label="审批时间" :value="3" v-if="activeTab==='originate'"/>
                    </el-select>
                    <div class="line" v-show="activeTab!=='pending'"></div>
                    <el-date-picker v-model="timeDate"
                        @change="handleCurrentChange(1)"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                
                <el-select placeholder="请选择处理状态" v-model="ApproveState" clearable v-show="activeTab!=='pending'"
                    @change="handleCurrentChange(1)">
                    <template v-if="activeTab==='processed'">
                        <el-option label="已同意" :value="2" />
                        <el-option label="已驳回" :value="3" />
                    </template>
                    <template v-if="activeTab==='originate'">
                        <el-option label="待审批" :value="1" />
                        <el-option label="已通过" :value="2" />
                        <el-option label="已驳回" :value="3" />
                        <el-option label="已撤销" :value="4" />
                    </template>
                    
                </el-select>

                <el-input v-model="keyword" prefix-icon="el-icon-search" clearable @input="handleCurrentChange(1)"
                    placeholder="请输入报告标题" style="width:260px;margin-left: auto;"></el-input>
            </div>
            <div class="list-box">
                <el-table 
                    ref="reftable"
                    v-loading="tableLoading"
                    :data="tableData" 
                    @sort-change="sortChange" border>
                    <el-table-column
                        v-for="item in tableColumns"
                        :key="item.key"
                        :label="item.label"
                        :prop="item.key"
                        :sortable="item.sortable"
                        align="center"
                    >
                        <template slot-scope="{row}">
                            <span v-if="item.key==='State'">
                                {{['','待审批','已通过','已驳回','已撤销'][row.State]}}
                            </span>
                            <span v-else-if="item.key==='RecordState'">
                                {{['','待审批','已同意','已驳回'][row.RecordState]}}
                            </span>
                            <span v-else>{{row[item.key]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="{row}">
                            <template v-if="activeTab==='pending'">
                                <el-button type="text" style="padding:0;" @click="toApproveDetail(row,'approve')"
                                    v-if="permissionBtn.isShowBtn('approvePermission','reportApprove_approve')">审批</el-button>
                            </template>
                            <template v-if="activeTab==='processed'">
                                <el-button type="text" style="padding:0;" @click="toApproveDetail(row,'detail')">详情</el-button>
                                <el-button type="text" style="padding:0" @click="handleShowDetail(row)" 
                                    v-if="row.State===3&&permissionBtn.isShowBtn('approvePermission','reportApprove_rejectreason')">驳回理由</el-button>
                            </template>
                            <template v-if="activeTab==='originate'">
                                <el-button type="text" style="padding:0;" @click="toApproveDetail(row,'myself')">详情</el-button>
                                <el-button type="text" style="padding:0;" @click="cancelApprove(row)" 
                                    v-if="row.State!==4&&permissionBtn.isShowBtn('approvePermission','reportApprove_repeal')">撤销</el-button>
                                <el-button type="text" style="padding:0" @click="handleShowDetail(row)" 
                                    v-if="row.State===3&&permissionBtn.isShowBtn('approvePermission','reportApprove_rejectreason')">驳回理由</el-button>
                            </template>
                        </template>
                        
                    </el-table-column>
                </el-table>
            <div style="text-align:right;margin-top:20px">
                <el-pagination 
                        layout="total,prev,pager,next,jumper" 
                        background 
                        :current-page="page"
                        @current-change="handleCurrentChange"
                        :page-size="pageSize"
                        :total="total"
                        style="display: inline-block"
                    />
            </div>
            </div>
        </div>
        <RejectDialog 
            :isDetailDialogShow="isDetailDialogShow"
            :isEdit="false"
            :data="currentData"
            @close="isDetailDialogShow=false;currentData={};"
        />
    </div>
    <div class="approve-page-wrap" v-else>
        <tableNoData :text="pageLoading?'':'系统暂未开通审批流程，请开启审批流程后再进行操作！'"></tableNoData>
    </div>
</template>

<script>
import RejectDialog from './components/rejectDialog.vue';
import approveMixins from './mixins/approveMixins';
import {approveInterence} from '@/api/modules/approve.js';
import reportApproveConfig from "@/mixins/reportApproveConfig.js"
import {
        approve_pending_columns,
        approve_processed_columns,
        approve_originate_columns,
    } from './config/tableConfig'
const columnsMap = {
    'pending':approve_pending_columns,
    'processed':approve_processed_columns,
    'originate':approve_originate_columns
}
const tabMap = {
    'pending':1,
    'processed':2,
    'originate':3
}
export default {
    mixins:[approveMixins,reportApproveConfig],
    data() {
        return {
            activeTab: 'pending',
            /* 筛选项 */
            timeType:1,
            timeDate:'',
            ApproveState:'',
            keyword:'',
            classify:'',
            /* 排序项 */
            SortRule:0,
            SortField:0,

            tableLoading:false,
            tableData: [],
            tableColumns: approve_pending_columns,
            page: 1,
            pageSize: 10,
            total: 0,

            currentData: {},
            isDetailDialogShow: false
        };
    },
    methods: {
        getTableData(){
            this.tableLoading = true
            this.tableData=[]
            const baseParams = {
                ListType:tabMap[this.activeTab]||0,
                PageSize:this.pageSize,
                CurrentIndex:this.page,
                Keyword:this.keyword,
            }
            const selectParams = {
                //关联报告
                ReportType:this.classify[0]||0,
                ClassifyFirstId:this.classify[this.classify.length-2]||0,
                ClassifySecondId:this.classify[this.classify.length-1]||0,
                //时间
                TimeType:this.timeType,
                StartTime:this.timeDate?this.timeDate[0]||'':'',
                EndTime:this.timeDate?this.timeDate[1]||'':'',
                //排序
                SortRule:this.SortRule,
                SortField:this.SortField,
                //处理状态
                ApproveState:this.ApproveState,
            }
            approveInterence.getApproveList({
                ...baseParams,
                ...selectParams
            }).then(res=>{
                this.tableLoading=false
                if(res.Ret!==200) return 
                const {List=[],Paging={}} = res.Data||{}
                this.tableData = List||[]
                this.total = Paging.Totals||0
            })
        },
        handleCurrentChange(page) {
            this.page = page;
            this.getTableData()
        },
        sortChange({ prop, order }) {
            this.SortRule = order==='ascending'?1:2
            this.SortField= prop==='CreateTime'?1
                            :prop==='HandleTime'?2:3
            this.handleCurrentChange(1)
        },
        handleClick() {
            this.timeType = 1
            this.timeDate=''
            this.SortField=0
            this.SortField=0
            this.tableColumns = columnsMap[this.activeTab];
            this.$refs.reftable&&this.$refs.reftable.clearSort()
            this.handleCurrentChange(1)
        },
        handleShowDetail(data) {
            this.currentData = data;
            this.isDetailDialogShow = true;
        },
        toApproveDetail(data,type){
            this.$router.push({
                path:'/approveDetail',
                query:{
                    type,
                    approveId:data.ReportApproveId
                }
            })
        },
        cancelApprove(item){
            approveInterence.cancelApprove({
                ReportApproveId:Number(item.ReportApproveId)
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success("撤销成功")
                this.handleCurrentChange(1)
            })
        },
    },
    mounted(){
        this.getClassifyTree()
        const {formType='approve'} = this.$route.query
        const formTypeMap = {
            'approve':'pending',
            'detail':'processed',
            'myself':'originate'
        }
        this.activeTab = formTypeMap[formType]||'pending'
        this.getTableData()
    },
    components: { RejectDialog }
};
</script>

<style lang="scss">
.approve-list-wrap{
    .custom-select{
        .el-input__inner{
            border-color: #0052D9;
            background-color: #ECF2FE;
            color:#0052D9;
        }
        .el-input__suffix{
            color:#0052D9;
            .el-select__caret{
                color:#0052D9;
            }
        }
        
    }
}
</style>
<style scoped lang="scss">
@import url('./css/pageStyle.scss');
.approve-list-wrap{
    .head-tab{
        margin-bottom: 5px;
    }
    .approve-list{
        .select-box{
            display: flex;
            justify-content: space-between;
            gap:10px;
            .select-time-box{
                display: flex;
                align-items: center;
                max-width: 380px;
                .line{
                    width:10px;
                    height:1px;
                    background-color: #C8CDD9;
                }
            }
        }
    }
    .list-box{
        margin-top:20px;
    }
}
</style>
