<template>
  <div class="relation-select">
    <el-select
      :modelValue="modelValue"
      style="width: 100%;"
      :disabled="disabled"
      :size="size"
      :clearable="clearable"
      :placeholder="placeholder"
      :popper-append-to-body="false"
      popper-class="relation-select-popper"
      @visible-change="onVisibleChange"
      @remove-tag="onRemoveTag"
      @clear="onClear"
    >
      <el-option
        v-for="item in selectedItems"
        :key="item[props.value]"
        :label="item[props.label]"
        :value="item[props.value]"
      />
    </el-select>
  </div>
</template>

<script lang="ts">
export default {
  name: 'formSetTourismTravelNotesFile',
};
</script>

<script setup lang="ts">
import { getUUID } from '@/common/utils';
import { TourTourismTravelNotesFileData } from '@/api/generated/tourTourismTravelNotesFileController';
import { TourTourismTravelNotesFileController } from '@/api/generated';
import FormSetTourismTravelNotesFile from '@/pages/generated/formSetTourismTravelNotesFile/formSetTourismTravelNotesFile.vue';
import { ANY_OBJECT } from '@/types/generic';
import { Dialog } from '@/components/Dialog';

const emit = defineEmits<{
  'update:modelValue': [string | number | TourTourismTravelNotesFileData[]];
  change: [string | number | TourTourismTravelNotesFileData[], string | number | TourTourismTravelNotesFileData[]];
}>();

const pps = withDefaults(
  defineProps<{
    modelValue: string | number | TourTourismTravelNotesFileData[] | undefined;
    props?: ANY_OBJECT;
    disabled?: boolean;
    size?: '' | 'default' | 'large' | 'small';
    clearable?: boolean;
    placeholder?: string;
  }>(),
  {
    props: () => {
      return {
        label: 'name',
        value: 'id',
      };
    },
    disabled: false,
    clearable: false,
  },
);

const widgetId = getUUID();
const selectedItems = ref<ANY_OBJECT[]>([]);
const selectedValue = ref<string | number | TourTourismTravelNotesFileData[] | undefined>(pps.modelValue);

const handlerEditOperate = (item: TourTourismTravelNotesFileData) => {
  selectedItems.value = [];
  if (item) selectedItems.value.push(item);
  if (!checkSelectChange()) return;
  emitChange();
};

const onVisibleChange = (visible: boolean) => {
  if (visible) {
    Dialog.show<ANY_OBJECT>(
      '旅游项目游记文件',
      FormSetTourismTravelNotesFile,
      {
        area: ['1200px', '650px'],
        offset: '100px',
      },
      {
        modelValue: selectedItems.value,
        props: pps.props,
        path: 'formSetTourismTravelNotesFile/' + widgetId
      },
      {
        width: '1200px',
        height: '650px',
        pathName: '/thirdParty/formSetTourismTravelNotesFile'
      },
    ).then(res => {
      handlerEditOperate(res);
    });
  }
};

const onRemoveTag = (val: ANY_OBJECT) => {
  selectedItems.value = selectedItems.value.filter(item => {
    return item[pps.props.value] !== val;
  });
  emitChange();
};
const onClear = () => {
  selectedItems.value = [];
  emitChange();
};

const emitChange = () => {
  let tempValue;
  tempValue = selectedItems.value[0] || {};
  emit('update:modelValue', tempValue[pps.props.value]);
  emit('change', tempValue[pps.props.value], selectedItems.value);
};
const checkSelectChange = () => {
  let valueIdString = pps.modelValue || '';
  let selectedItemsString = selectedItems.value
    .sort((item1, item2) => {
      if (item1[pps.props.value] === item2[pps.props.value]) return 0;
      return item1[pps.props.value] < item2[pps.props.value] ? -1 : 1;
    })
    .map(item => item[pps.props.value])
    .join(',');
  return valueIdString !== selectedItemsString;
};
const getSelectItemList = () => {
  if (pps.modelValue == null || pps.modelValue === '') {
    selectedItems.value = [];
  } else {
    let params: ANY_OBJECT = {
      id: pps.modelValue,
    };
    TourTourismTravelNotesFileController.view(params)
      .then(res => {
        if (res.data) {
          selectedItems.value = [res.data];
        }
      })
      .catch(e => {
        console.log(e);
      });
  }
};

watch(
  () => pps.modelValue,
  newVal => {
    selectedValue.value = newVal;
    getSelectItemList();
  },
  {
    immediate: true,
  },
);
</script>

<style scoped>
  .relation-select ::v-deep .relation-select-popper {
    display: none;
  }

  .relation-select ::v-deep .el-dialog__header {
    height: 42px;
    line-height: 42px;
    padding: 0px 20px;
    background-color: #F8F8F8;
  }
  .relation-select ::v-deep .el-dialog__title {
    color: #333;
    font-size: 14px;
  }
  .relation-select ::v-deep .el-dialog__headerbtn {
    top: 12px;
  }
  .relation-select ::v-deep .el-dialog__body {
    padding: 25px;
  }
</style>
