<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message, Select } from 'ant-design-vue';

import { getStoreOption } from '#/views/system/store/api';

import { updatePharmacistStoreBindApi } from '../api';

const gridApi = ref();
const data = ref();
const optioinData = ref();

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    updatePharmacistStoreBindApi({
      doctor_id: data.value.su_id,
      store_ids: data.value.store_ids,
    }).then(() => {
      modalApi.close();
      message.success('保存成功');
      gridApi.value?.reload();
    });
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
      const { values } = modalApi.getData<Record<string, any>>();
      if (values) {
        // 拷贝 values
        data.value = JSON.parse(JSON.stringify(values));
        data.value.store_ids = data.value.bind_stores.map((item: any) => item.id);
        getStoreOptionFun();
      }
    }
  },
});

const getStoreOptionFun = () => {
  getStoreOption({}).then((res) => {
    optioinData.value = res.map((item: any) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  });
};
</script>

<template>
  <!--  <Modal class="w-[60%]" title="西（中成）药列表">-->
  <Modal class="w-[60%]" title="绑定诊所">
    <div style="width: 60%; margin: 30px auto;">
      <Select
        v-model:value="data.store_ids"
        :options="optioinData"
        mode="multiple"
        style="width: 100%"
      />
    </div>
  </Modal>
</template>
<style lang="scss"></style>
