<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import general from "../components/general.vue";

const onBack = () => {
  router.back()
};

</script>

<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <el-page-header @back="onBack">
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item> 電商管理中心 </el-breadcrumb-item>
          <el-breadcrumb-item>商品資訊</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> 商品資訊 </span>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button
            type="primary"
            class="ml-2"
            size="small"
            :icon="Plus"
            @click="$router.push('list')"
            >商品列表</el-button
          >
        </div>
      </template>
    </el-page-header>
    <!-- Breadcrumb: End -->
    <hr />
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="一般訊息" name="1">
        <general/>
      </el-tab-pane>
      <el-tab-pane label="商品詳細" name="2">Config</el-tab-pane>
      <el-tab-pane label="其他訊息" name="3">Role</el-tab-pane>
      <el-tab-pane label="商品屬性" name="4">Task</el-tab-pane>
      <el-tab-pane label="商品相冊" name="5">Task</el-tab-pane>
      <el-tab-pane label="關連商品" name="5">Task</el-tab-pane>
      <el-tab-pane label="配件"    name="6">Task</el-tab-pane>
      <el-tab-pane label="相關文章" name="7">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>


<style lang="less" scoped>
</style>
