<template>
  <!-- 字段映射设置 -->
  <el-col>
    <el-form-item label="对应字段" prop="mapField">
      <el-select
        v-if="!isVariable"
        v-model="item.mapField"
        style="width: 160px"
        filterable
        placeholder="请选择"
        @change="mapFieldChange"
        clearable
      >
        <el-option
          v-for="item in getAllFields"
          :key="item.filedName"
          :label="item.fliedTitle"
          :value="item.filedName"
          :disabled="!!item.disabled"
        />
      </el-select>
      <el-input v-else v-model="item.mapField" style="width: 160px" />
      <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"
              v-model="sitem.scriptName"
              filterable
              allow-create
              @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" 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>
</template>

<script lang="ts" setup>
import { useExcelChangeStore } 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 = useExcelChangeStore()
const { getAllFields, getScriptList } = storeToRefs(excelChangeStore)

const isVariable = ref(false)

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) => {
      if (items.filedName == e) {
        props.item.orderFiled = items
        return true
      }
      return false
    })
  } else {
    props.item.orderFiled = null
  }
}

const checkboxChange = (e) => {
  // 设置一个属性
  props.item.isVariable = isVariable.value
  props.item.mapField = ''
  props.item.orderFiled = null
}
const removeScript = (index: number) => {
  props.item.scripts.splice(index, 1)
}
const addScript = () => {
  props.item.scripts.push({
    content: '',
    scriptName: ''
  })
}

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

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