<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handChange">
        <el-tab-pane label="已配置回传" :name="1">
          <Search :search="search" :reset="resetQuery">
            <template v-slot:body>
              <el-form-item label="推广名称" prop="name">
                <el-input v-model="query.name" placeholder="请输入推广名称" clearable />
              </el-form-item>
              <el-form-item label="推广短剧名称" prop="video_name">
                <el-input v-model="query.video_name" placeholder="请输入推广短剧名称" clearable />
              </el-form-item>
              <el-form-item label="推广ID" prop="id">
                <el-input v-model="query.id" placeholder="请输入推广ID" clearable />
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker unlink-panels clearable @change="timeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                  v-model="query.time" type="daterange" :shortcuts="shortcuts" range-separator="To"
                  start-placeholder="开始时间" end-placeholder="结束时间" />
              </el-form-item>
            </template>
          </Search>
          <div class="table-default">
            <el-table :data="tableData" class="mt-3" v-loading="loading">
              <el-table-column prop="id" label="推广ID" />
              <el-table-column label="推广名称" show-overflow-tooltip>
                <template #default="scope">
                  <div class="wrapper">
                    <span class="text-lg font-bold text-blue-400 content">
                      {{ scope.row.name }}
                    </span>
                  </div>
                  <div class="wrapper">
                    <span class="label">创建时间:</span>
                    <span class="content">{{ scope.row.created_at }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="total_episode_num" label="入口章节">
                <template #default="scope">
                  <div class="wrapper">
                    <span class="text-lg font-bold text-blue-400 content">
                      {{ scope.row.video_name }}
                    </span>
                  </div>
                  <div class="wrapper">
                    <span class="content">{{ scope.row.series_sequence_name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="total_episode_num" label="推广链接">
                <template #header>
                  <div class="flex items-center">
                    <span>推广链接</span>
                    <el-tooltip placement="top">
                      <template #content>鼠标移动到【点击复制】文字，进行查看链接，点击，进行复制链接</template>
                      <el-icon>
                        <InfoFilled />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <template #default="scope">
                  <div class="wrapper" v-if="scope.row.promotion_path">
                    <el-popover placement="top" title="推广链接" :width="500" trigger="hover"
                      :content="scope.row.promotion_path">
                      <template #reference>
                        <copy-button :text="scope.row.promotion_path">
                          <el-link type="primary" :underline="false">点击复制</el-link>
                        </copy-button>
                      </template>
                    </el-popover>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="total_episode_num" label="监测链接">
                <template #header>
                  <div class="flex items-center">
                    <span>监测链接</span>
                    <el-tooltip placement="top">
                      <template #content>鼠标移动到【点击复制】文字，进行查看链接，点击，进行复制链接</template>
                      <el-icon>
                        <InfoFilled />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <template #default="scope">
                  <div class="wrapper" v-if="scope.row.track_url">
                    <el-popover placement="top" title="监测链接" popper-style="width:80%" trigger="hover"
                      :content="scope.row.track_url">
                      <template #reference>
                        <copy-button :text="scope.row.track_url">
                          <el-link type="primary" :underline="false">点击复制</el-link>
                        </copy-button>
                      </template>
                    </el-popover>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="callback_type_str" label="回传类型" />
              <el-table-column prop="callback_config_id" label="回传配置ID" >
				  <template #default="scope">
				  	   <el-button link type="primary" size="small" @click="goToTtHuicHuan( scope.row)" >{{scope.row.callback_config_id}}</el-button>
				   </template>
			  </el-table-column>
              <el-table-column prop="status_str" label="状态">
                <template #default="scope">
                  <div class="wrapper">
                    <span class="text-lg font-bold content">
                      <el-text class="mx-1" :type="colorType(scope.row)">{{ scope.row.status_str }}</el-text>
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="callback_config_id" label="备注">
                <template #default="scope">
                  <div class="wrapper">
                    <span class="content">{{ scope.row.remark }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button @click="openType('promotionVisible', scope.row)" link type="primary"
                    v-action="'tuiguang.Promotion.updateSeriesSequence'" size="small">编辑</el-button>
                  <br />
                  <el-button link type="primary" size="small" @click="deletePromotion(scope.row)"
                    v-action="'tuiguang.Promotion.delete'">删除</el-button>
                  <br />
                </template>
              </el-table-column>
            </el-table>
            <Paginate />
          </div>
        </el-tab-pane>
        <el-tab-pane label="未配置回传" :name="0">
          <div class="table-default">
            <el-table :data="tableData" class="mt-3" v-loading="loading">
              <el-table-column prop="id" label="推广ID" />
              <el-table-column label="推广名称" show-overflow-tooltip>
                <template #default="scope">
                  <div class="wrapper">
                    <span class="text-lg font-bold text-blue-400 content">
                      {{ scope.row.name }}
                    </span>
                  </div>
                  <div class="wrapper">
                    <span class="label">创建时间:</span>
                    <span class="content">{{ scope.row.created_at }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="total_episode_num" label="入口章节">
                <template #default="scope">
                  <div class="wrapper">
                    <span class="text-lg font-bold text-blue-400 content">
                      {{ scope.row.video_name }}
                    </span>
                  </div>
                  <div class="wrapper">
                    <span class="content">第{{ scope.row.series_sequence }}集</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button @click="openType('promotionVisible', scope.row)" link type="primary"
                    v-action="'tuiguang.Promotion.updateSeriesSequence'" size="small">编辑</el-button>
                  <br />
                  <el-button link type="primary" size="small" @click="deletePromotion(scope.row)"
                    v-action="'tuiguang.Promotion.delete'">删除</el-button>
                  <br />
                  <el-button link type="primary" size="small" @click="openType('backConfigVisible', scope.row)"
                    v-action="'tuiguang.Promotion.updateCallbackConfig'">回传配置</el-button>
                </template>
              </el-table-column>
            </el-table>
            <Paginate />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <Dialog v-model="promotionVisible" title="编辑推广链接" destroy-on-close>
      <Create @close="closeType('promotionVisible')" :primary="promotionData" />
    </Dialog>
    <Dialog v-model="backConfigVisible" width="50%" :title="titleBack" destroy-on-close>
      <backConfig @close="closeType('backConfigVisible')" :primary="backConfigData"></backConfig>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { shortcuts } from '@/utils/shortcuts'
import { useRouter, useRoute } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue';
import Create from './form/create.vue';
import backConfig from './form/backConfig.vue';
import { useGetList } from '@/hook/curd/useGetList';
import Cache from '@/support/cache';
const activeName = ref(1)
import { tuiguangPromotionDel } from '@/api/promotion/index'
const api = 'tuiguang/promotion/list';
const router = useRouter()
const route = useRoute()
const { data, query, search, reset, loading } = useGetList(api);
const promotionVisible = ref(false)
const promotionData = ref({})
const backConfigVisible = ref(false)
const backConfigData = ref({})
const current = ref({})
const titleBack = computed(() => activeName.value ? '更新回传配置' : '回传配置')
const colorType = (data: object) => {
  const type = data.status
  switch (type) {
    case 1:
      return 'success'
    case 0:
      return 'danger'
  }
}
const timeChange = (e) => {
  if (query.value.time) {
    const timeArr = toRaw(e);
    query.value.start_time = timeArr[0]
    query.value.end_time = timeArr[1]
  } else {
    delete query.value.start_time
    delete query.value.end_time
  }
}

const goToTtHuicHuan = (row: object) =>{
	 router.push({ path: '/payback/juliangAccount', query: { id:row.callback_config_id } })
}
const handChange = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  router.push({ path: '/promotion/promotionList', query: { tab } })
  activeName.value = tab
  query.value.is_config = tab
  search()
}

const deletePromotion = (row: object) => {
  ElMessageBox.confirm(
    `确定要删除 ${row.name} 吗?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      tuiguangPromotionDel({ id: row.id }).then(res => {
        ElMessage.success(res.message)
        search()
        console.log(res);
      })
    })
    .catch(() => {

    })
}

const resetQuery = () => {
  query.value = Object.assign({ page: query.value.page, limit: query.value.limit, miniprogram_id: query.value.miniprogram_id, is_config: query.value.is_config,id:value.id });
  search()
}
const openType = (type: string, data: object) => {
  current.value = data;
  switch (type) {
    case 'promotionVisible':
      promotionVisible.value = true
      promotionData.value = data
      break;
    case 'backConfigVisible':
      backConfigVisible.value = true
      backConfigData.value = data
      break;
  }
}
const tableData = computed(() => data.value?.data);

const closeType = (type: string) => {
  console.log(type, 'typetype');
  switch (type) {
    case 'promotionVisible':
      promotionVisible.value = false
      break;
    case 'backConfigVisible':
      backConfigVisible.value = false
      ElMessageBox.alert('去复制推广链接', '配置完成', {
        draggable: true,
        confirmButtonText: '确认',
        closeOnClickModal: true,
        callback: (action: any) => {
          console.log(action);
          if (action == 'confirm') {
            router.push({ path: '/promotion/promotionList', query: { tab: 1 } })
            activeName.value = 1
          }
        },
      })
      break;
  }
  search()
}

onMounted(() => {
  activeName.value = Number(route.query.tab || 1)
  query.value.is_config = activeName.value
  query.value.id = route.query.id 
  if (JSON.parse(Cache.get('nav_data'))?.app.id) {
    query.value.miniprogram_id = JSON.parse(Cache.get('nav_data'))?.app.id
  }
  search();
});
</script>

<style scoped lang="scss">
.table-default {
  .set-warpper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .wrapper {
    margin: 8px;

    .label {
      margin-right: 6px;
    }

    .content {
      font-size: 15px;
    }
  }
}
</style>
