<template>
  <t-popup placement="bottom-left" trigger="click">
    <t-button variant="outline">
      <template #icon><svg-icon name="view" color="#262626" /></template>
      显示字段
    </t-button>
    <template #content>
      <div class="metadata-options">
        <t-select
          v-model="selected"
          filterable
          clearable
          popupVisible
          multiple
          :min-collapsed-num="1"
          :popup-props="{
            attach: 'scrollParent',
            overlayInnerStyle: {
              width: '260px',
            },
          }"
          v-bind="attrs"
          @change="onChange"
        >
          <template #panelTopContent>
            <div class="t-select-option t-size-m">
              <t-checkbox v-model="all" @change="allChange">全选</t-checkbox>
            </div>
          </template>
          <t-option
            v-for="item in optionList"
            :key="item.fieldId"
            :label="item.fieldTitle"
            :value="item.fieldId"
          />
        </t-select>
      </div>
    </template>
  </t-popup>
</template>

<script setup name="SelectMetadata">
import { onMounted, ref, useAttrs, watch, computed } from 'vue';
import { cloneDeep } from 'lodash';
import { metadataListApi } from '@/api/sop';

const emit = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
  modelValue: { type: Array },
  type: { type: String, default: 'OFFICE_SOP_FLOW' },
  originColumns: { type: Array, default: [] },
});

const attrs = useAttrs();

let all = ref(false);
let selected = ref([]);
let optionList = ref([]);
const search = async () => {
  optionList.value = [];
  const res = await metadataListApi({ type: props.type }).catch(() => {});
  if (!res) return;
  const noneedCodes = ['FILE', 'TABLE', 'DEVICE_OUT_TABLE', 'DEVICE_IN_TABLE'];
  optionList.value = res.filter((item) => !noneedCodes.includes(item.code));
  // console.log(new Set(optionList.value.map((item) => item.code)));

  optionList.value.unshift(...cloneDeep(props.originColumns));
};
onMounted(() => {
  search();
});

const allChange = () => {
  if (all.value) {
    selected.value = optionList.value.map((item) => item.fieldId);
  } else {
    selected.value = [];
  }
  onChange();
};

const onChange = () => {
  all.value = selected.value.length === optionList.value.length;
  const selectedData = optionList.value.filter(
    (item) => selected.value && selected.value.includes(item.fieldId)
  );
  emit(
    'update:modelValue',
    selected.value.map((item) => {
      return { fieldId: item };
    })
  );
  emit('change', selectedData);
};

watch(
  () => props.modelValue,
  (val) => {
    const data = val || [];
    selected.value = data.map((item) => item.fieldId);
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.metadata-options {
  width: 260px;
  padding: 5px 0;
  border-radius: 3px;
  background-color: #fff;
  position: relative;

  :deep(.t-popup__content) {
    box-shadow: none !important;
    margin: 0 !important;
  }
  :deep(.t-input__wrap + div) {
    position: static !important;
    margin-top: 8px;
  }
  :deep(.t-popup) {
    position: static !important;
    transform: none !important;
  }
  :deep(.t-select__list) {
    padding: 0;
  }
  :deep(.t-input__prefix) {
    display: none !important;
  }
  :deep(.t-input) {
    display: flex !important;
  }
}
</style>
