<script setup lang="ts">
import { ref, watch } from 'vue'
import IconDropDown from '@/components/IconDropDown'
import SelectTable from '@/components/SelectTable'

interface TypeItem {
  placesType: ''
  placesname: []
}
interface dateoptions {
  value: string
  label: string
}
interface Props {
  AddDateType: TypeItem[]
  ASPlaceholder: string
  DateTypeoptions: dateoptions[]
  selectedPartyTypeoptions: Array<string>
  TablesearchTableQeury: Object
  TablesearchMode: String
}
interface optionsItem {
  value: string
  label: string
}
const props = withDefaults(defineProps<Props>(), {})
const AddType: any = ref([])
const dataTypeoptions = ref<optionsItem[]>([])
const typeSelectIndex = ref(-1)
watch(
  () => props.selectedPartyTypeoptions,
  (newV) => {
    let arr: any = []
    if (newV.length == 0) {
      arr = props.DateTypeoptions
    } else {
      props.DateTypeoptions.forEach((item: any) => {
        let index = newV.findIndex((con: any) => {
          return con == item.value
        })
        if (index < 0) {
          arr.push(item)
        }
      })
    }
    dataTypeoptions.value = arr
  },
  {
    immediate: true,
    deep: true
  }
)

watch(
  () => props.AddDateType,
  (val) => {
    AddType.value = val
  },
  {
    immediate: true,
    deep: true
  }
)

// 删除当前more type
const deleteType = (i: any) => {
  emit('delSelect', i, AddType.value[i].placesType)
  AddType.value.splice(i, 1)
}
// 选中type改变
const changeSelect = (val: any) => {
  emit('changeAutoSelectAddType', typeSelectIndex.value, val)
}
// 选中name改变
const emit = defineEmits(['changeAutoSelectAddType', 'delSelect', 'changeAutoSelect'])
const errorBoolean = ref(false)
let AutoSelectObj: any = {}
const changeAutoSelect = (val: any, value: any) => {
  if (value.length) {
    errorBoolean.value = true
  } else {
    errorBoolean.value = false
  }
  AutoSelectObj[val] = value
  emit('changeAutoSelect', AutoSelectObj, errorBoolean.value)
}
const typeSelectFocus = (index: any, e: any) => {
  typeSelectIndex.value = index
}
const typeSelectBlur = () => {
  typeSelectIndex.value = -1
  let arr: any = []
  if (props.selectedPartyTypeoptions.length == 0) {
    arr = props.DateTypeoptions
  } else {
    props.DateTypeoptions.forEach((item: any) => {
      let index = props.selectedPartyTypeoptions.findIndex((con: any) => {
        return con == item.value
      })
      if (index < 0) {
        arr.push(item)
      }
    })
  }
  dataTypeoptions.value = arr
}
const typeSelectClick = (index: any, val: any) => {
  if (AddType.value[index].placesType) {
    let j = props.DateTypeoptions.findIndex((item: any) => {
      return item.value == AddType.value[index].placesType
    })
    let i = dataTypeoptions.value.findIndex((item: any) => {
      return item.value == AddType.value[index].placesType
    })
    if (i < 0) {
      dataTypeoptions.value.push(props.DateTypeoptions[j])
    }
  } else {
    let arr: any = []
    if (props.selectedPartyTypeoptions.length == 0) {
      arr = props.DateTypeoptions
    } else {
      props.DateTypeoptions.forEach((item: any) => {
        let index = props.selectedPartyTypeoptions.findIndex((con: any) => {
          return con == item.value
        })
        if (index < 0) {
          arr.push(item)
        }
      })
    }
    dataTypeoptions.value = arr
  }
}

const checkdestination = (row: any, index: any) => {
  if (row) {
    AddType.value[index].placesname = row
    changeAutoSelect(AddType.value[index].placesType, AddType.value[index].placesname)
  }
}
</script>
<template>
  <div class="AddType" v-for="(item, index) in AddType" :key="index">
    <div>
      <div class="Date_Title">
        <div class="ETD_title">Places Type</div>
        <span class="iconfont_icon" @click="deleteType(index)">
          <svg class="iconfont icon_delete" aria-hidden="true">
            <use xlink:href="#icon-icon_delete_b"></use>
          </svg>
        </span>
      </div>
      <el-select
        v-model="AddType[index].placesType"
        :suffix-icon="IconDropDown"
        @blur="typeSelectBlur"
        class="testname"
        @focus="typeSelectFocus(index, $event)"
        @click="typeSelectClick(index, $event)"
        @change="changeSelect(AddType[index].placesType)"
        placeholder="Please Select Party Type"
      >
        <el-option
          v-for="item in dataTypeoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div style="margin-top: 16px">
      <div class="ETD_title">Places Details</div>
      <SelectTable
        :ASSearchFiled="AddType[index].placesType"
        :ASSearchObj="props.TablesearchTableQeury"
        :ASSearchMode="props.TablesearchMode"
        :key-val="
          AddType[index].placesType &&
          (AddType[index].placesType === 'Port of Loading' ||
            AddType[index].placesType === 'Port of Discharge')
            ? 'uncode'
            : 'city'
        "
        :is-error="
          AddType[index].placesType != '' && AddType[index].placesname.length == 0 ? true : false
        "
        :disabled="AddType[index].placesType ? false : true"
        :searchInput="AddType[index].placesname"
        @check="(row) => checkdestination(row, index)"
      />

      <div
        class="error"
        v-if="AddType[index].placesType != '' && AddType[index].placesname.length == 0"
      >
        Please Input Places Details
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.AddType {
  background-color: var(--addparties-background-color);
  margin: 0 16px 8px 16px;
  padding: 8px;
  border-radius: var(--border-radius-6);
}

.ETD_title {
  font-size: var(--font-size-2);
  color: var(--color-neutral-2);
}

.Date_Title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon_delete {
  fill: var(--color-danger);
  cursor: pointer;
}

.el-select-dropdown__item.is-selected {
  div {
    color: var(--badge__content--warning);
  }

  background-color: transparent;
}

.el-select-dropdown__item {
  padding-left: 7.7px;
  display: flex;
  align-items: center;
}

.label {
  margin-left: 8px;
}

.el-select-dropdown__item.is-hovering {
  div {
    color: var(--badge__content--warning);
  }
}
.error {
  font-size: 12px;
  color: var(--color-danger);
  line-height: 14px;
  margin-top: 5px;
}
</style>
