<template>
  <div class="main">
    <div class="card">
      <van-cell-group>
        <van-field v-model="carBigPos" is-link readonly label="选择库位" placeholder="请选库位号"
          @click="isShowCarBigPosPicker = true" />
        <van-popup :show="isShowCarBigPosPicker" round position="bottom">
          <van-cascader v-model="carBigPosValue" title="请选库位号" :options="carBigPosList"
            @close="isShowCarBigPosPicker = false" @finish="carBigPosFinish" />
        </van-popup>
      </van-cell-group>

    </div>
    <div class="card" v-if="carStatus == 1">
      <van-cell-group inset>
        库位绑定信息
        <van-cell title="物料名称" value="断路器总成" />
        <van-cell title="物料图号" value="DESA" />
        <van-cell title="物料编号" value="DESA1235123" />
        <van-cell title="订单号" value="Order001" />
        <van-cell title="入库时间" value="2025-03-22" />
      </van-cell-group>
      <van-button icon="replay" type="primary" size="large">库位解绑</van-button>
    </div>
    <div class="card" v-if="carStatus == 2">
      <van-cell-group inset>
        空库位绑定
        <!-- <van-field label="物料名称" v-model="bindMaterialsData.materialName" right-icon="browsing-history-o"
          :right-icon-size="19" /> -->
        <van-field  v-model="bindMaterialsData.materialName" is-link readonly name="picker" label="物料名称" placeholder="选择物料"
          @click="isShowMaterialsPicker = true" />
        <van-popup :show="isShowMaterialsPicker" destroy-on-close position="bottom">
          <van-picker :columns="materialsList" :model-value="bindMaterialsData.materialCode" @confirm="bindMaterialsOnConfirm"
            @cancel="isShowMaterialsPicker = false" />
        </van-popup>
        <van-cell title="物料图号" :value="bindMaterialsData.materialCode" right-icon="more-o" :right-icon-size="19" />
        <!-- <van-field label="物料号" v-model="bindMaterialsData.materialCode" right-icon="more-o" :right-icon-size="19" /> -->
        <van-field label="物料编号" v-model="bindMaterialsData.materialNo" right-icon="scan" :right-icon-size="19" />
        <van-field label="订单号" v-model="bindMaterialsData.orderNo" right-icon="newspaper-o" :right-icon-size="19" />
        <van-button icon="back-top" type="primary" size="large">绑定库位信息</van-button>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
const ExecDatabaseByParam = inject('ExecDatabaseByParam')

const carStatus = ref(0)

// 选择库位 下拉
const carBigPos = ref()
const carBigPosValue = ref()
const isShowCarBigPosPicker = ref(false)
const carBigPosList = reactive([
  {
    text: '缓存库1',
    value: '缓存库1',
    children: [{ text: '1-1', value: '1-1' }, { text: '1-2', value: '1-2' }, { text: '1-3', value: '1-3' }],
  },
  {
    text: '缓存库2',
    value: '缓存库2',
    children: [{ text: '2-1', value: '2-1' }, { text: '2-2', value: '2-2' }, { text: '3-3', value: '3-3' }],
  },
])

// 选择物料种类 下拉
const isShowMaterialsPicker = ref(false)
const materialsList = reactive([
  { text: '测试物料1', value: 'MaterialsType1' },
  { text: '测试物料2', value: 'MaterialsType2' },
  { text: '测试物料3', value: 'MaterialsType3' },
])
const bindMaterialsData = reactive({
  materialName: '',
  materialNo: '',
  materialCode: '',
  orderNo: '',
  inTime: '',
})

onMounted(() => {
})

// 全部选项选择完毕后，会触发 finish 事件
const carBigPosFinish = (selectedOptions) => {
  console.log(selectedOptions, selectedOptions.selectedOptions);
  if(selectedOptions.selectedOptions[0].text == '缓存库1') {
    carStatus.value = 1
  } else {
    carStatus.value = 2
  }
  carBigPos.value = selectedOptions.selectedOptions.map((option) => option.text).join(' / ');
  isShowCarBigPosPicker.value = false;

  console.log(carStatus)
};

const bindMaterialsOnConfirm = (selectedValues, eslectedOptions) => {
  bindMaterialsData.materialName = selectedValues?.text;
  bindMaterialsData.materialCode = selectedValues?.value;
  isShowMaterialsPicker.value = false;
};

</script>

<style lang="scss" scoped></style>
