<template>
  <view class="container">
    <!-- 筛选查询区域 -->
    <view class="filter-section">
      <uni-forms ref="filterForm" :modelValue="filterData" validateTrigger="bind">
        <view class="form-row">
          <uni-forms-item label="线别选择" label-width="80" name="lineCode" required class="form-item">
            <uni-data-select :localdata="lineOptions" v-model="filterData.lineCode" placeholder="请选择线体" @change="getReceiveList"></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="选择日期" label-width="80" name="workOrderDate" required class="form-item">
            <uni-datetime-picker type="date" v-model="filterData.workOrderDate" format="yyyy-MM-dd" placeholder="请选择日期"></uni-datetime-picker>
          </uni-forms-item>
        </view>
        <view class="btn-search">
          <button type="primary" @click="getReceiveList">查询</button>
        </view>
      </uni-forms>
    </view>

    <!-- 清单展示区域 -->
    <view class="list-section">
      <view class="list-header">
        <text>收料清单</text>
      </view>
      <scroll-view scroll-y class="list-container">
        <view v-if="receiveList.length === 0" class="empty-tip">
          暂无收料数据
        </view>
        <view v-for="(item, index) in receiveList" :key="index" class="list-item">
          <view class="item-info">
            <view class="info-row">
              <text class="label">物料名称:</text>
              <text class="value">{{ item.materialName }}</text>
            </view>
            <view class="info-row">
              <text class="label">物料号:</text>
              <text class="value">{{ item.materialCode }}</text>
            </view>


            <view class="info-row">
              <text class="label">待收数量:</text>
              <text class="value">{{ item.quantity }}</text>
            </view>
          </view>
          <view class="item-actions">
            <button type="primary" size="mini" @click="receiveMaterial(item)">收料</button>
            <button type="default" size="mini" @click="returnMaterial(item)">退料</button>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { doLineReceiveMaterial,doLineReturnBackMaterial,getLineOptions,queryCallReceiveList } from '@/api/mmcall';
export default {
  data() {
    return {
      filterData: {
        lineCode: '',
        workOrderDate: new Date()
      },
      lineOptions: [],
      receiveList: []
    };
  },
  onLoad() {
    // 默认选择当前日期
    this.filterData.workOrderDate = new Date();
    // 获取线体数据
    this.getLineOptions();
  },
  methods: {
    // 获取线体数据
    getLineOptions() {
      getLineOptions()
        .then(res => {
          if (res.code === 200 && res.data) {
            // 格式化线体数据为uni-data-select需要的格式
            this.lineOptions = res.data.map(item => ({
              text: item.groupName, // 显示名称
              value: item.groupCode // 实际值
            }));
          } else {
            this.$modal.showToast('获取线体数据失败');
          }
        })
        .catch(err => {
          console.error('获取线体数据失败', err);
          this.$modal.showToast('获取线体数据失败');
        });
    },

    // 获取收料清单
    getReceiveList() {
      if (!this.filterData.lineCode) {
        this.$modal.showToast('请先选择线体');
        return;
      }

      // 准备请求参数
      const params = {
        pageNum: 1,
        pageSize: 100,
        lineCode: this.filterData.lineCode,
        workOrderDate: this.$dayjs(this.filterData.workOrderDate).format('YYYY-MM-DD')
      };

      // 显示加载中提示
      uni.showLoading({
        title: '加载中...'
      });

      // 调用API获取收料清单
      queryCallReceiveList(params)
        .then(res => {
          if (res.code === 200 && res.data) {
            this.receiveList = res.data.result;
            //console.log('收料数据:', res.data.result);
          } else {
            this.receiveList = [];
            this.$modal.showToast(res.message || '获取收料数据失败');
          }
        })
        .catch(err => {
          console.error('获取收料数据失败', err);
          this.receiveList = [];
          this.$modal.showToast('获取收料数据失败');
        })
        .finally(() => {
          uni.hideLoading();
        });
    },

    // 收料操作
    receiveMaterial(item) {
      if (!item || !item.id) {
        this.$modal.showToast('无效的物料数据');
        return;
      }

      uni.showModal({
        title: '收料确认',
        content: `确定要收 ${item.materialName} (${item.materialCode}) 吗？`,
        success: (res) => {
          if (res.confirm) {
            // 准备收料参数
            const params = {
              id: item.id, // 物料ID
              quantity: item.quantity, // 收料数量
              lineCode: this.filterData.lineCode, // 线体代码
              workOrderDate: this.$dayjs(this.filterData.workOrderDate).format('YYYY-MM-DD') // 日期
            };

            // 显示加载中提示
            uni.showLoading({
              title: '收料中...'
            });

            // 调用收料API
            doLineReceiveMaterial(params)
        .then(res => {
          if (res.code === 200) {
            this.$modal.showToast(`成功收料 ${item.quantity} 个 ${item.materialName}`);
            // 刷新收料清单
            this.getReceiveList();
          } else {
            this.$modal.showToast(res.message || '收料失败');
          }
        })
        .catch(err => {
          console.error('收料失败', err);
          this.$modal.showToast('收料失败');
        })
        .finally(() => {
          uni.hideLoading();
        });
          }
        }
      });
    },

    // 退料操作
    returnMaterial(item) {
      if (!item || !item.id) {
        this.$modal.showToast('无效的物料数据');
        return;
      }

      uni.showModal({
        title: '退料确认',
        content: `确定要退 ${item.materialName} (${item.materialCode}) 吗？`,
        success: (res) => {
          if (res.confirm) {
            // 准备退料参数
            const params = {
              id: item.id, // 物料ID
              quantity: item.quantity, // 退料数量
              lineCode: this.filterData.lineCode, // 线体代码
              workOrderDate: this.$dayjs(this.filterData.workOrderDate).format('YYYY-MM-DD') // 日期
            };

            // 显示加载中提示
            uni.showLoading({
              title: '退料中...'
            });

            // 调用退料API
            doLineReturnBackMaterial(params)
        .then(res => {
          if (res.code === 200) {
            this.$modal.showToast(`成功退料 ${item.quantity} 个 ${item.materialName}`);
            // 刷新收料清单
            this.getReceiveList();
          } else {
            this.$modal.showToast(res.message || '退料失败');
          }
        })
        .catch(err => {
          console.error('退料失败', err);
          this.$modal.showToast('退料失败');
        })
        .finally(() => {
          uni.hideLoading();
        });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.header {
  text-align: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}

.filter-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding: 10rpx 0;
  }

  .form-item {
    width: 100%;
  }

  .uni-forms-item__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.btn-search {
  margin-top: 20rpx;
}

.list-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.list-header {
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 10rpx;
}
.list-header text {
  font-size: 32rpx;
  font-weight: bold;
}
.list-container {
  height: 500rpx;
}
.list-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}
.item-info {
  flex: 1;
}
.info-row {
  display: flex;
  margin-bottom: 10rpx;
}
.label {
  width: 120rpx;
  color: #999;
}
.value {
  flex: 1;
}
.item-actions {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
}
</style>