<template>
  <div class="body" :class="{ 'body--two': status === 0 }">
    <textarea
      placeholder="请输入删除原因"
      v-model="deleteRemark"
      v-if="status !== 0"
    ></textarea>
    <p v-if="status === 0">此操作将永久删除该文件, 是否继续?</p>
  </div>
</template>
<script lang="ts" setup>
import { $ajax } from "@/service";
import { GO_URLS } from "cqk-sy-ui";
import { ElMessage } from "element-plus";
import { ref } from "vue";

const props = defineProps<{
  id?: string;
  status: any;
}>();

const emit = defineEmits(["deleteSuccess", "deleteSuccess", "CloseDg"]);

const deleteRemark = ref("");

defineExpose({
  Determine,
});

function checkReason() {
  console.log(deleteRemark, "show deleteRemark");
  if (deleteRemark.value.trim() === "") {
    ElMessage({
      message: "删除原因不可为空",
      type: "warning",
    });
    return;
  } else if (deleteRemark.value.trim().length > 30) {
    ElMessage({
      showClose: true,
      message: "删除原因长度不可大于三十字",
      type: "warning",
    });
    return false;
  }
  moveRecycleBin();
}
function Determine() {
  switch (props.status) {
    case 0:
      return deleteConfirm({ id: String(props.id) });
    default:
      return checkReason();
  }
}
// 移入回收站
async function moveRecycleBin() {
  const res = await $ajax({
    type: "post",
    url: GO_URLS.abandon,
    params: {
      id: props.id,
      abandon_remark: deleteRemark.value,
    },
  });
  if (res) {
    emit("deleteSuccess");
  }
}
// 删除存证
async function deleteConfirm(params: any) {
  const res = await $ajax({
    type: "delete",
    url: GO_URLS.delete,
    params: params,
  });
  if (res) {
    emit("deleteSuccess");
    return true;
  } else {
    return false;
  }
}
function cancel() {
  emit("CloseDg");
}
</script>
<style lang="scss" scoped>
.body {
  background: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  h1 {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    color: rgba(0, 0, 0, 1);
    padding: 34px 0 18px 44px;
    line-height: 1;
  }
  textarea {
    display: flow-root;
    width: 100%;
    outline: none;
    height: 112px;
    border: 1px solid rgba(226, 226, 226, 1);
    font-size: 14px;
    color: #353535;
    resize: none;
    line-height: 25px;
    padding-top: 12px;
    text-indent: 12px;
    border-radius: var(--sy-border-radius);
    transition: var(--el-transition-box-shadow);
    &::-webkit-input-placeholder {
      color: #a3a7aa;
    }

    &:hover {
      box-shadow: 0 0 0 1px #c4c4c4 inset;
    }

    &:focus {
      box-shadow: 0 0 0 1px #3f79fe inset;
    }
  }
  p {
    text-align: center;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 30px;
  }
  .footer--two {
    padding-top: 0 !important;
  }
  .footer {
    padding-top: 42px;
    float: right;
    padding-right: 50px;
    overflow: hidden;
    div {
      float: left;
      width: 120px;
      height: 40px;
      cursor: pointer;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      color: #5c6476;
      line-height: 40px;
    }
    .determine {
      background: rgba(63, 121, 254, 1);
      color: white;
    }
  }
}
</style>
