<template>
  <!-- 添加或修改项目信息对话框 -->
  <div class="el-drawer__wrapper">
    <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
      <div class="page-container form-container">
        <div class="form-btns-container">
          <span class="title-label"
            ><el-icon>
              <Document />
            </el-icon>
            项目信息</span
          >
          <el-button-group>
            <el-button
              v-if="editStatus"
              type="primary"
              size="small"
              icon="Finished"
              @click="submitForm"
              >保存</el-button
            >
            <el-button
              v-else
              type="warning"
              size="small"
              icon="Edit"
              @click="editStatus = true"
              >修改</el-button
            >
            <el-button
              v-if="form.id && editStatus"
              type="info"
              size="small"
              icon="Close"
              @click="editStatus = false"
              >取消修改</el-button
            >
            <el-button
              v-if="form.id"
              type="success"
              size="small"
              @click="getForm"
            >
              <i class="fa fa-refresh" aria-hidden="true" /> 刷新
            </el-button>
          </el-button-group>
          <div class="screen-btn" @click="handleScreen">
            <template v-if="!isFullscreen">
              <i class="fa fa-window-maximize" aria-hidden="true" />
              <!-- <span>全屏</span> -->
            </template>
            <template v-else>
              <i class="fa fa-window-restore" aria-hidden="true" />
              <!-- <span>还原</span> -->
            </template>
          </div>
          <div class="close-btn" @click="cancel">
            <i class="fa fa-times" aria-hidden="true" />
            <!-- <span>关闭</span> -->
          </div>
        </div>
        <div
          class="Y-scrollbar"
          style="
            position: absolute;
            top: 32px;
            bottom: 0;
            width: 100%;
            overflow: auto;
          "
        ></div>
        <el-form
          ref="binRef"
          class="master-container"
          :model="form"
          :rules="rules"
          label-width="120px"
        >
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item
                label="来源外键 当该行标记子表删除时使用"
                prop="fromId"
              >
                <el-input
                  v-if="editStatus"
                  v-model="form.fromId"
                  placeholder="请输入来源外键 当该行标记子表删除时使用"
                />
                <span v-else>{{ form.fromId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="来源表名" prop="sourceTableName">
                <el-input
                  v-if="editStatus"
                  v-model="form.sourceTableName"
                  placeholder="请输入来源表名"
                />
                <span v-else>{{ form.sourceTableName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="来源表外键" prop="sourceId">
                <el-input
                  v-if="editStatus"
                  v-model="form.sourceId"
                  placeholder="请输入来源表外键"
                />
                <span v-else>{{ form.sourceId }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="数据json" prop="sourceValue">
                <el-input
                  v-if="editStatus"
                  v-model="form.sourceValue"
                  type="textarea"
                  placeholder="请输入内容"
                />
                <span v-else>{{ form.sourceValue }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否清除" prop="isClean">
                <el-input
                  v-if="editStatus"
                  v-model="form.isClean"
                  placeholder="请输入是否清除"
                />
                <span v-else>{{ form.isClean }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否还原" prop="isReturn">
                <el-input
                  v-if="editStatus"
                  v-model="form.isReturn"
                  placeholder="请输入是否还原"
                />
                <span v-else>{{ form.isReturn }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { getBin } from "@/api/business/bin";
const { proxy } = getCurrentInstance();
/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});
const { getList } = toRefs(props);
/** 字典数组区 */
/** 表单抽屉 页变量 */
const title = ref("");
const loading = ref(false);
const multiple = ref(true);
const visible = ref(false);
const editStatus = ref(false);
const isFullscreen = ref(false);
const webHost = import.meta.env.VITE_APP_BASE_API;
const data = reactive({
  form: {},
  rules: {
    sourceTableName: [
      { required: true, message: "来源表名不能为空", trigger: "blur" },
    ],
    sourceValue: [
      { required: true, message: "数据json不能为空", trigger: "blur" },
    ],
    isClean: [{ required: true, message: "是否清除不能为空", trigger: "blur" }],
    isReturn: [
      { required: true, message: "是否还原不能为空", trigger: "blur" },
    ],
  },
});
const { form, rules } = toRefs(data);
/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
  reset();
  visible.value = true;
  if (id) {
    getBin(id).then((response) => {
      form.value = response.data;
      editStatus.value = false;
      title.value = "修改项目信息";
    });
  } else {
    editStatus.value = true;
    title.value = "添加项目信息";
  }
}

/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    id: null,
    fromId: null,
    sourceTableName: null,
    sourceId: null,
    sourceValue: null,
    createTime: null,
    creatorId: null,
    updateTime: null,
    updaterId: null,
    deleted: null,
    version: null,
    tenantId: null,
    isClean: null,
    isReturn: null,
  };
  proxy.resetForm("binRef");
}

/** 全屏缩放 */
function handleScreen() {
  const dom = document.querySelector(
    ".list-container > .el-drawer__wrapper > .el-overlay"
  );
  isFullscreen.value = !isFullscreen.value;
  dom.style.position = isFullscreen.value ? "fixed" : "absolute";
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["binRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateBin(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          visible.value = false;
          getList.value();
        });
      } else {
        addBin(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          visible.value = false;
          getList.value();
        });
      }
    }
  });
}

/** 查询表单信息  */
function getForm() {
  loading.value = true;
  getBin(form.value.id).then((response) => {
    loading.value = false;
    form.value = response.data;
  });
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
