<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.smallAvatar"
          />
          <text class="name">
            {{ customInfo.name || "" }}
          </text>
        </view>
        <view class="price-item">
          {{ totalAmount || "" }}
        </view>
      </view>
    </view>
    <scroll-view
      scroll-y
      class="shop-list"
    >
      <block v-if="!$util.isEmpty(detailsList)">
        <DetailsItem
          v-for="(item, index) in detailsList"
          :key="index"
          :info="item"
          :isEdit="isBatch"
          :isCheck="item.checked"
          @click="checkItemEvent"
        ></DetailsItem>
      </block>
      <block v-else>
        <AppWrapperEmpty
          title="暂无数据"
          :is-empty="$util.isEmpty(detailsList)"
        />
      </block>
    </scroll-view>
    <view class="bar-view">
      <template v-if="!isBatch">
        <view class="info-view">
          共 <text class="price">{{ num }}</text> 笔
        </view>
      </template>
      <template v-else>
        <view class="info-view">
          已选 <text class="price">{{ selectList.length }}</text> 笔，
          <text class="unit">¥</text>
          <text class="price">{{ selectTotalAmount }}</text>
        </view>
      </template>
      <view
        class="btn-view"
        v-if="isBatch"
      >
        <button
          :class="['admin-button-com', 'disable']"
          @click="isBatch = false"
        > 取消</button>
        <button
          :class="['admin-button-com', 'blue']"
          @click="batchEvent"
        >收款</button>
      </view>
      <view
        class="btn-view"
        v-else
      >
        <button
          class="admin-button-com blue"
          @click="isBatch = true"
        >
          批量收款
        </button>
      </view>
    </view>
  </view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import DetailsItem from "./detailsItem";
import { getOrderDebtListApi, clearOrderApi } from "@/api/arrears/index";
import wexinPay from "@/utils/pay/wxPay";

export default {
  components: { AppWrapperEmpty, DetailsItem },
  data () {
    return {
      isBatch: false,
      customInfo: "",
      totalAmount: "",
      num: "",
      detailsList: [],
      listLoading: false
    };
  },
  onPullDownRefresh () {
    this.initData().then(res => {
      uni.stopPullDownRefresh();
    });
  },
  onLoad () {
    this.initData().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;
    }
  },
  methods: {
    async initData () {
      try {
        this.listLoading = true;
        const {
          data: { customInfo, num, totalAmount, list }
        } = await getOrderDebtListApi(this.option.id);
        this.customInfo = customInfo;
        this.totalAmount = totalAmount;
        this.num = num;
        this.detailsList = list.map(ele => {
          return {
            ...ele,
            checked: false
          };
        });
      } catch (error) {
      } finally {
        this.listLoading = false;
      }
    },
    checkItemEvent (item) {
      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;
        }
      }
    },
    batchEvent () {
      try {
        if (this.$util.isEmpty(this.selectList)) {
          this.$msg("请还款选择订单");
          return;
        }
        let ids = this.selectList.map(ele => {
          return { id: ele.id };
        });
        let parameter = {
          id: JSON.stringify(ids),
          customId: this.customInfo.id,
        }
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确定已收款？',
          success: function (res) {
            if (res.confirm) {
              self.paySuccess(parameter)
            }
          }
        });
        // const { data } = await clearOrderApi(parameter);
        // wexinPay(data, this.paySuccess, this.payFail);
      } catch (error) { }
    },
    // 支付成功
    async paySuccess (parameter) {
      await clearOrderApi(parameter);
      uni.navigateTo({ url: '/common/pageSuccess?title=收款成功' });
      // this.$util.pageTo(1);
    },
    payFail () {
      this.$msg("支付没有成功");
    }
  }
};
</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 30upx;
    flex: 1;
    padding-bottom: 50upx;
  }
  .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;
      }
    }
  }
}
</style>
