<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="state"
                label="申请结果">
                    <template slot-scope="scope">
                        <div v-if="scope.row.state==0">已提交</div>
                        <div v-else-if="scope.row.state==2">已回传</div>
                        <div v-else-if="scope.row.state==3">审核通过</div>
                        <div v-else-if="scope.row.state==4">审核失败</div>
                        <div v-else-if="scope.row.state==5">归还审核中</div>
                        <div v-else-if="scope.row.state==6">归还成功</div>
                        <div v-else-if="scope.row.state==7">归还失败</div>
                        <div v-else-if="scope.row.state==8">已归还</div>
                    </template>
                </el-table-column>

                <el-table-column
                prop="numberIds"
                label="编号">
                </el-table-column>

                <el-table-column
                prop=""
                label="操作">
                    <template slot-scope="scope">
                        <el-upload
                            :data_id="scope.row.id"
                            v-if="scope.row.state==0"
                            class="upload-demo"
                            :action="uploadUrl"
                            :on-success="upSuccess"
                            :show-file-list="false"
                            accept="jpg/png"
                            :limit=1
                            v-loading.fullscreen.lock="fullscreenLoading"
                            >
                            <el-button type="success" @click="getId(scope.row.id)">回传</el-button>
                        </el-upload>
                        <!-- <el-button  v-if="scope.row.state==2||scope.row.state==3" @click="lookBackImg(scope.$index, scope.row)">查看</el-button> -->
                        <el-button type="success" v-if="scope.row.state==3||scope.row.state==7" @click="backCol(scope.$index, scope.row)">申请归还</el-button>
                        <el-button type="warning"  v-if="scope.row.state==4">审核失败</el-button>
                        <el-button type="warning" v-if="scope.row.state==5">归还审核中</el-button>
                        <el-button type="warning" v-if="scope.row.state==6">归还成功</el-button>
                        <el-button type="warning" v-if="scope.row.state==8">已归还</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>

        <div class="pops" v-if="showPop">
            <div class="paperBox"  ref="imageTofile" v-if="!htmlUrl">
                <div class="popTitle">重庆市钱币学会藏品归还记录表<br/>{{paperId}}</div>
                <div class="tableBox">
                    <div class="tableItem tableItem1">
                        <div class="tableTitle">归还单位</div>
                        <div class="tableInfo f_tableInfo">
                            <div>{{formItem2.borrow_company}}</div>
                            <div class="borderItem">归还时间</div>
                            <div>{{formItem2.applyTime}}</div>
                        </div>
                    </div>
                    <div class="tableItem tableItem1">
                        <div class="tableTitle">归还单位经办人</div>
                        <div class="tableInfo f_tableInfo">
                            <div>{{formItem2.handler}}</div>
                            <div class="borderItem">联系方式</div>
                            <div>{{formItem2.contacts}}</div>
                        </div>
                    </div>
                    <div class="tableItem">
                        <div class="tableTitle">归还藏品编号<br/>（藏品具体信息见附表）</div>
                        <div class="tableInfo">{{formItem2.numberId}}</div>
                    </div>
                    <div class="tableItem">
                        <div class="tableTitle">归还藏品现状</div>
                        <div class="tableInfo"><div class="p_text">{{formItem2.protective_measures}}</div></div>
                    </div>

                    <div class="tableItem">
                        <div class="tableTitle">学会经手人</div>
                        <div class="tableInfo">
                            <div class="timeTextBox">
                                <div>年</div>
                                <div>月</div>
                                <div>日</div>
                            </div>
                        </div>
                    </div>
                    <div class="tableItem">
                        <div class="tableTitle">学会秘书长意见</div>
                        <div class="tableInfo">
                            <div class="timeTextBox">
                                <div>年</div>
                                <div>月</div>
                                <div>日</div>
                            </div>
                        </div>
                    </div>
                    <div class="tableItem">
                        <div class="tableTitle">学会会长意见</div>
                        <div class="tableInfo">
                            <div class="timeTextBox">
                                <div>年</div>
                                <div>月</div>
                                <div>日</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img :src="htmlUrl" v-else alt="" class="saveImg">
            <div class="popBtnBox">
                <el-button class="popBtn" type="success" @click="sureClick"  v-loading.fullscreen.lock="fullscreenLoading">提交申请</el-button>
                <el-button class="popBtn" type="danger" @click="cencleClick">取消申请</el-button>
            </div>
        </div>


        <el-dialog title="重庆市钱币学会藏品归还记录表信息" :visible.sync="dialogFormVisible">
            <el-form :label-position="'right'">
                <el-form-item label="归还单位" :label-width="formLabelWidth" class="form2Item">
                    <el-input v-model="formItem2.borrow_company" ></el-input>
                </el-form-item>
                <el-form-item label="归还时间" :label-width="formLabelWidth" class="form2Item">
                    <el-date-picker
                    v-model="formItem2.applyTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width:100%"
                    type="datetime"
                    :default-value="new Date()">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="归还单位经办人" :label-width="formLabelWidth" class="form2Item">
                    <el-input v-model="formItem2.handler" ></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth" class="form2Item">
                    <el-input v-model="formItem2.contacts" ></el-input>
                </el-form-item>

                <el-form-item label="归还藏品现状" :label-width="formLabelWidth" class="form2Item">
                    <el-input v-model="formItem2.protective_measures" ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary"  @click="subMit" v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
            </div>
        </el-dialog>




    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import html2canvas from 'html2canvas'
export default {
    components: {
        html2canvas
    },
    data(){
        return{
            tableData: [],
            loading:false,
            uploadUrl:"https://jingji-h5.ecps.com.cn//3320/index.php?s=imagesUpload",
            fullscreenLoading:false,
            backImgId:0,
            total:0,
            pages:1,
            pageSize:15,

            formItem2: {
                applyTime: '',
                numberId:"",
                lendCount:"",
                type:"",
                out_state:"",
                remarks:"",
                label:"",
                protective_measures:"",
                borrow_company:"",
                handler:"",
                contacts:"",
                matter:""
            },

            htmlUrl:"",
            showPop:false,
            dialogFormVisible:false,
            lendId:0,
            formLabelWidth:"110px"
        }
    },
    created(){
        this.getListData();
    },
    methods:{
        getListData(){
            this.loading=true;
            this.$api.apply({
                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();
        },
        getId(id){
            this.backImgId=id;
        },
        upSuccess(e){
            if(e.code==0){
                this.$api.returnImage({
                    id:this.backImgId,
                    image:e.data.url
                }).then((res) => {
                    if(res.code==0){
                        this.$message('回传成功!');
                        this.getListData();
                    }else{
                        this.$message(res.message);
                    }
                }).catch((res) => {

                });
            }else{
                this.$message(res.message);
            }
        },
        backImg(i,r){
            console.log(i,r)
        },

        backCol(i,r){
            // console.log(i,r);
            this.formItem2={
                Id:"",
                applyTime: '',
                numberId:"",
                lendCount:"",
                out_state:"",
                remarks:"",
                label:"",
                protective_measures:"",
                borrow_company:"",
                handler:"",
                contacts:"",
                matter:""
            }
            this.dialogFormVisible=true;
            this.formItem2.Id=r.id;
            this.formItem2.numberId=r.numberId;
        },
        rowStyle() {
            return "text-align:center";
        },
        toImage () {
            // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
            html2canvas(this.$refs.imageTofile, {
                backgroundColor: null
             }).then((canvas) => {
                let url = canvas.toDataURL('image/png')
                this.htmlUrl = url;
                this.fullscreenLoading=false;
                // 把生成的base64位图片上传到服务器,生成在线图片地址
            })
        },
        subMit(){
            this.fullscreenLoading=true;
            this.$api.still(this.formItem2).then((res) => {
                this.dialogFormVisible=false;
                if(res.code==0){
                    this.paperId=res.data.numberId;
                    this.lendId=res.data.Id;
                    this.showPop=true;
                    setTimeout(()=>{

                        this.toImage();
                    },50)

                }else{
                    this.$message(res.message);
                }

            }).catch((res) => {
                this.loading=false;
                this.fullscreenLoading=false;
            });
        },
        getBlob(){
            let base64 = {
              dataURL:this.htmlUrl,//用url方式表示的base64图片数据
              type: 'image/png'//文件类型
            }
            let urlData = base64.dataURL
            let type = base64.type
            let bytes=null
            if(urlData.split(',').length>1){//是否带前缀
                bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
            }else{
                bytes = window.atob(urlData)
            }
            let ab = new ArrayBuffer(bytes.length)
            let ia = new Uint8Array(ab)
            for (let i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i)
            }
            return new Blob([ab], { type: type })
        },
        sureClick(){
            let file= this.getBlob();
            // console.log(file,111111111)
            let formDatas=new FormData();
            formDatas.append("file",file);
            formDatas.append("id",this.lendId);
            $.ajax({
                url:"https://jingji-h5.ecps.com.cn//3320/index.php?s=admin/stillApply",
                data:formDatas,
                headers:{
                    token: getToken(),
                    contentType: "application/json;charset=utf-8",
                },
                dataType: "json",
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                method:"POST",
                success:(res)=>{
                    if(res.code==0){
                        this.htmlUrl="",
                        this.showPop=false;
                        this.$message("申请提交成功！");
                        window.open(res.data.url);
                        this.getListData();
                    }else{
                        this.$message(res.message);
                    }
                },
                fail:(res)=>{
                    this.$message(res.message);
                }
            })
            // this.$api.lendApply({
            //     id:this.lendId,
            //     file:file
            // }).then((res) => {
            //     if(res.code==0){
            //         this.htmlUrl="",
            //         this.showPop=false;
            //         this.$message("申请提交成功！");
            //     }else{
            //         this.$message(res.message);
            //     }

            // }).catch((res) => {
            //     this.loading=false;
            // });
        },
        cencleClick(){
            this.htmlUrl="",
            this.showPop=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;
         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;
     }


      .pops{
         position: fixed;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         z-index: 100000;
         background: rgba(0, 0, 0, 0.5);
     }
     .paperBox{
        width: 660px;
        margin: 0 auto;
        background: #fff;
        padding: 50px;
        transform: scale(0.8);
     }
     .popTitle{
         width:100% ;
         text-align: center;
         font-size: 25px;
         color: #231815;
         font-weight: bold;
     }
    .tableBox{
         border: 1px solid #231815;
         border-bottom: none;
         margin-top: 30px;

     }
     .tableItem{
         height: 100px;
         width: 100%;
         display: flex;
         justify-content: flex-start;
         align-items: center;
         border-bottom: 1px solid #231815;
         font-size: 12px;
     }
     .tableItem1{
         height: 55px;
     }
     .tableTitle{
         width: 137px;
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
         border-right: 1px solid #231815 ;
         height: 100%;
     }
     .tableInfo{
         width: calc(100% - 138px);
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100%;
     }
     .f_tableInfo>div{
         width: calc(100% / 3);
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
     }
     .borderItem{
         border-left:1px solid #231815 ;
         border-right:1px solid #231815 ;
         box-sizing: border-box;
     }
     .popBtnBox{
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         margin-top: -50px;
         color: #fff;
         border: none;
     }
     .popBtnBox .popBtn{
         margin:0 20px ;
     }
     .saveImg{
         margin: 100px auto;
         display: block;

     }
     .form2Item{
         margin-bottom: 25px;
     }
    .p_text,.timeTextBox{
        box-sizing: border-box;
        padding:10px 20px;
        position: relative;
     }
     .p_text{
         display: flex;
         justify-content: center;
         align-items: center;
     }
     .timeTextBox {
         display: flex;
         justify-content: flex-end;
         align-items: flex-end;
         height: 100%;
         width: 100%;
     }
     .timeTextBox div{
         margin-left: 50px;
     }
</style>
