<template>
  <div id="vip-order">
    <div class="title">订单总量：初创版{{whole.company_order_num}}，企业版{{whole.premius_order_num}}, 开发者{{whole.person_order_num}} 累计收入: 初创版 ¥{{whole.company_paid_money}}，企业版￥{{whole.premius_paid_money}}, 开发者 ¥{{whole.person_paid_money}}</div>
    <div class="table">
      <el-table
        v-if="tableData.length"
        height="100%"
        border
        style="width: 100%"
        :data="tableData"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button type="text" class="ctrls" v-if="prop === 'uid'" @click="clickUID(scope.row)">{{scope.row[prop]}}</el-button>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="changePagination"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
    const tableHeaders = [
        "用户ID",
        "昵称",
        "会员类型",
        "购买类型",
        "购买月数",
        "应付金额",
        "实付金额",
        "订单号",
        "开始时间",
        "生效时间",
        "购前到期",
        "购后到期",
    ]
    const tableProps = [
        "uid",
        "nickname",
        "type_name",
        "is_first_name",
        "num",
        "need_pay_money",
        "paid_money",
        "order_no",
        "start_date",
        "pay_date",
        "origin_end_date",
        "end_date",
    ]
    // 现在环境是线上还是测试, 默认线上
    let env = ''

    export default {
        data() {
            return {
                // 原始数据
                listData: {},
                // 头部信息
                titleInfo: {},
                // 数据总条目
                totalCount: 0,
                // 当前页面
                currentPage: 1,
                // 列表头显示内容
                tableHeaders,
                // 列表头字段
                tableProps,
                // 列表数据
                tableData: [],
            }
        },
        computed: {
            whole() {
                return this.listData.whole || {}
            }
        },
        mounted() {
            this.getTableData()
        },
        filters: {
            toDate(val) {
                return new Date(val * 1000).toLocaleDateString()
            },
            projectLink(i) {
                const type = i.entity_type
                let link = 'javascript:void(0)'
                if(type === '1') link = `/rooter/outsourceitem/${i.entity_id}>`
                else if(type === '3') link = `/rooter/wagedetails?job_id=${i.entity_id}`
                return link
            }
        },
        methods: {
            /**
             * 点击 uid
             */
            clickUID({uid}) {
                if(env === 'test') window.open(`https://dev.test.proginn.com/rooter/user/${uid}`)
                else window.open(`https://www.proginn.com/rooter/user/${uid}`)
            },
            // 页码变动
            changePagination() {
                this.getTableData()
            },
            // 格式化列表数据
            formatTableData(data) {
                return data.map(i => {
                    let projectName = '--'
                    let prePay = ''
                    let servicePay = ''
                    let getPay = ''
                    let realGet = ''
                    return {
                        ...i,
                    }
                })
            },
            // 获取列表数据
            async getTableData() {
                this.tableData = []
                const p = this.currentPage
                const res = await this.$post("/api/admin/vip/getVipOrders", { page: this.currentPage, page_size: 10 })
                // console.log(res)
                const data = res.data
                env = data.current_env
                const list = data.list
                this.listData = data
                this.tableData = list // this.formatTableData(list, data)
                this.totalCount = Number(data.total)
                this.totalPage = data.pages
            }
        }
    }
</script>

<style scoped>
  .table {
    height: 100%;
    height: calc(100% - 80px);
  }
</style>
