<script setup lang="ts">
import type { TripTemplate } from '../types'
import { ElMessage } from 'element-plus'
import { getTripConnections, bindTripConnections } from '../api'
import type { ConnectionType } from '@/composables/useAllData'
import { useConnection } from '@/composables/useAllData'
import ConnectionIcon from '@/components/ConnectionIcon.vue'

const props = defineProps<{
  data: TripTemplate
}>()

const emit = defineEmits<{
  (e: 'update', value: ConnectionType[]): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const { connectionList } = useConnection()

const multipleSelection = ref<ConnectionType[]>([])

function fetchList() {
  getTripConnections({ itinerary_id: props.data.id }).then(res => {
    multipleSelection.value = res.data.items
  })
}
watchEffect(() => fetchList())

function toggleSelection(data: ConnectionType) {
  const foundIndex = multipleSelection.value.findIndex(item => item.id === data.id)
  foundIndex === -1 ? multipleSelection.value.push(data) : multipleSelection.value.splice(foundIndex, 1)
}

function isActive(data: ConnectionType) {
  return !!multipleSelection.value.find(item => item.id === data.id)
}

// 保存
function handleSave() {
  const ids = multipleSelection.value.map(item => item.id)
  bindTripConnections({ itinerary_id: props.data.id, connection_ids: ids }).then(() => {
    ElMessage({ message: '保存成功', type: 'success' })
    emit('update', multipleSelection.value)
    emit('update:modelValue', false)
  })
}
</script>

<template>
  <el-dialog title="配置连接" width="800px" append-to-body @closed="$emit('update:modelValue', false)">
    <div class="connection-list">
      <div
        class="connection-item"
        v-for="item in connectionList"
        :key="item.id"
        :class="{ 'is-active': isActive(item) }"
        @click="toggleSelection(item)">
        <el-checkbox @change="toggleSelection(item)" :model-value="isActive(item)" />
        <div :class="isActive(item) ? 'connection-item__icon active' : 'connection-item__icon'">
          <ConnectionIcon
            style="transform: translateY(3px)"
            v-if="isActive(item)"
            color="#fff"
            :name="item.type + ''"
            w="20"
            h="20" />
          <ConnectionIcon
            style="transform: translateY(3px)"
            v-else
            :multiColor="true"
            :name="item.type + ''"
            w="20"
            h="20" />
        </div>
        <p :style="`color: ${isActive(item) && '#ba143e'}`">{{ item.name }}</p>
      </div>
    </div>
    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" plain auto-insert-space @click="handleSave">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.connection-item__icon {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
  margin-bottom: 5px;
  &.active {
    background: #ba143e;
    color: #ba143e;
  }
}
.connection-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.connection-item {
  position: relative;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px dashed #bbb;
  cursor: pointer;
  // &.is-active {
  //   background-color: rgb(204 247 131 / 38%);
  // }
  .el-checkbox {
    position: absolute;
    left: 10px;
    top: 0;
  }
}
</style>
