<template>
  <xd-select
    v-model="select"
    :placeholder="placeholder"
    :justify-content="justifyContent"
    :width="width"
    :textColor="textColor"
    :justifyContent="justifyContent"
    :font-size="fontSize"
    :padding="padding"
    :border-width="borderWidth"
    :height="height"
    :default-value="defaultValue"
    :list="list"
    :disabled="disabled"
    :content-prefix="contentPrefix"
    :mode="mode"
    :radius="radius"
    :border-color="borderColor"
    @change="handleChange"
  ></xd-select>
</template>

<script>
  import XdSelect from "@/components/XdSelect/XdSelect";
  export default {
    name: "XdFormSelect",
    components: {
      XdSelect
    },
    props: {
      textColor: {
        type: String,
        default: '#333'
      },
      width: {
        type: String,
        default: 'auto'
      },
      justifyContent: {
        type: String,
        default: 'space-between' //space-between flex-start flex-end center
      },
      fontSize: {
        type: String | Number,
        default: 28
      },
      padding: {
        type: String,
        default: '0 20rpx'
      },
      height: {
        type: String | Number,
        default: 72
      },
      defaultValue: {
        type: String | Number | null | Array,
        default: null
      },
      list: {
        type: Array | null,
        default: null
      },
      disabled: {
        type: Boolean,
        default: false
      },
      contentPrefix: {
        type: String,
        default: '-'
      },
      mode: {
        type: String,
        default: 'selector', //multiSelector selector
      },
      placeholder: {
        type: String,
        default: '--请选择--'
      },
      radius: {
        type: String,
        default: '10rpx'
      },
      borderWidth: {
        type: String | Number,
        default: 2
      },
      borderColor: {
        type: String,
        default: '#e5e5e5'
      },

    },
    data(){
      return {
        select: '',
        selectSource: null
      }
    },
    methods: {
      handleChange(select){
        this.selectSource = select;
        let item = select.item;
        if(this.mode === 'selector') item = [select.item];
        let value = this.$xdUniHelper.getListKeyForValue(item, 'value');

        this.$emit('change', select);
        this.$emit('input', value.length === 1 ? value[0]: JSON.stringify(value));
        console.log('handleChange', select, this.$xdUniHelper.getListKeyForValue(item, 'value'));
      },

      getData(){
        return this.this.selectSource;
      }

    }
  }
</script>

