<template>
    <basic-container>
      <!-- 首页表格 -->
      <div class="avue-crud">
        <!-- 搜索模块 -->
        <el-row v-if="search">
          <!-- 查询模块 -->
          <el-form :inline="true" :model="query" class="el-fr-d">
            <!-- 查询按钮 -->
            <el-form-item class="el-btn">
              <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
              <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
            </el-form-item>
          </el-form>
        </el-row>
  
        <!-- 控件模块 -->
        <el-row>
          <div class="avue-crud__header">
            <!-- 头部左侧按钮模块 -->
            <div class="avue-crud__left">
              <el-button type="primary" @click="exportReport">
                <el-icon><Download /></el-icon>导出报表</el-button
              >
            </div>
            <!-- 头部右侧按钮模块 -->
            <div class="avue-crud__right">
              <el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
              <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
              <el-button icon="Search" @click="searchHide" circle></el-button>
            </div>
          </div>
        </el-row>
  
        <!-- 首页表格 -->
        <el-row>
          <!-- 列表模块 -->
          <tablecmt
            class="tableNode"
            :columnList="columnList"
            :tableData="data"
            :loading="loadingObj.list"
            @inputTxt="inputsc"
            @timeCheck="timesc"
            @btnCheck="btnsc"
            @selectCheck="selectsc"
            @selection="selectionChange"
          >
            <template #default="slotProps">
              <template v-if="slotProps.scope.column.label === '操作'">
                <div class="ElBtnClass">
                  <el-button @click="view(slotProps.scope)">查看</el-button>
                </div>
              </template>
            </template>
          </tablecmt>
        </el-row>
  
        <!-- 分页模块 -->
        <el-row class="el-fy">
          <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
            <div></div>
            <el-pagination
              align="right"
              background
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="page.currentPage"
              :page-sizes="[30, 50, 80, 120]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </el-row>
      </div>
    </basic-container>
    <!-- 列表配置显示 -->
    <edittablehead
      @setcolum="setnewcolum"
      @closce="showdrawer"
      :drawerShow="drawerShow"
      :columnList="details.columnList"
    ></edittablehead>
  </template>
  
  <script setup>
  import { ref, reactive, toRefs, computed, onMounted, nextTick, watch } from 'vue';
  import { columnList } from '@/option/reportforms/Inventory.js';
  import { getDictionaryBiz } from '@/api/system/dict'; //字典
  import { processRowProperty, setNodeHeight } from '@/utils/util';
  import { $_exportInventory ,$_getInventory} from '@/api/reportforms/index.js';
  import { ElMessageBox } from 'element-plus';
  import { downloadXls } from '@/utils/util';
  import functions from '@/utils/functions.js';
  import dayjs from 'dayjs';
  const details = reactive({
    /** 是否开启搜索 */
    search: false,
    /** 表格搜索条件 */
    query: {},
    /** 时间快捷选择设置 */
    shortcuts: [
      {
        text: '最近一周',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: '最近一个月',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: '最近三个月',
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ],
    /** 时间选择器数据 */
    stockupDate: [],
    /** 列表 */
    columnList,
  
    /** 列表数据 */
    data: [],
    /** 页面loading */
    loadingObj: {
      /** 列表加载loading */
      list: false,
      packageListLoading: false,
    },
    /** 列表复选框选中的数据 */
    selectionList: [],
    /** 是否显示设置表格 */
    drawerShow: false,
    /** 分页参数 */
    page: {
      currentPage: 1,
      pageSize: 50,
      total: 0,
    },
  
    /** 弹出层显示 */
    popUpShow: {
      /** 包件明细 */
      packageOrderListlVisited: false,
      /** 二维码 */
      QRCodeVisible: false,
      /** 修改客户信息 */
      editClientInfoVisible: false,
    },
    /** 列表Dom节点 */
    listNode: '',
    form: {},
    /** 全屏 */
    fullscreenObj: {
      /** 包明细 */
      packageOrderListlVisited: false,
    },
  });
  
  const {
    search,
    query,
    shortcuts,
    stockupDate,
    data,
    loadingObj,
    selectionList,
    drawerShow,
    page,
    trickleLoadingPage,
    zeroAdditionalRecordingInfo,
    popUpShow,
    recorddata,
  } = toRefs(details);
  /**
   * 设置列表 -- 固定函数
   * 弹窗的勾选回调，用于更改头部数组
   * 固定搭配，只需要更换   columnList
   *  */
  const setnewcolum = (newarr, headarr, type) => {
    if (type == 1) {
      details.columnList = newarr;
      functions.setStorage(window.location.pathname + 'checkList', headarr);
    } else if (type == 2) {
      details.columnList = newarr;
      functions.setStorage(window.location.pathname + 'flexList', headarr);
    } else if (type == 3) {
      details.columnList = newarr;
      functions.setStorage(window.location.pathname + 'sortlist', headarr);
    }
  };
  /** 展开列表控件 */
  const showdrawer = _flag => {
    details.drawerShow = _flag;
  };
  /** 表格表头输入框搜索 */
  const inputsc = (index, row) => {
    details.query[row.prop] = index;
    processRowProperty(index, row, details);
    getrain();
  };
  
  /** 表格表头时间选择 */
  const timesc = (index, row) => {
    console.log(index, row);
    if (!!index) {
      index = dayjs(index).format('YYYY-MM-DD');
    }
    details.query[row.prop] = index;
    if (!index) {
      delete details.query[row.prop];
    }
    getrain();
  };
  
  /** 表格表头输入框搜索 */
  const btnsc = val => {
    console.log(val);
  };
  /** 表格表头下拉框选择 */
  const selectsc = (index, row) => {
    processRowProperty(index, row, details);
  };
  /** 表格表头复选框选择 */
  const selectionChange = list => {
    console.log(list);
    details.selectionList = list;
  };
  // 网页顶部搜索按钮
  const searchChange = () => {
    details.search = false; //关闭搜索
  };
  // 每页多少条
  const sizeChange = val => {
    details.page.pageSize = val;
    getrain();
  };
  /** 页码改变执行的回调 */
  const currentChange = val => {
    details.page.currentPage = val;
    getrain();
  };
  // 刷新按钮
  const searchChangeS = () => {
    details.columnList.forEach(item => {
      item.values = '';
    });
    details.search = false; //关闭搜索
    getrain();
  };
  // 顶部搜索
  const searchHide = () => {
    console.log(details);
    details.search = !details.search;
  
    const _node = document.querySelector('.tableNode');
    setNodeHeight(_node, '', true);
  };
  // 字典公共函数
  function updateDictionary(targetArray, dictionaryType) {
    getDictionaryBiz(dictionaryType).then(res => {
      console.log(res, '字典');
      res.data.data.forEach(item => {
        targetArray.push({
          value: item.dictKey,
          label: item.dictValue,
        });
      });
    });
  }
  // 页面初始化方法
  const onLoad = () => {
    // updateDictionary(columnList[3].checkarr, 'pc_work_order'); //异常类型
  };
  onLoad();
  // 获取数据
  const getrain = () => {
    let data = {
      current: details.page.currentPage,
      size: details.page.pageSize,
      ...details.query,
    };
    details.loadingObj.list = true;
    $_getInventory(data)
      .then(res => {
        console.log(res, '当前参数1');
        details.page.total = res.data.data.total;
        details.data = res.data.data.records;
      })
      .catch(() => {})
      .finally(() => {
        details.loadingObj.list = false;
      });
  };
  getrain();
  
  // 导出
  const exportReport = () => {
    ElMessageBox.confirm('是否导出报表?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        details.loadingObj.list = true;
        let data = {
          ...details.query,
        };
        $_exportInventory(data)
          .then(res => {
            downloadXls(res.data, `库存品明细报表数据.xlsx`);
          })
          .catch(() => {
  
          })
          .finally(() => {
            details.loadingObj.list = false;
          })
      })
      .catch(() => {});
  };
  </script>
  
  <style scoped lang="scss">
  .ElBtnClass button {
    border: none;
    padding: 0;
    background-color: transparent;
  }
  :deep(.el-card) {
    height: 100%;
  }
  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-fy {
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  .avue-crud {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  </style>
  