<template>
  <ele-page flex-table>
    <book-search @search="reload"></book-search>

    <common-table
      ref="pageRef"
      :pageConfig="pageConfig"
      :columns="columns"
      :tools="false"
    >
      <template #toolbar>
        <el-radio-group @change="handleStatusChange" v-model="useStatus">
          <el-radio-button label="库存收满预警" value="0" />
          <el-radio-button label="库存已收满" value="1" />
        </el-radio-group>

        <span class="ml-8"></span>
        <el-button
          type="success"
          plain
          v-permission="'recycle:priceAlert:batchAddBooklist'"
          @click="handleOptBooklist()"
        >
          加入回收书单
        </el-button>
        <el-button
          type="warning"
          plain
          v-permission="'recycle:priceAlert:batchRemoveBlacklist'"
          @click="handleOptBlacklist()"
        >
          移除黑名单
        </el-button>
        <el-button
          type="danger"
          plain
          v-permission="'recycle:priceAlert:batchAddBlacklist'"
          @click="handleOptBlacklist()"
        >
          加黑名单
        </el-button>

        <el-button
          type="warning"
          plain
          v-permission="'recycle:priceAlert:batchPauseRecycle'"
          @click="handleOptRecycle()"
        >
          暂停回收
        </el-button>

        <el-button
          type="success"
          plain
          v-permission="'recycle:priceAlert:batchAddSocial'"
          @click="handleOptType(1)"
        >
          加社科库
        </el-button>
        <el-button
          color="#192bbe"
          plain
          v-permission="'recycle:priceAlert:batchAddTeach'"
          @click="handleOptType(2)"
        >
          加教材库
        </el-button>
        <el-button
          type="success"
          plain
          v-permission="'recycle:priceAlert:exprot'"
          @click="handleExportExcel()"
        >
          导出Excel
        </el-button>
      </template>

      <template #cover="{ row }">
        <el-image
          style="width: 90px; height: 120px; border-radius: 4px"
          fit="cover"
          :src="row.cover"
        />
      </template>
      <template #baseInfo="{ row }">
        <div class="flex justify-start items-center">
          <div style="flex: 2">
            <book-info :row="row"></book-info>
          </div>
          <div style="flex: 1.5; margin-left: 15px">
            <book-other-info :row="row"></book-other-info>
          </div>
        </div>
      </template>

      <template #action="{ row }">
        <el-button
          type="danger"
          link
          v-permission="'recycle:priceAlert:delete'"
          @click="handleDelete(row)"
        >
          [删除]
        </el-button>
        <el-button
          type="danger"
          link
          v-permission="'recycle:priceAlert:deal'"
          @click="handleDelete(row)"
        >
          [去处理]
        </el-button>
        <el-button
          type="warning"
          link
          v-permission="'recycle:priceAlert:dealLog'"
          @click="handleDelete(row)"
        >
          [处理日志]
        </el-button>
        <el-button
          type="success"
          link
          v-permission="'recycle:priceAlert:remind'"
          @click="handleModifyType(row)"
        >
          [一个月后提醒]
        </el-button>
      </template>
    </common-table>
  </ele-page>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import CommonTable from '@/components/CommonPage/CommonTable.vue';
  import bookSearch from '@/views/recycle/components/book-search.vue';
  import bookInfo from '@/views/recycle/components/book-info.vue';
  import bookOtherInfo from '@/views/recycle/components/book-other-info.vue';
  import { useDictData } from '@/utils/use-dict-data';

  defineOptions({ name: 'priceAlert' });
  const [useStatusDicts, bookTagDicts] = useDictData([
    'use_status',
    'book_tag_ku'
  ]);

  const useStatus = ref('0');
  function handleStatusChange(value) {
    pageRef.value.reload({ useStatus: value });
  }

  /** 表格列配置 */
  const columns = ref([
    {
      type: 'selection',
      columnKey: 'selection',
      width: 50,
      align: 'center',
      fixed: 'left'
    },
    {
      label: '图片',
      prop: 'cover',
      width: 120,
      slot: 'cover'
    },
    {
      label: '信息',
      prop: 'baseInfo',
      width: 540,
      slot: 'baseInfo'
    },
    { label: '回收折扣', prop: 'discount' },
    { label: '预估金额', prop: 'price' },
    { label: '最大回收量', prop: 'maxRecycledAmount' },
    { label: '当前剩余回收量', prop: 'remainingRecycledAmount' },
    { label: '预警次数', prop: 'alertNum' },
    { label: '销量', prop: 'salesVolume' },
    {
      columnKey: 'action',
      label: '操作',
      width: 120,
      slot: 'action',
      fixed: 'right'
    }
  ]);

  /** 页面组件实例 */
  const pageRef = ref(null);

  const pageConfig = reactive({
    pageUrl: '/book/bookInfo/list',
    exportUrl: '/book/bookInfo/export',
    fileName: '回收价格预警',
    cacheKey: 'priceAlertTable'
  });

  //刷新表格
  function reload(where) {
    pageRef.value?.reload(where);
  }

  //导出excel
  function handleExportExcel() {
    pageRef.value?.exportData('回收价格预警');
  }

  //回收书单操作
  function handleOptBooklist(row) {
    let selections = row ? [row] : pageRef.value?.getSelections();
    let ids = selections.map((item) => item.id).join(',');
    let url = `/book/bookInfo/removeById/${ids}`;
    let title = row ? '确认移除回收书单？' : '确认加入回收书单？';
    pageRef.value?.operatBatch({ title, method: 'post', url, row });
  }
  //黑名单操作
  function handleOptBlacklist(row) {
    let selections = row ? [row] : pageRef.value?.getSelections();
    let ids = selections.map((item) => item.id).join(',');
    let url = `/book/bookInfo/removeBlacklist/${ids}`;
    let title = row ? '确认移除黑名单？' : '确认加入黑名单？';
    pageRef.value?.operatBatch({ title, method: 'post', url, row });
  }
  //回收操作
  function handleOptRecycle(row) {
    let selections = row ? [row] : pageRef.value?.getSelections();
    let ids = selections.map((item) => item.id).join(',');
    let url = `/book/bookInfo/recycle/${ids}`;
    let title = '确认回收？';
    pageRef.value?.operatBatch({ title, method: 'post', url, row });
  }
  //类型操作
  function handleOptType(type) {
    let selections = pageRef.value?.getSelections();
    let ids = selections.map((item) => item.id).join(',');
    let url = `/book/bookInfo/changeType/${ids}`;
    let title = type == 1 ? '确认加社科库？' : '确认加教材库？';
    pageRef.value?.operatBatch({ title, method: 'post', url, row });
  }

  //删除
  function handleDelete(row) {
    pageRef.value?.messageBoxConfirm({
      message: '确定删除吗？',
      fetch: () => request.get('/common/exportrecord/deleteRecord?id=' + row.id)
    });
  }
  //修改类型
  function handleModifyType(row) {}
</script>
