<script setup lang="ts">
import type { MjModalProps, SelectedItems } from '../mj-table/const'

import { CircleCloseFilled, Search } from '@element-plus/icons-vue'

import MjModal from '#/components/mj/mj-modal/index.vue'

defineOptions({
  name: 'MjTableSelect',
})

// 属性
const props = withDefaults(
  defineProps<{
    cmp: any
    cmpProps?: any
    disabled?: any
    modal?: MjModalProps
    modelValue: SelectedItems
    multiSelectable?: any
    placeholder?: string
    title?: (item: any) => any
  }>(),
  {
    title: (item: any) => item.name,
    multiSelectable: false,
    placeholder: '请选择',
    cmpProps: {},
    disabled: false,
    modal: {} as any,
  },
)
// 事件
const emit = defineEmits(['update:model-value'])
// 属性
const { disabled, placeholder } = toRefs(props)
const modal = {
  title: '请选择',
  width: '80%',
  maskClosable: true,
  ...props.modal,
} as MjModalProps

// 是否有值
const hasValue = computed(() => selectedItems.value?.items?.length)

// 显示的title
const showTitle = computed(() => {
  const items = selectedItems.value?.items
  if (!items?.length) return ''
  if (items.length === 1) return props.title(items[0])
  return `${props.title(items[0])}等${items.length}项`
})

// 模态框
const modalVisible = ref(false)

// 选中的数据
const selectedItems = computed({
  get: () => props.modelValue,
  set: (val) => {
    // 处理单选
    const len = val?.items?.length
    if (!props.multiSelectable && len >= 1) {
      // if (len > 1) {
      //   val.items = [val.item]
      // }
      confirm()
    }
    emit('update:model-value', val)
  },
})

// 点击
function show() {
  if (disabled.value) return
  modalVisible.value = true
}

// 选中数据更新
function dataModified(_: { action: number; data: any }) {
  // if (val.action !== mj_action_update) return
  // if (!obj.isEqualIgnoreNumberString(value.value, val.data[props.selectedValueKey])) {
  //   // 修改的不是这条数据
  //   return
  // }
  // label.value = val.data[props.selectedLabelKey]
  // emit('changed', val.data)
  // console.log(val)
}

function clearValue() {
  selectedItems.value = {} as SelectedItems
}

function confirm() {
  // 关闭窗口
  modalVisible.value = false
}

defineExpose({
  show,
})
</script>

<template>
  <div
    class="mj-table-select"
    :class="{
      disabled,
    }"
    :style="{
      cursor: disabled ? 'not-allowed' : 'pointer',
    }"
    @click="show"
  >
    <div class="left">
      <el-icon><Search /></el-icon>
      <span v-if="hasValue" class="value">{{ showTitle }}</span>
      <span v-else class="placeholder">{{ placeholder }}</span>
    </div>
    <div class="right">
      <el-icon v-if="hasValue && !disabled" @click.stop="clearValue">
        <CircleCloseFilled />
      </el-icon>
    </div>
    <MjModal
      v-model="modalVisible"
      :options="modal"
      :show-footer="multiSelectable"
      :show-confirm-button="true"
      :confirm-closable="false"
      @confirm="confirm"
    >
      <component
        :is="cmp"
        :selectable="true"
        :multi-selectable="multiSelectable"
        @data-modified="dataModified"
        v-model:selected-items="selectedItems"
        v-bind="cmpProps"
      />
    </MjModal>
  </div>
</template>

<style lang="scss" scoped>
$disabled_color: #bfbfbf;

.mj-table-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 10px;
  font-size: 16px;
  color: #606266;
  background-color: #fff;
  border: 1px solid oklch(92.8% 0.006 264.531deg);
  border-radius: 4px;

  &.disabled {
    color: $disabled_color;
    background-color: #f3f3f3;

    .placeholder {
      color: $disabled_color;
    }
  }

  .left {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 16px;
  }

  .right {
    display: flex;
    align-items: center;
  }

  .placeholder {
    color: #c0c4cc;
  }
}
</style>
