<script setup lang="ts">
import { ref, watch } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: ""
  },
  data: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const ruleFormRef = ref<FormInstance>();

const formVisible = ref(false);
const formData = ref(props.data);
const title = ref("新建企业");
// const textareaValue = ref("");

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      const data = formData;
      console.log(data);

      message("提交成功", { type: "success" });
      emit("submit-form", data);
      formVisible.value = false;
      formData.value = {};
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = () => {
  formVisible.value = false;
  resetForm(ruleFormRef.value);
};

const tableData = [
  {
    version: "2016-05-03",
    name: "Tom"
  },
  {
    version: "2016-05-02",
    name: "Tom"
  },
  {
    version: "2016-05-04",
    name: "Tom"
  },
  {
    version: "2016-05-01",
    name: "Tom"
  },
  {
    version: "2016-05-08",
    name: "Tom"
  },
  {
    version: "2016-05-06",
    name: "Tom"
  },
  {
    version: "2016-05-07",
    name: "Tom"
  }
];

const pagination = ref({ current: 1, pageSize: 12, total: 5 });
const onPageSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.current = 1;
};
const onCurrentChange = (current: number) => {
  pagination.value.current = current;
};

const emit = defineEmits(["update:visible", "submit-form"]);
watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.type,
  val => {
    if (val == "edit") {
      title.value = "编辑企业";
    } else if (val == "add") {
      title.value = "添加算法";
    }
  }
);

watch(
  () => props.data,
  val => {
    formData.value = val;
  }
);

const rules = {
  name: [{ required: true, message: "请输入企业全称名称", trigger: "blur" }]
};
</script>

<template>
  <el-dialog
    v-model="formVisible"
    :title="title"
    :width="580"
    class="project-dialog"
    append-to-body
    style="border-radius: 8px"
    :before-close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form
      ref="ruleFormRef"
      :model="formData"
      label-position="top"
      :rules="rules"
      label-width="100px"
      v-if="props.type != 'add'"
    >
      <el-form-item label="企业全称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入企业全称" />
      </el-form-item>
      <el-form-item label="企业联系人" prop="leader">
        <el-input v-model="formData.leader" placeholder="请输入企业联系人" />
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="企业地址" prop="address">
        <el-input v-model="formData.address" placeholder="请输入企业地址" />
      </el-form-item>
    </el-form>
    <el-form
      ref="ruleFormRef"
      :model="formData"
      label-position="top"
      :rules="rules"
      label-width="100px"
      v-else
    >
      <div class="algorithm-header mb-2">
        <el-image
          preview-teleported
          loading="lazy"
          src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
          :preview-src-list="[
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
          ]"
          :initial-index="1"
          fit="cover"
          class="w-[72px] h-[72px] mr-4"
        />
        <span>{{ formData.name }}</span>
      </div>
      <el-form-item label="方向" prop="leader">
        <el-select
          v-model="formData.leader"
          placeholder="请选择方向"
          :style="{ width: '100%' }"
        >
          <el-option label="类型1" value="1" />
          <el-option label="类型2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="leader">
        <el-select
          v-model="formData.leader"
          placeholder="请选择类型"
          :style="{ width: '100%' }"
        >
          <el-option label="类型1" value="1" />
          <el-option label="类型2" value="2" />
        </el-select>
      </el-form-item>
      <el-row>
        <el-col class="mb-4">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{ background: '#F5F5F5' }"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="名称" width="150" />
            <el-table-column prop="version" label="版本" />
          </el-table>
        </el-col>
        <el-col>
          <el-pagination
            class="table-footer justify-end"
            v-model:currentPage="pagination.current"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[12, 24, 36]"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            :small="false"
            @size-change="onPageSizeChange"
            @current-change="onCurrentChange"
          />
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button class="btn-color" @click="closeDialog">取消</el-button>
      <el-button
        type="primary"
        color="#1C0D82"
        @click="submitForm(ruleFormRef)"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
<style lang="scss">
// :deep(.el-dialog, .is-draggable, .el-dialog__header) {
//   border-bottom: 1px solid #eee !important;
// }
.project-dialog {
  .el-dialog__header {
    margin-right: 0;
    border-bottom: 1px solid #e0e0e0;
  }

  .el-dialog__body {
    padding: 30px 24px;
  }

  .btn-color:hover {
    color: #fff;
    background-color: #1c0d82;
    opacity: 0.25;
  }

  .algorithm-header {
    display: flex;
    align-items: center;
  }
}
</style>
