<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix" v-hasPermi="['platform:retail:store:people:list']">
        <div class="container" style="margin-bottom: 10px;">
          <div class="top-info">
            <div class="settle-obj-status">
              <div class="settle-obj">
                <div class="item">
                  <span class="tip">结算对象：</span>
                  <span>{{ settleBillInfo.settleName }}</span>
                </div>
                <div class="item">
                  <span class="tip">结算单号：</span>
                  <span>{{ settleBillInfo.settleNo }}</span>
                </div>
              </div>
              <div class="settle-status" style="margin-left: 50px;">
                <div class="item">
                  <span class="tip">结算状态：</span>
                  <span>{{ settleBillInfo.settleStatus === 1 ? '待结算' : '已结算' }}</span>
                </div>
                <div class="item">
                  <span class="tip">结算类型：</span>
                  <span>{{ settleBillInfo.belongType === 1 ? '渠道商' : settleBillInfo.belongType === 2 ? '部门' : settleBillInfo.belongType === 3 || settleBillInfo.belongType === 5 ? '个人' : '企业'  }}</span>
                </div>
              </div>
              <div class="settle-status" style="margin-left: 50px;">
                <div class="item">
                  <span class="tip">账期：</span>
                  <span>{{ settleBillInfo.billPeriod }}</span>
                </div>
              </div>
            </div>
            <div class="data-info">
              <div class="data-item">
                <span>￥ {{ settleBillInfo.totalPrice }}</span>
                <span>实付总金额（元）</span>
              </div>
              <div class="data-item">
                <span>￥ {{ settleBillInfo.brokerageTotalPrice }}</span>
                <span>结算金额（元）</span>
              </div>
              <div class="data-item">
                <span>{{ settleBillInfo.reportCount }}</span>
                <span>结算数量（条）</span>
              </div>
            </div>
          </div>
          <div style="margin-top: 30px;" class="search-condition">
            <el-form size="small" label-width="100px" class="search-condition">
              <el-form-item label="订单号：">
                <el-input
                  v-model.trim="searchInfo.orderNo"
                  placeholder="请输入订单号"
                  class="selWidth"
                  size="small"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item :label="type === 3 ? '渠道商名称：' : type === 4 ? '部门名称：' : type === 5 ? '成员姓名：' : '分销员姓名：'" style="margin-left: 10px;">
                <el-input
                  v-model.trim="searchInfo.name"
                  placeholder="姓名"
                  class="selWidth"
                  size="small"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item label="下单时间：">
                <el-date-picker
                  v-model="timeVal"
                  type="datetimerange"
                  value-format="yyyy-MM-dd hh:ss:mm"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeTime">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div class="search-btn" @click="searchList">搜 索</div>
          </div>
        </div>
        <SettleDetailComp :id="id" :settleStatus="settleStatus" :searchInfo="searchInfo" :listLoading="listLoading" :billList="billList" :type="type" :total="total" :page="page" :limit="limit" @handleSizeChange="handleSizeChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
// +---------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +---------------------------------------------------------------------
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
// +---------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +---------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------
import { getSettleDocDetailApi, earningListApi } from '@/api/distribution';
import cardsData from '@/components/cards/index';
import settleDetailComp from './component/settleDetailComp.vue'
import { checkPermi } from '@/utils/permission'; // 权限判断函数
import SettleDetailComp from './component/settleDetailComp.vue';
export default {
  name: 'settleBillDetail',
  components: { cardsData, settleDetailComp, SettleDetailComp },

  data() {
    return {
      listLoading: false,
      settleBillInfo: {},
      billList: [
        {}
      ],
      timeVal: [],
      searchInfo: {
        orderNo: '',
        name: '',
        dateLimit: ''
      },
      limit: 20,
      page: 1,
      total: 0,
      totalPage: null,
      type: null,
      id: null,
      settleStatus: null,
      bcxId: null,
      tabActive: 0
    };
  },

  mounted() {
    this.type = this.$route.query.type;
    this.bcxId = this.$route.query.bcxId;
    this.id = this.$route.query.id;
    this.settleStatus = this.$route.query.settleStatus;

    if (checkPermi(['platform:retail:store:people:list'])) {
      this.getSettleBillInfo();
      this.getList();
    }
  },
  methods: {
    checkPermi,

    getSettleBillInfo() {
      let params = {
        id: this.id
      };

      getSettleDocDetailApi(params).then(res => {
        this.settleBillInfo = res;
        console.info('xxx detail', res);
      }).catch(() => {});
    },

    getList() {
      this.listLoading = true;

      let params = {
        limit: this.limit,
        page: this.page,
        settleId: this.$route.query.id,
      };

      this.bcxId ? params.bcxId = this.bcxId : null;
      this.searchInfo.orderNo ? params.orderNo = this.searchInfo.orderNo : null;
      this.searchInfo.dateLimit ? params.dateLimit = this.searchInfo.dateLimit : null;
      this.searchInfo.name ? params.name = this.searchInfo.name : null;

      earningListApi(params).then(res => {
        let { limit, total, totalPage, page, list } = res;
        this.limit = limit;
        this.total = total;
        this.totalPage = totalPage;
        this.page = page;
        this.billList = list;
        this.listLoading = false;

        console.info('xxx list', res);
      }).catch(() => {
        this.listLoading = false;
      })
    },

    searchList() {
      this.page = 1;
      this.getList();
    },

    changeTime() {
      this.searchInfo.dateLimit = this.timeVal.join(',');
      this.getList();
    },

    changeTab() {
      this.getList();
    },

    handleSizeChange(val) {
      this.limit = val;
      this.page = 1;
      this.getList();
    },

    pageChange(page) {
      this.page = page;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.selWidth {
  width: 200px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}

/* update  */
.top-info {
  display: flex;
  flex-direction: row;
  font-size: 14px;
  color: #333333;

  .settle-obj-status {
    display: flex;
    flex-direction: row;

    .settle-obj,
    .settle-status {
      display: flex;
      flex-direction: column;

      .item {
        .tip {
          display: inline-block;
          width: 80px;
        }
      }
      .item:first-child {
        margin-bottom: 10px;
      }
    }
  }

  .data-info {
    display: flex;
    flex-direction: row;
    margin-left: 150px;

    .data-item {
      display: flex;
      flex-direction: column;
      width: 120px;
      border-right: 1px solid #CCCCCC;
      margin-left: 30px;
    }
  }
}

.search-condition {
  display: flex;
  flex-direction: row;
}

.search-btn {
  width: 70px;
  height: 30px;
  background-color: #409eff;
  border-radius: 5px;
  color: white;
  margin-left: 15px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
</style>
