<template>
  <div style="margin: 20px;">
    <el-switch
      v-model="switch1"
      active-text="會員"
      inactive-text="非會員"
      active-color="#00FF00"
      inactive-color="#FF0000">
    </el-switch>
    <el-switch
      v-model="switch2"
      active-text="加載中"
      :loading="true">
    </el-switch> 
    <el-switch
      v-model="switch3"
      inactive-text="禁用"
      :disabled="true">
    </el-switch>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue'
  const sliderValue = ref(50)
</script>
<template>
  <div style="margin: 20px;">
    <el-slider v-model="sliderValue"></el-slider> 
  </div>
</template>

     <el-slider v-model="sliderValue" :format-tooltip="format"></el-slider>

  const format = (value)=>{
    return `${value}%`
  }

    <el-slider
       v-model="sliderValue"
       :format-tooltip="format"
       :step="10"
       :show-stops="true"
     ></el-slider>

     <el-slider v-model="sliderValue" :marks="marks"></el-slider>

  const marks = {
    0: '起點',
    50: '半程',
    90: {
      style: {color: '#ff0000'},
      label: '就到終點啦'
    }
  }

     <el-time-picker
       :is-range="true"
       v-model="time"
       range-separator="~"
       :arrow-control="true"
       start-placeholder="開始時間"
       end-placeholder="結(jié)束時間"
     >
     </el-time-picker>

  <el-time-select
    v-model="value"
    style="width: 240px"
    start="08:30"
    step="00:15"
    end="18:30"
    placeholder="Select time"
  />

     <el-date-picker
       v-model="date"
       type="daterange"
       range-separator="至"
       start-placeholder="開始日期"
       end-placeholder="結(jié)束日期"
       >
     </el-date-picker>

     <el-color-picker :show-alpha="true" v-model="color"></el-color-picker>

     <el-alert title="成功提示的文案" type="success"> </el-alert>
     <br />
     <el-alert title="消息提示的文案" type="info"> </el-alert>
     <br />
     <el-alert title="警告提示的文案" type="warning"> </el-alert>
     <br />
     <el-alert title="錯誤提示的文案" type="error"> </el-alert>

     <el-button @click="popTip">彈出信息提示</el-button>

<script setup>
  import { ref, watch } from 'vue'
  import {ElMessage} from 'element-plus'
  function popTip() {
    ElMessage({
      message: '提示內(nèi)容',
      type: 'warning'
    })
  }
</script>

<script setup>
  import { ref, watch } from 'vue'
  import {ElMessage, ElMessageBox} from 'element-plus'
  function popTip() {
    ElMessageBox({
      title: '提示',
      message: '詳細的提示內(nèi)容',
      type: 'warning',
      showCancelButton: true,
      showConfirmButton: true,
      showInput: true
    })
  }
</script>

<script setup>
  import { ElNotification } from 'element-plus'
  function notify() {
    ElNotification({
      title: '通知標(biāo)題',
      message: '通知內(nèi)容',
      type: 'success',
      duration: 3000,
      position: 'top-right'
    })
  }
</script>
<template>
  <div style="margin: 20px;">
     <el-button @click="notify">彈出通知</el-button>
  </div>
</template>

<template>
  <div style="margin: 20px;">
     <el-table :data="tableData">
       <el-table-column prop="name" label="姓名"></el-table-column>
       <el-table-column prop="age" label="年齡"></el-table-column>
       <el-table-column prop="subject" label="科目"></el-table-column>
     </el-table>
  </div>
</template>

<script setup>
  import {ref} from 'vue';
  const tableData = [
    {name: '小王', age: 29, subject: 'Java'},
    {name: '小李', age: 30, subject: 'C++'},
    {name: '小張', age: 28, subject: 'JavaScript'}
  ]
</script>

<template>
  <div style="margin: 20px;">
    <el-menu mode="horizontal">
      <el-menu-item index="1">首頁</el-menu-item>
      <el-sub-menu index="2">
        <template #title>廣場</template>
        <el-menu-item index="2-1">音樂</el-menu-item>
        <el-menu-item index="2-2">視頻</el-menu-item>
        <el-menu-item index="2-3">游戲</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>體育</template>
          <el-menu-item index="2-4-1">籃球</el-menu-item>
          <el-menu-item index="2-4-2">足球</el-menu-item>
          <el-menu-item index="2-4-3">排球</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="3" :disabled="true">個人中心</el-menu-item>
      <el-menu-item index="4">設(shè)置</el-menu-item>
    </el-menu>
  </div>
</template>

<template>
  <div style="margin: 20px;">
     <el-tabs type="border-card">
       <el-tab-pane label="頁面1" name="1">頁面1</el-tab-pane>
       <el-tab-pane label="頁面2" name="2">頁面2</el-tab-pane>
       <el-tab-pane label="頁面3" name="3">頁面3</el-tab-pane>
       <el-tab-pane label="頁面4" name="4">頁面4</el-tab-pane>
     </el-tabs>
  </div>
</template>

<script setup>
  import {ref} from 'vue';
  const drawer = ref(false);
</script>
<template>
  <div style="margin: 20px;">
    <div style="margin:300px">
      <el-button @click="drawer = true" type="primary">
        點我打開抽屜
      </el-button>
    </div>
    <el-drawer
      title="抽屜面板的標(biāo)題"
      v-model="drawer"
      direction="ltr">
      抽屜面板的內(nèi)容
    </el-drawer>
  </div>
</template>

<template>
  <el-container>
    <el-header height="80px" style="background-color: gray;">Header</el-header>
    <el-container>
      <el-aside width="200px" style="background-color: red;">Aside</el-aside>
      <el-container>
        <el-main>
          <div style="height: 300px; background-color: #f1f1f1;">內(nèi)容</div>
        </el-main>
        <el-footer height="80px" style="background-color: gray;">Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup>
  import {ref} from 'vue'
  const desc = ref('七年級1班學(xué)生統(tǒng)計')
  const stus = ref([
    {name: '小王', age: 14, sex: '男', date: '2020年8月15日'},
    {name: '小張', age: 15, sex: '男', date: '2020年5月15日'},
    {name: '小秋', age: 15, sex: '女', date: '2020年8月15日'},
  ])
  function selectFunc(index) {
    let strs = ['七', '八', '九']
    let rank = strs[Math.floor((index - 1) / 3)]
    desc.value = `${rank}年級${((index - 1) % 3) + 1}班學(xué)生統(tǒng)計`
  }
</script>
<style lang="css" scoped>
  .header{
    font-style: 30px;
    line-height: 80px;
    background-color: f1f1f1;
  }
  .aside{
    background-color: wheat;
    height: 600px;
  }
  .subHeader{
    background-color: cornflowerblue;
  }
  .desc{
    font-style: 25px;
    line-height: 80px;
    color: white;
    width: 800px;
  }
  .content{
    height: 410px;
  }
  .footer{
    height: 410px;
  }
  .footer{
    background-color: dimgray;
    color: white;
    font-style: 17px;
    line-height: 30px;
  }
</style>
<template>
  <el-container>
    <el-header height="80px" style="padding: 0">
      <div class="header">教務(wù)系統(tǒng)學(xué)生管理</div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu class="aside" @select="selectFunc" default-avtive="1" :unique-opened="true">
          <el-sub-menu index="1">
            <template #title>
              <span>七年級</span>
            </template>
            <el-menu-item index="1">1班</el-menu-item>
            <el-menu-item index="2">2班</el-menu-item>
            <el-menu-item index="3">3班</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span>八年級</span>
            </template>
            <el-menu-item index="4">1班</el-menu-item>
            <el-menu-item index="5">2班</el-menu-item>
            <el-menu-item index="6">3班</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <span>九年級</span>
            </template>
            <el-menu-item index="7">1班</el-menu-item>
            <el-menu-item index="8">2班</el-menu-item>
            <el-menu-item index="9">3班</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="80px" style="padding:0;margin:0">
          <el-container class="subHeader">
            <div class="desc">{{ desc }}</div>
            <el-button style="width: 100px; height:30px; margin:20px;">新增記錄</el-button>
          </el-container>
        </el-header>
        <el-main style="margin: 0; padding: 0">
          <div class="content">
            <el-table :data="stus">
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="age" label="年齡"></el-table-column>
              <el-table-column prop="sex" label="性別"></el-table-column>
              <el-table-column prop="date" label="錄入日期"></el-table-column>
            </el-table>
          </div>
        </el-main>
        <el-footer height="30px" class="footer">Vue框架搭建，Element Plus提供組件支持</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<template>
    <el-button @click="addUser">添加用戶</el-button>
    <el-table :data="users">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年齡"></el-table-column>
        <el-table-column label="操作">
            <template #default="{$index}">
                <el-button @click="deleteUser({$index})">刪除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup>
    import {ref} from 'vue'
    const users = ref([
        {name: '張三', age: 20},
        {name: '李四', age: 25}
    ])
    function deleteUser(user) {
        //刪除用戶的邏輯
        users.value.splice(indexedDB, 1)
    }
    function addUser() {
        //添加用戶的邏輯
        users.value.push({name: '新用戶', age: 30})
    }
</script>