<template>
    <div class="bodyBoxs">
        <div class="boxs">
            <div class="titles">藏品审批</div>
            <el-table
                :data="tableData"
                style="width:100%;margin:0 auto;"
                :cell-style="rowStyle"
                :header-cell-style="headerStyle"
                v-loading="loading"
                >
                <el-table-column
                prop="id"
                label="序列">
                </el-table-column>

               <el-table-column
                prop="id"
                label="状态">
                    <template slot-scope="scope">
                        <div style="color:#13ce66" v-if="scope.row.applyType==1">借出</div>
                        <div v-else style="color:#ff4949">归还</div>
                    </template>
                </el-table-column>

                <el-table-column
                prop="matter"
                label="事项">
                </el-table-column>
                <el-table-column
                prop="applyName"
                label="申请人">
                </el-table-column>
                <el-table-column
                prop="createdAt"
                label="申请时间">
                </el-table-column>
                <el-table-column
                prop="numberIds"
                label="编号">
                </el-table-column>
                <el-table-column
                prop=""
                width="400"
                label="操作">
                    <template slot-scope="scope">
                        <el-button  size="small" style="width:90px" type="primary" v-if="scope.row.returnPicture" @click="lookBackImg(scope.row)">查看回传图</el-button>
                        <el-button  size="small" style="width:90px" type="success"  @click="sure(scope.row)" v-if="scope.row.state==2">同意</el-button>
                        <el-button  size="small" style="width:90px"  type="danger"  @click="notpass(scope.row)" v-if="scope.row.state==2">拒绝</el-button>
                        <el-button  size="small" style="width:90px" type="warning" v-if="scope.row.state==3">审核通过</el-button>
                        <el-button  size="small" style="width:90px" type="warning" v-if="scope.row.state==4">审核失败</el-button>
                        <el-button  size="small" style="width:90px" type="warning" v-if="scope.row.state==5">归还审核中</el-button>
                        <el-button  size="small" style="width:90px" type="warning" v-if="scope.row.state==6">归还成功</el-button>
                        <el-button  size="small" style="width:90px" type="warning" v-if="scope.row.state==7">归还失败</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            align="center"
            background
            layout="prev, pager, next, jumper,total"
            :page-size="pageSize"
            :total="total"
             @current-change="handleCurrentChange" 
            >
            </el-pagination>
        </div>

        <el-dialog
            title="回传图片"
            :visible.sync="dialogVisible"
            width="45%"
            top="50px"
            style="background:transparent"
            >
            <el-image
                :src="bigImg"
                style="width: 500px; height: auto; display:block;margin:0 auto;padding:0"
            ></el-image>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data(){
        return{
            tableData: [],
            loading:false,
            total:0,
            pages:1,
            pageSize:15,
            bigImg:"",
            dialogVisible:false
        }
    },
    created(){
        this.getListData();
    },
    methods:{
        getListData(){
            this.loading=true;
            this.$api.examine({
                size:this.pageSize,
                page:this.pages
            }).then((res) => {
                this.loading=false;
                if(res.code==0){
                    this.tableData=res.data.data;
                    this.total=res.data.total
                }else{
                    this.$message(res.message);
                }
            }).catch((res) => {
                this.loading=false;
            });
        },
        handleCurrentChange(val){
            this.pages= val;
            this.getListData();
        },
        handleEdit(i,r){
            console.log(i,r)
        },
        lookBackImg(r){
            if(r.returnPicture){
                this.dialogVisible=true;
                this.bigImg=r.returnPicture
            }
           
        },
        sure(r){
           this.examine(r.id,1);
        },
        notpass(r){
            this.examine(r.id,2);
        },
        examine(id,type){
            this.$api.examineById({
                id:id,
                type:type
            }).then((res) => {
                this.loading=false;
                if(res.code==0){
                    this.$message('审核成功！');
                    this.getListData();
                }else{
                    this.$message(res.message);
                }
            }).catch((res) => {
                this.loading=false;
            }); 
        },
        rowStyle() {
            return "text-align:center;border:none;color:#727272";
        },
        headerStyle(){
            return "text-align:center;background:#3f88bb;font-weight:blod;color:#fff"
        }
    }
}
</script>
<style scoped>
 .bodyBoxs{
        padding: 40px;
    }
    .boxs{
        width: 100%;
        background: #fff;
        border-radius: 15px;
    }
    .titles{
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #ababab;
        line-height: 90px;
        font-size: 26px;
        color: #1b1b1b;
        padding-left: 20px;
        font-weight: bold;
    }
      .demo-ruleForm{
         width: 100%;
         box-sizing: border-box;
         padding: 24px 60px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid #ababab;
     }
     .demo-ruleForm-box{
         display: flex;
         justify-content: flex-start;
         align-items: center;
     }
     .el-form-item{
         margin: 0 15px 0 0;
     }
     .formDiv{
         margin-right: 10px;
     }
     .tatle_title{
         width: 100%;
         text-align: center;
         font-size: 30px;
         color: #5d5d5d;
         margin: 20px 0;
     }
     .demo-ruleForm2{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 120px);
        margin: 0 auto;
     }
     .formItemBox{
        display: flex;
        justify-content: space-between;
        align-content: flex-start;
        width: 850px;
        flex-wrap: wrap;

     }
     .formItem{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
     }
     .formItem .formDiv{
        width: 100px;
     }
     .btnBox2,.btnBox1{
         margin-top: 20px;
     }
</style>