<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import cw from "./components/componentWrapper.vue";

onMounted(() => {
  const nav = document.querySelector(".nav");
  const container = document.querySelector(".container");
  const navHeight = nav.offsetHeight;
  container.style.marginTop = navHeight + "px";

  nav.addEventListener("click", (e) => {
    const el = e.target;
    if (el.tagName === "LI") {
      const topDistance =
        document.querySelector(el.getAttribute("data-id")).offsetTop -
        navHeight;
      window.scrollTo(0, topDistance);
    }
  });
});

// bg-btns
const btns = reactive({
  options: [
    { name: "hello", value: "hello" },
    { name: "world", value: "world" },
  ],
  currentValue: "hello",
});

// bg-card
const card = reactive({
  title: "title",
  icon: "#bg-ic-c-s-half-star",
});

// bg-detail-table
const detailTable = reactive({
  data: [
    {
      title: "id",
      url: "http://127.0.0.1",
    },
  ],
  layout: {
    line_num: 4,
  },
});

const tableRows = [
  {
    name: "hello whidy",
    disabled: true,
    status: 0,
  },
  {
    name: "hello bg",
    disabled: false,
    status: 1,
  },
  {
    name: "hello bg",
    disabled: true,
    status: 2,
  },
  {
    name: "hello bg",
    disabled: false,
    status: 3,
  },
];

const handleTest = (val) => {
  alert(val);
};

const info = reactive({
  // data in template would couse volar error:
  // [Error - 14:18:50] Request textDocument/formatting failed.
  // Message: Request textDocument/formatting failed with message: Overlapping edit
  // Code: -32603
  //
  data: [
    {
      full: false,
      nameWidth: 120,
      name: "Name",
      copy: undefined,
      download: undefined,
      password: undefined,
      value: "value!!!",
      url: "a url",
      show: true,
    },
    {
      full: true,
      nameWidth: undefined,
      name: "Name2 with full width",
      copy: true,
      download: undefined,
      password: undefined,
      value: "value2!!!",
      url: "a url",
      show: true,
    },
  ],
});

const aFileList = ref([]);

const { options: btnsOption, currentValue: btnsCurrentValue } = toRefs(btns);
const { title: cardTitle, icon: cardIcon } = toRefs(card);
</script>

<template>
  <ul class="nav">
    <li data-id="#bg-btns">bg-btns</li>
    <li data-id="#bg-card">bg-card</li>
    <li data-id="#bg-code-editor">bg-code-editor</li>
    <li data-id="#bg-detail-table">bg-detail-table</li>
    <li data-id="#bg-detail-table2">bg-detail-table2</li>
    <li data-id="#bg-detail">bg-detail</li>
    <li data-id="#bg-filter-date">bg-filter-date</li>
    <li data-id="#bg-filter-group">bg-filter-group</li>
    <li data-id="#bg-filter">bg-filter</li>
    <li data-id="#bg-filtrate">bg-filtrate</li>
    <li data-id="#bg-icon">bg-icon</li>
    <li data-id="#bg-info">bg-info</li>
    <li data-id="#bg-inner-tabs">bg-inner-tabs</li>
    <li data-id="#bg-layout-card">bg-layout-card</li>
    <li data-id="#bg-list">bg-list</li>
    <li data-id="#bg-nav-list">bg-nav-list</li>
    <li data-id="#bg-nav">bg-nav</li>
    <li data-id="#bg-pagination">bg-pagination</li>
    <li data-id="#bg-rich-text">bg-rich-text</li>
    <li data-id="#bg-sort">bg-sort</li>
    <li data-id="#bg-step">bg-step</li>
    <li data-id="#bg-steps">bg-steps</li>
    <li data-id="#bg-switch">bg-switch</li>
    <li data-id="#bg-tab">bg-tab</li>
    <li data-id="#bg-table-btn">bg-table-btn</li>
    <li data-id="#bg-table-btns-more">bg-table-btns-more</li>
    <li data-id="#bg-table-btns">bg-table-btns</li>
    <li data-id="#bg-table-pro">bg-table-pro</li>
    <li data-id="#bg-table">bg-table</li>
    <li data-id="#bg-tabs">bg-tabs</li>
    <li data-id="#bg-tags">bg-tags</li>
    <li data-id="#bg-upload-image">bg-upload-image</li>
    <li data-id="#bg-upload">bg-upload</li>
    <li data-id="#bg-user-upload-image">bg-user-upload-image</li>
  </ul>

  <div class="container">
    <cw title="bg-btns">
      <bg-btns v-model="btnsCurrentValue" :options="btnsOption" />
    </cw>

    <cw title="bg-card">
      <bg-card :title="cardTitle" :icon="cardIcon">
        <!-- slot自定义card内容体 -->
        <div>
          <div>haha</div>
          <p>adsadsa</p>
        </div>
      </bg-card>
    </cw>

    <cw title="bg-code-editor" />

    <cw title="bg-detail-table">
      <bg-detail-table :data="detailTable.data" :layout="{ line_num: 4 }" />
    </cw>

    <cw title="bg-detail-table2">
      <bg-detail-table2
        :list="[{ label: 'label', value: 'table2 demo' }]"
        item-width="200px" />
    </cw>

    <cw title="bg-filter-date" />
    <cw title="bg-filter-group" />
    <cw title="bg-filter" />
    <cw title="bg-filtrate" />
    <cw title="bg-icon">
      <bg-icon icon="#bg-ic-s-circle-close" />
      <bg-icon icon="#bg-ic-c-file-doc" />
    </cw>
    <cw title="bg-info">
      <bg-info :data="info.data" />
    </cw>
    <cw title="bg-inner-tabs">
      <bg-inner-tabs
        :data="['a', 'b', 'c']"
        :v-model="1"
        :default="1"
        :height="[36, 32, 16]" />
    </cw>
    <cw title="bg-layout-card">
      <!-- <bg-layout-card title="title" width="420px" :btns="[1, 2]" @update:btn="handleUpdateBtnIndex"></bg-layout-card> -->
    </cw>
    <cw title="bg-list">
      <bg-list :visible="true">
        <template #breadcrumb>breadcrumb</template>
        <template #header>list header</template>
      </bg-list>
    </cw>
    <cw title="bg-nav-list" />
    <cw title="bg-nav" />
    <cw title="bg-pagination" />
    <cw title="bg-rich-text" />
    <cw title="bg-sort" />
    <cw title="bg-step" />
    <cw title="bg-steps" />
    <cw title="bg-switch" />
    <!-- <cw title="bg-tab">
        <bg-tab label="label">
          <div>content</div>
        </bg-tab>
      </cw> -->
    <cw title="bg-table-btn" />
    <cw title="bg-table-btns-more" />
    <cw title="bg-table-btns" />
    <cw title="bg-table-pro" />
    <cw title="bg-table" />
    <cw title="bg-tabs">
      <bg-table
        ref="bgTable"
        :headers="[
          {
            label: '名称',
            prop: 'name',
            minWidth: 240,
          },
          {
            label: '操作',
            prop: 'action',
            width: 240,
            fixed: 'right',
          },
        ]"
        :rows="tableRows"
        :is-index="true"
        :stripe="true">
        <template #action="{ row }">
          <bg-table-btns2 :limit="2" :table-data="tableRows">
            <!-- <bg-table-btn
              v-for="(item, index) in [{ name: 'for-1' }, { name: 'for-2' }]"
              :key="index"
              :disabled="row.disabled"
              @click="handleTest(item.name)">
              {{ item }}
            </bg-table-btn> -->
            <bg-table-btn
              v-if="row.status === 0"
              :disabled="row.disabled"
              class="btn"
              @click="handleTest('续订')">
              续订
            </bg-table-btn>
            <bg-table-btn
              v-if="row.status === 2"
              class="btn"
              @click="handleTest('再次申请')">
              再次申请
            </bg-table-btn>
            <bg-table-btn class="btn" @click="handleTest('审批详情')">
              审批详情
            </bg-table-btn>
            <bg-table-btn
              v-if="row.status === 3"
              class="btn"
              :disabled="!row.disabled"
              @click="handleReviewDialog(row, 'submit')">
              评价
            </bg-table-btn>
            <bg-table-btn v-else class="btn" @click="handleTest('评价详情')">
              评价详情
            </bg-table-btn>
            <bg-table-btn class="btn" @click="handleTest('删除')">
              删除
            </bg-table-btn>
          </bg-table-btns2>
        </template>
      </bg-table>
    </cw>
    <cw title="bg-tags">
      <bg-tags
        value="1, 2, 3, 4"
        @change="
          (v) => {
            console.log(v);
          }
        " />
      <template #notes>
        该组件引用了的el-button需要调整size，以便兼容Element-Plus
      </template>
    </cw>
    <cw title="bg-upload-image" />
    <cw title="bg-upload">
      <bg-upload
        v-model="aFileList"
        :el-attrs="{
          multiple: false,
          drag: true,
        }"
        :auto="false"
        :custom-tips="true"
        :file-types="['zip', 'tgz', 'tar', 'gz']" />
    </cw>
    <cw title="bg-user-upload-image" />
  </div>
</template>

<style lang="scss" scoped>
.nav {
  width: 100%;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  top: 0;
  z-index: 1;

  li {
    list-style-type: disc;
    list-style-position: inside;
    margin-right: 16px;
    cursor: pointer;
    color: #333;

    &:active {
      color: #f00;
    }
  }
}

.container {
  padding: 0 24px;
}
</style>
