<!-- 选择门店组件 -->
<template>
  <el-select :model-value="modelValue" :multiple="multiple" clearable placeholder="请选择门店"
    @change="$emit('update:modelValue', $event)" style="width: 300px">
    <el-option :label="item.shopName" :value="item.id" v-for="item in branchList" :key="item.id"></el-option>
  </el-select>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getBranchPage, getBranchList } from "@/api/coupon/index.js";

const props = defineProps({
  // 是否显示所有店铺（包括主店）
  all: {
    type: Boolean,
    default: false
  },
  // 单选多选
  multiple: {
    type: Boolean,
    default: true
  },
  modelValue: {
    type: [Array, String],
    default: []
  }
})

// 获取分店列表
const branchList = ref([]);
async function getBranchPageAjax() {
  try {
    let res = null
    if (props.all) {
      res = await getBranchList()
      res.map(item => {
        item.id = item.shopId
      })
      branchList.value = res;
    } else {
      res = await getBranchPage();
      branchList.value = res.records;
    }
  } catch (err) {
    console.log(err);
  }
}

onMounted(() => {
  getBranchPageAjax()
})
</script>