<template>
  <view class="content">
    <uni-nav-bar left-icon="back" statusBar @clickLeft="back" fixed title="客户订单"></uni-nav-bar>
    <view class="info-area flex-col">
      <view class="top-group flex-row">
        <image class="image_4" src="/static/imgs/client/client-default.png" />
        <view class="right-group flex-col">
          <view class="top-group_1 flex-row">
            <text>{{ info.enterpriseName }}</text>
            <image :src="info.isOverdue ? '/static/imgs/general/overdue-icon.png' : '/static/imgs/general/not-overdue-icon.png'" class="image_6" />
          </view>
          <view class="center-group flex-row-center-space">
            <view class="flex-row">
              <text>授信日期：</text>
              <text>{{ info.createTime | dateFormat }}</text>
            </view>
            <view class="right-group_1 flex-row">
              <text>授信额度：</text>
              <text>{{ info.creditLine | transformAmount }}</text>
            </view>
          </view>
          <view class="bottom-group flex-row-center-space">
            <view class="left-group flex-row">
              <text>交易额度：</text>
              <text>{{ info.usedCreditLine | transformAmount }}</text>
            </view>
            <view class="right-group_2 flex-row">
              <text>剩余额度：</text>
              <text>{{ info.availableCreditLine | transformAmount }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-for="(item, index) in orderList" :key="item.id">
        <view class="group_14 flex-row">
          <view class="left-group flex-row view_1">
            <image src="/static/imgs/client-credit/credit-order-icon.png" class="image_6" />
            <text class="text_13">{{ item.id | idFormat }}</text>
            <text class="text_15">{{ item.shouldRepayDate | dateFormat }}</text>
          </view>
          <view class="flex-row group_15" @click="show(index)">
            <text :style="{ color: statusMap[item.loanStatus].color }">{{ statusMap[item.loanStatus].text }}</text>
            <image :style="{ transform: openList.includes(index) ? 'rotate(180deg)' : '' }" src="/static/imgs/general/down-arrow-icon.png" class="image_8" />
          </view>
        </view>
        <view class="flex-col list-item" v-show="openList.includes(index)">
          <view class="flex-col list_1">
            <view class="list-item_1 flex-row" :key="i" v-for="(production, i) in item.orderInfo.itemList">
              <image :src="production.productImg || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/paper-default-small.png'" class="image_16" />
              <view class="right-group flex-col">
                <text class="text_27">{{ production.productName }}</text>
                <text class="text_29">
                  {{ production.categoryName }}/{{ production.brandName }}/{{ production.gramWeight }}g/{{ production.width }}*{{ production.length }}/{{
                    production.pieceQuantity
                  }}张
                </text>
              </view>
            </view>
          </view>
          <view class="justify-between group_24">
            <text class="text_33">下单时间：{{ item.orderInfo.createTime | dateFormat }}</text>
            <view class="flex-row">
              <text class="text_34">¥ {{ item.orderInfo.totalPrice }}</text>
              <text class="text_35" @click="go2('order-detail', { orderId: item.orderId })">查看详情</text>
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16450868979750382253.png"
                class="image_19"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-show="!orderList || orderList.length == 0" class="flex-row-center-center" style="margin-top: 20rpx">暂无相关订单</view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getCompanyCreditOrderList } from '@/apis/creditManagementApi.js'
const statusMap = {
  1: {
    text: '待还款',
    color: '#FA8C16'
  },
  2: {
    text: '逾期未还款',
    color: '#F5222D'
  },
  3: {
    text: '已还款',
    color: '#888888'
  }
}
export default {
  data() {
    return {
      info: {},
      orderList: [],
      statusMap: Object.freeze(statusMap),
      openList: []
    }
  },
  methods: {
    go2,
    back,
    getList() {
      getCompanyCreditOrderList({ customerEnterpriseId: this.info.enterpriseId }).then((res) => {
        if (res) {
          this.orderList = res.records
        }
      })
    },
    show(index) {
      if (this.openList.includes(index)) {
        this.openList.splice(this.openList.indexOf(index), 1)
      } else {
        this.openList.push(index)
      }
    }
  },
  filters: {
    transformAmount(value) {
      if (value == null) {
        return '0'
      }
      let cnt = value / 10000
      cnt = Math.round(cnt * 100) / 100
      cnt = cnt + ''
      let arr = cnt.split('.')
      arr[1] ? (arr[1] = arr[1] + '00'.substr(0, 2 - arr[1].length)) : (arr[1] = '00')
      return arr.join('.') + '万'
    },
    dateFormat(value) {
      if (!value) {
        return ''
      }
      return value.split(' ')[0]
    },
    idFormat(value) {
      if (!value) {
        return ''
      }
      return value.substr(0, 12)
    }
  },
  onLoad(option) {
    this.info = JSON.parse(option.info)
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .info-area {
    background-color: rgb(255, 255, 255);
    .top-group {
      padding: 20rpx 32rpx 28rpx 32rpx;
      border-bottom: solid 2rpx rgb(221, 221, 221);
      .image_4 {
        width: 100rpx;
        height: 100rpx;
      }
      .right-group {
        margin-left: 20rpx;
        padding-bottom: 10rpx;
        flex: 1 1 auto;
        .top-group_1 {
          color: rgb(51, 51, 51);
          font-size: 30rpx;
          font-weight: 500;
          line-height: 42rpx;
          text {
            word-break: break-all;
            max-width: 440rpx;
          }
          .image_6 {
            margin-left: 20rpx;
            margin-top: 6rpx;
            width: 100rpx;
            height: 32rpx;
          }
        }
        .center-group {
          margin-top: 24rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 37rpx;
          white-space: nowrap;
          .right-group_1 {
            margin-left: 39rpx;
          }
        }
        .bottom-group {
          margin-top: 12rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 37rpx;
          white-space: nowrap;
          .right-group_2 {
            margin-left: 39rpx;
          }
        }
      }
    }
    .group_14 {
      padding: 23rpx 32rpx;
      border-bottom: solid 2rpx rgb(221, 221, 221);
      .left-group {
        color: rgb(51, 51, 51);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
        .image_6 {
          width: 40rpx;
          height: 40rpx;
        }
        .text_13 {
          margin-left: 16rpx;
        }
        .text_15 {
          margin-left: 40rpx;
        }
      }
      .view_1 {
        flex: 1 1 auto;
      }
      .group_15 {
        margin-left: 40rpx;
        color: rgb(245, 34, 45);
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        white-space: nowrap;
        .image_8 {
          margin-left: 16rpx;
          align-self: center;
          width: 24rpx;
          height: 13rpx;
        }
      }
    }
  }
}
.list-item {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 2rpx 14rpx 0px rgba(220, 220, 220, 0.5);
  .list_1 {
    padding: 0 32rpx;
    .list-item_1 {
      padding: 24rpx 0 21rpx;
      .image_16 {
        width: 100rpx;
        height: 100rpx;
      }
      .right-group {
        margin-left: 20rpx;
        margin-right: 40rpx;
        flex: 1 1 auto;
        .text_27 {
          color: rgb(51, 51, 51);
          font-size: 30rpx;
          font-weight: 500;
          line-height: 42rpx;
          white-space: nowrap;
        }
        .text_29 {
          margin-top: 24rpx;
          color: rgb(136, 136, 136);
          font-size: 26rpx;
          line-height: 37rpx;
          white-space: nowrap;
        }
      }
    }
  }
  .group_24 {
    padding: 23rpx 32rpx 15rpx;
    border-top: solid 2rpx rgb(221, 221, 221);
    .text_33 {
      margin: 3rpx 0;
      color: rgb(136, 136, 136);
      font-size: 26rpx;
      line-height: 37rpx;
      white-space: nowrap;
    }
    .text_34 {
      color: rgb(255, 83, 104);
      font-size: 30rpx;
      font-weight: 500;
      line-height: 42rpx;
      white-space: nowrap;
    }
    .text_35 {
      margin-left: 9rpx;
      color: rgb(0, 122, 255);
      font-size: 28rpx;
      line-height: 40rpx;
      white-space: nowrap;
    }
    .image_19 {
      margin: 9rpx 0 9rpx 8rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }
}
</style>
