<template>
  <div style="width:200px">
    <a-select v-model="onValue" placeholder="请选择业务领域" allow-clear @change="selseChange">
      <a-select-option v-for="(item, i) in list" :key="i" :value="item.id">{{
        item.name
      }}</a-select-option>
    </a-select>
  </div>
</template>

<script>
import components from './_import-components/audit-select-area-import'
import auditMaintainService from '../maintain/audit-maintain-service'

export default {
  name: 'AuditSelectArea',
  metaInfo: {
    title: 'AuditSelectArea',
  },
  components,
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // placeholder
    placeholder: {
      type: String,
      default: '请选择',
    },
    dataUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      onValue: '',
      list: [],
    }
  },
  watch: {
    value(val) {
      this.onValue = val || undefined
    },
  },
  created() {
    this.initAreaList()
    this.onValue = this.value || undefined
  },
  methods: {
    initAreaList() {
      auditMaintainService.getAreaListAll().then((res) => {
        this.list = res.data
      })
    },
    selseChange() {
      this.$emit('change', this.onValue)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
