<template>
  <div :class="{show}" class="comp-confirm">
    <div class="cc-content-wrapper">
      <div class="cc-content-main">
        <div class="cc-icon">
          <svg v-if="type === 'success'" width="100%" height="100%" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g fill="#25C343">
              <path d="M14,0.875 C21.2487373,0.875 27.125,6.75126266 27.125,14 C27.125,21.2487373 21.2487373,27.125 14,27.125 C6.75126266,27.125 0.875,21.2487373 0.875,14 C0.875,6.75126266 6.75126266,0.875 14,0.875 Z M19.5344115,9.30436434 C19.3836132,9.15373919 19.1422439,9.14871835 18.9854074,9.28930183 L18.9694917,9.30436434 L11.9156158,16.3501294 L8.81175831,13.2499302 C8.66095994,13.0993051 8.41959062,13.0942842 8.26275419,13.2348677 L8.24683845,13.2499302 L7.11699873,14.3784721 C6.96620037,14.5290973 6.96117375,14.7701894 7.1019189,14.9268456 L7.11699873,14.9427431 L10.4381346,18.2601477 C10.4501112,18.2794965 10.4638977,18.2980447 10.4794941,18.3155504 L10.4956938,18.3326996 L11.6255335,19.4612415 C11.7440613,19.579633 11.9185436,19.6080705 12.0639378,19.5466213 C12.1068259,19.529948 12.1474116,19.5055961 12.1835744,19.4735657 L12.2012775,19.4569107 L13.3311172,18.3283688 C13.3407696,18.3187274 13.3498248,18.3087154 13.3582828,18.2983786 L13.3705217,18.2826356 L20.6642513,10.9971772 C20.8150496,10.846552 20.8200762,10.60546 20.6793311,10.4488037 L20.6642513,10.4329062 L19.5344115,9.30436434 Z"/>
            </g>
          </svg>
          <svg v-if="type === 'info'" width="100%" height="100%" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g transform="translate(-587.000000, -74.000000)" fill="#FF9C00">
                <g transform="translate(587.000000, 74.000000)">
                  <path d="M14,0.875 C21.2487373,0.875 27.125,6.75126266 27.125,14 C27.125,21.2487373 21.2487373,27.125 14,27.125 C6.75126266,27.125 0.875,21.2487373 0.875,14 C0.875,6.75126266 6.75126266,0.875 14,0.875 Z M14.875,18.375 L13.125,18.375 C12.8906974,18.375 12.6994132,18.5591841 12.6880354,18.7906643 L12.6875,18.8125 L12.6875,20.5625 C12.6875,20.7968026 12.8716841,20.9880868 13.1031643,20.9994646 L13.125,21 L14.875,21 C15.1093026,21 15.3005868,20.8158159 15.3119646,20.5843357 L15.3125,20.5625 L15.3125,18.8125 C15.3125,18.5781974 15.1283159,18.3869132 14.8968357,18.3755354 L14.875,18.375 Z M14.875,7.984375 L13.125,7.984375 C12.8906974,7.984375 12.6994132,8.16855905 12.6880354,8.40003934 L12.6875,8.421875 L12.6875,16.1875 C12.6875,16.4218026 12.8716841,16.6130868 13.1031643,16.6244646 L13.125,16.625 L14.875,16.625 C15.1093026,16.625 15.3005868,16.4408159 15.3119646,16.2093357 L15.3125,16.1875 L15.3125,8.421875 C15.3125,8.18757238 15.1283159,7.99628825 14.8968357,7.98491042 L14.875,7.984375 Z"/>
                </g>
              </g>
            </g>
          </svg>
        </div>
        <div class="cc-desc">{{ desc }}</div>
      </div>
      <div class="cc-content-footer">
        <el-button v-if="showCancelBtn" size="small" @click.stop="clickCancel">取消</el-button>
        <el-button type="primary" size="small" @click.stop="clickSure">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompConfirm',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    desc: {
      type: String,
      default: ''
    },
    showCancelBtn: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'info'
    }
  },
  mounted() {
    document.body.appendChild(this.$el)
  },
  destroyed() {
    document.body.removeChild(this.$el)
  },
  methods: {
    clickCancel() {
      this.$emit('update:show', false)
      this.$emit('on-cancel')
    },
    clickSure() {
      this.$emit('update:show', false)
      this.$emit('on-sure')
    }
  }
}
</script>

<style lang="scss">
.comp-confirm {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity .3s ease-out;
  pointer-events: none;
  .cc-content-wrapper {
    box-sizing: border-box;
    width: 480px;
    padding: 24px;
    border-radius: 4px;
    font-size: 16px;
    color: #111;
    background: #fff;
    transform: translate3d(0, -20px, 0);
    transition: transform .3s ease-out;
    .cc-content-main {
      display: flex;
      .cc-icon {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        margin-right: 9px
      }
      .cc-desc {
        line-height: 28px;
        word-break: break-all;
      }
    }
    .cc-content-footer {
      margin-top: 26px;
      text-align: right;
    }
  }
  &.show {
    opacity: 1;
    pointer-events: auto;
    .cc-content-wrapper {
      transform: translate3d(0, 0, 0);
    }
  }
}
</style>
