<template>
  <u-modal
      :show="signShow"
      :show-confirm-button="false"
      class="esign_dialog"
      width="100vw"
  >
    <view class="footer">
      <view class="button" @click="fnReset">
        <view>重</view>
        <view>签</view>
      </view>
      <view class="button" @click="fnGenerate">
        <view>确</view>
        <view>定</view>
      </view>
    </view>
    <view v-if="signShow" class="content">
      <sp-sign-board
          ref="signRef"
          horizontal
          bg-color="#fff"
          :need-back="false"
      />
    </view>
    <view class="header">
      <view></view>
      <view>
        <view class="title">签</view>
        <view class="title">字</view>
      </view>
      <view>
        <u-icon name="close" size="26" color="#000" @click="fnClose" />
      </view>
    </view>
  </u-modal>
</template>

<script >
  export default {
    props: {
      signShow: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        visible:false,
      }
    },
    methods: {
      fnReset() {
        this.$refs.signRef?.reset && this.$refs.signRef.reset();
      },
      fnGenerate() {
        this.$refs.signRef.confirm();
      },
      fnClose() {
        this.fnReset();
        this.$emit("update:signShow", false);
      }
    },
    mounted() {
      uni.$on("getSignImg", ({ base64, path }) => {
        this.$emit('confirm', {base64, path});
        this.fnClose();
      });
    },
    beforeDestroy() {
      uni.$off("getSignImg");
    }
  }
</script>

<style scoped lang="scss">
.header {
  padding: 50rpx 0;
  width: 80rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 40rpx;
  color: #000;
  margin-right: -25rpx;

  .title {
    margin-top: 10rpx;
    transform: rotate(90deg);
  }
}

.content {
  flex: 1;
  //display: flex;
  //align-items: center;
  //justify-content: center;
  height: 95vh;
  border: 1rpx dashed #dcdee0;
}

.footer {
  display: flex;
  flex-direction: column;
  margin-left: -25rpx;

  .button {
    border: 0;
    border-radius: 0;
    flex: 1;
    border-top: 1rpx solid #dcdee0;
    display: block;
    padding-top: 25vh;
    padding-left: 14rpx;
    padding-right: 30rpx;

    &:first-child {
      border: 0;
    }

    view {
      transform: rotate(90deg);
    }
  }
}
</style>