<template>
  <el-select :size="size" @change="handleSelectTotalAddress" :style="{ width: selectContainerWidth + 'px' }" v-model="selectValue" placeholder="请选择区域">
    <el-option v-for="address in addressList" :key="address.value" :label="address.label" :value="address.value"></el-option>
  </el-select>
</template>

<script>
import { getTextWidth } from '../utils/utils'
import selectMixin from '../mixin/select'

export default {
  mixins: [selectMixin('addressList')],
  data() {
    return {
      selectContainerWidth: getTextWidth('佛山市')
    }
  },
  methods: {
    handleSelectTotalAddress(e) {
      const currentselectValue = this.addressList.find((item) => item.value === e)
      this.selectContainerWidth = getTextWidth(currentselectValue.label)
    }
  }
}
</script>
