<script setup lang="ts">
import { markRaw, nextTick, reactive, ref } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { useWindowSize } from "@vueuse/core";
import emptyPic from "@/assets/static/project_empty.png";
import { Search, Edit, QuestionFilled } from "@element-plus/icons-vue";
import dialogForm from "./components/DialogForm.vue";
import { type PaginationProps } from "@pureadmin/table";
import { ElMessageBox } from "element-plus";
import { message } from "@/utils/message";

defineOptions({
  name: "EnterpriseList"
});
// const count = ref(0);
const { height } = useWindowSize();
const input = ref("");
const loading = ref(true);
setTimeout(() => {
  loading.value = !loading.value;
}, 800);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const INITIAL_DATA = {
  name: "",
  status: "",
  type: "",
  mark: "",
  leader: "",
  phone: ""
};
const formDialogVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });
const enterprise = ref([]);

const customType = ref("");
const dataList = ref([]);
const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 10,
  currentPage: 1,
  background: false
});
const columns: TableColumnList = [
  // {
  //   label: "项目编号",
  //   prop: "id",
  //   minWidth: 100
  // },
  {
    label: "名称",
    prop: "name",
    slot: "name"
  },
  {
    label: "版本",
    prop: "version"
  },
  {
    label: "操作",
    fixed: "right",
    slot: "operation"
  }
];
function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
  // onSearch(pagination.currentPage, val);
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
  // onSearch(val, pagination.pageSize);
}

function handleSelectionChange(val) {
  console.log("handleSelectionChange", val);
}

function handleDelete(row) {
  // message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
  // onSearch();
  console.log(row);
  ElMessageBox.confirm(
    "确定删除这个算法吗，删除后将无法找回，请谨慎操作",
    "确定删除这个算法吗？",
    {
      showClose: false,
      type: "warning",
      icon: markRaw(QuestionFilled),
      customClass: "msg-box-style",
      confirmButtonClass: "btn-custom-confirm",
      cancelButtonClass: "btn-custom-cancel"
    }
  )
    .then(() => {
      message("删除成功", { type: "success" });
    })
    .catch(() => {});
}

const addEnterprise = data => {
  console.log(data.value);
  enterprise.value.unshift(data.value);
  // count.value++;
};
const editEnterprise = () => {
  customType.value = "edit";
  formDialogVisible.value = true;
  nextTick(() => {
    formData.value = { ...enterprise.value[0] };
  });
};
const addAlgorithm = () => {
  customType.value = "add";
  formDialogVisible.value = true;
  nextTick(() => {
    formData.value = { ...enterprise.value[0] };
  });
  // count.value++;
};
</script>

<template>
  <div class="main">
    <div class="w-full flex justify-between mb-4">
      <h2>企业管理</h2>
      <el-button
        type="primary"
        color="#1C0D82"
        @click="formDialogVisible = true"
      >
        新建企业
      </el-button>
    </div>
    <div
      v-loading="loading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-card class="box-card" shadow="never" v-show="enterprise.length < 1">
        <el-empty description="暂未添加任何项目" :image="emptyPic">
          <el-button
            type="primary"
            color="#1C0D82"
            @click="formDialogVisible = true"
          >
            新建企业
          </el-button>
        </el-empty>
      </el-card>
      <template v-if="enterprise.length > 0">
        <div class="w-[37%] h-full float-left">
          <el-card
            class="box-card-left"
            :style="{ height: `calc(${height}px - 10vh - 20px)` }"
          >
            <template #header>
              <div class="card-header flex justify-between">
                <span class="w-[20%]">企业列表</span>
              </div>
            </template>
            <el-input
              v-model="input"
              :prefix-icon="Search"
              placeholder="搜索"
              class="input-style"
              clearable
            />
            <el-scrollbar max-height="1000px">
              <p
                v-for="(item, index) in enterprise"
                :key="index"
                class="scrollbar-item h-9"
              >
                {{ item.name }}
              </p>
            </el-scrollbar>
          </el-card>
        </div>
        <div class="float-right w-[62%]">
          <el-card
            class="box-card"
            :style="{ height: `calc(${height}px - 10vh - 20px)` }"
          >
            <template #header>
              <div class="card-header flex justify-between">
                <span>企业详情</span>
                <el-button
                  link
                  text
                  style="color: #1c0d82"
                  :icon="Edit"
                  @click="editEnterprise"
                >
                  编辑
                </el-button>
              </div>
            </template>
            <div class="flex">
              <el-skeleton animated :loading="loading" class="flex">
                <!-- <span>企业全称：{{ "电子有限公司" }}</span>
                <span>ID：{{ "电子有限公司" }}</span> -->
                <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"
                />
                <div class="enterprise-description">
                  <p>
                    企业全称：<span>{{ "洛伦电子(南京)有限公司" }}</span>
                  </p>
                  <p>
                    企业地址：<span>{{
                      "江苏省南京市雨花台区安德门大街259号"
                    }}</span>
                  </p>
                </div>
                <div class="enterprise-description">
                  <p>
                    ID：<span>{{ "NJCJDQGZZ123456" }}</span>
                  </p>
                  <p>
                    联系方式：<span>{{ "13562563565" }}</span>
                  </p>
                </div>
                <div class="enterprise-description">
                  <p>
                    企业联系人：<span>{{ "李洛伦" }}</span>
                  </p>
                  <p>
                    平台服务：<span>{{ "2024年12月21日" }}</span>
                    <el-tag class="mx-1" type="danger" effect="plain"
                      >到期</el-tag
                    >
                  </p>
                </div>
              </el-skeleton>
            </div>
            <el-divider style="margin-top: 18px" />
            <div class="w-full flex justify-between mb-4">
              <h4>企业算法库</h4>
              <el-button
                link
                text
                style="color: #1c0d82"
                :icon="useRenderIcon(AddFill)"
                @click="addAlgorithm"
              >
                添加算法
              </el-button>
            </div>
            <pure-table
              border
              align-whole="left"
              showOverflowTooltip
              table-layout="auto"
              :loading="loading"
              adaptive
              :data="dataList"
              :columns="columns"
              :pagination="pagination"
              :paginationSmall="false"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="handleSelectionChange"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="danger"
                  @click="handleDelete(row)"
                >
                  删除
                </el-button>
              </template>
            </pure-table>
          </el-card>
        </div>
      </template>
    </div>
    <dialogForm
      v-model:visible="formDialogVisible"
      :data="formData"
      :type="customType"
      @submit-form="addEnterprise"
    />
  </div>
</template>
<style lang="scss">
// :deep(.el-input .el-input__inner) {
//   .el-input__wrapper {
//     box-shadow: none;
//   }
//   border: none;
//   background-color: rgba(255, 255, 255, 0);
// }
// :deep(.el-input .el-input__wrapper) {
//   box-shadow: none !important;
//   border: none;
//   background-color: rgba(255, 255, 255, 0);
// }
.input-style {
  .el-input__wrapper {
    padding-left: 20px;
    box-shadow: none !important;
    // margin-bottom: 10px;
    // border: none;
    // background-color: skyblue;
  }
}

.scrollbar-item {
  padding-left: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.25rem;
  color: #666;
}

.box-card-left {
  .el-card__body {
    padding: 10px 0 20px;
  }
}

.box-card {
  .enterprise-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    margin-right: 24px;

    p {
      color: #666;

      span {
        color: #333;
      }

      .el-tag {
        background: #fde2e2;
        border: #fef0f0;

        .el-tag__content {
          color: #f56c6c !important;
        }
      }
    }
  }
}
</style>
