<template>
  <el-dialog :visible.sync="visible" title="自提核销" width="500px" @closed="$emit('close')">
    <div v-loading="loading" class="write-off">
      <span>请确认买家出示的提货码</span>
      <span class="code">{{data.writeOffCode}}</span>
      <span class="mt25">确认无误后，将商品交付给买家，确认核销后发货单完成</span>
    </div>
    <div slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">核销</el-button>
    </div>
  </el-dialog>
</template>

<script>
import fetch from '@/api/performance.js';
const { delivering } = fetch;

export default {
  props: {
    data: Object,
  },
  data() {
    return {
      visible: false,
      loading: false,
    };
  },
  mounted() {
    this.visible = true;
  },
  methods: {
    async handleConfirm() {
      this.loading = true;
      await delivering({
        deliveryId: this.data.deliveryId,
      }).finally(() => this.loading = false);
      this.visible = false;
      this.$emit('refresh');
    }
  }
};
</script>

<style lang="scss" scoped>
.write-off {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  color: #303133;
  .code {
    margin-top:20px;
    color:#F5222D;
    font-size:20px;
  }
}
</style>
