<template>
  <view class="container">
    <z-paging ref="pagingRef" class="containerBox" v-model="listData" :default-page-size="queryParams.pageSize" @query="queryList">
      <template #top>
        <!-- 项目号/项目描述/物料号/物料描述/供应商编码/供应商名称/订单编号 -->
        <uv-search v-model="queryParams.keyword" placeholder="请输入" :showAction="true" actionText="搜索" @search="searchList" @custom="searchList"></uv-search>
        <view class="dropDown">
          <view class="item_dropDown" @tap="openPicker">
            <uv-text :lines="1" :text="storageTypeText" :color="storageTypeText != '全部' ? '#3c9cff': ''" class="item_text"></uv-text>
            <uv-icon name="arrow-down-fill" :color="storageTypeText != '全部' ? '#3c9cff': '#666'"></uv-icon>
          </view>
        </view>
      </template>


      <view class="box">
        <view v-for="item in listData" class="item">
          <view class="title">单据号：{{ item.billNo }}<uv-icon name="file-text" size="36rpx" style="margin-top: 4rpx;" @tap="itemCopy(item)"></uv-icon></view>
          <view><text>入库类型</text>：{{ item.rkTypeName }}</view>
          <view><text>所属仓库：</text>{{ item.cangkuName }}</view>
          <view><text>物资类型：</text>{{ item.wlTypeName }}</view>
          <view><text>理货员：</text>{{ item.lihuoY }}</view>
          <view><text>入库时间：</text>{{ item.createTime }}</view>
          <view v-show="item.showMore">
            <view><text>订单号：</text>{{ item.sapNo }}</view>
            <view><text>物料号：</text>{{ item.wlNo }}</view>
            <view><text>物料描述：</text>{{ item.wlMs }}</view>
            <view><text>数量：</text>{{ item.realQty }}{{ item.dw }}</view>
            <view><text>项目定义号：</text>{{ item.xmNo }}</view>
            <view><text>项目描述：</text>{{ item.xmMs }}</view>
            <view><text>供应商：</text>{{ item.gysMc }}</view>
            <view><text>存放位置：</text>{{ item.pcode || "-" }}</view>
            <view><text>身份码：</text>{{ item.entityId || "-" }}</view>
            <view><text>备注：</text>{{ item.remark || "-" }}</view>
          </view>
          <view class="more" v-show="!item.showMore" @tap="changeMore(item)">
            <view>详细信息</view>
            <uv-icon name="arrow-down" color="#A4A6A7" size="28rpx" style="margin-left: 10rpx;"></uv-icon>
          </view>
          <view class="more" v-show="item.showMore" @tap="changeMore(item)">
            <view>收起</view>
            <uv-icon name="arrow-up" color="#A4A6A7" size="28rpx" style="margin-left: 10rpx;"></uv-icon>
          </view>
        </view>
      </view>
      
      <view class="btn">
        <uv-button type="error" text="确定" size="large" style="width: 48%;" @tap="openModal">撤 销 入 库</uv-button>
        <uv-button type="primary" text="确定" size="large" class="mainBtn" style="width: 48%;" @tap="goAddInStorage">新 增 入 库</uv-button>
      </view>
    </z-paging>

    <uv-picker ref="picker" :columns="storageType" :keyName="'typeName'" activeColor="#3c9cff" @confirm="pickerConfirm"></uv-picker>


    <uv-modal ref="storageModalRef" title="单据号" @confirm="romoveStorage" :showCancelButton="true" :closeOnClickOverlay="false" asyncClose>
      <view class="slot-content" style="width: 100%;">
				<uv-form labelPosition="left" :model="storageForm" labelWidth="80" :rules="storageRules" ref="storageFormRef">
          <uv-form-item label="单据号" prop="billNo" borderBottom>
            <uv-input v-model="storageForm.billNo" border="none" placeholder="请输入单据号" />
          </uv-form-item>
        </uv-form>
			</view>
    </uv-modal>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import { storageTypeList, inStockList, deleteStock } from "@/api/storage"

// *****下拉筛选
// 默认值
// const defaultValue = ref([]);
// // 选择结果
// const result = ref([{ name: 'storageType', label: '全部', value: '' }]);
// const activeName = ref('');
// // 筛选条件配置
// const storageType = ref({
//   label: '文档格式',
//   value: '',
//   activeIndex: 0,
//   color: '#333',
//   activeColor: '#2878ff',
//   child: []
// });
// // 计算属性
// const dropItem = computed(() => {
//   return (name) => {
//     const resultObj = {};
//     const find = result.value.find(item => item.name === name);
//     if (find) {
//       resultObj.label = find.label;
//       resultObj.value = find.value;
//     } else {
//       resultObj.label = getPropertyByName(name).label;
//       resultObj.value = getPropertyByName(name).value;
//     }
//     return resultObj;
//   }
// });

// const currentDropItem = computed(() => {
//   return getPropertyByName(activeName.value);
// });

// // 工具函数：根据名称获取对应的响应式对象
// function getPropertyByName(name) {
//   switch (name) {
//     case 'storageType': return storageType.value;
//     default: return {};
//   }
// }

// // 生命周期钩子
// onPageScroll(() => {
//   // 滚动后及时更新位置
//   dropDown.value?.init();
// });

// const selectMenu = (e) => {
//   const { name, active, type } = e;
//   activeName.value = name;

//   // type 等于1 的需要特殊处理：type不等于1可以忽略
//   if (type == 1) {
//     clickItem({
//       name: 'vip_type',
//       label: 'VIP文档',
//       value: e.active ? 1 : 0
//     });
//   } else {
//     const find = result.value.find(item => item.name == activeName.value);
//     if (find) {
//       const findIndex = getPropertyByName(activeName.value).child.findIndex(item =>
//         item.label == find.label && item.value == find.value
//       );
//       getPropertyByName(activeName.value).activeIndex = findIndex;
//     } else {
//       getPropertyByName(activeName.value).activeIndex = 0;
//     }
//   }
// };

// const clickItem = (e) => {
//   // 下面有重新赋值，所以用let
//   let { label, value } = e;
//   const findIndex = result.value.findIndex(item => item.name == activeName.value);

//   if (defaultValue.value.indexOf(value) > -1 && getPropertyByName(activeName.value).label) {
//     label = getPropertyByName(activeName.value).label;
//   }

//   // 已经存在筛选项
//   if (findIndex > -1) {
//     result.value[findIndex] = {
//       name: activeName.value,
//       label,
//       value
//     }
//   } else {
//     result.value.push({
//       name: activeName.value,
//       label,
//       value
//     });
//   }

//   result.value = result.value.filter(item => defaultValue.value.indexOf(item.value) == -1);

//   result.value.forEach(item=> {
//     queryParams.value[item.name] = item.value
//   })
//   pagingRef.value.reload()
//   console.log("筛选的值：", queryParams.value)
// };

// const change = (e) => {
//   console.log('弹窗打开状态：', e);
// }

const storageType = ref([])
const storageTypeText = ref("全部")
// 获取下拉的列表
const getStoragTypeList = () => {
  storageTypeList().then(res =>{
    // res.data.forEach(item => {
    //   item.value = item.typeCode
    //   item.label = item.typeName
    // });
    res.data.unshift({typeName: "全部", typeCode: ""})
    // console.log("入库类型", res.data)
    storageType.value[0] = res.data
  }) 
}

const picker = ref(null)
const openPicker = () => {
  picker.value.open()
}
const pickerConfirm = (e) => {
  console.log(e)
  queryParams.value.rkType = e.value[0].typeCode
  storageTypeText.value = e.value[0].typeName
  pagingRef.value.reload()
}

const queryParams = ref({
  keyword: "",
  rkType: "",
  pageNum: 1,
  pageSize: 10
})
const pagingRef = ref(null)
const listData = ref([])
// 获取列表
const queryList = (pageNo, pageSize) => {
  queryParams.value.pageNum = pageNo
  console.log(pageNo, pageSize)
  inStockList(queryParams.value).then(res => {
    res.rows.forEach(e => {
      e.showMore = false
    })
    pagingRef.value.complete(res.rows)
  }).catch(res => {
    pagingRef.value.complete(false)
  })
}
const searchList = () => {
  pagingRef.value.reload()
}

onLoad(() => {
  getStoragTypeList()
})

onShow(() => {
  pagingRef.value?.reload()
})



// 复制
const itemCopy = (item) => {
  uni.setClipboardData({
	data: item.billNo,
	success: function () {
		// console.log('success');
	}
});
}
// 切换展开收起
const changeMore = (item) => {
  item.showMore = !item.showMore
}

const storageModalRef = ref(null)
const storageFormRef = ref(null)
const openModal = () => {
  storageModalRef.value.open();
}
const storageForm = ref({
  billNo: '',
})
const storageRules = ref({
  'billNo': {
    type: 'string',
    required: true,
    message: '请填写单据号',
    trigger: ['blur', 'change']
  },
})

const romoveStorage = () => {
  storageFormRef.value.validate().then(res => {
    deleteStock(storageForm.value.billNo).then(res => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        mask: true
      })
      pagingRef.value.reload()
      storageModalRef.value.close()
    })
  }).catch(errors => {
    storageModalRef.value.closeLoading()
  })
}


const goAddInStorage = () => {
  uni.navigateTo({
    url: "/pagesStorage/addInStorage",
  })
}
</script>

<style scoped lang="scss">
.container {
  position: relative;
  .containerBox{
    padding: 32rpx;
    padding-bottom: 120rpx;
    .dropDown{
      padding: 0 30rpx;
      border-bottom: 1px solid #dadbde;
      .item_dropDown{
        padding: 20rpx;
        display: flex;
        align-items: center;
        ::v-deep .uv-text{
          width: unset !important;
          flex: unset !important;
        }
        ::v-deep .item_text{
          max-width: 200rpx;
          margin-right: 10rpx !important;
        }
      }
    }
    ::v-deep .uv-search {
      flex: unset;
    }
    .box{
      // background-color: #ebebeb;
      // background-color: #f5f5f5;
      // padding-top: 20rpx;
      .item {
        background: #efefef;
        padding: 20rpx;
        margin-top: 20rpx;
        line-height: 50rpx;
        font-size: 28rpx;
        border-radius: 8rpx;
        color: #333;
        .title {
          font-size: 32rpx;
          font-weight: bold;
          display: flex;
          align-items: center;
        }
        text{
          color: #666;
        }
        .more {
          color: #A4A6A7;
          display: flex;
          align-items: center;
        }
      }
    }
    .btn{
      position: fixed;
      width: calc(100vw - 64rpx);
      bottom: 0;
      left: 32rpx;
      z-index: 99;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  ::v-deep .uv-input__content{
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
