<template>
  <Popup ref="popup" title="批量导入结果" width="400px" :isCrud="false">
    <div class="import-result">
      <div class="import-result-content">
        <!-- 自定义内容容器样式类名 -->
        <p class="import-result-item">
          导入成功条数:
          <span class="success-text">{{ successSize }}</span>
        </p>
        <p class="import-result-item">
          导入失败条数:
          <span class="failure-text">{{ errorSize }}</span>
        </p>
        <a v-if="errorUrl" :href="errorUrl" download="导入失败记录.xlsx">
          <el-button type="primary" size="mini">下载失败记录</el-button>
        </a>
      </div>
    </div>
  </Popup>
</template>

<script>
import Popup from "../Popup";
export default {
  name: "ImportFailPopup",
  components: {
    Popup,
  },
  data() {
    return {
      successSize: "",
      errorSize: "",
      errorUrl: "",
    };
  },
  methods: {
    open({ successSize, errorSize, errorUrl }) {
      this.successSize = successSize;
      this.errorSize = errorSize;
      this.errorUrl = errorUrl;
      this.$refs.popup.open();
    },
  },
};
</script>
<style lang="scss" scoped>
.import-result {
  &-content {
  }

  &-item {
    margin: 0;
    /* 自定义结果项样式 */
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
  }

  .success-text {
    color: #409eff;
    font-size: 24px;
  }
  .failure-text {
    color: #f56c6c;
    font-size: 24px;
  }
}
</style>
