<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize" label-width="auto">
      <el-form-item label="店铺名称" prop="businessName">
        <el-input v-model="queryParams.businessName" placeholder="请输入店铺名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="法人姓名" prop="legalName">
        <el-input v-model="queryParams.legalName" placeholder="请输入法人姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <div class="table-top-statistics">
        <template v-for="item in statisticsList">
          <span :class="['table-top-type', ELsize]">
            {{ item.label }}：<span class="table-top-num">{{ StatisticsData[item.field] || 0 }}</span>
          </span>
        </template>
      </div>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="handleRefreshPage"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :border="TableBorder" :size="ELTableSize" :data="dataList">
      <el-table-column type="index" width="55" label="序号" align="center">
        <template slot-scope="{$index}">
          {{ $getTableIndex(queryParams, $index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="店铺信息" align="center" show-overflow-tooltip>
        <template slot-scope="{row}">
          <p class="table-p">店铺名称：{{ row.businessName | TableItemEmpty }}</p>
          <p class="table-p">店铺所在区域：{{ getAreaName(row) | TableItemEmpty }}</p>
          <p class="table-p">店铺地址：{{ row.address | TableItemEmpty }}</p>
          <p class="table-p">售后电话：{{ row.customerServicePhone | TableItemEmpty }}</p>
        </template>
      </el-table-column>
      <el-table-column label="主体信息" align="center">
        <template slot-scope="{row}">
          <p class="table-p">企业名称：{{ row.enterpriseName | TableItemEmpty }}</p>
          <p class="table-p">统一信用代码：{{ row.uscCode | TableItemEmpty }}</p>
          <p class="table-p">法人姓名：{{ row.legalName | TableItemEmpty }}</p>
        </template>
      </el-table-column>
      <el-table-column label="入驻时间" align="center">
        <template slot-scope="{row}">
          {{ row.createTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="实际收款额" align="center" show-overflow-tooltip>
        <template slot-scope="{row}">
          {{ getStatisticsVal(row, 'actualReceivePayment') | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="在线订单额" align="center">
        <template slot-scope="{row}">
          {{ getStatisticsVal(row, 'onlineOrderAmount') | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="商城订单额" align="center">
        <template slot-scope="{row}">
          {{ getStatisticsVal(row, 'shopOrderAmount') | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="累计结算" align="center">
        <template slot-scope="{row}">
          {{ getStatisticsVal(row, 'todaySettlement') | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{row}">
          <el-button :size="ELTableSize" type="text"
            @click.stop="$refs.DataStatisticsRef.openHandle(row)">数据统计</el-button>
          <el-button :size="ELTableSize" type="text"
            @click.stop="$refs.BusinessDataRef.openHandle(row)">经营数据</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 经营数据 -->
    <BusinessData ref="BusinessDataRef" />
    <!-- 数据统计 -->
    <DataStatistics ref="DataStatisticsRef" />
  </div>
</template>
<script>
import getListApi from "@/mixins/getListApi";
import { getChainStorePageApi, getChainStoreBusinessStatisticsApi } from "@/api/chainStore.js";
import BusinessData from "@/views/chainStore/components/BusinessData.vue";
import DataStatistics from "@/views/chainStore/components/DataStatistics.vue";
export default {
  mixins: [getListApi],
  components: { BusinessData, DataStatistics },
  data() {
    return {
      listURL: getChainStorePageApi,
      queryParams: {
        businessName: undefined,
        legalName: undefined
      },
      StatisticsData: {},
      statisticsList: [
        {
          label: '实际收款额',
          field: 'actualReceivePayment'
        },
        {
          label: '在线订单额',
          field: 'onlineOrderAmount'
        },
        {
          label: '商城订单额',
          field: 'shopOrderAmount'
        },
        {
          label: '累计结算',
          field: 'todaySettlement'
        }],
    };
  },
  methods: {
    handleRefreshPage() {
      this.getStatistics();
      this.getList();
    },
    // 获取补贴队列业务统计
    async getStatistics() {
      try {
        // 处理日期范围参数
        const Params = this.processDateRangeParams({
          ...this.queryParams,
          ...this.search,
        });
        Params.pageNum && delete Params.pageNum;
        Params.pageSize && delete Params.pageSize;
        const { data } = await getChainStoreBusinessStatisticsApi(Params);
        this.StatisticsData = data || {};
      } catch (error) {
        this.StatisticsData = {};
      }
    },
    getAreaName(row) {
      try {
        return `${row.provinceName || ''}${row.cityName || ''}${row.areaName || ''}`;
      } catch (error) {
        return ''
      }
    },
    getStatisticsVal(row, field) {
      try {
        const { statistics = {} } = row || {};
        return statistics?.[field] || 0;
      } catch (error) {
        return 0;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.table-p {
  margin: 0;
  width: 100%;

  &.table-p {
    padding-top: 10px;
  }
}
</style>
