<template>
  <div class="container-wrapper">
    <div class="top">
      <div class="search">
        <div class="left">
          <el-form :inline="true" :model="searchModel">
            <el-form-item>
              <el-date-picker
                  v-model="selectedDate"
                  type="daterange"
                  range-separator="-"
                  @change="handleDateChange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <div class="default-btn" @click="resetSearch">
            <span class="iconfont icon-RectangleCopy1"></span>
            重置
          </div>
          <div class="default-btn" @click="getList">
            <span class="iconfont icon-RectangleCopy"></span>
            搜索
          </div>
        </div>
      </div>
      <div class="addBtn">
        <span class="default-btn" @click="clickApply">新增领用</span>
      </div>
    </div>
    <div class="content">
      <el-table :data="dataList" style="width: 100%;height: 100%" @row-click="rowClick" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
        <el-table-column prop="useCode" label="单号" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template #default="scope">
            {{ scope.row.status==1?"已完成":scope.row.status==0?"未完成":"未知" }}
          </template>

        </el-table-column>
        <el-table-column prop="kindCount" label="品种" width="180">
          <template #default="scope">
            {{ scope.row.kindCount}}种
          </template>

        </el-table-column>
        <el-table-column label="盈亏数量" prop="changeTotalWholeCount" width="100">
          <template #default="scope">
            {{scope.row.changeTotalWholeCount > 0 ? '+' : ''}}{{ scope.row.changeTotalWholeCount }}
          </template>
        </el-table-column>
        <el-table-column label="盈亏金额(进价)" prop="totalPurchasePrice" width="200">
          <template #default="scope">
            {{scope.row.totalPurchasePrice > 0 ? '+' : ''}}{{ scope.row.totalPurchasePrice }}元
          </template>
        </el-table-column>
        <el-table-column label="盈亏金额(售价)" prop="totalSalePrice" width="200">
          <template #default="scope">
            {{scope.row.totalSalePrice > 0 ? '+' : ''}}{{ scope.row.totalSalePrice }}元
          </template>
        </el-table-column>
        <el-table-column label="领用人" prop="applyUserName" width="100">
          <template #default="scope">
            {{ scope.row.applyUserName }}
          </template>
        </el-table-column>
        <el-table-column prop="createDatetime" label="创建时间" width="300">
          <template #default="scope">
            {{ formatDate(scope.row.createDatetime) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <div class="page_btn_list">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
            @current-change="changePage"
        />
      </div>
    </div>
    <AddApply ref="addApplyRef" @close="closeAddApply"/>
    <DetailApply ref="detailApplyRef" @close="closeDetailApply"/>
  </div>
</template>
<script setup lang="ts">
import AddApply from "@/components/inventory/apply/AddApply.vue";
import {nextTick, onMounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import DetailApply from "@/components/inventory/apply/DetailApply.vue";
import {formatDateArray, getEndOfDay} from "@/utils/dateUtils.ts";

const is_add = ref(false)
const is_detail = ref(false)
const dataList = ref([])
const getList = () => {
  const query = {
    pageNum: page.value,
    pageSize: 20,
    ...searchModel.value,
  }
  post("inventory/apply/list", {query: query}).then((res: any) => {
    dataList.value = res.list
    total.value = res.total_count
  })
}
onMounted(() => {
  getList()
})
//分页
let pageSize = ref(20)
let total = ref(0)
let page = ref(1)
let changePage = (value: number) => {
  page.value = value
  getList()
}
const closeAddApply = () => {
  is_add.value = false
  getList()
}
const closeDetailApply = () => {
  is_detail.value = false
}
// 转成YYYY-MM-DD格式
const formatDate = (isoStr: any) => {
  const date = new Date(isoStr);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}
const detailApplyRef = ref()
const rowClick = (row: any) => {
  nextTick(()=>{
    detailApplyRef.value?.init(row.id)
  })
}
const addApplyRef = ref()
const clickApply = () => {
  nextTick(() => {
    addApplyRef.value?.init()
  })
}
const selectedDate = ref<any>([])
const handleDateChange = (date: any[]) => {
  selectedDate.value = formatDateArray(date)
  if (selectedDate.value[0] == selectedDate.value[1]) {
    selectedDate.value[1] = getEndOfDay(selectedDate.value[1]); // 输出今天 23:59
  }
  searchModel.value.beginTime = selectedDate.value[0]
  searchModel.value.endTime = selectedDate.value[1]
}

const searchModel=  ref({
  beginTime: null,
  endTime: null,
})
const resetSearch=  () => {
  searchModel.value = {
    beginTime: null,
    endTime: null,
  }
  getList()
}
</script>

<style scoped lang="scss">
@use "@/assets/scss/base.scss";
.container-wrapper {
  box-sizing: border-box;
  padding: 24px 24px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  .top {
    background: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;

    .search {
      display: flex;
      justify-content: space-between;
      .left {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin-right: 24px;
        .el-form-item {
          margin-right: 5px;
        }
      }
      .right {
        display: flex;
        .btn {
          width: 120px;
          height: 42px;
          background: #FFFFFF;
          border-radius: 6px;
          border: 1px solid #979797;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 24px;
          cursor: pointer;
          &:hover {
            background: #4D6DE4;
            color: #fff;
            border: none;
          }
        }
      }

    }

    .addBtn {
      span {
       &:first-child{
         margin-left: 0;
       }
      }
    }
  }
  .content {
    width: 100%;
    flex: 1;
    overflow: hidden;
  }
  .bottom {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    border-top: 1px solid #EEE;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}


:deep(.el-input__wrapper){
  height: 42px;
}
:deep(.el-range-editor.el-input__wrapper) {
  height: 42px;
}
:deep(.el-select__wrapper) {
  height: 42px;
}
</style>