<template>
  <el-form size="small" inline>
    <el-row :gutter="12">
      <el-col>
        <el-form-item label="数据区域">
          <el-tag>{{
            getRangetxt(
              currentForm.beginRow,
              currentForm.endRow,
              currentForm.beginColum,
              currentForm.endColum
            )
          }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="区域别称" prop="excelAreaNicname">
          <el-input v-model="currentForm.excelAreaNicname"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="区域类型" prop="excelAreaType">
          <el-select v-model="currentForm.excelAreaType">
            <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="currentForm.checkNumber"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="标题作为数据" prop="oneself">
          <el-checkbox v-model="currentForm.oneself" true-label="Y" false-label="N">是</el-checkbox>
        </el-form-item>
      </el-col>
    </el-row>

    <vxe-table
      :row-config="{ isCurrent: true }"
      border
      :data="currentForm.excelAreaTitle"
      size="mini"
      height="200"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
    >
      <vxe-column title="标题" field="title" :edit-render="{}">
        <template #edit="{ row }">
          <el-input v-model="row.title" size="small"></el-input>
        </template>
      </vxe-column>
      <vxe-column title="单元格" field="cell" width="90">
        <template #default="{ row }">
          {{ getRangetxt(row.row, row.row, row.colum, row.colum) }}
        </template>
      </vxe-column>
      <vxe-column title="操作" field="action" width="50">
        <template #default="{ row, $rowIndex }">
          <el-link style="font-size: 12px" type="danger" @click="delAreaTitle($rowIndex)"
            >删除</el-link
          >
        </template>
      </vxe-column>
    </vxe-table>
  </el-form>

  <p>
    附加信息：<el-tag>{{
      getRangetxt(attchInfo.beginRow, attchInfo.endRow, attchInfo.beginColum, attchInfo.endColum)
    }}</el-tag>
  </p>
  <vxe-table
    style="margin-top: 8px"
    :row-config="{ isCurrent: true }"
    border
    :data="attchInfo.groupTitles"
    size="mini"
    max-height="200"
    :edit-config="{ trigger: 'click', mode: 'cell' }"
  >
    <vxe-column title="别称" field="title" :edit-render="{}">
      <template #edit="{ row }">
        <el-input size="small" v-model="row.title"></el-input>
      </template>
    </vxe-column>
    <vxe-column title="单元格" field="area" width="100">
      <template #default="{ row }">
        {{ getRangetxt(row.row, row.row, row.colum, row.colum) }}
      </template>
    </vxe-column>
    <vxe-column title="操作" field="action" width="50">
      <template #default="{ row, $rowIndex }">
        <el-link style="font-size: 12px" type="danger" @click="delGroupTitle($rowIndex)"
          >删除</el-link
        >
      </template>
    </vxe-column>
  </vxe-table>

  <vxe-table
    style="margin-top: 8px"
    :row-config="{ isCurrent: true }"
    border
    :data="attchInfo.areaTitles"
    size="mini"
    max-height="200"
    :edit-config="{ trigger: 'click', mode: 'cell' }"
  >
    <vxe-column title="标题" field="title" :edit-render="{}">
      <template #edit="{ row }">
        <el-input v-model="row.title" size="small"></el-input>
      </template>
    </vxe-column>
    <vxe-column title="单元格" field="cell" width="100">
      <template #default="{ row }">
        {{ getRangetxt(row.row, row.row, row.colum, row.colum) }}
      </template>
    </vxe-column>
    <vxe-column title="操作" field="action" width="50">
      <template #default="{ row, $rowIndex }">
        <el-link style="font-size: 12px" type="danger" @click="delGroupAreaTitle($rowIndex)"
          >删除</el-link
        >
      </template>
    </vxe-column>
  </vxe-table>
</template>

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

const props = defineProps({
  currentAreaMark: {
    type: Object,
    defualt: () => ({})
  }
})
const areaTypeSelectOption = ref<Recordable[]>([])

const currentForm = reactive<Recordable>({
  beginRow: '',
  endRow: '',
  beginColum: '',
  endColum: '',
  sheetNum: 0,
  excelAreaTitle: []
})
const attchInfo = reactive<Recordable>({
  beginRow: '',
  endRow: '',
  beginColum: '',
  endColum: '',
  sheetNum: 0,
  areaTitles: [],
  groupTitles: []
})

watch(
  () => props.currentAreaMark,
  (val) => {
    Object.assign(currentForm, val)
    if (val?.desGroups.length) {
      Object.assign(attchInfo, cloneDeep(val.desGroups[0]))
    }
  },
  { deep: true, immediate: true }
)

const delAreaTitle = (index: number) => {
  currentForm.excelAreaTitle.splice(index, 1)
}
const delGroupAreaTitle = (index: number) => {
  attchInfo.areaTitles.splice(index, 1)
}
const delGroupTitle = (index: number) => {
  if (attchInfo.groupTitles.length == 1) {
    return ElMessage.error('附加信息必须有别称！')
  }
  attchInfo.groupTitles.splice(index, 1)
}

const queryDict = async (code: string) => {
  const { data } = await apiDictList({
    dictCodes: code
  })
  areaTypeSelectOption.value = data.result[code]
}
onMounted(() => {
  queryDict('excel_area_type')
})

const getAreaData = () => {
  return {
    ...currentForm,
    desGroups: [{ ...attchInfo }]
  }
}
defineExpose({
  getAreaData
})
</script>
