<script setup>
import { ElMessage } from 'element-plus'
import { Select } from '@element-plus/icons-vue'
import Icon from '@/components/ConnectionIcon.vue'
import { useConnectionStore } from '../stores/connection'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(2)

const connectionStore = useConnectionStore()

const emit = defineEmits(['submit', 'next'])

function handleClick(item) {
  if (isCheck.value) return
  item.active = !item.active
}

async function handleValidate() {
  const listLength = connectionStore.currentConnections.filter(item => item.active && !item.content).length
  if (listLength) {
    ElMessage.error('请填写完整')
    return Promise.reject()
  }
}

function genFormData() {
  const { connections, activeConnections } = connectionStore

  return { type: 2, detail: { step2: { connections, activeConnections } } }
}

async function handleSubmit() {
  await handleValidate()
  emit('submit', genFormData())
}

async function handleNext() {
  await handleValidate()
  emit('next', genFormData(), isCheck.value)
}
</script>

<template>
  <div class="step-wrapper">
    <div class="h2-title">
      <h2>营销渠道选择</h2>
      <el-button type="primary"><router-link :to="`/user?experiment_id=${$route.query.experiment_id}`" target="_blank">维护用户数据</router-link></el-button>
    </div>
    <div class="connect-list">
      <div class="connect-list-item" v-for="item in connectionStore.currentConnections" :key="item.id" :class="{ 'is-active': item.active }">
        <div class="connect-box connect-box__icon" @click="handleClick(item)">
          <el-icon v-show="item.active"><Select /></el-icon>
          <Icon w="40" h="40" :multiColor="true" class="svg" :name="item.type == 15 ? 'mall' : item.type"></Icon>
          <p>{{ item.type_name }}</p>
        </div>
        <div class="connect-box connect-box__total">
          <p>用户数据量：{{ item.member_count }}</p>
          <p>用户事件数据量：{{ item.event_count }}</p>
        </div>
        <div v-show="item.active">
          <p>*选择原因</p>
          <el-input type="textarea" v-model="item.content" show-word-limit maxlength="100" :rows="3" :disabled="isCheck"></el-input>
        </div>
      </div>
    </div>
    <div class="market-step-footer">
      <el-button @click="handleSubmit" :disabled="isCheck">保存</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.connect-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.connect-list-item {
  width: 300px;
  line-height: 1.4;
  &.is-active {
    color: var(--main-color);
    .connect-box__total {
      color: #fff;
      background-color: var(--main-color);
    }
  }
  p {
    line-height: 30px;
  }
}
.connect-box {
  padding: 10px;
}
.connect-box__icon {
  position: relative;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  .el-icon {
    position: absolute;
    left: 10px;
    top: 10px;
  }
}
.connect-box__total {
  margin: 5px 0;
  text-align: center;
  color: var(--main-color);
}
.connect-box {
  border: 1px dashed #ccc;
}
</style>
