<template>
  <div style="overflow-y: auto">
    <h1>select</h1>
    <div>
      参数：input1，值：{{form.input1}}
      <CusFormColumn
          link="select"
          label="普通"
          placeholder="下拉"
          v-model:param="form.input1"
          :options="$store.state.dictionary.pboatTypeList"
      />
    </div>
    <h2>自定义labelKey valueKey标识（默认为字典项对应的dictLabel，dictValue）</h2>
    <div>
      参数：input11，值：{{form.input11}}
      <CusFormColumn
          style="width: 200px;"
          fit-input-width
          link="select"
          label="select"
          v-model:param="form.input11"
          :options="opts"
          static
          labelKey="label"
          valueKey="value"
      />
    </div>
    <h2>获取选中对象  @getObject</h2>
    <div>
      参数：input1，值：{{form.input1}}<br/>
      对象：obj1，值：{{form.obj1}}
      <CusFormColumn
          link="select"
          label="普通"
          v-model:param="form.input1"
          :options="$store.state.dictionary.pboatTypeList"
          @getObject="getObject"
      />
    </div>
    <h2>插槽</h2>
    <div>
      参数：input1，值：{{form.input1}}<br/>
      默认判断options值有变化后，取消loading
      <el-button @click="staticParam = true">插槽的时候static需要动态判断下</el-button>
      <CusFormColumn
          link="select"
          label="自定义模板"
          v-model:param="form.input1"
          :static="staticParam"
      >
        <el-option
            v-for="item in $store.state.dictionary.pboatTypeList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
        >
          <span style="float: left">{{ item.dictLabel }}</span>
          <span
              style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        "
          >{{ item.dictValue }}</span
          >
        </el-option>
      </CusFormColumn>
      <CusFormColumn
          link="select"
          label="分组"
          v-model:param="form.input1"
      >
        <el-option-group
            v-for="group in groups"
            :key="group.label"
            :label="group.label"
        >
          <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-option-group>
      </CusFormColumn>
      <CusFormColumn
          link="select"
          label="分组+自定义模板"
          v-model:param="form.input1"
      >
        <el-option-group
            v-for="group in groups"
            :key="group.label"
            :label="group.label"
        >
          <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span
                style="
          float: right;
          color: var(--el-text-color-secondary);
          font-size: 13px;
        "
            >{{ item.value }}</span
            >
          </el-option>
        </el-option-group>
      </CusFormColumn>
    </div>
    <h2>多选</h2>
    <div>
      <CusFormColumn
          link="select"
          label="default"
          v-model:param="form.input1"
          :options="$store.state.dictionary.pboatTypeList"
          multiple
      />
      <CusFormColumn
          link="select"
          label="use collapse-tags"
          v-model:param="form.input1"
          :options="$store.state.dictionary.pboatTypeList"
          multiple
          collapse-tags
      />
      <CusFormColumn
          link="select"
          label="use collapse-tags-tooltip  "
          v-model:param="form.input1"
          :options="$store.state.dictionary.pboatTypeList"
          multiple
          collapse-tags
          collapse-tags-tooltip
      />
      <CusFormColumn
          link="select"
          label="use max-collapse-tags"
          v-model:param="form.input1"
          :options="$store.state.dictionary.pboatTypeList"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="2"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      form: {
        input1: null,
        input2: null,
        obj1: {},
      },
      opts: [
        {label: '选项一', value: 1},
        {label: '选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二', value: 2},
        {label: '选项三', value: 3},
      ],
      groups: [
        {
          label: 'Popular cities',
          options: [
            {
              value: 'Shanghai',
              label: 'Shanghai',
            },
            {
              value: 'Beijing',
              label: 'Beijing',
            },
          ],
        },
        {
          label: 'City name',
          options: [
            {
              value: 'Chengdu',
              label: 'Chengdu',
            },
            {
              value: 'Shenzhen',
              label: 'Shenzhen',
            },
            {
              value: 'Guangzhou',
              label: 'Guangzhou',
            },
            {
              value: 'Dalian',
              label: 'Dalian',
            },
          ],
        },
      ],
      staticParam: false
    })
    const initDictionary = () => {
      store.dispatch("dictionary/LOAD_DICT_LIST", "pboat_type");
    }
    const getObject = (obj: any) => {
      state.form.obj1 = obj
    }
    onMounted(() => {
      initDictionary()
    })
    return {
      ...toRefs(state),
      getObject
    }
  },
})
</script>

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