<template>
  <view class="order-page">
    <view class="top-view">
      <view class="top-row">
        <text class="header-item"> 客户</text>
        <text class="header-item">总欠款 </text>
      </view>
      <view class="top-row">
        <view class="info-item">
          <image class="logo" :src="customInfo.avatar" />
          <text class="name">
            {{ customInfo.name}}
          </text>
        </view>
        <view class="price-item">
          {{ customInfo.debtAmount }}
        </view>
      </view>
    </view>
    <view scroll-y class="shop-list">
      <block v-if="!$util.isEmpty(detailsList)">
        <gatheringList
          v-for="(item, index) in detailsList"
          :key="index"
          :isEdit="true"
          :isCheck="item.checked"
          :info="item"
          @click.native="checkItemEvent(item)"
        ></gatheringList>
      </block>
      <block v-else>
        <AppWrapperEmpty
          title="暂无数据"
          :is-empty="$util.isEmpty(detailsList)"
        />
      </block>
    </view>
    <view class="bar-view">
      <template>
        <view class="info-view">
          <view
            class="details-select"
            @click="allCheck"
          >
            <text
              class="iconfont iconxuanzhong"
              v-if="isAllCheck"
            > </text>
            <text
              class="iconfont iconweixuanzhong"
              v-else
            > </text>
          </view>
          已选 <text class="price">{{ selectList.length }}</text> 笔，
          <text class="unit">¥</text>
          <text class="price">{{ selectTotalAmount }}</text>
        </view>
      </template>
      <view
        class="btn-view"
      >
        <button
          :class="['admin-button-com', 'blue', 'global']"
          @click="batchConfirm"
        >确认</button>
      </view>
    </view>
  </view>
</template>
<script>
import gatheringList from './components/gatheringList'
import { purchaseDebtList, ghsDetail, purchaseClearCreateOrder } from "@/api/purchase/index";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
export default {
  components: { gatheringList, AppWrapperEmpty },
  data () {
    return {
      checkShow: true,
      detailsList: [],
      num: "",
      customInfo: {},
      totalAmount: "",
      isAllCheck: false,
    }
  },
  onPullDownRefresh() {
    this.initData().then(res => {
      uni.stopPullDownRefresh();
    })
    this.getClient().then(res => {
      uni.stopPullDownRefresh();
    })
  },
  computed: {
    selectList () {
      let list = [];
      if (this.detailsList) {
        for (const item of this.detailsList) {
          if (item.checked) {
            list.push(item);
          }
        }
      }
      console.log(list)
      return list;
    },
    selectTotalAmount () {
      let amount = 0;
      if (this.detailsList) {
        for (const item of this.detailsList) {
          if (item.checked) {
            amount = amount + Number(item.actPrice);
          }
        }
      }
      return amount;
    },
    // allTotalAmount () {
    //   let amount = 0;
    //   if (this.detailsList) {
    //     for (const item of this.detailsList) {
    //       amount = amount + Number(item.actPrice);
    //     }
    //   }
    //   return amount;
    // },

  },
  watch: {
    selectList () {
      if (this.selectList.length === this.detailsList.length) {
        this.isAllCheck = true
      } else {
        this.isAllCheck = false
      }
    }
  },
  methods: {
    // 全选
    allCheck () {
      this.isAllCheck = !this.isAllCheck
      if (this.isAllCheck) {
        this.detailsList.map(ele => {
          ele.checked = true
        });
      } else {
        this.detailsList.map(ele => {
          ele.checked = false
        });
      }
    },
    init() {
      this.initData()
      this.getClient()
    },
    // 初始化页面数据
    initData () {
      return purchaseDebtList({id:this.option.id}).then(res => {
        console.log(res)
        this.detailsList = res.data.list.map(ele => {
          return {
            ...ele,
            checked: false
          };
        });
      }).catch(err => { console.log(err) })
    },
    getClient() {
      return ghsDetail({id:this.option.id}).then(res => {
        console.log('res', res)
        this.customInfo = res.data
      }).catch(err => {console.log('err', err)})
    },
    // 单选
    checkItemEvent (item) {
      let count = 1
      for (let index = 0; index < this.detailsList.length; index++) {
        const element = this.detailsList[index].id;
        if (element == item.id) {
          //id相等选中
          this.$set(this.detailsList, index, {
            ...this.detailsList[index],
            checked: !this.detailsList[index].checked
          });
          break;
        }
      }
    },
    // 批量收款
    batchConfirm () {
      let arr = []
      if (this.selectList.length > 0) {

        this.selectList.forEach(item => {
          arr.push(item.id)
        })
        purchaseClearCreateOrder({ purchaseIds:arr.join(','),ghsId:this.option.id }).then(res => {
          console.log('res ===>', res)
          if(res.code == 1) {
            this.pageTo({
              url: '/pagesPurchase/gatherPay?orderSn=' + res.data.orderSn + '&actPrice=' + res.data.actPrice,
              type: 2
            })
          }
        }).catch(err => {console.log('err===>', err)})

      }
    },
    // 返回上一页
    back () {
      uni.navigateBack({})
    }
  }
}
</script>
<style lang="scss" scoped>
.order-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f9fbfc;
  .top-view {
    padding: 30upx;
    background-color: #fff;
    .top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:not(:last-child) {
        margin-bottom: 10upx;
      }
      .header-item {
        font-size: 24upx;
        font-weight: 400;
        color: #999999;
      }
      .info-item {
        display: flex;
        align-items: center;
        .logo {
          margin-right: 10upx;
          width: 50upx;
          height: 50upx;
          border-radius: 50%;
        }
        .name {
          font-size: 28upx;
          font-weight: 600;
          color: #333333;
        }
      }
      .price-item {
        font-size: 34upx;
        font-weight: 600;
        color: #333333;
      }
    }
  }
  .shop-list {
    padding: 20upx 0;
    flex: 1;
    padding-bottom: 100upx;
  }
  .bar-view {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30upx;
    width: 100%;
    height: 100upx;
    background: #fff;
    box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
    .info-view {
      display: flex;
      align-items: center;
      color: #333;
      font-size: 24upx;
      .iconfont {
        font-size: 32upx;
        color: #dddddd;
      }
      .price {
        margin: 0 5upx;
        color: $redColor;
        font-size: 32upx;
      }
      .unit {
        margin: 0 10upx;
        color: $redColor;
        font-size: 16upx;
      }
    }
    .btn-view {
      display: flex;
      .admin-button-com {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10upx;
        width: 200upx;
        height: 70upx;
        // line-height: 70upx;
        font-size: 32upx;
      }
      .cancel {
        border: 1px solid #999;
        color: #666;
      }
      .global {
        width: 150upx;
      }
    }
  }
}
.details-select {
  margin-right: 20upx;
  display: inline-block;
  .iconweixuanzhong,
  .iconxuanzhong {
    font-size: 40upx !important;
  }
  .iconxuanzhong {
    color: $mainColor !important;
  }
}
</style>
