<template>
    <view class="baseSignature">
        <tui-modal :show="modal" custom @cancel="modal = false">
            <view class="title">电子签名后保存</view>
            <tui-input
                v-for="(item, idx) in valueCopy"
                :value="item.value ? '已签名' : ''"
                :label="item.label"
                @click="sign(idx)"
                disabled
                :required="item.required"
                :key="idx"
            >
                <template #right>
                    <tui-icon name="arrowright" :size="20"></tui-icon>
                </template>
            </tui-input>
            <view class="operations">
                <tui-button plain @click="modal = false">返回</tui-button>
                <tui-button @click="save">保存</tui-button>
            </view>
        </tui-modal>
        <ModalSignature ref="modalSignature" @input="input" destroyOnClose />
    </view>
</template>
<script>
import ModalSignature from "../signature/ModalSignature.vue";
export default {
    components: { ModalSignature },
    props: ["value"],
    data() {
        return {
            modal: false,
            idx: 0,
            valueCopy: [],
        };
    },
    methods: {
        sign(idx) {
            this.idx = idx;
            this.$refs.modalSignature.open();
        },
        input(e) {
            this.$set(this.valueCopy[this.idx], "value", e);
            this.$refs.modalSignature.close();
        },
        open() {
            this.modal = true;
        },
        close() {
            this.modal = false;
        },
        save() {
            for (let l = 0; l < this.valueCopy.length; l++) {
                const item = this.valueCopy[l];
                if (item.required && !item.value) {
                    console.log(`请输入${item.label}`);
                    //校验失败 checkRes 为错误信息
                    uni.showToast({
                        title: `签名未完成，请输入${item.label}`,
                        icon: "none",
                        style: "z-index: 10000;",
                    });
                    return;
                }
            }
            this.$emit("input", this.valueCopy);
            // HACK 这里关闭窗口可以放在组件外
            this.modal = false;
        },
    },
    watch: {
        value: {
            handler() {
                this.valueCopy = JSON.parse(JSON.stringify(this.value));
            },
            immediate: true,
            deep: true,
        },
    },
};
</script>
<style lang="scss">
.baseSignature {
    .title {
        // background-color: #5179ef;
        // color: #fff;
        text-align: center;
        margin-bottom: 20rpx;
    }
    .operations {
        margin-top: 40rpx;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        .tui-btn {
            height: auto !important;
            line-height: 1 !important;
            padding: 20rpx;
        }
    }
}
</style>
