<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-01-07 17:25:14
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-01-10 14:26:19
 * @FilePath: /fe-manage/src/components/Modals/ExportHomeWork.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal
    :visible="exportHomeWorkV"
    :footer="null"
    wrapClassName="exportHomeWork"
    centered="true"
    :zIndex="9999"
  >
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="icon"></div>
          <span>提示</span>
          <div class="close_exit" @click="clostModal"></div>
        </div>
        <div class="body">
          <img
            style="width: 40px; height: 40px; margin-bottom: 16px"
            src="../../assets/images/leveladd/success.png"
          />
          <span>作业导出完成，请下载到本地或去下载中心查看</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1" @click="clostModal">
            <div class="btnText">取消</div>
          </div>
          <div class="del_btn btn2" @click="downloadHomeWork">
            <div class="btnText">下载</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { toRefs, reactive } from "vue";

export default {
  name: "ProjectHomeWorkManage",
  props: {
    exportHomeWorkV: {
      type: Boolean,
      default: false,
    },
    downloadUrl: {
      type: String,
      default: null,
    },
  },
  setup(props, ctx) {
    const state = reactive({});
    //关闭弹窗
    const clostModal = () => {
      ctx.emit("update:exportHomeWorkV", false);
    };
    //下载作业
    const downloadHomeWork = () => {
      // props.url
      if (props.downloadUrl) {
        window.open(process.env.VUE_APP_FILE_PATH+props.downloadUrl);
      }
    };
    console.log("props", props);
    return {
      ...toRefs(state),
      clostModal,
      downloadHomeWork,
    };
  },
};
</script>
<style lang="scss">
.exportHomeWork {
  .ant-modal {
    width: 424px !important;
    height: 308px !important;
    .ant-modal-content {
      width: 424px !important;
      height: 308px !important;
      .ant-modal-body {
        width: 424px !important;
        height: 308px !important;
        padding: 0 !important;
        .delete {
          z-index: 999;
          width: 424px;
          height: 308px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 68px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }
          .del_main {
            width: 100%;
            position: relative;
            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;
              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/taskpage/gan.png);
                background-size: 100% 100%;
              }
              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }
            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              // background-color: red;
              position: relative;
              .back {
                position: absolute;
                top: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
              }
            }
            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;
              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-shrink: 0;
                cursor: pointer;
                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }
              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }
              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    .ant-modal-close-x {
      display: none;
    }
  }
}
</style>
