<template>
  <PageWrapper
    title="选择器"
    content="扩展选择器组件，用于各种表单选择器，简化使用，内置缓存，可对相同的数据减少http请求，也可手动刷新数据源"
  >
    <el-card :bordered="false" class="mt-3 proCard">
      <el-alert title="基础使用" type="info">
        自动加载数据，首次加载缓存，之后同一个KEY不在获取新数据</el-alert
      >
      <div class="mt-3">
        <el-space align="center">
          <BasicSelect
            ref="basicSelectRef"
            v-model="selectValue"
            :request="loadSelectData"
            @change="handleUpdateValue"
            cache
            cacheKey="SELECT_CLASSIFY"
            ><template #action>如果你点开了这个例子，你可能需要它</template></BasicSelect
          >
          <el-button @click="setSelectData">设置选中值</el-button>
          <el-button @click="getSelectValue">获取选中值</el-button>
          <el-button @click="getSelectData">获取数据源</el-button>
          <el-button @click="refreshSelectData">刷新数据</el-button>
        </el-space>
      </div>
    </el-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { getClassifyList } from '@/api/select/select';
  import { BasicSelect } from '@/components/Select';
  import { ElMessage } from 'element-plus';

  const selectValue = ref('hot');
  const basicSelectRef = ref();
  const params = {
    type: 1,
  };

  async function loadSelectData(res) {
    //这里可以进行数据转换处理
    return (await getClassifyList({ ...res, ...params })).map((item, index) => {
      return {
        ...item,
        index,
      };
    });
  }

  function handleUpdateValue(value) {
    selectValue.value = value;
    ElMessage.success('value: ' + JSON.stringify(value));
  }

  function refreshSelectData() {
    basicSelectRef?.value.fetch();
  }

  function setSelectData() {
    selectValue.value = 'new';
  }

  function getSelectValue() {
    ElMessage.success('value: ' + JSON.stringify(selectValue.value));
  }

  function getSelectData() {
    ElMessage.success('Data: ' + JSON.stringify(basicSelectRef?.value.getData()));
  }
</script>

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