<template>
  <page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="content"><!-- @touchmove="touchmoveMethod" -->
    <Navbar title="选择货品" :showRightText="false" :isBack="false" />
    <view style="width: 100%;height: calc(100vh - 60px);">
      <view class="search-form">
        <uni-easyinput class="searchInput" placeholder="输入货品编码/名称" v-model="searchValue" suffixIcon="search"
                       @iconClick="search"
                       @keyup.enter.native="search"></uni-easyinput>
      </view>
      <uni-table  ref="uniTable" :th-style="{backgroundColor:'#3c94fd'}"  type="selection"
                  @selection-change="selectChange" border stripe empty-text="暂无更多数据">
        <view class="tableHeader">
          <uni-tr style="display:flex;width: 100%">
            <uni-th align="center" style="width: 25vw">货品编码</uni-th>
            <uni-th align="center" style="width: 25vw">货品名称</uni-th>
            <uni-th align="center" style="width: 25vw">货品类别</uni-th>
            <uni-th align="center" style="width: 25vw">计量单位</uni-th>
          </uni-tr>
        </view>
        <scroll-view class="chronic-science" style="margin-top: 44px;overflow-y: auto;height: 68vh;" scroll-y="true"
                     @scrolltolower="onScrollTolower">
          <uni-tr style="height: 64rpx;width: 100%;max-width: 100vw;"
                  :style="{display: 'flex',flexDirection: 'row',justifyContent: 'space-between'}"
                  v-for="(item,index) in tableList" :key="index">
            <uni-td class="list_item">{{ item.materialCode }}</uni-td>
            <uni-td class="list_item">{{ item.materialName }}</uni-td>
            <uni-td class="list_item">{{ item.materialTypeName }}</uni-td>
            <uni-td class="list_item">{{ item.unitName }}</uni-td>
          </uni-tr>
        </scroll-view>
      </uni-table>
      <view style="width: 100%;background: #ffffff;padding: 20rpx 0;height: 100rpx;position: sticky;bottom: 0;z-index: 99;">
        <u-button
          style="width:180rpx;background: linear-gradient( 270deg, #FFB679 0%, #EF882E 100%);border: 0;position: fixed;bottom: 20rpx;right: 10px;height:70rpx"
          type="primary"
          @click="navigateTo('/pages/enterAndExit/exit/add')">确认
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>

import UButton from '@/uni_modules/uview-ui/components/u-button/u-button.vue'
import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import { getInBoundGoodsApi } from '@/api/enterExit'
import UniTr from '@/uni_modules/uni-table/components/uni-tr/uni-tr.vue'
import UniTd from '@/uni_modules/uni-table/components/uni-td/uni-td.vue'
import UniTh from '@/uni_modules/uni-table/components/uni-th/uni-th.vue'
import UniTable from '@/uni_modules/uni-table/components/uni-table/uni-table.vue'

export default {
  components: { UniTable, UniTh, UniTd, UniTr, UniEasyinput, UButton },
  data() {
    return {
      fontValue: uni.getStorageSync('fontSize') || 8,
      tableList: [],
      allChecked: false,
      searchValue: '',
      pageNum: 1,
      pageSize: 20,
      total: 0,
      status: 'loadmore',
      form: '',
      selectList: []
    }
  },
  onLoad(options) {
    console.log('options:', options)
    this.form  = options.form ? JSON.parse(decodeURIComponent(options.form)) : this.form
    this.selectList = options.selectList ? JSON.parse(decodeURIComponent(options.selectList)) : []
    console.log('form:', this.form)
    this.getList()
  },
  onShow() {
  },
  methods: {
    search() {
      console.log('Searching for:', this.searchValue)
      this.pageNum = 1
      this.getList()
    },
    // 翻页
    onScrollTolower() {
      console.log(this.tableList.length)
      if (this.total > this.tableList.length) {
        this.pageNum++
        this.getList()
      }
    },
    //获取订单列表
    async getList() {
      console.log('获取列表')
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        areaId: this.form.areaId,
        warehouseId: this.form.warehouseId,
        materialName: this.searchValue
      }
      try {
        const res = await getInBoundGoodsApi(params)
        console.log('?? ~ getList ~ res:', res)
        this.total = Number(res.total)
        if (this.pageNum == 1) {
          this.tableList = res.rows
        } else {
          this.tableList.push(...res.rows)
        }
        this.tableList.map(item => {
          item.checked = false
        })
        this.selectList.forEach(selectItem => {
          this.tableList.map(item => {
            if (item.materialId === selectItem.materialId) {
              item.checked = true
              item.fetchNum = selectItem.fetchNum
            }
          })
        })
        this.$nextTick(() => {
          if (this.$refs.uniTable) {
            this.tableList.forEach((item, index) => {
              if (item.checked) {
                this.$refs.uniTable.toggleRowSelection(index, true)
              }
            })
          } else {
            console.warn('uniTable未挂载或setSelection方法不存在')
          }
        })
        this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
      } catch (error) {
        console.log(error)
      }
    },
    selectChange(e){
      let arr = []
      this.selectList = []
      let selectedIndex = []
      selectedIndex = e.detail.index
      selectedIndex.forEach(i => {
        if (!this.selectList.some(item => item.materialId === this.tableList[i].materialId)) {
          this.selectList.push(this.tableList[i])
        }
      })
    },
    navigateTo(url) {
      let pages = getCurrentPages();
      let prePage = pages[pages.length - 2]; //上一个页面
      this.form.isDisabled = false
      prePage.$vm["getGoodData"]({
        selectList:  encodeURIComponent(JSON.stringify(this.selectList)),
        form: JSON.stringify(this.form)
      });
      uni.navigateBack(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.uni-page-body {
  height: 100%;
  width: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  .search-form {
    display: flex;
    width: 98%;

    .searchInput {
      width: 300px;
      height: 40px;
      margin-left: 10px;
      font-size: 28rpx;
      font-family: PingFang SC-Regular;
    }

    .searchBtn {
      margin-left: 10px;
      height: 35px;
    }
  }

}
.list_item {
  width: 25vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: PingFang SC-Regular;
  color: #453C37;
  font-size: 28rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
/deep/ .tableHeader {
  font-weight: bold;
  color: #333;
  background: #f8f8f8;
  z-index: 20;
  position: absolute;
  top: 0;
  width: 100%;
  max-width: 100vw;
}

/deep/ .uni-table-td[data-v-321f8e79] {
  display: flex;
  padding: 12px 10px;
  font-size: 14px;
  border-bottom: 1px #EBEEF5 solid;
  font-weight: 400;
  color: #606266;
  line-height: 23px;
  box-sizing: border-box;
}

/deep/ .tr-table--border[data-v-c2c83a8e] {
  border-right: 1px #ebeef5 solid;
  display: flex;
}

::v-deep .u-checkbox {
  margin-bottom: 16rpx;
}


/deep/ uni-checkbox .uni-checkbox-input {
  width: 25px;
  height: 25px;
  border-radius: 15px;
}

/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  border-color: #ddd;
  color: #fff !important;
  background-color: #3E34FF !important;
}

/deep/ uni-checkbox .uni-checkbox-input {
  border-color: #ddd;
}

/deep/ uni-checkbox .uni-checkbox-input:hover {
  border-color: #ddd;
}
/deep/.uni-table{
  min-width: 0   !important;
}
</style>

