<template>
  <view class="page-product-receipt">

    <page-head title="库区填报" />

    <u-form id="form" class="page-form" ref="form" label-width="180rpx" >
      <u-form-item required  label="生产日期" >
        <u-input @click="clickShowCalendar(1)" placeholder="请选择日期" v-model="queryParams.beginDate" :clearable="true"  readonly />
         <view style="margin-right: 30rpx">至</view>
        <u-input @click="clickShowCalendar(2)" placeholder="请选择日期" v-model="queryParams.endDate" :clearable="true"  readonly />
        <u-icon name="close-circle-fill" @click="clearDate" color="rgb(96, 98, 102)" size="28"></u-icon>
      </u-form-item>

      <u-form-item required  label="工单编码">
        <u-input placeholder="请输入工单编码" v-model="queryParams.workOrderCode" :show-action="false"></u-input>
      </u-form-item>

      <u-form-item required  label="工单状态">
        <jPicker sureColor="#ff0000" moren="请选择" showKey="key" @bindpicker="selectStatus" valKey="value" :val="queryParams.status" :options="stateList" />
        <u-input placeholder="请输入工单状态" :show-action="false"></u-input>
      </u-form-item>
    </u-form>

    <view class="search-view">
      <view class="search-btn" @click="clickSearch">
        查询
      </view>
      <view class="ada-btn"  @click="clickAdd">
        新增
      </view>
    </view>


    <scroll-view id="list" scroll-y="true" :style="{ height: listHeight + 'px' }"  :lower-threshold="50">
      <!--  列表  -->
      <u-form class="list">
        <view v-if="list.length > 0">
          <view class="list-item" v-for="(item, index) in list" :key="index" @click="clickItem(index)" >
            <view v-if="item.type === 'add'" class="add-tag">新增</view>
            <lj-list-row label="工单号:" :value="item.workOrderCode" />
            <lj-list-row label="物料编码:" :value="item.materialCode" />
            <lj-list-row label="物料名称:" :value="item.materialName" />
            <lj-list-row label="批次号:" :value="item.batchCode" />
            <lj-list-row label="地点:" :value="item.location" />
            <lj-list-row label="区号:" :value="item.areaCode" />
          </view>
        </view>
        <view v-else> 暂无数据 </view>
      </u-form>
    </scroll-view>

    <view class="bottom-bar" id="button">
      <u-row class="button-bar">
        <!-- 确定 -->
        <u-col :span="12">
          <u-button @click="onSubmit" type="primary">提交入库</u-button>
        </u-col>

      </u-row>
    </view>


    <u-popup  v-model="showPopupForm" mode="center"  @close="cancelForm" width="580rpx" >

      <u-form class="page-form">
        <u-form-item label="工单号:" label-width="20vw">
          <u-input v-model="popupForm.workOrderCode" :show-action="false"></u-input>
        </u-form-item>
        <u-form-item label="物料编码:" label-width="20vw">
          <u-input v-model="popupForm.materialCode" :show-action="false"></u-input>
        </u-form-item>
        <u-form-item v-if="popupType === 'edit'" label="物料名称:" label-width="20vw">
          <u-input v-model="popupForm.materialName" :show-action="false"></u-input>
        </u-form-item>
        <u-form-item label="批次号:" label-width="20vw">
          <u-input v-model="popupForm.batchCode" :show-action="false"></u-input>
        </u-form-item>
        <u-form-item label="地点:" label-width="20vw">
          <u-input placeholder="请填写地点" v-model="popupForm.location" :show-action="false"></u-input>
        </u-form-item>
        <u-form-item label="区号:" label-width="20vw">
          <u-input placeholder="请填写区号" v-model="popupForm.areaCode" :show-action="false"></u-input>
        </u-form-item>

      </u-form>
      <view>
        <!-- 按钮区域 -->
        <view class="btn-group">
          <u-button
            @click="cancelForm"
            shape="circle"
            type="info"
          >
            取消
          </u-button>
          <u-button
            v-if="popupType === 'edit'"
            @click="submitForm"
            shape="circle"
            type="primary"
          >
            确认
          </u-button>
          <u-button
            v-if="popupType === 'add'"
            @click="addItem"
            shape="circle"
            type="primary"
          >
            确认
          </u-button>
        </view>
      </view>
    </u-popup>

    <u-calendar v-model="showCalendar" :mode="'date'" @change="changeDate"></u-calendar>

  </view>
</template>

<script lang="ts">
import PageHead from "@/components/lanju/page-head/index.vue";
import JPicker from "@/components/J-Picker/jPicker.vue";
import {Component} from "vue-property-decorator";
import {removeLeadingZeros} from "@/utils/tool";
import LjListRow from "@/components/lanju/lj-list-row/index.vue";
import {BasePage} from "@/components/base/page";
import moment from 'moment';
import {getStockAreaEntryList, submitMaterialEntry} from "@/pages/wms/product/StockAreaReporting/model";
import {session} from "@/store/modules/session";


interface Material{
  workOrderCode:string;
  materialCode:string;
  materialName:string;
  batchCode:string;
  location:string;
  areaCode:string;
  type:string
}

@Component({
  methods: { removeLeadingZeros },
  components: {
    JPicker,
    LjListRow,
    PageHead
  },
})
export default class stockAreaReporting extends BasePage {
  showCalendar = false;

  calendarType:number = undefined;

  queryParams={
    beginDate:moment().format('YYYY-MM-DD'),
    endDate:moment().format('YYYY-MM-DD'),
    workOrderCode:undefined,
    status:"w1"
  };

  stateList = [
    {
      key:"未派",
      value:"w0"
    },
    {
      key:"已派发",
      value:"w1"
    },
    {
      key:"活动",
      value:"w2"
    },
    {
      key:"报工",
      value:"w3"
    },
    {
      key:"暂停",
      value:"w4"
    },
    {
      key:"入库完成",
      value:"w6"
    },
  ]

  listHeight = 500;

  list:Material[] = []

  showPopupForm = false;

  popupType = "edit"

  popupForm: Material = {
    workOrderCode:undefined,
    materialCode:undefined,
    materialName:undefined,
    batchCode:undefined,
    location:undefined,
    areaCode:undefined,
    type:undefined
  }

  addList:Material[] = []

  popupFormRules = {
    "workOrderCode":"请填写工单号",
    "materialCode":"请填写物料编码",
    "batchCode":"请填写批次号",
    "location":"请填写地点",
    "areaCode":"请填写区号",
  }


  listIndex = 0

  clickShowCalendar(calendarType : number){
    this.calendarType = calendarType;
    this.showCalendar = true;
  }

  clearDate(){
    this.queryParams.beginDate = undefined;
    this.queryParams.endDate = undefined;
    this.showCalendar = false;
  }

  changeDate(e : any){
    if (this.calendarType === 1){
      this.queryParams.beginDate = e.result;
    }else {
      this.queryParams.endDate = e.result;
    }
  }

  selectStatus(res){
    this.queryParams.status = res.pickerName.value

  }

  clickSearch(){
    getStockAreaEntryList(this.queryParams).then((res)=>{
      if (res.data){
        this.list = res.data
        if (this.addList.length > 0){
          this.list = this.list.concat(this.addList)
        }
      }
    })
  }

  clickAdd(){
    this.popupType = "add"
    this.showPopupForm = true
  }

  clickItem(index){
    this.popupType = "edit"
    this.popupForm = this.list[index]
    this.listIndex = index
    this.showPopupForm = true
  }

  cancelForm(){
    this.popupForm = {
      workOrderCode:undefined,
      materialCode:undefined,
      materialName:undefined,
      batchCode:undefined,
      location:undefined,
      areaCode:undefined,
      type:undefined
    }
    this.showPopupForm = false
  }

  submitForm(){
    for(const key in this.popupForm){
      if (!this.popupForm[key] && this.popupFormRules[key]){
        uni.showToast({
          title: this.popupFormRules[key],
          icon: 'none'
        })
        return;
      }
    }
    this.cancelForm()
  }

  addItem(){
    for(const key in this.popupForm){
      if (!this.popupForm[key] && this.popupFormRules[key]){
        uni.showToast({
          title: this.popupFormRules[key],
          icon: 'none'
        })
        return;
      }
    }

    getStockAreaEntryList({
      materialCode:this.popupForm.materialCode
    }).then((res)=>{
      console.log()
      if (res.data && res.data.length > 0){
        this.popupForm.type = 'add'
        this.popupForm.materialName = res.data[0].materialName
        this.addList.push(this.popupForm)
        this.list.unshift(this.popupForm)
        this.cancelForm()
      }else {
        uni.showToast({
          title: "未查询到该物料",
          icon: 'none'
        })
      }

    })


  }

  onSubmit(){

    for (const item of this.list){
      if (!item.location){
        uni.showModal({
          title: '提示',
          content: '物料'+ item.materialCode +'未填写地点',
          confirmText: '确认',
          showCancel: false,
        });
        return;
      }

      if (!item.areaCode){
        uni.showModal({
          title: '提示',
          content: '物料'+ item.materialCode +'未填写区号',
          confirmText: '确认',
          showCancel: false,
        });
        return;
      }
      item.factoryCode = session.FactoryCode
      item.status = "1"
      item.createBy = session.userName
    }

    submitMaterialEntry(this.list).then(res=>{
      uni.showToast({
        title: "提交成功",
        icon: 'success'
      })
      this.list = []
      this.addList = []
    })

  }

  onReady() {
    this.getListHeight()
  }

  getListHeight() {
    //等待页面加载完成
    this.$nextTick(() => {
      let buttonTop = 0;
      //获取底部按钮信息
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#button')
        .boundingClientRect((data) => {
          //获取底部按钮到顶部距离
          buttonTop = data.top;
        })
        .exec();
      //获取列表信息
      query
        .select('#list')
        .boundingClientRect((data) => {
          //获取列表到顶部距离
          const listTop = data.top;
          //
          this.listHeight = buttonTop - listTop - 10;
        })
        .exec();
    });
  }
}
</script>

<style scoped lang="scss">

.search-view{
  display: flex;
  justify-content: flex-end;
}
.search-view .search-btn{
  background-color: #1078d1;
  color:white;
  font-weight: bold;
  width: 100rpx;
  padding:15rpx;
  font-size: 28rpx;
  margin-top:10rpx;
  margin-bottom:10rpx;
  margin-left:30rpx;
  text-align: center;
  border-radius: 10rpx;
}

.search-btn:active {
  background-color: #209bfa;
}

.search-view .ada-btn{
  background-color: #67c23a;
  color:white;
  font-weight: bold;
  width: 100rpx;
  padding:15rpx;
  font-size: 28rpx;
  margin-top:10rpx;
  margin-bottom:10rpx;
  margin-left:30rpx;
  text-align: center;
  border-radius: 10rpx;
}

.ada-btn:active {
  background-color: #2c6b05;
}

.list {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx 20rpx 25rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
  color: #8d8989;

  .list-item {
    margin-top: 10rpx;
    padding: 20rpx;
    position: relative; /* 关键：让标记相对于基于此定位 */
  }

  /* 奇数行背景色 */
  .list-item:nth-child(odd) {
    background-color: #ffffff;
  }

  /* 偶数行背景色 */
  .list-item:nth-child(even) {
    background-color: #f5f5f5;
  }

  /* 右上角标记样式 */
  .add-tag {
    position: absolute;
    top: 10rpx;
    right: 0;
    background-color: #ff4d4f; /* 红色背景 */
    color: white;
    font-size: 24rpx; /* 小字体 */
    padding: 4rpx 12rpx;
    border-radius: 0 0 0 8rpx; /* 左下角圆角 */
  }
}

.btn-group {
  display: flex;
  justify-content: center;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}


.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: #ffffff;
  box-shadow: 0 1rpx 20rpx 0 rgba(128, 128, 128, 0.2);
  padding: 20rpx;
}
</style>