<template>
  <div>
    <el-dialog
      title="任务知识导入"
      style="width: 1108px; height: 798px"
      custom-class="dialogClass"
      :show-close="false"
      class="dialog"
      v-model="props.showModel"
      :close-on-click-modal="false"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <span :id="titleId" :class="titleClass">任务知识导入</span>
          <img
            class="gbImg"
            src="@/assets/images/关闭.png"
            @click="close"
            alt=""
          />
        </div>
        <img class="xtImg" src="@/assets/images/线条.png" alt="" />
      </template>
      <div
        style="
          color: #fff;
          margin-top: -35px;
          padding: 10px;
          padding-left: 20px;
        "
      >
        <el-scrollbar height="650px">
          <slot name="content"></slot>
        </el-scrollbar>
      </div>
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">确定</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            返回
          </el-button>
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>
<script setup>
const emits = defineEmits(["closePop", "submit"]);
const dialogVisible = ref(false);
const props = defineProps({
  modelValue: [String, Object, Array],
  //控制显隐
  showModel: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "任务知识导入",
  },
  width: {
    type: String,
    default: "673",
  },
  showOprBtn: {
    type: Boolean,
    default: true,
  },
});
const close = () => {
  emits("closePop");
};
const submit = () => {
  emits("submit");
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  background: url("@/assets/images/弹框@2x.png") !important;
  background-size: 1108px 798px !important;
  .el-dialog__header {
    padding: 5px 0px;
    margin-right: 5px !important;
    .gbImg {
      cursor: pointer;
      margin-top: 3px;
      // margin-left: -30px;
      width: 51px;
      height: 35px;
      background-size: 100% 100%;
    }
  }
  .xtImg {
    margin-left: 18px;
    width: 530px;
  }
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  text-align: center;
  margin-right: 9px;
  margin-bottom: 0;
  span {
    color: #ffffff;
    padding: 38px 20px 0;
    margin-top: 10px;
    margin-left: 20px;
  }
}
</style>
