<template>
  <el-form size="small" inline>
    <el-row :gutter="12">
      <el-col :span="6">
        <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="6">
        <el-form-item label="区域别称" prop="excelAreaNicname">
          <el-input v-model="currentForm.excelAreaNicname"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <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="6">
        <el-form-item label="循环体间隔" prop="checkNumber">
          <el-input type="number" v-model="currentForm.checkNumber"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <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>
  </el-form>
  <el-row :gutter="24" style="margin-bottom: 12px">
    <el-col :span="12" style="margin-bottom: 12px">
      <!-- excludeArea -->
      <p class="table-des">排除区：</p>
      <vxe-table
        :row-config="{ isCurrent: true }"
        border
        :data="currentForm.excludeArea"
        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="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="delCaptionAndExclude(row, $rowIndex, 2)"
              >删除</el-link
            >
          </template>
        </vxe-column>
      </vxe-table>
    </el-col>
    <el-col :span="12">
      <!-- dataTitles -->
      <p class="table-des">说明区：</p>
      <vxe-table
        :row-config="{ isCurrent: true }"
        border
        :data="currentForm.dataTitles"
        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="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="delCaptionAndExclude(row, $rowIndex, 1)"
              >删除</el-link
            >
          </template>
        </vxe-column>
      </vxe-table>
    </el-col>

    <el-col :span="12">
      <!-- excelAreaTitle -->
      <p class="table-des">标题区：</p>
      <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="numFlag" width="70">
          <template #default="{ row }">
            <el-checkbox
              size="small"
              true-label="Y"
              false-label="N"
              v-model="row.numFlag"
              @change="(e) => numFlagChange(e, row)"
            ></el-checkbox>
          </template>
        </vxe-column>
        <vxe-column title="特性" field="numTitle" width="120">
          <template #default="{ row }">
            <el-input v-model="row.numTitle" size="small"></el-input>
          </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-col>
  </el-row>

  <p class="table-tag">
    附加信息：<el-tag>{{
      getRangetxt(attchInfo.beginRow, attchInfo.endRow, attchInfo.beginColum, attchInfo.endColum)
    }}</el-tag>
  </p>

  <el-row :gutter="24">
    <el-col :span="12">
      <p class="table-des">附加别称</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>
    </el-col>

    <el-col :span="12">
      <p class="table-des">附加标题</p>
      <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="numFlag" width="70">
          <template #default="{ row }">
            <el-checkbox
              size="small"
              true-label="Y"
              false-label="N"
              v-model="row.numFlag"
              @change="(e) => numFlagChange(e, row)"
            ></el-checkbox>
          </template>
        </vxe-column>
        <vxe-column title="特性" field="numTitle" width="90">
          <template #default="{ row }">
            <el-input v-model="row.numTitle" size="small"></el-input>
          </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>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import { cloneDeep } from 'lodash-es'
import { getRangetxt, setCurrentSheet } 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 delCapAndExc = ref<Recordable[]>([])
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 delCaptionAndExclude = (row: any, index: number, type: number) => {
  delCapAndExc.value.push({ ...row, type })
  // 删除本行
  ;(type == 1 ? currentForm.dataTitles : currentForm.excludeArea).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 numFlagChange = ([val], row: any) => {
  if (val == 'Y') {
    !row.numTitle && (row.numTitle = '尺码')
  } else {
    row.numTitle = ''
  }
}

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

const getDelCapAndExc = () => {
  return [...delCapAndExc.value]
}
defineExpose({
  getAreaData,
  getDelCapAndExc
})
</script>

<style lang="scss" scoped>
.table-des {
  font-size: 14px;
  font-weight: 600;
}
.table-tag {
  font-size: 16px;
  border-top: 2px solid #333;
  padding-top: 10px;
}
</style>
