<template>
  <view class="content"><!-- @touchmove="touchmoveMethod" -->
    <Navbar title="选择货品" :showRightText="false" :isBack="false" />
    <view style="width: 100%;height: 100%;">
      <view class="search-form">
        <uni-easyinput class="searchInput" placeholder="输入货品编码/名称" v-model="searchValue" suffixIcon="search"
                       @iconClick="search"
                       @keyup.enter.native="search"></uni-easyinput>
      </view>
      <u-table :th-style="{backgroundColor:'#3c94fd'}"
               style="height:100% ;width: 100%;position: relative;overflow-y: auto;border: 5rpx solid rgba(178,178,178,.4);border-radius: 15rpx;border-top: 0rpx;">
        <u-tr style="position: sticky;top: 0;z-index: 10;width: 100%;height: 50rpx;display: flex;">
          <!--          background: #afafaf-->
          <u-th style="color: white;flex: 0.5;display: flex;justify-content: space-around;align-items: center;">
            <checkbox-group @tap="checkAll" style="width: 25px;height: 25px">
              <checkbox :checked="allChecked" />
            </checkbox-group>
          </u-th>
          <u-th class="list_title">货品编码
          </u-th>
          <u-th class="list_title">货品名称
          </u-th>
          <u-th class="list_title">货品类别
          </u-th>
          <u-th class="list_title">计量单位
          </u-th>
        </u-tr>
        <!--        <view style="width: 97%;height: 1px;background: #c4c3c3;margin-left: 1.5%;"></view>-->
        <scroll-view class="chronic-science" style="height: 78vh;margin-top: 5px;" scroll-y="true"
                     @scrolltolower="onScrollTolower">
          <view v-for="(item,index) in tableList" :key="index">
            <u-tr style="height: 64rpx;"
                  :style="{display: 'flex',flexDirection: 'row',justifyContent: 'space-between'}">
              <u-td style="flex: 0.5;display: flex;justify-content: space-around;align-items: center;">
                <checkbox-group style="width: 25px;height: 25px" @change="checkClick(item)">
                  <checkbox :checked="item.checked" />
                </checkbox-group>
              </u-td>
              <u-td class="list_item">{{ item.materialCode }}</u-td>
              <u-td class="list_item">{{ item.materialName }}</u-td>
              <u-td class="list_item">{{ item.materialTypeName }}</u-td>
              <u-td class="list_item">{{ item.unitName }}</u-td>
            </u-tr>
          </view>
        </scroll-view>
      </u-table>
      <u-button style="width:180rpx;height:70rpx;position: fixed;bottom: 20rpx;right: 10px;background: linear-gradient( 270deg, #FFB679 0%, #EF882E 100%);border: 0" type="primary"
                @click="navigateTo('/pages/enterAndExit/exit/add')">确认
      </u-button>
    </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'

export default {
  components: { UniEasyinput, UButton },
  data() {
    return {
      tableList: [],
      allChecked: false,
      searchValue: '',
      pageNum: 1,
      pageSize: 30,
      total: 0,
      status: 'loadmore',
      form: '',
      selectList: []
    }
  },
  onLoad(options) {
    console.log('options:', options)
    this.form  = options.form ? JSON.parse(decodeURIComponent(options.form)) : this.form
    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,
        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
            }
          })
        })
        this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
      } catch (error) {
        console.log(error)
      }
    },
    // 单个商品的选择
    checkClick(item) {
      item.checked = !item.checked
      if (!item.checked) {
        this.allChecked = false
      } else {
        // 判断每一个商品是否是被选择的状态
        const goods = this.tableList.every(item => {
          return item.checked === true
        })
        if (goods) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      }
      this.selectList = this.tableList.filter(item => item.checked)
      console.log('Selected items:', this.selectList)
    },
    checkAll() {
      this.allChecked = !this.allChecked
      if (this.allChecked) {
        this.tableList.map(item => {
          item.checked = true
        })
      } else {
        this.tableList.map(item => {
          item.checked = false
        })
      }
      this.selectList = this.tableList.filter(item => item.checked)
      console.log('Selected items:', this.selectList)
    },
    navigateTo(url) {
      url += '?selectList=' + encodeURIComponent(JSON.stringify(this.selectList)) + '&form=' + JSON.stringify(this.form)
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

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

.search-form {
  display: flex;
  width: 98%;
  margin-top: 10px;

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

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

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.list_title {
  color: black;
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: PingFang SC-Medium;
  font-weight: 500;
  color: #A69F9A;
}

.list_item {
  flex: 1;
  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;
}


::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;
}

</style>

