<template>
  <basic-container>
    <div class="avue-crud">
      <div>
        <el-row v-if="!search" class="el_row_top">
          <!-- 查询模块 -->
          <el-form :inline="true" :model="query" class="fr-fm el_from_top">
            <div class="fr-fo">
              <!--            <el-form-item label="类型:">-->
              <!--              <el-select  v-model="searchType" placeholder="请选择搜索类型" @change="changetypesof">-->
              <!--                <el-option-->
              <!--                        v-for="item in searchTypeDate"-->
              <!--                        :key="item.value"-->
              <!--                        :label="item.label"-->
              <!--                        :value="item.value">-->
              <!--                </el-option>-->
              <!--              </el-select>-->
              <!--            </el-form-item>-->
              <el-form-item :label="title + ':'">
                <el-input v-model="query.packageCode" :placeholder="'请输入' + title"></el-input>
              </el-form-item>
              <el-form-item :label="title + ':'" v-show="show">
                <el-input v-model="query.packageCode" :placeholder="'请输入' + title"></el-input>
              </el-form-item>
              <el-form-item>
           
              </el-form-item>
            </div>
            <!-- 查询按钮 -->
            <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="danger" icon="el-icon-download" @click="handleExportInfo" plain-->
            <!--            >导出-->
            <!--            </el-button>-->
            <!--            &lt;!&ndash;            v-loading.fullscreen.lock="fullscreenLoading"&ndash;&gt;-->
            <!--            <el-button type="danger" icon="el-icon-picture" @click="handlePictureInfo" plain-->
            <!--            >导出图片-->
            <!--            </el-button>-->
            <!--          </div>-->
            <!-- 头部右侧按钮模块 -->
            <div></div>
            <div class="avue-crud__right">
              <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
              <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
              <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
            </div>
          </div>
        </el-row>
      </div>
      <el-row class="el_list">
        <!-- 列表模块 -->
        <tablecmt
          :columnList="columnList"
          :tableData="details.data"
          :loading="loadingObj.list"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps"> </template>
        </tablecmt>
      </el-row>
    </div>
  </basic-container>
  <!-- 列表配置显示 -->
  <edittablehead
    @setcolum="setnewcolum"
    @closce="showdrawer"
    :drawerShow="drawerShow"
    :columnList="details.columnList"
  ></edittablehead>
</template>

<script setup>
import { $_searchNode } from '@/api/distribution/distributionParcelList';
import { columnList } from '@/api/distribution/packageNodeSearch';
import {
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  nextTick,
  watch,
  getCurrentInstance,
} from 'vue';
import functions from '@/utils/functions.js';
import { useRoute } from 'vue-router';
const $route = useRoute();
const show=ref(false)
const title = ref('包条码');
const searchType = ref('');

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,
  },
  /** 列表复选框选中的数据 */
  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);

const onLoad = () => {
  details.columnList = columnList;
};


/** 展开列表控件 */
const showdrawer = _flag => {
  details.drawerShow = _flag;
};
const onload = () => {
  if(!details.query.packageCode){
    return
  }
  details.loadingObj.list=true
  console.log(details.query);
  let data = {
    searchType: '1',
    ...details.query,
  };
  $_searchNode(data).then(res => {

    console.log(res, 'res');
    if (res.data.data) {
      details.data = res.data.data;
    }
  }).catch(res=>{

  }).finally(()=>{
    details.loadingObj.list=false
  });
};

onLoad();
const searchChange = () => {
  onload();
};
const searchHide = () => {
  details.search = !details.search;
};
console.log($route.query.orderPackageCode,'路由参数');
// 响应路由参数变化
details.query.packageCode = $route.query.orderPackageCode
searchChange()
watch($route, (newValue, oldValue) => {
  // 确保用户ID确实发生了变化
  details.query.packageCode = $route.query.orderPackageCode
  if(!details.query.packageCode){
    return
  }
  searchChange()
});



/**
 * 设置列表 -- 固定函数
 * 弹窗的勾选回调，用于更改头部数组
 * 固定搭配，只需要更换   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 inputsc = () => {};
const timesc = () => {};
const btnsc = () => {};
const selectsc = () => {};
const selectionChange = () => {};
</script>

<style scoped lang="scss">
.el_row_top {
  .el-form {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .el-btn {
    margin-right: 0;
  }
}
.avue-crud__right {
  display: flex;
  align-items: center;
}


:deep(.el-card__body) {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.avue-crud {
  display: flex;
  flex-direction: column;
}
:deep(.is-always-shadow){
  box-shadow: none;
}
</style>
