<template>
  <view class="order-detail-container">
    <!-- 基础信息区域 -->

    <view class="info-section">
      <uni-row class="info-grid">
        <uni-col class="flex-row">
          <view class="label">生产单位: </view>
          <uni-data-select
               v-model="form.companyId"
               :localdata="companyOptions"
               text-field="deptName"        
               value-field="deptId"        
               @change="getEdu"      
               :clear="true"
			   disabled="true"
             />
        </uni-col>
      </uni-row>
      <uni-row class="info-grid">
        <uni-col :span="12">
          <view class="label">剩余金额:{{ remainingMoney}}</view>
        </uni-col>
        <uni-col :span="12">
          <view class="label">订单金额:{{ orderAmount }}</view>
        </uni-col>
      </uni-row>
      <uni-row class="info-grid">
        <!-- <uni-col :span="24" style="display: flex;">
          <view class="label">已选补差:</view>
		     <view class="">
		  	 <view style="color: red;" v-if="buchaGoodsList.length&&selectedBuCha.length==0">
		  		 提示:当前有补差数据可选择
		  	</view>
		 
		  <view v-else class="" v-for="(item,index) in selectedBuCha"  :key="index">
		  	商品：{{item.goodsname}},金额：{{item.piaokou}}
		  </view>
		  </view> 
        </uni-col> -->
      </uni-row>
     
    </view>

	
 
	
  <view>
    <!-- 商品信息区域 -->
    <view class="goods-section">
      <view class="section-title">
    	  <view class="">
    	  	商品信息
    	  </view>

      </view>
      <view v-if="goodsList.length === 0" class="no-data">
        暂无商品数据
      </view>
    
      <view v-else class="goods-double-column">
        <view 
          v-for="(goods, index) in goodsList"
          :key="goods.goodsid"
          class="goods-item"
        >
          <view class="goods-header">
           
              <text class="serial-number">{{ index + 1 }}</text>
              <text class="goods-name">{{ goods.goodsname }}</text>
    		 
           
          </view>
          
          <view class="goods-content">
           
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">件装数:{{  goods.packingnum }}</view>
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">供应参考价:{{  goods.invoiceprice }}</view>
              </uni-col>
            </uni-row>
    
           
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">前三月平均数:{{ goods.threeMonths }}</view>
              </uni-col>
              <uni-col :span="12" class="info-pair">
                <view class="label">使用票扣:{{ goods.piaokou }}</view>
              </uni-col>
            </uni-row>
    
           
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair">
                <view class="label">小计:{{ goods.allmoney }}</view>
              </uni-col>
             <uni-col :span="12" class="info-pair">
               <view class="label">税率:{{ goods.taxrate }}</view>
             </uni-col>
            </uni-row>
            <uni-row class="info-row">
              <uni-col :span="12" class="info-pair flex-row" >
                <view class="label">采购数量:</view>
				 <view class="label">税率:{{ goods.goodsnum }}</view>
              <!--  <input
                  class="uni-input custom-input"
                  v-model="goods.goodsnum"
                  placeholder="请输入采购数量"
                  @confirm="e =>handleInput(e,index)"/> -->
              </uni-col>
            </uni-row>
    		
          </view>
        </view>
      </view>
    </view>
	<!-- 操作按钮 -->
	<view class="action-buttons">
	  <button @click="goCancel" class="btn btn-secondary">取消</button>
	  <!-- <button @click="goSubmit" class="btn btn-primary">确认提交</button> -->
	</view>
	 </view>
   
  </view>
</template>

<script setup>
import { addsalemain } from '../../../../api/orderManager/index.js'

import { onMounted, ref ,computed} from 'vue'
import { contractData, goodsData } from '../detailData.js'
import { listsaleBusGoodsList } from '../../../../api/orderManager/index.js'
import { listproductList,salemainDetail,businessManagerReviewGoodsList,getsalemaincheckAmount } from '../../../../api/orderManager/index.js'
// import { getInfo } from '../../../../store/modules/user.js'
import { useUserStore } from '../../../../store/modules/user.js'
import { useOrderManagerStore } from '../../../../store/modules/orderManager.js'
import data1 from './data1.js'

//已选补差
const selectedBuCha = ref([])
// 商品列表数据
const buchaGoodsList =ref([])
const goodsList = ref([])
const form = ref({
	companyId:1,
})
const userStore =  useUserStore() 
const RemainingMoney = ref('0.00') // 剩余金额
//显示补差按钮
const buChaButState = ref(true)
//显示选中所有按钮
const allSelected = ref(false)
//储存选中的列表
const selectedList = ref([])
//显示补差
const ShowBucha = ref(false)
//剩余金额
const remainingMoney = ref(0)
//订单金额
const orderAmount = ref(0.00)
// 入参
const queryNum = ref({})
// 基础信息
const contract = ref({})
// 生产单位
const companyOptions = ref([])
const monthOptions = ref([
  { value: 0, text: '本月执行' },
  { value: 1, text: '下月执行' }
])
// // 通用的金额格式化函数
// const formatMoney = (value) => {
//   const num = Number(value)
//   return isNaN(num) 
//     ? '0.00' 
//     : num.toLocaleString('en-US', {
//         minimumFractionDigits: 2,
//         maximumFractionDigits: 2
//       })
// }
// // 创建计算属性（可选）
// const formattedRemainingMoney = computed(() => formatMoney(RemainingMoney.value))
// const formattedContractMoney = computed(() => formatMoney(form.value.contractmoney))

onMounted(() => {
  // contract.value = contractData.data[0]
  // console.log(contract.value)
  getEdu()
  getDeptLists()
  // GetlistsaleBusGoodsList()
  getAllData()
})
// 获取补差，票扣列表数据

// console.log('saleid',saleid)
const getAllData = () =>{
	const rowdata = useOrderManagerStore().oeders[0]
	salemainDetail(rowdata.saleid).then(res => {
	        form.value = res.data
	    });
	    businessManagerReviewGoodsList(rowdata.saleid).then(res => {
	        goodsList.value = res.data
	    });
	  
	    // 查询剩余额度
	    const AmountqueryParams = {
	        companyId:rowdata.companyId,
	        saleId: rowdata.saleid,
	    }
	    getsalemaincheckAmount(AmountqueryParams).then(res => {
	        remainingMoney.value = res.data.amounts
	    });
}
function GetlistsaleBusGoodsList() {
  // // 查询可销售商品列表
    const KeSaleGoodsParams = {
        companyId:form.value.companyId,
        userid: userStore.id,
        // userid: 41,
        deleteflag:0,           //不禁用的，禁用标志 0: 不禁用 1: 禁用 2, 流程中
        // state:1,                //状态0待审核,1已审核
    }
    // const KeSaleGoodsQuery = {
    //     pageNum: 1,
    //     pageSize: 999,
    // }
    listsaleBusGoodsList(KeSaleGoodsParams).then(res => {
        goodsList.value = res.data
		// console.log(' goodsList.value', goodsList.value)
    });
	// console.log(' userStore.id', userStore.id)
	
}


const getDeptLists = () =>{
  listproductList().then(res => {
     companyOptions.value = res.data.map(item => {
				return {
					value:item.deptId,
					text:item.deptName
				}
			})
	  console.log('companyOptions.value', companyOptions.value)
  });
 
}

/** 更改生产单位时，查询额度 */
function getEdu() {
    console.log(form.value.companyId,'form.value.companyId生产单位ID')
     // 清空已选补差数据
    const AmountqueryParams = {
        companyId:form.value.companyId,
        saleId: 0,
    }
    // 查询剩余额度
    getsalemaincheckAmount(AmountqueryParams).then(res => {
        remainingMoney.value = res.data.amounts
    });
    GetlistsaleBusGoodsList()
    // getsalemainpiAoKouList()

}










//取消
const goCancel = () => {

 uni.navigateTo({
 	url:'/pages/work/OrderManager/index'
 })
  
}




</script>

<style lang="scss" scoped>
	// ::v-deep .uni-checkbox-input {
	//   background-color: #fff !important;
	//   border-color: #67c23a !important;
	// }
	
	// ::v-deep .uni-checkbox-input-checked {
	//   background-color: #fff !important;
	//   color: #67c23a !important; /* 对号颜色 */
	
	// }
	// ::v-deep .uni-checkbox-input svg{
	// 	  viewBox: 0 0 36 36;
	// 	  width: 22rpx;
	// 	  height: 22rpx;
	//   }
	.select-all {
		//靠右显示
		margin-left: auto;
		// margin-left: 10rpx;
		// background-color: #67c23a;
	}
.custom-input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  height: 25px;
}
.order-detail-container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.flex-row {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 标签和下拉框之间的间距 */
}

.page-title {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 基础信息网格布局 */
.info-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.info-grid {
  :deep(.uni-row) {
    display: flex;
    flex-wrap: wrap;
  }
  .info-value {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    display: flex;
    justify-content: flex-end;
  }
  
  margin-bottom: 20rpx;
  margin-top: 20rpx;
}

.info-item {
  margin-bottom: 12px;
}

.label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.required::after {
  content: '*';
  color: #f56c6c;
  margin-left: 2px;
}

.amount {
  color: #f56c6c;
  font-weight: 600;
}

.select-container {
  width: 100%;
}

:deep(.uni-data-select__text) {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}

:deep(.month-popup) {
  min-width: 120px;
}

/* 商品信息区域 */
.goods-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 16px;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 40px 0;
  font-size: 14px;
}

/* 商品双栏布局 */
.goods-double-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.goods-item {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
}

.goods-header {
  background: #409eff;
  color: white;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.serial-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.goods-name {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

/* 商品内容区域 */
.goods-content {
  padding: 12px 16px;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.info-pair {
  flex: 1;
  padding: 0 8px;
}

.info-pair .label {
  font-size: 14px;
  color: #666;
  margin-bottom: 2px;
}

.info-pair .value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  text-align: right;
}

.quantity {
  color: #409eff;
  font-weight: 600;
}

.total {
  color: #f56c6c;
  font-weight: 600;
}

.empty {
  visibility: hidden;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
  flex: 1;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-secondary {
  background: #67c23a;
  color: white;
}

.btn-outline {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-detail-container {
    padding: 12px;
  }

  .info-item {
    margin-bottom: 10px;
  }

  .info-pair {
    padding: 0 4px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    margin-bottom: 8px;
  }

  .btn:last-child {
    margin-bottom: 0;
  }
}

/* 添加多选框样式 */
.uni-checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
</style>