<template>
  <el-dialog
    width="600"
    append-to-body
    v-model="dialogVisible"
    :center="true"
    custom-class="KnowledgeDelete"
    ><!-- 使用自定义头部组件 -->
    <template v-slot:header>
      <div class="KnowledgeDelete-header">
        <img :src="delIcon" alt="" />
        <span>知识删除</span>
      </div>
    </template>
    <div class="withdraw-content">
      <div class="label">删除原因</div>
      <el-input
        v-model="reason"
        maxlength="200"
        :rows="4"
        placeholder="请输入"
        show-word-limit
        type="textarea"
      />
      <div class="footer-btn">
        <div class="cancel_btn" @click="dialogVisible = false">取消</div>
        <!-- <div class="determine_btn">确定</div> -->
        <el-button
          size="large"
          @click="submit"
          style="width: 140px; margin: 0"
          class="footer-btn"
          type="primary"
          >确定</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue";
import delIcon from "@/assets/knowledge/del.png";
import { message } from "@/utils/message";
const dialogVisible = ref(false);
const reason = ref("");
defineExpose({
  open(val) {
    id.value = val;
    dialogVisible.value = true;
  }
});
const id = ref("");
const closeDialog = () => {
  dialogVisible.value = false;
};
const emit = defineEmits(["delOk"]);
const submit = () => {
  if (reason.value) {
    emit("delOk", id.value, reason.value);
    closeDialog();
  } else {
    message("请填写原因", { type: "error" });
  }
};
</script>
<style lang="scss" scoped>
.KnowledgeDelete-header {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 76px;
  border-bottom: 1px solid rgba(91, 139, 255, 0.3);
  position: relative;
  width: 100%;
  span {
    font-weight: bold;
    font-size: 20px;
    color: #333333;
  }
  img {
    width: 28px;
    height: 28px;
    margin-right: 16px;
  }
}
:deep(.el-dialog__header) {
  padding: 0;
  margin: 0;
}
.withdraw-content {
  .label {
    font-size: 16px;
    color: #333333;
    margin-bottom: 16px;
  }
  .desc {
    margin-top: 8px;
    font-size: 14px;
    color: #b4b4b4;
  }
}
</style>