<template>
  <div class="overview_page">
    <div class="total_info">
      <ul>
        <li v-for="(item,index) in totalList" :key="index">
          <p>{{ item.value }}</p>
          <p>
            {{ item.name }}
            <i class="el-icon-warning-outline icon" :title="item.tips"></i>
          </p>
        </li>
      </ul>
    </div>

    <div class="toolbar">
      <el-form
        :inline="true"
        :model="formParams"
      >
        <el-form-item label="商家名称">
          <el-input v-model="formParams.model.tenantName" size="mini" />
        </el-form-item>

        <el-form-item label="商家编码">
          <el-input v-model="formParams.model.tenantCode" size="mini" />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="query"
          >
            查询
          </el-button>
          <el-button
            plain
            size="mini"
            @click="reset"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData.records"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="tenantName"
        label="商家名称"
      />
      <el-table-column
        prop="tenantCode"
        label="商家编码"
      />
      <el-table-column
        :formatter="getPrice"
        prop="incomeAmount"
        label="营收总额"
      />
      <el-table-column
        :formatter="getPrice"
        prop="freezesAmount"
        label="冻结金额"
      />
      <el-table-column
        :formatter="getPrice"
        prop="withdrawAmount"
        label="已提金额"
      />
      <el-table-column
        :formatter="getPrice"
        prop="refundAmount"
        label="已退款金额"
      />
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="formParams.size"
      :page.sync="formParams.current"
      :total="Number(tableData.total)"
      @pagination="query"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Finance from '@/api/Finance'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      formParams: {
        "current": 1,
        "map": {},
        "model": {
          "canWithdrawAmount": 0,
          "freezesAmount": 0,
          "incomeAmount": 0,
          "refundAmount": 0,
          "tenantCode": "",
          "tenantName": "",
          "withdrawAmount": 0
        },
        "order": "descending",
        "size": 10,
        "sort": "id"
      },
      totalList: [
        { name: '营收总额', value: 0, field: 'incomeAmount', tips: '所有商家支付成功的订单总金额' },
        { name: '冻结总金额', value: 0, field: 'freezesAmount', tips: '所有商家交易尚未完成仍在冻结中的金额' },
        { name: '可提现金额', value: 0, field: 'canWithdrawAmount', tips: '所有商家可以提现但尚未提现的的金额' },
        { name: '已提金额', value: 0, field: 'withdrawAmount', tips: '所有商家的售后订单中产生退款并退款成功的总金额' },
        { name: '已退款金额', value: 0, field: 'refundAmount', tips: '' }
      ],
      tableData: {}
    }
  },
  created() {
    this.getDayList()
    this.getSummary()
  },
  methods: {
    async getDayList() {
      const res = await Finance.getDayList(this.formParams)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    async getSummary() {
      const res = await Finance.getSummary()
      const resData = res.data
      if (resData.code === 0) {
        const o = resData.data
        this.totalList.map(item => {
          item.value = o[item.field] / 100 || 0
        })
      }
    },
    query() {
      this.getDayList()
    },
    getPrice(item, row, value) {
      return value / 100
    },
    reset() {
      this.formParams = {
        "current": 1,
        "map": {},
        "model": {
          "canWithdrawAmount": 0,
          "freezesAmount": 0,
          "incomeAmount": 0,
          "refundAmount": 0,
          "tenantCode": "",
          "tenantName": "",
          "withdrawAmount": 0
        },
        "order": "descending",
        "size": 10,
        "sort": "id"
      }
    }
  }
}
</script>

<style lang='less' scoped>
.overview_page {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    height: calc(100% -20px);
    .total_info {
        border-bottom: 1px solid #E0E5EB;
        margin-bottom: 20px;
        ul {
            overflow: hidden;
            display: flex;
            list-style: none;
            li {
                flex: 2.4;
                text-align: center;
                padding: 20px 0;
                p {
                    margin: 0;
                    &:nth-child(1) {
                        font-weight: 600;
                        font-size: 30px;
                        color: #ffae11;
                        margin-bottom: 20px;
                    }
                    &:nth-child(2) {
                        font-size: 18px;
                        .icon {
                            &:hover {
                                cursor: pointer;
                            }
                            color: red;
                        }
                    }
                }
            }
        }
    }
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }

  .cell {
      text-align: center;
      white-space: pre-line;/*保留换行符*/
  }
}
</style>
