<script setup lang="ts">
import type { ConfigAttribute } from '../types'
import { ElMessage, ElMessageBox } from 'element-plus'
import Icon from '@/components/ConnectionIcon.vue'
import { getConnectionDetails, asyncOfficialAccountInfo, asyncOfficialAccountUsers } from '../api'
const SurveyKingDialog = defineAsyncComponent(() => import('../components/SurveyKingDialog.vue'))

const router = useRouter()
const route = useRoute()

const connectId = computed<string>(() => (route.query.id as string) || '')

const detail = ref<any>()

async function fetchInfo() {
  const res = await getConnectionDetails({ id: connectId.value })
  detail.value = res.data
}
onMounted(fetchInfo)

const attributes = computed<ConfigAttribute[]>(() => {
  let attrs = detail.value.config_attributes || []
  if (typeof attrs === 'string') {
    attrs = JSON.parse(attrs)
  }
  return Array.isArray(attrs) ? attrs : []
})

function getAttributeValueByProp(prop: string) {
  return attributes.value.find((item) => item.prop === prop)?.value || ''
}

const platformList = [
  {
    type: 1,
    type_name: '公众号',
    data: [
      {
        title: '1.从公众号同步',
        children: [
          {
            title: '重新获取公众号信息',
            async onClick() {
              await asyncOfficialAccountInfo({
                connection_id: connectId.value,
                appid: getAttributeValueByProp('appid'),
              })
              ElMessage.success('重新获取公众号信息成功')
            },
          },
          {
            title: '重新获取公众号粉丝',
            async onClick() {
              const nikeName = getAttributeValueByProp('nikeName')
              await ElMessageBox.confirm(
                `同步微信公众号粉丝能够将微信粉丝的最新信息同步到本系统中，您确定现在要开始同步公众号“${nikeName}”的粉丝吗？`,
                '同步微信公众号粉丝'
              )
              await asyncOfficialAccountUsers({
                connection_id: connectId.value,
                appid: getAttributeValueByProp('appid'),
              })
              ElMessage.success(`已经开始同步公众号“${nikeName}”的粉丝，完成时间取决于您公众号的粉丝数量，请耐心等待。`)
            },
          },
          // { title: '获取公众号统计数据', msg: '' },
          // { title: '获取图文群发评论数据', msg: '' }
        ],
      },
      {
        title: '2.向公众号同步',
        children: [{ title: '批量为用户打标签', msg: '' }],
      },
      {
        title: '3.其他设置',
        children: [
          { title: '客服会话设置', msg: '' },
          { title: '删除GDPR数据', msg: '' },
        ],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [
          { title: '关注公众号', msg: '' },
          { title: '留言文本', msg: '' },
          { title: '留言图片', msg: '' },
          { title: '留言语音', msg: '' },
          { title: '留言视频', msg: '' },
          { title: '点击菜单', msg: '' },
          { title: '点击菜单会话选项', msg: '' },
          { title: '扫描二维码', msg: '' },
          { title: '取消关注公众号', msg: '' },
          { title: '用户领取卡券', msg: '' },
          { title: '用户转赠卡券', msg: '' },
          { title: '用户核销卡券', msg: '' },
          { title: '用户删除卡券', msg: '' },
        ],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [
          { title: '发送文本', msg: '' },
          { title: '发送模版消息', msg: '' },
          { title: '发送菜单会话', msg: '' },
          { title: '发送微信图文', msg: '' },
          { title: '发送H5', msg: '' },
          { title: '发送一人一码', msg: '' },
          { title: '发送小程序', msg: '' },
          { title: '发送图片', msg: '' },
          { title: '发送微信语音', msg: '' },
          { title: '发送微信视频', msg: '' },
          { title: '发送卡券', msg: '' },
        ],
      },
    ],
  },
  {
    type: 2,
    type_name: '钉钉',
    data: [
      {
        title: '1.从钉钉同步',
        children: [{ title: '获取用户信息', msg: '' }],
      },
      {
        title: '2.向钉钉同步',
        children: [{ title: '导入用户信息', msg: '' }],
      },
      {
        title: '3.其他设置',
        children: [{ title: '访问钉钉官方网站', msg: '' }],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [{ title: '发送消息', msg: '' }],
      },
    ],
  },
  {
    type: 3,
    type_name: '小鹅通',
    data: [
      {
        title: '1.从小鹅通同步',
        children: [
          { title: '消息推送', msg: '' },
          { title: '同步历史用户', msg: '' },
          { title: '同步直播学员签到事件', msg: '' },
        ],
      },
      {
        title: '2.向小鹅通同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [
          { title: '访问小鹅通官方网站', msg: '' },
          { title: '配置用户属性字段映射', msg: '' },
          { title: '配置事件属性字段映射', msg: '' },
          { title: '配置信息采集表单字段映射', msg: '' },
        ],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [{ title: '新用户注册', msg: '' }],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [],
      },
    ],
  },
  {
    type: 4,
    type_name: '问卷星',
    data: [
      {
        title: '1.从问卷星同步',
        children: [{ title: '同步填写者信息', msg: '' }],
      },
      {
        title: '2.向问卷星同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [
          { title: '访问问卷星官方网站', msg: '' },
          { title: '管理表单字段映射', msg: '' },
        ],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [{ title: '提交表单', msg: '' }],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [],
      },
    ],
  },
  {
    type: 5,
    type_name: '今日头条',
    data: [
      {
        title: '1.从今日头条同步',
        children: [
          { title: '同步头条推广基础数据', msg: '' },
          { title: '同步头条推广展点消数据', msg: '' },
        ],
      },
      {
        title: '2.向今日头条同步',
        children: [
          { title: '飞鱼线索表格导入', msg: '' },
          { title: '设置返点系数', msg: '' },
        ],
      },
      {
        title: '3.其他设置',
        children: [
          { title: '访问今日头条投放管理平台', msg: '' },
          { title: '广告效果分析', msg: '' },
        ],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [],
      },
    ],
  },
  {
    type: 6,
    type_name: '抖音',
    data: [
      {
        title: '1.从抖音同步',
        children: [
          { title: '获取用户视频情况', msg: '' },
          { title: '获取用户粉丝数', msg: '' },
          { title: '获取用户点赞数', msg: '' },
          { title: '获取用户分享数', msg: '' },
          { title: '获取用户主页访问数', msg: '' },
          { title: '获取用户信息', msg: '' },
        ],
      },
      {
        title: '2.向抖音同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [
          { title: '用户发送文本私信', msg: '' },
          { title: '用户发送表情私信', msg: '' },
          { title: '用户发送卡片私信', msg: '' },
          { title: '在主页Tab提交预约', msg: '' },
        ],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [
          { title: '向用户发送文本私信', msg: '' },
          { title: '向用户发送图片私信', msg: '' },
          { title: '向用户发送视频私信', msg: '' },
        ],
      },
    ],
  },
  {
    type: 7,
    type_name: '微博',
    data: [
      {
        title: '1.从微博同步',
        children: [
          { title: '获取用户信息', msg: '' },
          { title: '获取用户私信数', msg: '' },
          { title: '获取用户关注数', msg: '' },
        ],
      },
      {
        title: '2.向微博同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [
          { title: '关注微博', msg: '' },
          { title: '发送私信', msg: '' },
        ],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [
          { title: '发送私信', msg: '' },
          { title: '发送图片', msg: '' },
        ],
      },
    ],
  },
  {
    type: 8,
    type_name: '小红书',
    data: [
      {
        title: '1.从小红书同步',
        children: [
          { title: '获取小红书用户信息', msg: '' },
          { title: '获取主页粉丝数', msg: '' },
          { title: '获取主页赞藏数', msg: '' },
          { title: '获取用户笔记总数', msg: '' },
          { title: '获取笔记收藏数', msg: '' },
          { title: '获取笔记评论数', msg: '' },
          { title: '获取笔记点赞数', msg: '' },
          { title: '获取笔记转发数', msg: '' },
        ],
      },
      {
        title: '2.向小红书同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [
          { title: '被用户关注', msg: '' },
          { title: '主页被点赞', msg: '' },
          { title: '主页被收藏', msg: '' },
          { title: '笔记被点赞', msg: '' },
          { title: '笔记被收藏', msg: '' },
          { title: '笔记被转发', msg: '' },
        ],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [],
      },
    ],
  },
  {
    type: 9,
    type_name: '邮箱',
    data: [
      {
        title: '1.从邮件同步',
        children: [],
      },
      {
        title: '2.向邮件同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [{ title: '发送邮件', msg: '' }],
      },
    ],
  },
  {
    type: 10,
    type_name: '短信',
    data: [
      {
        title: '1.从短信同步',
        children: [],
      },
      {
        title: '2.向短信同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [
          { title: '管理签名', msg: '' },
          { title: '管理模板', msg: '' },
        ],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [{ title: '发送短信', msg: '' }],
      },
    ],
  },
  {
    type: 11,
    type_name: '内部消息',
    data: [
      {
        title: '1.从内部消息同步',
        children: [],
      },
      {
        title: '2.向内部消息同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [],
      },
      {
        title: '5.客户旅程能力：执行动作',
        children: [{ title: '发送内部消息', msg: '' }],
      },
    ],
  },
  {
    type: 12,
    type_name: '自定义',
    data: [
      {
        title: '1.从自定义同步',
        children: [
          { title: 'IOS移动应用接入', msg: '' },
          { title: '安卓移动应用接入', msg: '' },
          { title: 'JS SDK接入', msg: '' },
          { title: '同步链接用户', msg: '' },
          { title: '同步链接事件', msg: '' },
        ],
      },
      {
        title: '2.向自定义同步',
        children: [],
      },
      {
        title: '3.其他设置',
        children: [
          { title: '自定义图元', msg: '' },
          { title: '事件元数据', msg: '' },
          { title: '删除用户', msg: '' },
        ],
      },
      {
        title: '4.客户旅程能力：触发条件',
        children: [
          { title: '访问网页', msg: '' },
          { title: '激活APP', msg: '' },
          { title: '启动APP', msg: '' },
          { title: '退出APP', msg: '' },
          { title: '展示APP页面', msg: '' },
          { title: '点击APP元素', msg: '' },
          { title: '退出APP页面', msg: '' },
          { title: '离开网页', msg: '' },
        ],
      },

      {
        title: '5.客户旅程能力：执行动作',
        children: [],
      },
    ],
  },
  {
    type: 13,
    type_name: '紫荆表单',
    data: [
      {
        title: '',
        children: [
          {
            title: '访问紫荆表单网站',
            onClick() {
              surveyKingDialogVisible.value = true
              // window.open('https://surveyking.ezijing.com/')
            },
          },
          {
            title: '管理表单自动映射',
            onClick() {
              router.push({ path: 'view/surveyking', query: route.query })
            },
          },
        ],
      },
    ],
  },
  {
    type: 14,
    type_name: '小程序',
    data: [],
  },
  {
    type: 15,
    type_name: '紫荆商城',
    data: [
      {
        title: '',
        children: [
          {
            title: '访问紫荆商城',
            onClick() {
              window.open(
                `https://mall-h5-web.ezijing.com?id=${route.query.id}&experiment_id=${route.query.experiment_id}`
              )
            },
          },
        ],
      },
    ],
  },
  {
    type: 16,
    type_name: '视频号',
    data: [
      {
        title: '1.从视频号同步',
        children: [],
      },
      {
        title: '2.向视频号同步',
        children: [],
      },
      {
        title: '3.客户旅程能力：触发条件',
        children: [],
      },

      {
        title: '5.客户旅程能力：执行动作',
        children: [{ title: '推送视频号视频', msg: '' }],
      },
    ],
  },
]

const platformDataList = computed(() => {
  return platformList.find((item) => item.type == detail.value?.type)?.data || []
})

function handleClick(item: any) {
  item.onClick && item.onClick()
}

const iconMap: Record<string, string> = {
  '13': '99',
  '14': '100',
  '16': 'wechatVideo',
}
const surveyKingDialogVisible = ref<boolean>(false)
</script>

<template>
  <AppCard title="查看链接">
    <div class="view-info" v-if="detail">
      <div class="view-info_icon">
        <Icon
          :multiColor="true"
          :name="detail.type === '15' ? 'mall' : iconMap[detail.type] || detail.type"
          w="50"
          h="50" />
      </div>
      <div class="view-info_content">
        <p>连接名称：{{ getAttributeValueByProp('name') || detail.type_name }}</p>
        <template v-if="detail.type === '1' || detail.type === '14'">
          <p>公众号类型：{{ getAttributeValueByProp('level') }}</p>
          <p>授权方：{{ getAttributeValueByProp('nikeName') }}</p>
        </template>
        <p>创建人：{{ detail.created_operator_name }}</p>
        <p>创建时间：{{ detail.created_time }}</p>
      </div>
    </div>
  </AppCard>
  <AppCard title="链接能力">
    <el-tabs class="tabs-box" v-for="(item, index) in platformDataList" :key="index">
      <el-tab-pane :label="item.title">
        <div class="tag-box" v-if="item.children.length">
          <div class="tag" v-for="cItem in item.children" :key="cItem.title" @click="handleClick(cItem)">
            {{ cItem.title }}
          </div>
        </div>
        <div class="tag-null" v-else>无数据</div>
      </el-tab-pane>
    </el-tabs>
  </AppCard>
  <SurveyKingDialog
    v-model="surveyKingDialogVisible"
    :account="getAttributeValueByProp('account')"
    :password="getAttributeValueByProp('password')"
    v-if="detail?.type === '13'"></SurveyKingDialog>
</template>

<style lang="scss">
.tabs-box {
  .el-tabs__item {
    &.is-active {
      color: #000;
    }
  }
  .el-tabs__active-bar {
    display: none;
  }
  .tag-box {
    display: flex;
    flex-wrap: wrap;
  }
  .tag {
    margin-right: 10px;
    margin-bottom: 10px;
    width: 240px;
    line-height: 30px;
    border-radius: 8px;
    color: #fff;
    background: #aa1941;
    text-align: center;
    cursor: pointer;
  }
  .tag-null {
    width: 240px;
    line-height: 30px;
    border-radius: 8px;
    color: #fff;
    background: #aaaaaa;
    text-align: center;
    cursor: pointer;
  }
}
.view-info {
  display: flex;
  .view-info_icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    // border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
  }
  .view-info_content {
    margin-left: 20px;
    display: flex;
    align-items: center;
    p {
      // margin-bottom: 10px;
      margin-right: 30px;
    }
  }
}
.mr-1 {
  margin-right: 10px;
  margin-bottom: 10px;
}
.tabs-box {
  margin-bottom: 20px;
}
</style>
