<template>
  <div class="btn">
    <button :class=" { 'loading1': loading1, 'cancel' : title1 == '取消', 'submit' : title1 != '取消' } "  @click="noMultipleClicks( title1 == '提交' ? submitClick1 :cancelClick )">{{ title1 }}</button>
    <button  class="submit" @click="noMultipleClicks(submitClick)" :class="{'loading': loading}">{{ title2}}</button>
  </div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
export default {
  name: "twoBtnCommon",
  mixins:[myMixins],
  data(){
    return{
      noClick:true,
      loading: false,
      loading1: false
    }
  },
  props:{
    title1:{
      type:String,
      default:"取消"
    },
    title2:{
      type:String,
      default: '提交'
    }
  },
  methods:{
    cancelClick(){
      this.$emit('cancelClick')
    },
    submitClick(){
      // 设置 loading 状态
      this.loading = true;

      // 模拟异步请求
      setTimeout(() => {
        // 处理请求结果
        // ...
        this.$emit('submitClick')
        // 重置 loading 状态
        this.loading = false;
      }, 2000);

    },
    submitClick1(){
      // 设置 loading1状态
      this.loading1 = true;

      // 模拟异步请求
      setTimeout(() => {
        // 处理请求结果
        // ...
        this.$emit('submitClick1')
        // 重置 loading1 状态
        this.loading1 = false;
      }, 2000);

    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.loading,.loading1 {
  position: relative;
}

.loading::after,.loading1::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.btn{
  @include flexColBet;
  button{
    @include whLin(152px,39px);
    border-radius: 5px;
    color: #FFFFFF;
    @include fontWeightSize(bold,14px)
  }
  .cancel{
    background: #9EA7C0;
  }
  .submit{
    background-color: #354D93;
  }
}

</style>