<template>
  <div>
    <header>
      <button @click="Login">
        登入
      </button>
    </header>
    <main />
  </div>
</template>

<template>
  <header>
    <button @click="Login">
      登入
    </button>
  </header>
  <main />
</template>

<script>
export default {
  data() {
    return {
      content: 'This is the app'
    }
  }
}
</script>

<template>
  <router-view />
  <!-- 把当前组件中的部分内容抽离出来，放置在页面非 #app的容器中，
     基于to指定放在哪个容器中 -->
  <Teleport to="#other" disabled="true">
    <h1>Other</h1>
    <h4>This is the other page</h4>
    <p> {{ content }}</p>
  </Teleport>
</template>

<script setup name="Navbar">
</script>

<template>
  <nav class="navbar navbar-light bg-white navbar-expand-lg border-bottom">
    <div class="container">
      <div class="d-flex align-items-center">
        <img class="icon me-2" src="/vite.svg" alt="">
        <a class="navbar-brand" href="#"><strong>Vue</strong> 图片上传</a>
      </div>
      <!--  搜索框传送容器    -->
      <div id="search-form" />
    </div>
  </nav>
</template>

<style lang="scss" scoped>
.icon {
  width: 24px;
  height: 24px;
}
</style>

<script setup>
defineProps({
  modelValue: {
    type: String
  }
})

const emits = defineEmits(['update:modelValue'])

function handleEnterKey(event) {
  emits('update:modelValue', event.target.value)
}
</script>

<template>
  <div class="mt-2 mt-md-0">
    <input :value="modelValue" class="form-control me-2" type="text" placeholder="Search in Drive" aria-label="Search" @keydown.enter="handleEnterKey">
  </div>
</template>

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

<script setup>
import axios from 'axios'
import { reactive, watchEffect } from 'vue'
import SearchForm from '../components/SearchForm.vue'
import FileItem from '../components/FileItem.vue'

const files = ref([])

const query = reactive({
  _sort: 'name',
  _order: 'desc',
  q: ''
})

// TODO 使用watchEffect监听数据发生改变,watchEffect每次进入页面都会执行
watchEffect(async () => {
  // new URLSearchParams(query) 把对象转换为&链接的请求参数
  const { data } = await axios.get(
    `http://localhost:3030/files?${  new URLSearchParams(query)}`
  )
  files.value = data
})
</script>

<template>
  <div class="container py-3">
    <!--  请求的列表    -->
    <div class="row">
      <FileItem v-for="file in files" :key="file.id" :file="file" />
    </div>

    <!-- 使用传送门 -->
    <Teleport to="#search-form">
      <SearchForm v-model="query.q" />
    </Teleport>
  </div>
</template>

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

<script setup>
function query() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        data:{
          id: '1000007', 
          name: 'liaoyi',
          age: 22,
          url: 'https://canxiu.oss-cn-hangzhou.aliyuncs.com/2022/user.jpg',
          desc:'Hello 2023!!'
        }
      })
    }, 2000)
  })
}
const { data } = await query()
</script>

<template>
  <h2>用户信息</h2>
  <div> ID：  {{ data.id }} </div>
  <div> 姓名：{{ data.name }} </div>
  <div> 年龄：{{ data.age }} </div>
  <div> 头像：{{ data.url }} </div>
  <div> 描述：{{ data.desc }} </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import syncVue from '@/components/asyncComponents.vue'
</script>

/* 非Setup使用 */
<script setup>
// 导入 defineAsyncComponent 用于注册异步组件
export default {
  components: { syncVue }
}
// 导入异步组件
const syncVue = defineAsyncComponent(() =>
  import('@/components/asyncComponents.vue')
)
</script>

<!-- /* Setup使用 */ -->
<template>
  <h2>使用异步组件</h2>
  <Suspense>
    <template #default>
      <syncVue />
    </template>
    <!-- 设置异步组件没有加载成功时显示的样式 -->
    <template #fallback>
      正在努力加载中...
    </template>
  </Suspense>
</template>

<script>
export default {
  name: 'HelloWorld',
  setup() {
    const name = '张三'
    const age = 18
    function sayHello() {
      alert(`我叫${name}，我${age}岁了，你好啊！`)
    }
    function test2() {
      console.log(name, age)
    }
    return { name, age, sayHello, test2 }
  }
}
</script>

<!-- // 注意：如果是返回一个渲染函数，那么此页面上的原有样式将会被覆盖。 -->
<script>
// 我们在vue2中的main.js中已经见过 h 渲染函数了，在vue3中使用需要导入。
import { h } from 'vue'
	export default {
    	name: 'HelloWorld',
    // 	return ()=> return {  h('h1','2022') }
		//返回一个函数（渲染函数）,这个渲染函数必须把h函数调用结果 return 出去。
    // 调用 h函数的时候传入两个参数，第一个参数是dom元素，第二个参数是dom元素里的内容。
		return ()=> h('h1','你好 2022 ！')
}
</script>

<template>
  <p>{{ state.supNum }}</p>
  <p>{{ state.oppNum }}</p>
  <p>{{ state.arr[0] }}</p>
  <button @click="change(0)">
    点击修改数据
  </button>
</template>

import { reactive } from "vue";
export default {
  setup() {
    // 比Object.defineProperty好用在于：
    // 对于数据或者并未初始化的对象成员，都可以随意修改值，而且具备响应式的效果
    // const 代理对象= reactive(源对象)
    let state = reactive({
      supNum: 0,
      oppNum: 0,
      arr: [10, 20]
    });
    let change = lx => {
      lx === 0 ? state.supNum++ : state.oppNum++;
      state.arr[0] = state.arr[0] + 1;
    };
    return {
      state,
      change
    };
  }
};

<script setup lang="ts">
import { reactive } from 'vue'

let list = reactive<string[]>([])
function getData() {
  setTimeout(() => {
    list = ['钟馗', '姜子牙', '杨戬', '哪吒']
    console.log(list)
  }, 1000)
}
</script>

<template>
  <ul>
    <li v-for="(name, index) in list" :key="index">
      {{ name }}
    </li>
  </ul>
  <button @click="getData">
    获取异步数据
  </button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const list = reactive<string[]>([])
function getData() {
  setTimeout(() => {
    const arr =  ['钟馗', '姜子牙', '杨戬', '哪吒']
    person.push(...arr)
    console.log(list)
  }, 1000)
}
</script>

<script setup lang="ts">
import { reactive } from 'vue'

const list = reactive<{ arr: string[] }>({ arr: [] })
function getData() {
  setTimeout(() => {
    list.arr = ['钟馗', '姜子牙', '杨戬', '哪吒']
    console.log(list)
  }, 1000)
}
</script>

<template>
  <ul>
    <li v-for="(name, index) in list.arr" :key="index">
      {{ name }}
    </li>
  </ul>
  <button @click="getData">
    获取异步数据
  </button>
</template>

<template>
  <p>{{ supNum }}</p>
  <p>{{ oppNum }}</p>
  <p>{{ arr[0] }}</p>
  <button @click="change(0)">
    点击修改数据
  </button>
</template>

<stript lang="ts">
import { reactive, toRefs } from "vue";
export default {
  setup() {
    let state = reactive({
      supNum: 0,
      oppNum: 0,
      arr: [10, 20]
    });
    let change = lx => {
      lx === 0 ? state.supNum++ : state.oppNum++;
      state.arr[0] = state.arr[0] + 1;
    };
    return {
      ...toRefs(state),
      change
    };
  }
};
</stript>

<script>
import { computed, ref } from 'vue'

export default {
  setup() { 
    const count = ref(1)
    const plusOne = computed(() => count.value + 1)
    console.log(plusOne.value) //2
    
    // 这样获取的计算属性值是只读的，当我们尝试去修改的时候，
    // 报警告:computed value is readonly
    plusOne.value++ //错误！
    
    return { count, plusOne }
  }
}
</script>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
  
const price = ref<number | string>(1) //$0
  
const state = reactive({
  	supNum: 12,
  	oppNum: 11
})

const mul = computed({
  get: () => {
    return price.value
  },
  set: (value) => {
    price.value = `set${  value}` 
  }
})

mul.value = 666
console.log(mul.value) // set666

const ratio = computed({
  get: () => {
    const total = state.supNum + state.oppNum
    return total === 0
      ? '--'
      : `${((state.supNum / total) * 100).toFixed(2)  }%`
  }
})
</script>

<template>
  <div>{{ mul }}</div>
  <div @click="mul = 100">
    click
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

interface Shop {
  name: string
  num: number
  price: number
}
const $total = ref<number>(0)
const data = reactive<Shop[]>([
  {
    name: '秋裤',
    num: 4,
    price: 102
  },
  {
    name: '羽绒服',
    num: 3,
    price: 510
  },
  {
    name: '打底衫',
    num: 6,
    price: 120
  },
  {
    name: '鞋',
    num: 3,
    price: 999
  }
])


$total.value = computed<number>(() => {
  return data.reduce((prev, next) => {
    return prev + (next.num * next.price)
  }, 0)
})

function handleDelete(index: number): void {
  data.splice(index, 1)
}
</script>

<template>
  <el-table :data="data" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180" />

    <el-table-column label="数量" width="180" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-input-number v-model="scope.row.num" :step="1" size="large" :min="0" />
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="price" label="单价" align="center" />
    <el-table-column label="Operations" align="center">
      <template #default="scope">
        <el-button size="small" type="danger" @click="handleDelete(scope.$index)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="display: flex; align-items: flex-end; padding-top: 10px; font-weight: bold">
    总价: {{ $total }}
  </div>
</template>

<script setup lang="ts">
// 第一次加载组件，会触发watchEffect回调
// watchEffect所指定的回调中用到的数据只要发生变化,就会触发callback执行
// 类似于周期函数中的 mounted和updated「只不过只有更改了依赖的状态才会在更新后执行」

const message = ref<string>('hello')
const message2 = ref<string>('2023')

// 用到几个响应式数据就会监听几个，且是非惰性 会默认调用一次(立即调用)
watchEffect(() => {
  console.log('watchEffect配置的回调执行了', message.value,)
  console.log('watchEffect配置的回调执行了', message2.value)
})
</script>

<template>
  <input v-model="message" type="text">
  <input v-model="message2" type="text">
</template>

<script setup lang="ts">
const message = ref<string>('hello')
const message2 = ref<string>('2023')

const stop = watchEffect((oninvalidate) => {
  console.log('message', message.value)
  console.log('message2', message2.value)
  oninvalidate(()=>{
    console.log('before')
  })
})
const stopWatch = () => stop()
</script>

<template>
  <input v-model="message" type="text">
  <input v-model="message2" type="text">
  <button @click="stopWatch">
    停止监听<button />
  </button>
</template>

<script setup>
import { reactive } from 'vue'

const list = reactive(['子鼠', '丑牛', '寅虎', '卯兔'])
const item = reactive({ name: 'liaoyi', phone: '13245666776' })
</script>

<template>
  <Children title="我是标题" :list="list" :item="item" />
</template>