<template>
  <div>
    <Search :search="search" :reset="resetQuery">
      <template v-slot:body>
        <el-form-item label="所属账户ID" prop="advertiser_id">
          <el-input v-model="query.advertiser_id" placeholder="请输入所属账户ID" clearable />
        </el-form-item>
      <!--  <el-form-item label="所属账户" prop="advertiser_id">
          <el-select v-model="query.advertiser_id" filterable remote clearable :remote-method="remoteMethod"
            placeholder="选择所属账户">
            <el-option v-for="item in adNameOtion" :key="item.id" :label="item.adv_account_name"
              :value="item.adv_account_id" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="用户ID" prop="uid">
          <el-input v-model="query.uid" placeholder="请输入用户ID" clearable />
        </el-form-item>
        <el-form-item label="广告计划ID" prop="adv_promotion_id">
          <el-input v-model="query.adv_promotion_id" placeholder="请输入广告计划ID" clearable />
        </el-form-item>
        <el-form-item label="染色注册时间">
          <el-date-picker unlink-panels clearable @change="userTimeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            v-model="query.userTime" type="daterange" :shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="充值时间">
          <el-date-picker unlink-panels clearable @change="orderTimeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
            v-model="query.orderTime" type="daterange" :shortcuts="shortcuts" range-separator="To"
            start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
      </template>
      <template v-slot:extra_button>
        <exportExcel api="callback/juliangAccount/log/list" sheet_name="（巨量账户级）回传日志" :title_obj="titleObj"
          :extro_params="{ is_export: true, ...query }">
        </exportExcel>
      </template>
    </Search>
    <div class="table-default">
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="advertiser_id" label="所属账户ID" fixed="left" min-width="200px" />
<!--        <el-table-column label="所属账户" prop="advertiser_name" show-overflow-tooltip fixed="left" min-width="200px">
        </el-table-column> -->
        <el-table-column prop="order_no" show-overflow-tooltip label="订单号" min-width="200px">
        </el-table-column>
        <el-table-column prop="uid" label="用户ID" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="user_ranse_ip" label="注册IP" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="user_ranse_start_at" label="染色注册时间" show-overflow-tooltip min-width="200px" />
        <el-table-column prop="order_created_at" label="充值时间" show-overflow-tooltip min-width="200px" />
        <el-table-column prop="order_price" label="充值金额" show-overflow-tooltip min-width="150px">
        </el-table-column>
        <el-table-column prop="filter_type_str" label="是否回传" show-overflow-tooltip>
          <template #default="scope">
            <div class="wrapper">
              <span class="text-lg font-bold content">
                {{ scope.row.filter_type_str }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="filter_reason" label="备注" show-overflow-tooltip min-width="200px">
        </el-table-column>
        <el-table-column prop="current_rate" label="回传百分比" show-overflow-tooltip min-width="150px">
          <template #header>
            <div class="flex items-center">
              <span>回传百分比</span>
              <el-tooltip placement="top">
                <template #content>
                  回传百分比=已成功回传的订单数（不包括补传）/(比例过滤掉的订单数+成功回传的订单数（不包括补传））*100%</template>
                <el-icon>
                  <InfoFilled />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="config_rate" label="回传配置百分比" show-overflow-tooltip min-width="150px">
        </el-table-column>
        <el-table-column prop="adv_promotion_id" label="广告计划ID" show-overflow-tooltip min-width="150px">
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button @click="openType('repairVisible', scope.row)" link type="primary" size="small"
              v-action="'callback.CallbackLog.callbackAgain'">补传</el-button>
            <br />
            <el-button link type="primary" size="small" @click="openType('backConfigVisible', scope.row)">回传信息</el-button>
            <br />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <el-dialog v-model="repairVisible" destroy-on-close title="补传" draggable width="30%">
      <div>金额： <span class="text-lg font-bold content">{{ repairData.order_price }}</span></div>
      <div>订单号：<span class="text-lg font-bold content">{{ repairData.order_no }}</span></div>
      <template #footer>
        <el-button @click="repairVisible = false">取消</el-button>
        <el-button type="primary" @click="repairChange">
          确定
        </el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="backConfigVisible" destroy-on-close draggable title="回传信息" width="30%">
      <el-form ref="form" :model="backConfigData" label-width="80px">
        <el-form-item label="请求信息">
          <el-input type="textarea" v-model="backConfigData.report_param" :rows="6" disabled></el-input>
        </el-form-item>
        <el-form-item label="请求结果">
          <el-input type="textarea" v-model="backConfigData.report_result" :rows="6" disabled></el-input>
        </el-form-item>
      </el-form>
      <!-- <template #footer>
        <el-button @click="backConfigVisible = false">取消</el-button>
        <el-button type="primary" @click="backConfigVisible = false">
          确定
        </el-button>
      </template> -->
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { shortcuts } from '@/utils/shortcuts'
import { useRouter, useRoute } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue';
import { useGetList } from '@/hook/curd/useGetList';
import { titleObj } from "./excelTitle"
import Cache from '@/support/cache';
import { callbackJuliangAccountList, callbackJuliangAccountLogCallbackAgain } from '@/api/backConfig/index'
import moment from 'moment';
const start_date = moment().format('YYYY-MM-DD')
const end_date = moment().format('YYYY-MM-DD')

const api = 'callback/juliangAccount/log/list';
const router = useRouter()
const route = useRoute()
const { data, query, search, reset, loading } = useGetList(api);
const repairVisible = ref(false)
const repairData = ref({})
const backConfigVisible = ref(false)
const backConfigData = ref({})
const current = ref({})
const adNameOtion = ref([])

const userTimeChange = (e: object) => {
  console.log(e, query.value.userTime, 'timeChangetimeChangetimeChange');
  if (query.value.userTime) {
    const timeArr = toRaw(e);
    query.value.user_ranse_start_at_begin_time = timeArr[0]
    query.value.user_ranse_start_at_end_time = timeArr[1]
  } else {
    delete query.value.user_ranse_start_at_begin_time
    delete query.value.user_ranse_start_at_end_time
  }
}
const orderTimeChange = (e: object) => {
  console.log(e, 'timeChangetimeChangetimeChange');
  if (query.value.orderTime) {
    const timeArr = toRaw(e);
    query.value.order_created_at_begin_time = timeArr[0]
    query.value.order_created_at_end_time = timeArr[1]
  } else {
    delete query.value.order_created_at_begin_time
    delete query.value.order_created_at_end_time
  }
}
//补传
const repairChange = () => {
  callbackJuliangAccountLogCallbackAgain({ log_id: repairData.value.id }).then(res => {
    console.log(res, 'callbackJuliangAccountLogCallbackAgain');
    if (res.data == '补传失败') {
      ElMessage.error(res.data)
    } else if (res.data == '补传成功') {
      ElMessage.success(res.data)
    }
  })
}

const remoteMethod = (query: string) => {
  if (query) {
    initAdNameOtion({ account_name: query })
  } else {
    initAdNameOtion()
  }
}

const initAdNameOtion = (params?: object) => {
  callbackJuliangAccountList({ limit: 30, ...params }).then(res => {
    adNameOtion.value = res.data
  })
}

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

onMounted(() => {
  // query.value.userTime = [start_date, end_date];
  // query.value.user_ranse_start_at_begin_time = start_date
  // query.value.user_ranse_start_at_end_time = end_date
  query.value.orderTime = [start_date, end_date];
  query.value.order_created_at_begin_time = start_date
  query.value.order_created_at_end_time = end_date
  if (JSON.parse(Cache.get('nav_data'))?.app.id) {
    query.value.miniprogram_id = JSON.parse(Cache.get('nav_data'))?.app.id
  }
  initAdNameOtion()
  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>
