<template>
    <div>
        <navbar title="预授信意见"></navbar>
        <div class="wrapper">
            <van-form ref="form" :model="baseForm">
                <div class="jine">
                    <van-field v-model="baseForm.preCreditAmt" label="预授信金额" placeholder="请输入" type="number"
                        ></van-field>
                    <span class="danwei" v-if="baseForm.preCreditAmt">万元人民币</span>
                </div>
                <van-field v-model="baseForm.preCreditRemark" label="备注" placeholder="请输入" type="textarea"
                    :row="3"></van-field>

            </van-form>
            <div class="title">
                <div>走访人签名</div>
                <van-button type="info" @click="handleVisitorture" size="mini" v-if="visitorUrl != ''">重新签名</van-button>
            </div>

            <div class="qmqy" v-if="visitorUrl == ''">
                <div class="qmqy_title" @click="handleVisitorture">签名区域</div>
            </div>
            <div class="qmzp" v-else>
                <img name="qmqy" :src="visitorUrl" alt="" class="tup">
            </div>
            <van-popup v-model="showVisitorture" position="bottom" :style="{ height: '100%' }" ref="visitor">
                <div class="sign-finish">
                    <div class="wrap">
                        <div class="actionsWrap">
                            <div class="actions">
                                <van-button type="primary" class="btn" @click="handleVisitorClear">清除</van-button>
                                <van-button type="warning" class="btn" @click="showVisitorture = false">退出</van-button>
                                <van-button type="info" class="btn" @click="handlevisitorPreview">保存</van-button>
                            </div>
                        </div>
                        <canvas class="canvas" ref="canvasOne" />
                    </div>
                </div>
            </van-popup>

            <div class="title">
                <div>共同走访人签名</div>
                <van-button type="info" @click="handleCovisitorture" size="mini" v-if="covisitorUrl != ''">重新签名</van-button>
            </div>
            <div class="qmqy" v-if="covisitorUrl == ''">
                <div class="qmqy_title" @click="handleCovisitorture">签名区域</div>
            </div>
            <div class="qmzp" v-else>
                <img name="qmqy" :src="covisitorUrl" alt="" class="tup">
            </div>
            <van-popup v-model="showCoisitorture" position="bottom" :style="{ height: '100%' }">
                <div class="sign-finish">
                    <div class="wrap">
                        <div class="actionsWrap">
                            <div class="actions">
                                <van-button type="primary" class="btn" @click="handleCovisitorClear">清除</van-button>
                                <van-button type="warning" class="btn" @click="showCoisitorture = false">退出</van-button>
                                <van-button type="info" class="btn" @click="handleCovisitorPreview">保存</van-button>
                            </div>
                        </div>
                        <canvas class="canvas" ref="canvasTow" />
                    </div>
                </div>
            </van-popup>

            <div class="title">
                <div>审批人签名</div>
                <van-button type="info" @click="handleApproverture" size="mini" v-if="approverrUrl != ''">重新签名</van-button>
            </div>
            <div class="qmqy" v-if="approverrUrl == ''">
                <div class="qmqy_title" @click="handleApproverture">签名区域</div>
            </div>
            <div class="qmzp" v-else>
                <img name="qmqy" :src="approverrUrl" alt="" class="tup">
            </div>
            <van-popup v-model="showApproverture" position="bottom" :style="{ height: '100%' }">
                <div class="sign-finish">
                    <div class="wrap">
                        <div class="actionsWrap">
                            <div class="actions">
                                <van-button type="primary" class="btn" @click="handleApproverClear">清除</van-button>
                                <van-button type="warning" class="btn" @click="showApproverture = false">退出</van-button>
                                <van-button type="info" class="btn" @click="handleApproverPreview">保存</van-button>
                            </div>
                        </div>
                        <canvas class="canvas" ref="canvasThree" />
                    </div>
                </div>
            </van-popup>
        </div>
        <div class="footer">
            <div class="btn_box">
                <van-button type="primary" class="btn" @click="handleCommit">保存</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import navbar from '../../../components/navbar/navbar.vue';
import { queryOperateCase, addOperateCase, updateOperateCase } from "@/service/api/report";
// import SmoothSignature from "smooth-signature"
import {
    Icon,
    Field,
    Form,
    Button,
    Toast
} from 'vant';
export default {
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanForm: Form,
        VanField: Field,
        VanButton: Button
    },
    data() {
        return {
            baseForm: {
                preCreditAmt: '',
                preCreditRemark: '',
                companyId: '',
                interviewSign: '',
                jointInterviewSign: '',
                approverSign: '',
            },
            visitorUrl: '',
            showVisitorture: false,
            covisitorUrl: '',
            showCoisitorture: false,
            approverrUrl: '',
            showApproverture: false

        }
    },
    created() {
        this.baseForm.companyId = sessionStorage.getItem('companyId'),
            this.initQueryOperateCase()
    },
    methods: {
        async initQueryOperateCase() {
            const params = {
                companyId: this.baseForm.companyId
            }
            let result = await queryOperateCase(params);
            if (result) {
                this.status = 2
                this.baseForm.preCreditAmt = result.preCreditAmt
                this.baseForm.preCreditRemark = result.preCreditRemark
                this.visitorUrl = result.interviewSign ? result.interviewSign : ''
                this.covisitorUrl = result.jointInterviewSign ? result.jointInterviewSign : ''
                this.approverrUrl = result.approverSign ? result.approverSign : ''
            } else {
                this.status = 1
            }
        },
        //走访人签名
        handleVisitorture() {
            this.showVisitorture = true
            this.$nextTick(() => {
                const canvas = this.$refs.canvasOne
                console.log(canvas, 'this.$refthis.$ref')
                const options = {
                    width: window.innerWidth - 120,
                    height: window.innerHeight - 80,
                    minWidth: 3,
                    maxWidth: 10,
                    openSmooth: true,
                    bgColor: '#f6f6f6'
                }
                // this.signatureOne = new SmoothSignature(canvas, options)
            })
        },
        handleVisitorClear() {
            console.log(this.$refs,'sssss')
            console.log(this.signatureOne,'signatureOnesignatureOne')
            this.signatureOne.clear()
        },
        handlevisitorPreview() {
        
            const isEmpty = this.signatureOne.isEmpty()
            if (isEmpty) {
                return
            }
            const canvas = this.signatureOne.getRotateCanvas(-90)
            const pngUrl = canvas.toDataURL("image/png")
            this.visitorUrl = pngUrl
            this.showVisitorture = false
            this.signatureOne.clear()
        },
        //共同走访人签名
        handleCovisitorture() {
            this.showCoisitorture = true
            this.$nextTick(() => {
                const canvas = this.$refs.canvasTow
                console.log(canvas, 'this.$refthis.$ref')
                const options = {
                    width: window.innerWidth - 120,
                    height: window.innerHeight - 80,
                    minWidth: 3,
                    maxWidth: 10,
                    openSmooth: true,
                    bgColor: '#f6f6f6'
                }
                // this.signatureTwo = new SmoothSignature(canvas, options)
            })
        },
        handleCovisitorClear() {
            this.signatureTwo.clear()
        },
        handleCovisitorPreview() {
            const isEmpty = this.signatureTwo.isEmpty()
            if (isEmpty) {
                return
            }
            const canvas = this.signatureTwo.getRotateCanvas(-90)
            const pngUrl = canvas.toDataURL("image/png")
            this.covisitorUrl = pngUrl
            this.showCoisitorture = false
        },
        //审批人签名
        handleApproverture() {
            this.showApproverture = true
            this.$nextTick(() => {
                const canvas = this.$refs.canvasThree
                console.log(canvas, 'this.$refthis.$ref')
                const options = {
                    width: window.innerWidth - 120,
                    height: window.innerHeight - 80,
                    minWidth: 3,
                    maxWidth: 10,
                    openSmooth: true,
                    bgColor: '#f6f6f6'
                }
                // this.signatureThree = new SmoothSignature(canvas, options)
            })
        },
        handleApproverClear() {
            this.signatureThree.clear()
        },
        handleApproverPreview() {
            const isEmpty = this.signatureThree.isEmpty()
            if (isEmpty) {
                return
            }
            const canvas = this.signatureThree.getRotateCanvas(-90)
            const pngUrl = canvas.toDataURL("image/png")
            this.approverrUrl = pngUrl
            this.showApproverture = false
        },
        async handleCommit() {
            console.log(this.baseForm, 'baseFormbaseForm')
            this.baseForm.interviewSign = this.visitorUrl
            this.baseForm.jointInterviewSign = this.covisitorUrl
            this.baseForm.approverSign = this.approverrUrl
            if (this.status == 1) {
                let result = await addOperateCase(this.baseForm);
                if (result) {
                    Toast.success('新增成功');
                    this.$router.go(-1)
                }
            } else {
                let result = await updateOperateCase(this.baseForm);
                if (result) {
                    Toast.success('修改成功');
                    this.$router.go(-1)

                }
            }
        },
        goDetail() { },
    }
}
</script>
<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;
}

.title {
    line-height: 45px;
    padding: 5px 15px;
    color: rgb(89, 89, 89);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header {
    display: flex;
    justify-content: space-between;
    padding-right: 15px;
    align-items: center;
}

.header_btn {
    text-align: center;
}

.main_item {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    color: rgb(89, 89, 89);
    line-height: 45px;
    margin-top: 1px;

}

.main_item_left {
    font-size: 14px;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.btn_box {
    width: 100%;
}

.btn {
    width: 100%;
}

.qmqy {
    height: 8rem;
    text-align: center;
    padding: 15px;
    background-color: #fff;
    color: rgb(89, 89, 89);
}

.qmqy_title {
    background-color: rgb(242, 243, 245);
    height: 6rem;
    line-height: 6rem;
}

.sign-finish {
    width: 100vw;
    height: 40vh;

    canvas {
        border-radius: 10px;
        border: 2px dashed #ccc;
    }

    .wrap {
        padding: 15px;
        height: 100%;
        display: flex;
        justify-content: center;

        .actionsWrap {
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .canvas {
            flex: 1;
        }

        .actions {
            margin-right: 10px;
            white-space: nowrap;
            transform: rotate(90deg);

            .actions-button {
                margin-left: 15px;
            }
        }
    }
}

.tup {
    width: 100%;
}

.qmzp {
    padding: 10px;
    background-color: #fff;
}
.jine{
    display: flex;
    align-items: center;
    background-color: #fff;
    /deep/ .van-cell{
        width: 55%;
    }
}
.danwei{
    font-size: 14px;
}
</style>