<template>
  <div class="customer w100 h100">
    <search-result :result-num="sum"></search-result>
    <div class="userName">{{tabData.salerName}}</div>
    <div class="list">
<!--      <van-pull-refresh-->
<!--        v-model="isRefreshing"-->
<!--        @refresh="onRefresh">-->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          :offset="10"
          @load="onLoad">
          <div class="listContent" v-for="item in postDataList" :key="item.clientPartyId" @click="onCusClick(item)">
            <van-row>
              <van-col span="9">客户信息：</van-col>
              <van-col span="15">{{item.clientPartyId}}/({{item.partyOpcode}}){{item.partyName}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">箱数：</van-col>
              <van-col span="15">{{item.boxsTotal}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">含税金额：</van-col>
              <van-col span="15">{{item.taxAmountTotal | toFix(2) |separator('',' 元')}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">无税金额：</van-col>
              <van-col span="15">{{item.taxFreeTotal | toFix(2) |separator('',' 元')}}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">税额：</van-col>
              <van-col span="15">{{item.taxFeeTotal | toFix(2) |separator('',' 元')}}</van-col>
            </van-row>
            <van-button plain round size="mini" type="info" class="btn_info" @click.stop="onCwnInfoClick(item)">资信信息</van-button>
            <div class="item-line"></div>
            <div class="item-info-btn">
              <span>查看详情</span>
              <van-icon name="arrow" size="15"  />
            </div>
          </div>
        </van-list>
<!--      </van-pull-refresh>-->
    </div>
    <div class="footer">
      <p class="text-center remove-margin">合计: <span>{{totalMoney | toFix(2) | separator('','元')}}</span></p>
    </div>

    <van-popup
      v-model="cwnInfoShow"
      closeable
      close-icon-position="top-right"
      position="bottom"
      class="flex flex-column"
      :style="{ height: '100%' }">
        <creditworthiness :client-id="clientId" :org-id="cwnOrgId" :db-name="cwnDbName"/>
    </van-popup>
  </div>
</template>

<script>
// 引入接口
import {
  getCustomerList
} from '@/api/saleSituation'
// import {getResListNum} from '@/utils/common'
// 引入组件
import SearchResult from '@/components/SearchResult'
import Creditworthiness from './Creditworthiness'

export default {
  name: 'customer',
  components: {
    Creditworthiness,
    SearchResult
  },
  props: {
    chooseTime: {
      type: Object,
      default: () => {
      }
    },
    tabData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      totalMoney: 0,
      time: {},
      sum: '0',
      currentPage: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      error: false,
      cwnInfoShow: false,
      clientId: '',
      cwnOrgId: '',
      cwnDbName: '',
      postDataList: []
    }
  },
  mounted() {
    this.time = JSON.parse(JSON.stringify(this.chooseTime))
  },
  watch: {
    chooseTime: {
      handler(val) {
        this.time = JSON.parse(JSON.stringify(this.chooseTime))
        this.getPostData()
      },
      deep: true
    },
    tabData: {
      deep: true,
      handler (val) {
        this.getPostData()
      }
    }
  },
  destroyed() {
  },
  methods: {
    // onRefresh() {
    //   this.currentPage = 1
    //   this.finished = false
    //   this.getPostData()
    // },
    onLoad() {
      // this.loading = true
      this.getPostData()
    },
    onCusClick(data){
      this.$emit('click', data)
    },
    onCwnInfoClick(cus) {
      this.cwnInfoShow = !this.cwnInfoShow
      this.clientId = cus.clientPartyId
      this.cwnOrgId = this.tabData.orgId
      this.cwnDbName = this.tabData.sysDbSource
    },
    getPostData() {
      let _this = this

      let data = {
        'attr': {
          'orgId': this.tabData.orgId,
          'startdate': this.time.start,
          'enddate': this.time.end,
          'saler': this.tabData.saler // 销售员
        },
        'dbName': this.tabData.sysDbSource, // 'erp_ogg_shaphar',
        'start': _this.currentPage,
        'length': '999'
      }
      getCustomerList(data).then(rt => {
        if (rt.code === 1 || rt.code === '1') {
          _this.postDataList = rt.data
          _this.sum = _this.postDataList.length + '' // getResListNum(rt.msg)
          _this.totalMoney = 0
          _this.postDataList.forEach((item, index) => {
            let totalNum = parseFloat(item.taxAmountTotal)
            _this.totalMoney += totalNum
          })
          _this.finished = true
        } else {
          _this.$toast(rt.msg)
          _this.error = true
        }
        // 加载状态结束
        _this.loading = false
      }).catch(e => {
        _this.loading = false
        _this.error = true
        _this.finished = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .customer {
    display: flex;
    flex-direction: column;

    .userName {
      color: #23262A;
      font-weight: bold;
      font-size: 16px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .list {
      width: 100%;
      flex: 1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .listContent {
      background: white;
      margin-bottom: 8px;
      padding: 2px 14px 2px 14px;
      position: relative;

      /deep/ .van-row {
        padding-top: 6px;
        padding-bottom: 6px;

        .van-col {
          font-size: 14px;
        }

        .van-col--9 {
          color: #677282;
        }
      }
      .btn_info {
        width: 70px;
        height: 24px;
        position: absolute;
        right: 14px;
        bottom: 54px;
      }
    }

    .footer {
      background-color: $bc1;
      height: 44px;
      line-height: 44px;
      position: relative;
      font-size: 16px;
      p span {
        font-size: 16px;
        font-weight: bold;
        color: $tc5;
      }
    }
  }
</style>
