<template>
  <div class="body" :class="{ 'body--two': status === 0 }">
    <h1 v-if="status === 2">删除</h1>
    <h1 v-if="status === 0">提示</h1>
    <textarea
      placeholder="请输入删除原因"
      v-model="deleteRemark"
      v-if="status === 2"
    ></textarea>
    <p v-if="status === 0">此操作将永久删除该文件, 是否继续?</p>
    <div class="footer" :class="{ 'footer--two': status === 0 }">
      <div @click="cancel">取消</div>
      <div class="determine" @click="Determine">确定</div>
    </div>
  </div>
</template>
<script>
import { GO_URLS } from "@/config/URLS";
export default {
  props: {
    id: 0,
    status: null,
  },
  data() {
    return {
      deleteRemark: "",
    };
  },
  created() {},
  methods: {
    checkReason() {
      if (this.deleteRemark.trim() === "") {
        this.$message({
          message: "删除原因不可为空",
          type: "warning",
        });
        return;
      } else if (this.deleteRemark.trim().length > 30) {
        this.$message({
          showClose: true,
          message: "删除原因长度不可大于三十字",
          type: "warning",
        });
        return false;
      }
      this.moveRecycleBin();
    },
    Determine() {
      switch (this.status) {
        case 0:
          this.deleteConfirm({ id: Number(this.id) });
          break;
        case 2:
          this.checkReason();
          break;
        default:
          return false;
          break;
      }
    },
    // 移入回收站
    async moveRecycleBin() {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.abandon,
        params: {
          id: this.id,
          abandon_remark: this.deleteRemark,
        },
      });
      if (res) {
        this.$emit("deleteSuccess");
      }
    },

    // 删除存证
    async deleteConfirm(params) {
      const res = await this.$ajax({
        type: "delete",
        url: GO_URLS.delete,
        params: params,
      });
      if (res) {
        this.$emit("deleteSuccess");
      }
    },
    cancel() {
      this.$emit("CloseDg");
    },
  },
};
</script>
<style lang="less" scoped>
.body--two {
  height: 284px !important;
}
.body {
  width: 600px;
  height: 327px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
  h1 {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    color: rgba(0, 0, 0, 1);
    padding: 34px 0 18px 44px;
    line-height: 1;
  }
  textarea {
    width: 500px;
    height: 112px;
    border: 1px solid rgba(226, 226, 226, 1);
    margin-left: 50px;
    font-size: 18px;
    resize: none;
    line-height: 25px;
    padding-top: 12px;
    text-indent: 12px;
    &::-webkit-input-placeholder {
      font-size: 18px;
      font-weight: 400;
      color: rgba(192, 198, 210, 1);
      line-height: 25px;
    }
  }
  p {
    width: 500px;
    height: 112px;
    line-height: 112px;
    font-size: 18px;
    text-align: center;
  }
  .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>