<template>
    <div class="flow-list-by-category quality-table ">
        <div class="nav">
            <div class="nav-item" :style="'width:' + navWidth" :class="it.dictValue == selItem.dictValue ? 'active' : ''"
                v-for="(it, idx) in categories" :key="idx" @click="doQuery(it)">{{ it.dictLabel }}</div>
        </div>

        <el-table :data="tableData" class="mytable" style="background: transparent;"
            ref="fbsubordinateUnit">            
            <el-table-column prop="businessKeyName" label="申请项目" class-name="text-left">
            </el-table-column>            
            
            <el-table-column prop="startUserName" label="当前状态" width="100">
                <template slot-scope="{row}">
                    <span v-if="row.finishTime" style="color: greenyellow;">已完成</span>
                    <span v-else style="color: red;">进行中</span>
                </template>
            </el-table-column>          
            <el-table-column prop="createTime" label="申请时间" width="150">
            </el-table-column>
            <el-table-column prop="createTime" label="申请附件" width="100">
                <template slot-scope="{row}">                 
                    <span slot="reference" style="cursor: pointer; color: #01a9ff" @click="loadRowFils(row)">查看</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="total,prev, pager, next" :hide-on-single-page="true" @current-change="handleCurrentChange"
            :total="total" :page-size="size" :current-page.sync="index" class="bg-pagination"></el-pagination>

    </div>
</template>

<script>
export default {
    name: 'JhbigscreenFlowListByCategory',
    props: {
        getPData: {
            type: Function,
            default: null
        }
    },
    data() {
        return {
            index: 1,
            size: 10,
            total: 0,
            categories: [],
            selItem: {},
            tableData: [],
            navWidth: '',
        };
    },
    created() {
        this.$api.dict('sys_process_category').then(d => {
            this.categories = d || [];
            if (this.categories.length > 0) {
                this.doQuery(this.categories[0])
            }
            this.navWidth = (98.0 / this.categories.length).toFixed(2) + "%";
        });
    },
    mounted() {

    },

    methods: {
        loadRowFils(it){
            this.$api.flow.findFormDatasByProcInsId(it.procInsId).then(d => {
              if(d.data && d.data.files){
                //多个文件批量下载
                d.data.files.split(",").forEach(item => {
                    this.$api.downFile("/jhapi" + item, {}, item.substring(item.lastIndexOf("/")+1));
                });
              } 
            })
        },
        handleCurrentChange(n) {
            this.index = n;
            this.loadData();
        },
        doNav(n) {
            this.nav = n;
            this.index = 1;
            this.loadData();
        },
        doQuery(it) {
            this.selItem = it;
            this.index = 1;
            this.loadData();
        },
        loadData() {
            let obj = this.getPData ? this.getPData() || {} : {}
            this.$api.flow.listByCategory(obj.projectId, obj.deptId, this.selItem.dictValue, this.index, this.size).then(d => {
                this.tableData = d.rows || [];
                this.total = d.total;
            })
        }
    },
};
</script>

<style lang="less" scoped>
.flow-list-by-category {
    padding:0px;
    height:calc(~"100% - 40px");
    .bg-pagination{
        margin-top:10px;
    }
    .nav {
        display: flex;

        .nav-item {
            text-align: center;
            flex-grow: 1;
            padding: 4px 4px;
            cursor: pointer;
            background: #142c6a;
            color: #738fb4;

            &.active {
                color: #01a9ff
            }
        }
    }
    .mytable{
        height:calc(~"100% - 100px");
        margin:12px 12px;
        width:calc(~"100% - 24px");
        border:solid 1px #142c6a;
    /deep/ th .cell{
        color: aquamarine;
    }
}
    /deep/ .mytable {

        .el-table__body-wrapper::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        // 滚动条的滑块
        .el-table__body-wrapper::-webkit-scrollbar-thumb {
            background-color: rgb(1, 169, 255);
            border-radius: 4px;
        }
    }

}</style>