<template>
    <!-- 审批流配置列表 -->
    <div class="approve-setting-wrap approve-page-wrap" v-if="isETAApprove">
        <div class="head-box">
            <el-button v-permission="permissionBtn.approveFlowPermission.reportApprove_add"
                type="primary" @click="$router.push('/approveEdit')">添加审批流</el-button>
            <el-cascader v-model="classify"
                placeholder="请选择关联报告" clearable
                :options="classifyTree"
                :props="{value:'ClassifyId',label:'ClassifyName',children:'Children'}"
                @change="handleSearchChange"
                style="margin-right: auto;margin-left: 15px;"></el-cascader>
            <el-input v-model="Keyword" @input="handleCurrentChange(1)"
                placeholder="请输入审批流名称" prefix-icon="el-icon-search" clearable style="width:260px;"></el-input>
        </div>
        <div class="list-box">
            <el-table :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"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="{row}">
                        <el-button v-permission="permissionBtn.approveFlowPermission.reportApprove_edit"
                            type="text" style="padding:0;" @click="handleEditFlow(row)">编辑</el-button>
                        <el-button v-permission="permissionBtn.approveFlowPermission.reportApprove_remove"
                            type="text" style="padding:0;color:red;" @click="handleDeleteFlow(row)">删除</el-button>
                    </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>
    <div class="approve-page-wrap" v-else>
        <tableNoData :text="pageLoading?'':'系统暂未开通审批流程，请开启审批流程后再进行操作！'"></tableNoData>
    </div>
</template>

<script>
import {approveInterence} from '@/api/modules/approve.js'
import approveMixins from './mixins/approveMixins';
import reportApproveConfig from "@/mixins/reportApproveConfig.js"
export default {
    mixins:[approveMixins,reportApproveConfig],
    data() {
        return {
            /* 列表筛选项 */
            ClassifyFirstId:0,//研报倒数第二级分类id
            ClassifySecondId:0,//研报最后一级分类id
            ReportType:0,//研报类型 1-中文研报；2-英文研报；3-智能研报
            SortRule:0,//排序规则:1-正序; 2-倒序(默认)
            Keyword:'',
            classify:'',

            tableData:[],
            tableColumns:[{
                label:'审批流名称',
                key:'FlowName'
            },{
                label:'关联报告',
                key:'ReportClassify'
            },{
                label:'创建时间',
                key:'CreateTime',
                sortable:'custom'
            }],
            page:1,
            pageSize:10,
            total:0,
        };
    },
    methods: {
        handleCurrentChange(page){
            this.page = page
            this.getTableData()
        },
        handleSearchChange(){
            this.ReportType = this.classify[0]||0
            this.ClassifySecondId = this.classify[this.classify.length-1]||0
            if(this.classify.length>=3){
                this.ClassifyFirstId = this.classify[this.classify.length-2]||0
            }else{
                this.ClassifyFirstId = 0
            }
            this.handleCurrentChange(1)
        },
        sortChange({prop,order}){
            this.SortRule = order==='ascending'?1:2
            this.handleCurrentChange(1)
        },
        getTableData(){
            approveInterence.getApproveFlowList({
                PageSize:this.pageSize,
                CurrentIndex:this.page,
                ReportType:this.ReportType,
                ClassifyFirstId:this.ClassifyFirstId,
                ClassifySecondId:this.ClassifySecondId,
                Keyword:this.Keyword,
                SortRule:this.SortRule
            }).then(res=>{
                if(res.Ret!==200) return 
                const {List=[],Paging={}} = res.Data||{}
                this.tableData = List||[]
                this.total = Paging.Totals||0
            })
        },
        handleEditFlow(item){
            this.$router.push({
                path:'/approveEdit',
                query:{
                    flowId:item.ReportApproveFlowId
                }
            })
        },
        handleDeleteFlow(item){
            this.$confirm("删除后不可恢复,确认删除吗?","提示",{
                type:"warning"
            }).then(()=>{
                approveInterence.deleteApproveFlow({
                    ReportApproveFlowId:item.ReportApproveFlowId
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success("删除成功")
                    this.handleCurrentChange(1)
                })
            }).catch(()=>{})
        }
    },
    mounted(){
        this.getClassifyTree()
        this.getTableData()
    },
};
</script>

<style scoped lang="scss">
@import url('./css/pageStyle.scss');
.approve-setting-wrap{
    .head-box{
        display: flex;
        justify-content: space-between;
    }
    .list-box{
        margin-top:30px;
    }
}
</style>
