<template>
  <div>
    <Search :search="moreSearch" :reset="moreReset">
      <template v-slot:body>
        <el-form-item label="短剧名称">
          <el-input v-model="query.book_name" name="book_name" clearable />
        </el-form-item>
        <el-form-item label="短剧ID">
          <el-input v-model="query.bid" name="bid" clearable />
        </el-form-item>
        <el-form-item label="版权方" v-if="!isShowCp">
          <el-select v-model="query.cp_name" filterable remote clearable :remote-method="remoteMethod"
            placeholder="选择版权方">
            <el-option v-for="item in cpoptions" :key="item.cp_id" :label="item.cp_name" :value="item.cp_name" />
          </el-select>
        </el-form-item>
        <el-form-item label="应结算金额">
          <el-select v-model="query.final_amount_gt0" clearable placeholder="">
            <el-option label="不限制" :value="0" />
            <el-option label="大于0" :value="1" />
          </el-select>
        </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" :default-value="defaultTime2" :shortcuts="shortcuts"
            range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="合作模式" prop="cp_company">
          <el-select v-model="query.book_settlement_type" clearable filterable placeholder="选择合作模式">
            <el-option v-for="(item, index) in cooperations" :key="index" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:extra_button>
        <el-button type="primary" @click="dataExport" size="default">
          <!-- <Icon name="document-arrow-up" className="w-4 h-4 mr-1 -ml-1" /> -->
          导出
        </el-button>
      </template>
    </Search>
    <div style="margin:8px 0;">
      <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <div class="stat-wrapper">
          <div>订阅结算统计看币: <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_total_coins || '暂无数据' }}</span></div>
          <div>订阅的总金额: <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_available_amount || '暂无数据' }}</span>
          </div>
          <div>应结算金额: <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_final_amount || '暂无数据' }}</span></div>
        </div>
      </el-card>
    </div>
    <div class="table-default">
      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column prop="book_name" label="短剧名称" />
        <el-table-column prop="bid" label="短剧ID" />
        <el-table-column prop="cp_name" label="版权方" />
        <el-table-column prop="yesterday_total_coins" label="订单结算看币" />
        <el-table-column prop="yesterday_available_amount" label="充值金额" />
        <el-table-column prop="yesterday_final_amount" label="应结算金额" />
        <el-table-column prop="book_settlement_type_str" label="短剧合作模式" />
        <el-table-column prop="date" label="被结算日期" />
      </el-table>
      <Paginate />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  onMounted,
  ref
} from 'vue';
import {
  useGetList
} from '@/hook/curd/useGetList';
import moment from 'moment';
import { exportExcel } from '@/utils/exportExcel'
import { shortcuts } from '@/utils/shortcuts'
import { cpOptions, subscribeStatisticDataList, subscribeStatisticDataListStatistic } from '@/api/cp/index';
import { useUserStore } from '@/stores/modules/user';

const userStore = useUserStore();

// cp方用户不能有版权方搜索
const isShowCp = computed(() => {
  console.log(userStore.getRoles, 'getRoles');
  return userStore.getRoles?.some(el => (el?.identify == 'cp'))
})

const defaultTime2 = [
  moment().startOf('month'), moment().endOf('month')
]
let cooperations = ref([
  { value: "bottomline", name: "保底" },
  { value: "share", name: "分成" }
]);

const api = 'cpManage/cp/subscribeStatisticData/list';

const start_date = moment().startOf('month').format('YYYY-MM-DD')
const end_date = moment().endOf('month').format('YYYY-MM-DD')



const dataExport = () => {
  let exportTableData = ref([])
  subscribeStatisticDataList({ is_export: 1, ...query.value }).then(res => {
    console.log(res);
    exportTableData.value = res.data
    console.log(res, 'exportTableData', exportTableData.value);
    console.log(start_date, end_date);
    const titleObj = {
      "书名": "book_name",
      "bid": "bid",
      "版权方": "cp_name",
      "订单结算书币": "yesterday_total_coins",
      "订阅金额": "yesterday_available_amount",
      "应结算金额": "yesterday_final_amount",
      "书籍合作模式": "book_settlement_type_str",
      "创建时间": "date",
    };
    if (tableData.value.length > 0) {
      exportExcel(exportTableData.value, `数据中心${moment().format('YYYY-MM-DD HH:mm:ss')}`, titleObj, "数据中心");
    } else {
      ElMessage.warning('暂无数据')
    }
  })
}

const timeChange = (e) => {
  if (query.value.time) {
    const timeArr = toRaw(e);
    query.value.start_date = timeArr[0]
    query.value.end_date = timeArr[1]
  } else {
    delete query.value.start_date
    delete query.value.end_date
  }
}


let { data, query, search, reset, loading } = useGetList(api, true);
let cpoptions = ref([]);

let tableData = computed(() => data.value?.data);
let statisticalData = ref({})

const moreSearch = () => {
  search();
  subscribeStatisticDataListStatistic({ ...query.value }).then(res => {
    statisticalData.value = res.data
  })
}
const moreReset = () => {
  reset()
  subscribeStatisticDataListStatistic({ ...query.value }).then(res => {
    statisticalData.value = res.data
  })
}


const remoteMethod = (query: string) => {
  if (query) {
    console.log(66666);
    initCpOtion({ cp_name: query })
  } else {
    initCpOtion({})
  }
}
const initCpOtion = (params: object) => {
  cpOptions(params).then(res => {
    cpoptions.value = res.data
  })
}

onMounted(() => {
  query.value.time = [start_date, end_date];
  query.value.start_date = start_date;
  query.value.end_date = end_date;
  subscribeStatisticDataListStatistic({ ...query.value }).then(res => {
    statisticalData.value = res.data
  })
  initCpOtion({})
  search();
});

</script>

<style lang="scss" scoped>
.stat-wrapper {
  display: flex;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  .stat {
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 550;
    padding: 0 12px;
  }
}

.set-warpper {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
