<template>
  <el-form
    size="small"
    ref="form"
    class="set-area-form"
    :model="formState"
    :rules="rules"
    label-width="6em"
  >
    <el-row :gutter="10">
      <el-col :span="24">
        <el-form-item label="标记区域">
          <el-tag>
            {{
              getRangetxt(
                formState.beginRow,
                formState.endRow,
                formState.beginColum,
                formState.endColum
              )
            }}
          </el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="区域别称" prop="excelAreaNicname">
          <el-input v-model="formState.excelAreaNicname" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="区域类型" prop="excelAreaType">
          <el-select v-model="formState.excelAreaType" clearable>
            <template v-for="item in areaTypeSelectOption" :key="item.value">
              <el-option :label="item.label" :value="item.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="循环体间隔" prop="checkNumber">
          <el-input type="number" v-model="formState.checkNumber" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="标题作为数据" prop="oneself" label-width="100px">
          <el-checkbox true-label="Y" false-label="N" v-model="formState.oneself">是</el-checkbox>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="标题参与循环" prop="checkSelf" label-width="7em">
          <el-checkbox true-label="Y" false-label="N" v-model="formState.checkSelf">是</el-checkbox>
        </el-form-item>
      </el-col> -->
      <el-col>
        <el-form-item label-width="0">
          <el-button type="primary" @click="setAreaMark('data')">标记数据区</el-button>
          <el-button type="success" @click="nextStep">下一步</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import { apiDictList } from '@/api/common'
import { areaMarksColor } from '@/constants/excelConfig'
import type { Recordable } from '@/types/global'
import { getRangePosition, getRangetxt } from '@/utils/excel'
import { ElMessage, type FormInstance } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'

const luckysheet = (window as any).luckysheet
const emits = defineEmits(['next'])
const areaTypeSelectOption = ref<Recordable>([])
const formState = reactive<Recordable>({
  excelAreaNicname: '',
  excelAreaType: '',
  checkNumber: 1,
  oneself: 'N',
  checkSelf: 'N',
  sheetNum: 0,
  beginRow: '',
  beginColum: '',
  endRow: '',
  endColum: ''
})

watch(
  () => formState.excelAreaType,
  (val) => {
    if (val) {
      formState.excelAreaNicname = areaTypeSelectOption.value.find((v: any) => v.value == val).label
    }
  }
)

const form = ref<FormInstance>()
const rules = reactive({
  excelAreaNicname: [{ required: true, message: '请输入区域别称！', trigger: 'change' }],
  excelAreaType: [{ required: true, message: '请选择区域类型！', trigger: 'change' }],
  checkNumber: [
    {
      validator: (rule: any, value: any, cb: Function) => {
        if (value <= 0) {
          cb(new Error('请输入正整数！'))
          return false
        }
        return true
      },
      trigger: 'change'
    }
  ]
})
const resetFormState = () => {
  // 重置字段
  form.value?.resetFields(['excelAreaNicname', 'excelAreaType', 'checkNumber', 'oneself'])
  // 清空位置信息
  Object.assign(formState, {
    sheetNum: 0,
    beginRow: '',
    beginColum: '',
    endRow: '',
    endColum: ''
  })
}

const setAreaMark = (type: 'data') => {
  const position = getRangePosition()
  if (!position) return
  // 清除已经设置过的数据区颜色
  if (formState.beginColum !== '') {
    luckysheet.menuButton.customUpdateFormat(
      null,
      'bg',
      areaMarksColor['default'],
      formState.beginRow,
      formState.endRow,
      formState.beginColum,
      formState.endColum,
      false
    )
  }
  // 设置目前标记区域颜色
  luckysheet.setRangeFormat('bg', areaMarksColor[type])

  Object.assign(formState, position)
}
const queryDict = async (code: string) => {
  const { data } = await apiDictList({
    dictCodes: code
  })
  areaTypeSelectOption.value = data.result[code]
}

const nextStep = async () => {
  // 验证是否有标记数据区
  if (formState.beginRow === '') {
    return ElMessage.error('请标记数据区！')
  }
  // 验证表单
  await form.value?.validateField(['excelAreaNicname', 'excelAreaType'])

  // 下一步去设置标题
  emits('next', 1, formState)
}

onMounted(() => {
  queryDict('excel_area_type')
})

// 暴露方法
defineExpose({
  resetFormState
})
</script>
<style lang="scss" scoped>
.set-area-form {
  padding: 6px;
}
</style>
