<script setup>
import CDropdown from '../CDropdown.vue'
import { ref, watch, computed } from 'vue'
import CInput from '../../CInput/CInput.vue'

const testflg = ref(false)

const options = computed(() => [
  { label: 'test1', value: 'value1' },
  {
    label:
      'test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2',
    value: 'value2',
  },
  { label: 'test1', value: 'value1' },
  { label: 'test1', value: 'value1' },
  { label: 'いないよ', value: 'value3', hideFlag: testflg.value },
  { label: 'test1', value: 'value1' },
  { label: 'test1', value: 'value1' },
])

const model1 = ref('テキスト１')
const model2 = ref('テキスト２')
const model3 = ref('テキスト３')
const model = ref('value1')
watch(model, () => {
  model.value !== 'value3' ? (testflg.value = false) : (testflg.value = true)
})
const createOption = ref([
  { label: model1, value: model1 },
  { label: model2, value: model2 },
  { label: model3, value: model3 },
])
/**
 * ! ここで値を指定しない場合はlabelが0となる。そうしたくないときは初期値''としてください
 */
const newModel = ref()

watch(
  () => model1,
  (newValue) => {
    createOption.value = Array.of(model1.value, model2.value, model3.value).map((d) => {
      console.log(d)
      return { label: d, value: d }
    })
  },
  { deep: true }
)
watch(
  () => model2,
  (newValue) => {
    createOption.value = Array.of(model1.value, model2.value, model3.value).map((d) => {
      return { label: d, value: d }
    })
    console.log(createOption.value)
  },
  { deep: true }
)
watch(
  () => model3,
  (newValue) => {
    createOption.value = Array.of(model1.value, model2.value, model3.value).map((d) => {
      return { label: d, value: d }
    })
  },
  { deep: true }
)
</script>

<template>
  model:{{ model }}<br />
  model:{{ options }}
  <div class="test">
    <CDropdown v-model="model" :p_Options="options" p_ParentElement=".playground-preview" />
  </div>
  <div class="test">
    <CDropdown v-model="model" :p_Options="options" />
  </div>
  <div class="test">
    <CDropdown v-model="newModel" :p_Options="createOption" />
  </div>
</template>
<style>
.test {
  /* width: 90px; */
  margin-left: 300px;
  margin-bottom: 10px;
}
</style>
