<template>
  <div class="screen address rowACenter">
    <aside
      v-for="(key,pIndex) in use"
      :key="'key-'+key"
      class="address-item flex-1"
    >
      <section class="screen address-use-item">
        <a-select v-if="data[key]" @change="changeColumn(key,pIndex,$event)" :value="vValue[pIndex]" class="screen address-item-select">
          <a-select-option
              v-for="(item,index) in data[key]"
              :key="'option-'+key+'-'+index"
              :value="index"
          >{{item.name}}</a-select-option>
        </a-select>
      </section>
    </aside>
  </div>
</template>

<script>
import mixins from '../mixins';
import props from '../props';
import {
  Select
} from 'ant-design-vue';
export default {
  name: "v-address",
  mixins,
  props,
  components:{
    [Select.name]:Select,
    [Select.Option.displayName]:Select.Option,
  }
}
</script>

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

<style>
.address-item-select .ant-select-selector{
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  color: #fff;
  box-shadow: none !important;
  opacity: 1 !important;
}
.address-item-select .ant-select-selection-item {
  line-height: 32px;
}


.address-item-select .ant-select-selection-item,.address-item-select .ant-select-arrow {
  color: #fff !important;

}
</style>