<template>
  <!-- 字段映射设置 -->
  <el-col>
    <el-form-item label="映射字段" prop="mapField">
      <el-select
        v-model="item.mapField"
        style="width: 260px"
        filterable
        placeholder="请选择"
        clearable
        @change="mapFieldChange"
      >
        <el-option
          v-for="itm in getSpecList"
          :key="itm.itemId"
          :label="itm.spec"
          :value="itm.spec"
        />
      </el-select>
      <!-- <el-input v-model="item.mapField" style="width: 260px" /> -->
      <!-- <el-checkbox class="ml-1" v-model="isVariable" @change="checkboxChange">是变量</el-checkbox> -->
      <el-button
        class="ml-1"
        v-if="props.index != 0"
        plain
        circle
        type="danger"
        @click="emits('remove', props.index)"
        ><el-icon><CircleClose /></el-icon
      ></el-button>
    </el-form-item>
  </el-col>

  <!-- 脚本设置 -->
  <el-col :span="24" v-if="item.mapField">
    <template v-for="(sitem, idx) in item.scripts">
      <el-form-item :label="'映射脚本' + (idx ? idx + 1 : '')">
        <el-row>
          <el-col>
            <el-select
              style="width: 260px"
              filterable 
              allow-create
              v-model="sitem.scriptName"
              @change="(e) => scriptChange(sitem, e)"
              clearable
            >
              <el-option
                v-for="item in getScriptList"
                :key="item.srciptName"
                :value="item.srciptName"
                :label="item.srciptName"
              ></el-option>
            </el-select>
            <span class="ml-1">
              <el-button v-if="idx == 0" @click="addScript('scripts')" type="primary" circle
                ><el-icon><Plus /></el-icon
              ></el-button>
              <el-button v-if="idx != 0" @click="removeScript(idx)" type="danger" plain circle
                ><el-icon><Minus /></el-icon
              ></el-button>
            </span>
          </el-col>
          <el-col v-if="sitem.scriptName" class="mt-1">
            <el-input
              type="textarea"
              style="width: 270px"
              rows="5"
              v-model="sitem.content"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
    </template>
  </el-col>

  <!-- 过滤字段映射设置 -->
  <el-col>
    <el-form-item label="过滤字段">
      <el-select
        v-model="item.filterFiled"
        style="width: 260px"
        filterable
        placeholder="请选择"
        clearable
        value-key="filedName"
        @change="filterMapFieldChange"
      >
        <el-option-group
          v-for="group in getFilterMapFieldsList"
          :key="group.groupTitle"
          :label="group.groupTitle"
        >
          <el-option
            v-for="itm in group.filedPojos"
            :key="itm.filedName"
            :label="itm.fliedTitle"
            :value="itm"
          />
        </el-option-group>
      </el-select>
    </el-form-item>
  </el-col>

  <!-- 过滤脚本设置 -->
  <el-col :span="24">
    <template v-for="(sitem, idx) in item.filterScripts">
      <el-form-item :label="'过滤脚本' + (idx ? idx + 1 : '')">
        <el-row>
          <el-col>
            <el-select
              style="width: 260px"
              filterable
              allow-create
              v-model="sitem.scriptName"
              @change="(e) => scriptChange(sitem, e)"
              clearable
            >
              <el-option
                v-for="item in getScriptList"
                :key="item.srciptName"
                :value="item.srciptName"
                :label="item.srciptName"
              ></el-option>
            </el-select>
            <span class="ml-1">
              <el-button v-if="idx == 0" @click="addScript('filterScripts')" type="primary" circle
                ><el-icon><Plus /></el-icon
              ></el-button>
              <el-button
                v-if="idx != 0"
                @click="removeScript(idx, 'filterScripts')"
                type="danger"
                plain
                circle
                ><el-icon><Minus /></el-icon
              ></el-button>
            </span>
          </el-col>
          <el-col v-if="sitem.scriptName" class="mt-1">
            <el-input
              type="textarea"
              style="width: 270px"
              rows="5"
              v-model="sitem.content"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
    </template>
  </el-col>
</template>

<script lang="ts" setup>
import { useVariableExcelChangeStore } from '@/stores/excel'
import { Plus, Minus, CircleClose } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { onMounted, ref, watch } from 'vue'

const props = defineProps<{ item?: any; index: number }>()
const emits = defineEmits(['remove'])
const excelChangeStore = useVariableExcelChangeStore()
const { getScriptList, getSpecList, getFilterMapFieldsList, getFilterMapFieldsFlatList } =
  storeToRefs(excelChangeStore)

const scriptChange = (sitem, e) => {
  if (e) {
    sitem.content = getScriptList.value.find((item) => item.srciptName == e)?.scriptContent
  } else {
    sitem.content = ''
  }
}

const removeScript = (index: number, type = 'scripts') => {
  props.item[type].splice(index, 1)
}
const addScript = (type = 'script') => {
  props.item[type].push({
    content: '',
    scriptName: ''
  })
}

onMounted(() => {
  // console.log('onmounted')
  // isVariable.value = !!props.item.orderFiled?.variable
})

const mapFieldChange = (e) => {
  if (e) {
    if (props.item.scripts?.length == 0) {
      props.item.scripts.push({
        content: '',
        scriptName: ''
      })
    }
  } else {
    props.item.scripts = []
    props.item.orderFiled = null
  }
}

const filterMapFieldChange = (e) => {
  if (e) {
    props.item.filterMapFiled = e.filedName
    // 如果没有脚本，设置一个空的脚本
    if (props.item.filterScripts?.length == 0) {
      props.item.filterScripts.push({
        content: '',
        scriptName: ''
      })
    }
  } else {
    //
    props.item.filterMapFiled = null
    props.item.filterScripts = []
  }
}
</script>
<style lang="scss" scoped></style>
