<template>
  <div class="content">
    <!-- 滚动列表 -->
    <scroll-view scroll-y @scrolltolower="onScrollTolower">
      <div class="list" v-for="(item, index) in tableList" @click="handleDetails(item)">
        <div style="margin-right: 8px">{{ index + 1 }}.</div>
        <div class="item">
          <div>物资名称: {{ item.maTypeName }}</div>
          <div>规格型号: {{ item.typeName }}</div>
          <div>计量单位: {{ item.unitName }}</div>
          <div>出库数量: {{ item.outNum || 0 }}</div>
          <div>出库方式: {{ item.manageType == 1 ? '数量出库' : '编码出库' }}</div>
          <div>备注: {{ item.remark }}</div>
        </div>
      </div>

      <button v-if="opts.isConfirm == 1" type="primary" style="margin-top: 30px" @click="penPopup">
        确 认
      </button>
    </scroll-view>
  </div>

  <!-- 填写备注的弹框 -->
  <uni-popup ref="popup" type="dialog">
    <view class="popup-content">
      <view class="popup-title">材料员确认</view>
      <uni-easyinput type="textarea" v-model="remark" placeholder="请输入备注..." autoHeight />
      <view class="popup-btns">
        <button type="default" @click="closePopup">取 消</button>
        <button type="primary" @click="confirmRemark">确 认</button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, reactive, computed } from 'vue'
import { getLeaseRequestVoApi, confirmMaterialApi } from '@/services/materialsStation'

const opts = ref(null)
const tableList = ref([])
const total = ref(0)
const remark = ref('')
const popup = ref()
const loading = ref(false)

const finish = computed(() => {
  if (total.value === tableList.value.length) return true
})

onShow((opt) => {})

onLoad((opt) => {
  console.log('🚀 ~ onLoad ~ opt:', opt)
  opts.value = opt.params ? JSON.parse(opt.params) : {}
  console.log('🚀 ~ opts.value:', opts.value)
  getList()
})

const onScrollTolower = () => {
  if (finish.value) return
  queryParams.pageSize += 10
  getList()
}

const getList = async () => {
  try {
    const res = await getLeaseRequestVoApi(opts.value)
    tableList.value = res.data.leaseApplyDetailsList
  } catch (error) {
    console.log('🚀 ~ getList ~ error:', error)
  }
}
const handleDetails = (item) => {
  console.log('🚀 ~ handleDetails ~ item:', item)
}
const penPopup = () => {
  popup.value.open()
}
const closePopup = () => {
  popup.value.close()
}
const confirmRemark = () => {
  console.log('opts:', opts.value)
  const params = {
    id: opts.value.id,
    leaseSignId: opts.value.leaseSignId,
    isConfirm: 2,
    confirmRemark: remark.value,
  }
  if (loading.value) return
  loading.value = true
  // loading
  uni.showLoading({
    title: '提交中...',
  })
  confirmMaterialApi(params)
    .then((res) => {
      popup.value.close()
      uni.hideLoading()
      loading.value = false
      // 返回
      uni.navigateBack()
    })
    .catch((err) => {
      console.log('err:', err)
      loading.value = false
      uni.hideLoading()
    })
}
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  height: calc(100vh - 147px);
  .query {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f0a037;
  }

  .list {
    min-height: 120px;
    margin-bottom: 10px;
    background: #fafafa;
    border-radius: 6px;
    padding: 8px;
    display: flex;
  }
}
.popup-content {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  width: 80vw;
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.popup-btns {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}
.popup-btns button {
  /* margin-left: 20rpx; */
}
</style>
