<template>
  <div>
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="cp名称" prop="cp_name">
          <el-input v-model="query.cp_name" name="cp_name" clearable />
        </el-form-item>
        <el-form-item label="所属公司" prop="cp_company">
          <el-input v-model="query.cp_company" name="cp_company" clearable />
        </el-form-item>
      </template>
    </Search>
    <div class="table-default">
      <Operate :show="open" v-action="'cpManage.cpList.store'" />

      <el-table :data="tableData" class="mt-3" v-loading="loading">
        <el-table-column type="index" width="100" label="序号" />
        <el-table-column prop="cp_id" label="cp_id" />
        <el-table-column prop="cp_name" label="cp名称" />
        <el-table-column prop="cp_nick" label="cp简称" />
        <el-table-column prop="cp_company" label="所属公司" />
        <el-table-column prop="book_count" label="采集数量" />
        <el-table-column prop="share_per" label="结算比例" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button v-action="'cpManage.cpList.cpCollection'" @click="syncCp(scope.row)" type="primary" link
              size="small">同步CP书籍</el-button><br>
            <el-button v-action="'cpManage.cpList.update'" @click="open(scope.row.cp_id)" type="primary" link
              size="small">编辑</el-button><br>
            <el-button v-action="'cpManage.cpSettle.index'" @click="goToSettle(scope.row.cp_id, scope.row.cp_name)"
              type="primary" link size="small">结算列表</el-button><br>
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>
    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(search)" :primary="id" :api="api" />
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  onMounted,
} from 'vue';
import router from '@/router'
import Create from './form/create.vue';
import {
  useGetList
} from '@/hook/curd/useGetList';
import {
  useDestroy
} from '@/hook/curd/useDestroy';
import {
  useOpen
} from '@/hook/curd/useOpen';
import { cpCpCollection } from '@/api/cp/index'

const api = 'cpManage/cp/manage/cp_list';

const syncCp = (row: object) => {
  console.log(row);
  const params = {
    cp_id: row.cp_id,
    cp_name: row.cp_name
  }
  cpCpCollection(params).then(res => {
    console.log(res);
    ElMessage.success(res.message)
    const timer = setTimeout(() => {
      ElMessageBox({
        title: '提示',
        message: '同步cp书籍任务已经建立，因书籍数量不同，执行时间有几分钟到几十分钟的延迟进入书籍列表！',
        type: 'warning'
      })
      clearTimeout(timer)
    }, 500)

  })

}

const goToSettle = (cp_id = 0, cp_name = '') => {
  router.push({ path: '/cpManage/cpSettle', params: { cp_id: cp_id, cp_name } })
}
const { data, query, search, reset, loading } = useGetList(api);
const { deleted } = useDestroy();

const tableData = computed(() => data.value?.data);
const { open, close, title, visible, id } = useOpen();

onMounted(() => {
  search();
  deleted(search);
});
</script>
