<template>
  <div class="gl-page-content">
    <div>
      {{ status1 }}
      <el-select v-model="status1" placeholder="请选择">
        <el-option v-for="(item, index) in PROJECT_STATUS.A" :key="index" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div>
      {{ status2 }}
      <el-select v-model="status2" placeholder="请选择">
        <el-option v-for="(item, index) in USER_STATUS.A" :key="index" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div>{{ PROJECT_STATUS.O[status1] }}</div>
    <div>{{ USER_STATUS.O[status2] }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { useDict } from '@/utils/useDict';

const { PROJECT_STATUS, USER_STATUS } = useDict('PROJECT_STATUS', 'USER_STATUS');

const status1 = ref('1');
const status2 = ref('-1');

watch(() => PROJECT_STATUS.value, (val: any, oldVal: any) => {
  console.log('watch', val, oldVal);
});

onMounted(async() => {
  console.log('1410', PROJECT_STATUS);
  // const projectData = await store.getDictData('PROJECT_STATUS');
  // console.log('异步', projectData);
});
</script>
