import { computed, defineComponent, onBeforeUnmount, ref } from 'vue'
import { cloneDeep } from 'lodash'
import ConfColumn from 'skzz-conf-column'

export default defineComponent({
  name: 'SkEditTable',
  components: {
    ConfColumn,
  },
  props: {
    options: {
      type: Array,
      default: () => ([]),
    },
  },
  emits: ['currentEdit'],
  setup (props, { attrs, emit, expose }) {
    const elTabNode = ref<any>(null)
    const editNode = ref<any>(null)

    const globalEvent = (e: MouseEvent) => {
      if (!editNode.value.contains(e.target))
        elTabNode.value.setCurrentRow()
    }
    document.addEventListener('click',globalEvent)
    onBeforeUnmount(() => {
      document.removeEventListener('click', globalEvent)
    })

    const saveHandler = (event: MouseEvent) => {
      event.stopPropagation()
      elTabNode.value.setCurrentRow()
    }
    let haveOption = false
    function depFilter (temp: any) {
      temp.map((item: any) => {
        if (item.mchildren) {
          depFilter(item.mchildren)
        } else {
          // 普通模式，没有slot就直接给个input
          if (!item.slot) {
            item.slot = (value: any) => (
              <>
                <div class={`${item.edit ? 'troggle' : ''} skzz-edittable-form`}>
                  <el-input
                    placeholder="请输入内容"
                    onChange={() => emit('currentEdit', value.$index, value.row)}
                    v-model={value.row[item.prop]}
                  />
                </div>
                <span class={item.edit ? 'edit' : ''}>
                  {item.formatter ? item.formatter(value.row, value.column, value.$index) : value.row[item.prop]}
                </span>
              </>
            )
          }
          // 有slot的情况，自定义slot内容
          if (item.prop !== 'option' && item.slot) {
            const temp = item.slot
            const slotVal = (value: any) => temp(value)
            item.slot = (value: any) => (
              <>
                <div class={`${item.edit ? 'troggle' : ''} skzz-edittable-form`}>
                  { slotVal(value) }
                </div>
                <span class={item.edit ? 'edit' : ''}>
                  {item.formatter ? item.formatter(value.row, value.column, value.$index) : value.row[item.prop]}
                </span>
              </>
            )
          }
          // 操作按钮模式
          if (item.prop === 'option' && item.slot) {
            haveOption = true
            const temp = item.slot
            const slotVal = (value: any) => temp(value)
            item.slot = (value: any) => (
              <>
                { slotVal(value) }
                <el-button
                  v-show={item.show}
                  onclick={($event: any) => saveHandler($event)}
                  type="primary"
                >保存</el-button>
              </>
            )
          }
        }
      })
    }

    const tempOpt = computed(() => {
      const temp = cloneDeep(props.options)
      depFilter(temp)
      return temp
    })
    expose({
      elTabNode,
      editNode,
    })
    return () => (
      <div ref={editNode}>
        <el-table
          {...attrs}
          ref={elTabNode}
          highlight-current-row
          className="sk-edittable"
        >
          <conf-column options={tempOpt.value} />
        </el-table>
      </div>
    )
  },
})