<template>
  <div class="modal-content">
    <div class="content-item">
      <div class="item-title">停车场名称</div>
      <div class="item-title-value">{{ props.modalData.name }}</div>
    </div>
    <div class="content-item">
      <div class="item-title">人员</div>
      <div class="item-title-value">
        <a-select
          style="width: 100%"
          v-model:value="selectUser"
          :options="options"
          mode="multiple"
          maxTagCount="4"
          placeholder="请选择人员"
        ></a-select>
      </div>
    </div>
    <div class="button-div">
      <a-button style="margin-right: 10px;" @click="cancel">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref } from "vue";
import { getUserList } from '@/api/demo/system.ts'
import { AllocateUser } from '@/api/illegalconstruction/parkinglot.ts'
import { message } from "ant-design-vue";
onMounted(() => {
  let params = {
    page: 1,
    limit: 1000
  }
  if(props.modalData.userList){
    selectUser.value = props.modalData.userList
  }
  getUserList(params).then(res => {
    options.value = res.items.map(item => {
      return {
        label: item.name,
        value: item.id
      }
    })
  })
})
const props = defineProps(['modalData']);
const emits = defineEmits(['closeDistributeModal'])
const selectUser = ref([])
const options = ref([])

const cancel = () => {
  emits('closeDistributeModal')
}
const submit = () => {
  let params = {
    parkingId: props.modalData.id,
    userId: selectUser.value
  }
  AllocateUser(params).then(res => {
    message.success('分配成功')
    emits('closeDistributeModal')
  }).catch(() => {
    message.error('分配失败')
  })
}

</script>

<style lang="scss" scoped>
.modal-content{
  padding: 20px;
  .content-item{
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .item-title{
      width: 80px;
      text-align: right;
      margin-right: 20px;
    }
    .item-title-value{
      font-weight: 600;
      flex: 1;
    }
  }
  .button-div{
    display: flex;
    justify-content: flex-end;
  }
}
</style>
