<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 min-width="200px">
                <template #default="scope">
                  <div class="wrapper">
                    <span class="text-lg 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="miniprogram_name" label="小程序名称" min-width="200px" />
              <el-table-column prop="total_episode_num" label="入口章节" min-width="200px">
                <template #default="scope">
                  <div class="wrapper">
                    <span class="text-lg 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="复制链接" min-width="200px">
                <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.status">
                    <div>
                      <el-popover placement="top" title="推广链接" :width="500" trigger="hover"
                        v-if="scope.row.promotion_path" :content="scope.row.promotion_path">
                        <template #reference>
                          <copy-button :text="scope.row.promotion_path" class="mb-6">
                            <el-link type="primary" :underline="false">点击复制推广链接</el-link>
                          </copy-button>
                        </template>
                      </el-popover>
                    </div>
                    <div>
                      <el-popover placement="top" title="监测链接" :width="500" trigger="hover" v-if="scope.row.track_url"
                        :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>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="callback_type_str" label="回传类型" />
              <el-table-column prop="callback_config_id" label="回传配置ID" min-width="160px">
                <template #default="scope">
                  <el-button link type="primary" size="default" @click="goToTtHuicHuan(scope.row)">{{
                    scope.row.callback_config_id }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="status_str" label="状态">
                <template #header>
                  <div class="flex items-center">
                    <span>状态</span>
                    <el-tooltip placement="top">
                      <template #content>
                        当前推广链接的状态<br />
                        启用：当前推广ID已绑定回传配置<br />
                        禁用：当前推广ID未绑定回传配置
                      </template>
                      <el-icon>
                        <InfoFilled />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
                <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="total_episode_num" label="充值模板" min-width="130px">
                <template #default="scope">
                  <el-button v-if="scope.row.first_charge_template_str || scope.row.not_first_charge_template_str" link
                    type="primary" size="default" @click="openDetail(scope.row)">充值模板详情</el-button>
                </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="操作" fixed="right">
                <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="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="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 prop="total_episode_num" label="充值模板" min-width="130px">
                <template #default="scope">
                  <el-button v-if="scope.row.first_charge_template_str || scope.row.not_first_charge_template_str" link
                    type="primary" size="default" @click="openDetail(scope.row)">充值模板详情</el-button>
                </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>

    <el-dialog v-model="dialogVisible" title="充值模板详情" width="85%">
      <div class="flex items-center justify-center">
        <el-card class="w-full mr-16 box-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>首充模板</span>
            </div>
          </template>
          <div class="w-full device-wrap" style="margin:0 auto;">
            <div class="md-iphone-5 md-white-device">
              <div class="md-body">
                <div class="md-buttons"></div>
                <div class="md-front-camera"></div>
                <div class="md-top-speaker"></div>
                <div class="md-screen">
                  <img src="@/assets/pay-config-bg.jpg" alt="" />
                  <div class="preview-list">
                    <div class="pay-item" v-for="(row, i) in detailData?.firstTemplate" :key="i"
                      :class="[row.is_default == 1 ? 'defalut' : '']">
                      <p>{{ row.price }}元</p>
                      <p v-show="row.given">多送{{ row.given }}看币</p>
                      <div class="tipss">{{ gearsName[row.type] }}</div>
                    </div>
                  </div>
                </div>
                <button class="md-home-button"></button>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="w-full box-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>非首充模板</span>
            </div>
          </template>
          <div class="w-full device-wrap" style="margin:0 auto;">
            <div class="md-iphone-5 md-white-device">
              <div class="md-body">
                <div class="md-buttons"></div>
                <div class="md-front-camera"></div>
                <div class="md-top-speaker"></div>
                <div class="md-screen">
                  <img src="@/assets/pay-config-bg.jpg" alt="" />
                  <div class="preview-list">
                    <div class="pay-item" v-for="(row, i) in detailData?.notFirstTemplate" :key="i"
                      :class="[row.is_default == 1 ? 'defalut' : '']">
                      <p>{{ row.price }}元</p>
                      <p v-show="row.given">多送{{ row.given }}看币</p>
                      <div class="tipss">{{ gearsName[row.type] }}</div>
                    </div>
                  </div>
                </div>
                <button class="md-home-button"></button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </el-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'
import { channelPaytemplateShow } from '@/api/charge/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 dialogVisible = ref(false)
const detailData = ref({ firstTemplate: [], notFirstTemplate: [] })
const titleBack = computed(() => activeName.value ? '更新回传配置' : '回传配置')
const gearsName = ref({
  FIRST_COIN: "首充",
  COIN: "普通充值",
  YEAR: "包年",
  QUARTER: "包季",
  MONTH: "包月",
})

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 openDetail = (row: object) => {
  current.value = row;
  channelPaytemplateShow(row.first_charge_template_id).then(res => {
    dialogVisible.value = true;
    detailData.value.firstTemplate = res.data.template_item_list
  })
  channelPaytemplateShow(row.not_first_charge_template_id).then(res => {
    dialogVisible.value = true;
    detailData.value.notFirstTemplate = res.data.template_item_list
  })
  console.log(detailData.value, 'detailData.valuedetailData.value');
}

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: query.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;
    }
  }
}

.device-wrap {
  width: 350px;
  margin-left: 20px;
  margin-top: 20px;

  img {
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .preview-list {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    padding: 15px;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
  }

  .pay-item {
    width: 46%;
    margin-right: 4%;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: #e6e6e6;
    border-radius: 10px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;

    &.defalut {
      border: 1px solid #fd555d;
    }

    .tipss {
      position: absolute;
      right: 0;
      height: 20px;
      line-height: 20px;
      top: 0;
      padding: 0 4px;
      background-color: #fd555d;
      color: #fff;
      font-size: 12px;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }

    p {
      width: 100%;
      line-height: 20px;
      color: #000;
      font-size: 12px;
      text-align: center;

      &:first-child {
        font-size: 14px;
        font-weight: bold;

        span {
          display: inline-block;
          padding: 0 2px;
          background: #fd555d;
          color: #fff;
          font-size: 10px;
          margin-left: 5px;
          vertical-align: top;
          transform: scale(0.8);
        }
      }

      &:last-child {
        color: #666;
      }
    }
  }
}
</style>
