<template>
  <!-- 字段映射设置 -->
  <el-col>
    <el-form-item label="对应字段" prop="mapField">
      <el-select
        v-model="item.mapField"
        style="width: 220px"
        filterable
        placeholder="请选择"
        @change="mapFieldChange"
        clearable
      >
        <el-option-group v-for="group in getAllFields" :key="group.label" :label="group.label">
          <el-option
            v-for="item in group.options"
            :key="item.filedName"
            :label="item.fliedTitle"
            :value="item.filedName"
            :disabled="!!item.disabled"
          />
        </el-option-group>
      </el-select>
      <el-button v-if="props.index != 0" 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: 220px"
              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>
              <el-button v-if="idx == 0" @click="addScript" type="primary" circle
                ><el-icon><Plus /></el-icon
              ></el-button>
              <el-button v-if="idx != 0" @click="removeScript(idx)" type="danger" 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: 220px"
              disabled
              rows="3"
              v-model="sitem.content"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
    </template>
  </el-col>
</template>

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

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

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

const mapFieldChange = (e) => {
  if (e) {
    getAllFields.value.some((items) => {
      return items.options.some((item) => {
        if (item.filedName == e) {
          props.item.orderFiled = item
          return true
        }
        return false
      })
    })
  } else {
    props.item.orderFiled = null
  }
}

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

watch(
  () => props.item.mapField,
  (val) => {
    // 如果有值，添加脚本
    if (val && props.item.scripts.length == 0) {
      props.item.scripts.push({
        content: '',
        scriptName: ''
      })
    }
  }
)
</script>
<style lang="scss" scoped></style>
