<template>
    <div>
        <navbar title="贷审小组结论"></navbar>
        <div class="wrapper">
            <van-form ref="form" :model="baseForm">
                <van-field v-model="baseForm.auditOpinion" label="意见" placeholder="请输入" type="textarea"
                    :row="3"></van-field>
            </van-form>
            <div class="title">
                <div>签名</div>
                <van-button type="info" @click="handleSignature" size="mini" v-if="signatureUrl != ''">重新签名</van-button>
            </div>
            <div class="qmqy" v-if="signatureUrl == ''">
                <div class="qmqy_title" @click="handleSignature">签名区域</div>
            </div>
            <div class="qmzp" v-else>
                <img name="qmqy" :src="signatureUrl" alt="" class="tup">
            </div>
            <van-popup v-model="showSignature" 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="handleClear">清除</van-button>
                                <van-button type="warning" class="btn" @click="showSignature = false">退出</van-button>
                                <van-button type="info" class="btn" @click="handlePreview">保存</van-button>
                            </div>
                        </div>
                        <canvas class="canvas" ref="canvas" />
                    </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';
import { height, width } from 'dom7';
export default {
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanForm: Form,
        VanField: Field,
        VanButton: Button
    },
    data() {
        return {
            baseForm: {
                auditOpinion: '',
                companyId: '',
                auditSign: ''
            },
            signatureUrl: '',
            showSignature: 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.auditOpinion = result.auditOpinion
                this.signatureUrl = result.auditSign ? result.auditSign : ''
            } else {
                this.status = 1
            }
        },
        handleSignature() {
            this.showSignature = true
            this.$nextTick(() => {
                const canvas = this.$refs.canvas
                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.signature = new SmoothSignature(canvas, options)
            })
        },
        handleClear() {
            this.signature.clear()
        },
        handlePreview() {
            const isEmpty = this.signature.isEmpty()
            if (isEmpty) {
                return
            }
            const canvas = this.signature.getRotateCanvas(-90)
            const pngUrl = canvas.toDataURL("image/png")
            this.signatureUrl = pngUrl
            this.showSignature = false
        },
        async handleCommit() {
            this.baseForm.auditSign = this.signatureUrl
            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)

                }
            }
        },
    }
}
</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;
}</style>