<script lang="tsx">
import { ElCollapseTransition, ElTooltip, ElRow, ElCol } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import { propTypes } from '@/utils/propTypes'
import { ref, unref, PropType, computed, defineComponent } from 'vue'
import { QuestionFilled, ArrowDown, ArrowUp } from '@element-plus/icons-vue'

import { DescriptionsSchema, DescriptionsProps, DescInstance } from './types'
// 移除 Icon 导入
import { get } from 'lodash-es'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('descriptions')

const defaultData = '-'

export default defineComponent({
  name: 'Descriptions',
  props: {
    title: { type: String, default: '' },
    message: { type: String, default: '' },
    collapse: { type: Boolean, default: true },
    border: { type: Boolean, default: true },
    column: { type: Number, default: 2 },
    size: { type: String, default: 'default', validator: (val: string) => ['large', 'default', 'small'].includes(val) },
    direction: { type: String, default: 'horizontal', validator: (val: string) => ['horizontal', 'vertical'].includes(val) },
    extra: { type: String, default: '' },
    schema: {
      type: Array as PropType<DescriptionsSchema[]>,
      default: () => []
    },
    data: {
      type: Object as PropType<Record<string, any>>,
      default: () => ({})
    }
  },
  setup(props, { attrs, emit }) {
    const propsRef = ref<Partial<DescriptionsProps> | null>(null)

    const getMergeProps = computed(() => {
      return {
        ...props,
        ...(unref(propsRef) as Record<string, any>)
      } as DescriptionsProps
    })

    const getBindValue = computed((): any => {
      const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class']
      const obj = { ...attrs, ...unref(getMergeProps) } as Record<string, any>
      for (const key in obj) {
        if (delArr.indexOf(key) !== -1) {
          delete obj[key]
        }
      }

      return obj
    })

    const getBindItemValue = (item: DescriptionsSchema) => {
      const delArr: string[] = ['field']
      const obj = { ...item } as Record<string, any>
      for (const key in obj) {
        if (delArr.indexOf(key) !== -1) {
          delete obj[key]
        }
      }
      return {
        labelClassName: `${prefixCls}-label`,
        ...obj
      }
    }

    function setDescProps(descProps: Partial<DescriptionsProps>): void {
      // Keep the last setDrawerProps
      propsRef.value = { ...(unref(propsRef) as Record<string, any>), ...descProps } as Record<string, any>
    }

    // 折叠
    const show = ref(true)

    const toggleClick = () => {
      if (props.collapse) {
        show.value = !unref(show)
      }
    }
    const methods: DescInstance = {
      setDescProps
    }

    emit('register', methods)

    return () => {
      return (
        <div
          class={[
            prefixCls,
            'bg-[var(--el-color-white)] dark:bg-[var(--el-bg-color)] dark:border-[var(--el-border-color)] dark:border-1px'
          ]}
        >
          {unref(getMergeProps).title ? (
            <div
              class={[
                `${prefixCls}-header`,
                'relative h-50px flex justify-between items-center layout-border__bottom px-10px cursor-pointer'
              ]}
              onClick={toggleClick}
            >
              <div class={[`${prefixCls}-header__title`, 'relative font-18px font-bold ml-10px']}>
                <div class="flex items-center">
                  {unref(getMergeProps).title}
                  {unref(getMergeProps).message ? (
                    <ElTooltip content={unref(getMergeProps).message} placement="right">
                      <el-icon class="ml-5px" size={14}><QuestionFilled /></el-icon>
                    </ElTooltip>
                  ) : null}
                </div>
              </div>
              {unref(getMergeProps).collapse ? (
                <el-icon>{show.value ? <ArrowDown /> : <ArrowUp />}</el-icon>
              ) : null}
            </div>
          ) : null}

          <ElCollapseTransition>
            <div v-show={unref(show)} class={[`${prefixCls}-content`, 'p-20px']}>
              <ElRow
                gutter={0}
                {...unref(getBindValue)}
                class="outline-1px outline-[var(--el-border-color-lighter)] outline-solid"
              >
                {unref(getMergeProps).schema.map((item) => {
                  return (
                    <ElCol
                      key={item.field}
                      span={item.span || 24 / unref(getMergeProps).column!}
                      class="flex items-stretch"
                    >
                      {unref(getMergeProps).direction === 'horizontal' ? (
                        <div class="flex items-stretch bg-[var(--el-fill-color-light)] outline-1px outline-[var(--el-border-color-lighter)] outline-solid flex-1">
                          <div
                            {...getBindItemValue(item)}
                            class={[`w-${item.width}px`,'text-left px-8px py-11px font-700 color-[var(--el-text-color-regular)] border-r-1px border-r-[var(--el-border-color-lighter)] border-r-solid']}
                            style={{
                              width: `${item.width}px`
                            }}
                          >
                            {item.label}
                          </div>
                          <div class="flex-1 px-8px py-11px bg-[var(--el-bg-color)] color-[var(--el-text-color-primary)] text-size-14px">
                            {item.slots?.default
                              ? item.slots?.default(unref(getMergeProps).data)
                              : get(unref(getMergeProps).data, item.field) ?? defaultData}
                          </div>
                        </div>
                      ) : (
                        <div class="bg-[var(--el-fill-color-light)] outline-1px outline-[var(--el-border-color-lighter)] outline-solid flex-1">
                          <div
                            {...getBindItemValue(item)}
                            class="text-left px-8px py-11px font-700 color-[var(--el-text-color-regular)] border-b-1px border-b-[var(--el-border-color-lighter)] border-b-solid"
                          >
                            {item.label}
                          </div>
                          <div class="flex-1 px-8px py-11px bg-[var(--el-bg-color)] color-[var(--el-text-color-primary)] text-size-14px">
                            {item.slots?.default
                              ? item.slots?.default(unref(getMergeProps).data)
                              : get(unref(getMergeProps).data, item.field) ?? defaultData}
                          </div>
                        </div>
                      )}
                    </ElCol>
                  )
                })}
              </ElRow>
            </div>
          </ElCollapseTransition>
        </div>
      )
    }
  }
})
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-descriptions;
/* @prefix-cls: ~'@{adminNamespace}-descriptions'; */

:deep(.#{$elNamespace}-descriptions__header) {
  display: none !important;
}

.#{prefix-cls}-header {
  &__title {
    &::after {
      position: absolute;
      top: 3px;
      left: -10px;
      width: 4px;
      height: 70%;
      background: var(--el-color-primary);
      content: '';
    }
  }
}

:deep(.#{prefix-cls}-label) {
  width: 150px !important;
}

// .@{prefix-cls}-content {
//   :deep(.@{elNamespace}-descriptions__cell) {
//     width: 0;
//   }
// }
</style>
