<template>
  <el-card class="mb-12px">
    <template #header>
      <div class="flex items-center justify-between">
        <span>按钮组</span>
        <el-button type="primary" :icon="LuPlus" @click="handleAddRow"></el-button>
      </div>
    </template>
    <el-scrollbar>
      <div
        class="flex items-center gap-4px mb-4px"
        v-for="(row, rowIndex) in group || []"
        :key="rowIndex"
      >
        <div
          class="relative group/item flex-1"
          v-for="(_val, columnIndex) in row"
          :key="columnIndex"
        >
          <el-button
            class="w-full"
            @click="handleEdit(group[rowIndex][columnIndex], rowIndex, columnIndex)"
            >{{ group[rowIndex][columnIndex].text }}</el-button
          >
          <div
            class="absolute top--7px right--4px cursor-pointer invisible group-hover/item:visible"
            @click="handleDeleteItem(rowIndex, columnIndex)"
          >
            <LuX size="14px" />
          </div>
        </div>

        <el-button
          type="primary"
          :icon="LuPlus"
          :disabled="row.length === 5"
          @click="handleAddItem(rowIndex)"
        ></el-button>
      </div>
    </el-scrollbar>
  </el-card>

  <el-dialog
    draggable
    append-to-body
    title="编辑按钮"
    width="600px"
    v-model="open"
    close-on-click-modal
  >
    <el-form ref="form" :model="formData" :rules="rules" hide-required-asterisk>
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" spellcheck="false" />
      </el-form-item>
      <el-form-item label="文本" prop="text">
        <LanguageInput type="textarea" :rows="1" v-model="formData.text" />
      </el-form-item>
      <!-- <el-form-item label="宽度">
        <input-number
          v-model="formData.width"
          style="width: 100%"
          :min="1"
          :max="255"
        ></input-number>
      </el-form-item> -->
    </el-form>
    <el-collapse v-if="isCustom" :model-value="['style']">
      <el-collapse-item name="style">
        <template #title>
          <div class="flex items-center">
            <IoColorPaletteOutline size="12px" />
            <span class="ml-4px text-12px">样式配置</span>
          </div>
        </template>
        <el-form
          ref="formRef"
          class="px-12px box-border"
          label-position="left"
          :model="styleFormData"
        >
          <el-form-item label="模块/状态" class="mb-12px!">
            <div class="w-full">
              <StylePart
                v-model="part"
                :form-data="styleFormData"
                :form-items-schema="btn.config.styles || []"
                @change="onChangeStyleByState"
              />
            </div>
          </el-form-item>

          <el-row :gutter="12" v-if="part.expandStyle">
            <CusFormItem
              v-for="(item, index) in btn.config.styles || []"
              :key="item.valueType + '_' + index"
              :schema="item"
              :formData="styleFormData"
              :widgetData="projectStore.activeWidget!"
              @change-state-style="onChangeStateStyle"
            />
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, provide, type Ref, watch } from 'vue'
import { LuPlus, LuX } from 'vue-icons-plus/lu'
import { ButtonItem } from './data'
import { getNextIndex } from '@/utils'
import { useProjectStore } from '@/store/modules/project'
import btn from './index'
import { klona } from 'klona'
import { FormInstance } from 'element-plus'
import { get, assign } from 'lodash-es'

import StylePart from '@/views/designer/config/property/components/StylePart.vue'
import CusFormItem from '@/views/designer/config/property/CusFormItem.vue'
import { IoColorPaletteOutline } from 'vue-icons-plus/io'
import LanguageInput from '../components/LanguageInput.vue'

const props = defineProps<{
  values: Ref<{
    props: {
      group: ButtonItem[][]
      isCustom: boolean
      col: number
    }
  }>
}>()

const open = ref(false)
const projectStore = useProjectStore()
const form = ref<FormInstance>()
const itemParts = ref<any[]>([btn.parts.find((item) => item.name === 'items')])
provide('parts', itemParts)

/**
 * 编辑表单数据
 */
const formData = ref<ButtonItem>({
  name: '',
  text: '',
  type: '',
  width: 0,
  style: []
})

const rules = {
  name: [
    { required: true, message: '请输入按钮名称', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, callback: any) => {
        // 校验名称是否重复
        const index = group.value.findIndex((row, rowIndex) =>
          row.find((col, colIndex) => {
            return value === col.name && (rowIndex !== tempRow || colIndex !== tempCol)
          })
        )
        if (index !== -1) {
          callback(new Error('名称重复'))
        } else {
          callback()
        }
      }
    }
  ],
  text: [{ required: true, message: '请输入按钮文本', trigger: 'blur' }]
}

// 按钮列表
const group = computed({
  get() {
    return props.values?.value.props.group
  },
  set(val) {
    props.values.value.props.group = val
  }
})

/**
 * 是否自定义
 */
const isCustom = computed(() => {
  return props.values?.value.props.isCustom
})

/**
 * 添加一项
 * @param rowIndex 行索引
 */
const handleAddItem = (rowIndex: number | string) => {
  const i = getNextIndex(group.value.flat(), 'name')
  const row = group.value?.[rowIndex]
  if (row?.length < 5) {
    row.push({
      name: `btn_${i}`,
      text: `${i}`,
      type: 'button',
      width: 1,
      style: []
    })
  }
}

let tempRow, tempCol

const handleEdit = (record: ButtonItem, rowIndex: number | string, colIndex: number | string) => {
  tempRow = rowIndex
  tempCol = colIndex
  open.value = true
  formData.value = klona(record)
}

const handleSubmit = () => {
  form.value?.validate().then(() => {
    group.value[tempRow][tempCol] = klona(formData.value)
    open.value = false
  })
}

/**
 * 删除一项
 * @param rowIndex 行索引
 * @param index 索引
 */
const handleDeleteItem = (rowIndex: number, index: number) => {
  group.value[rowIndex].splice(index, 1)
  if (group.value[rowIndex].length === 0) {
    group.value.splice(rowIndex, 1)
  }
}

/**
 * 添加一行
 */
const handleAddRow = () => {
  const i = getNextIndex(group.value.flat(), 'name')
  const newArr = new Array(props.values.value.props.col || 3).fill({})

  group.value?.push(
    newArr.map((_, index) => {
      return {
        name: `btn_${i + index}`,
        text: `${i + index}`,
        type: 'button',
        width: 1,
        style: []
      }
    })
  )
}

// 样式表单数据
const styleFormData = computed(() => {
  const item = formData.value.style?.find(
    (item) => item?.part.name === part.value?.name && item?.part.state === part.value?.state
  )

  return item
})

const part = ref<{
  name: string
  state: string
  expandStyle: boolean
}>({
  name: 'items',
  state: 'default',
  expandStyle: true
})

watch(
  () => open.value,
  (val) => {
    if (val) {
      part.value = {
        name: 'items',
        state: 'default',
        expandStyle: true
      }
    }
  }
)

/**
 * 获取控件预设样式
 */
const getWidgetDefaultStyle = () => {
  const widgetType = 'lv_buttonmatrix'

  const state = projectStore.globalStyle
    ?.find((item) => item.widget === widgetType)
    ?.part?.find((item) => item.partName === part.value.name)?.state

  const defaultStyle =
    projectStore.globalStyle
      ?.find((item) => item.widget === widgetType)
      ?.part?.find((item) => item.partName === part.value.name)?.defaultStyle || {}

  const stateStyle = state?.find((item) => item.state === part.value.state)?.style || {}

  return {
    defaultStyle,
    stateStyle
  }
}

/**
 * 设置控件状态部分样式
 * @param field 样式字段名
 * @param type 修改类型
 */
const onChangeStateStyle = (field: string, type: 'add' | 'delete') => {
  if (type === 'add') {
    const { defaultStyle, stateStyle } = getWidgetDefaultStyle()

    const style = get(assign({}, defaultStyle, stateStyle), field)

    if (styleFormData.value) {
      styleFormData.value[field] = style
    } else {
      const result = klona({
        [field]: style,
        part: {
          name: part.value.name,
          state: part.value.state
        }
      })
      formData.value?.style?.push(result)
    }
  } else {
    if (styleFormData.value?.[field]) {
      delete styleFormData.value[field]
    }
  }
}

/**
 * 开启/关闭控件部件状态样式
 * @param type
 */
const onChangeStyleByState = (type: 'add' | 'delete') => {
  if (type === 'add') {
    const { defaultStyle, stateStyle } = getWidgetDefaultStyle()
    // 找多对应样式时添加 状态的样式合并到默认样式
    const result = klona({
      ...assign({}, defaultStyle, stateStyle),
      part: {
        name: part.value.name,
        state: part.value.state
      }
    })
    formData.value?.style?.push(result)
  } else {
    // 删除样式
    const index =
      formData.value?.style.findIndex(
        (item) => item.part.name === part.value.name && item.part.state === part.value.state
      ) ?? -1
    if (index !== -1) {
      formData.value?.style.splice(index, 1)
    }
  }
}
</script>

<style scoped></style>
