<template>
    <div class="app-list-content">
        <x-crud class="liu-crud-wrap" @load="onLoad">
            <!-- 余额 -->
            <template #table-column-balance="{scope}">
                <el-link :underline="true" @click="detailShowFn(scope.row)" style="font-size:12px;display:inline-block;">{{ scope.row.balance }}</el-link>
            </template>
            <!-- 收入 -->
            <template #table-column-totalIncome="{scope}">
                <el-link :underline="true" @click="AmountShowFn(scope.row,'1')" style="font-size:12px;display:inline-block;">{{ scope.row.totalIncome }}</el-link>
            </template>
            <!-- 支出 -->
            <template #table-column-totalExpend="{scope}">
                <el-link :underline="true" @click="AmountShowFn(scope.row,'0')" style="font-size:12px;display:inline-block;">{{ scope.row.totalExpend }}</el-link>
            </template>
            <!-- 收款码 -->
            <template #table-column-gatheringCode="{scope}">
                <el-button type="text" @click="gotoPage(1,scope.row)">查看</el-button>
            </template>
            <!-- 充值 -->
            <template #slot-apply="{scope}">
              <el-button type="text" @click="topUp(scope.row.shopName, scope.row.id)">充值</el-button>
            </template>
        </x-crud>
        <!-- 用户详情 -->
        <balance-detail v-if='showBalanceDetail' @closeFn='showBalanceDetail = false' ref="balanceDetail" :orderOperate="optionData" />
        <amount-detail v-if='showAmountDetail' @closeFn='showAmountDetail = false' ref="amountDetail" :orderOperate="optionData" />
        <el-dialog :visible.sync="wxPayDialog" :close-on-click-modal="false" width="500px" >
        <el-form
          :model="topForm"
          :rules="ruleForm"
          ref="adForm"
          label-width="80px"
          class="demo-form"
        >
        <el-form-item
            label="充值门店"
            style="text-align: left;"
          >
            <span>{{dialogTitle}}</span>
          </el-form-item>
          <el-form-item
            label="充值金额"
            prop="amount"
            style="text-align: left;"
          >
            <el-input
              placeholder="请输入充值金额"
              size="small"
              v-model="topForm.amount"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="登录密码"
            prop="password"
            style="text-align: left;"
          >
            <el-input
              placeholder="请输入登录密码"
              size="small"
              v-model="topForm.password"
            ></el-input>
          </el-form-item>
        </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm">取 消</el-button>
            <el-button type="primary" size="small" @click="submitForm">确认</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getFirstHost } from '@/cool/utils';
    import balanceDetail from './components/balance-detail';
    import amountDetail from './components/amount-detail';
    export default {
        components:{balanceDetail,amountDetail},
        data() {
            return {
                app: null,
                showBalanceDetail: false,
                showAmountDetail: false,
                optionData: {},
                wxPayDialog: false,
                dialogTitle: '',
                topForm: {
                  shopId: '',
                  amount: '',
                  password: '',
                },
                ruleForm: {
                  amount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
                  password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
                }
            };
        },
        mounted() {
        },
        methods: {
            onLoad({ctx, app}) {
                this.app = app;
                ctx.service(this.$service.shop)
                    .set('table', {
                        columns: [
                            {
                                prop: 'id',
                                label: 'ID',
                                width: '70',
                                align: 'center'
                            },
                            {
                                prop: 'shopName',
                                label: '门店',
                                width: '120',
                                align: 'center'
                            },
                            {
                                prop: 'merchantName',
                                label: '商家',
                                width: '120',
                                align: 'center'
                            },
                            {
                                prop: 'balance',
                                label: '余额',
                                width: '100',
                                align: 'center'
                            },
                            {
                                prop: 'totalIncome',
                                label: '收入',
                                width: '100',
                                align: 'center'
                            },
                           {
                                prop: 'totalExpend',
                                label: '支出',
                                width: '100',
                                align: 'center'
                            },
                            {
                                prop: 'mobile',
                                label: '手机号',
                                width: '120',
                                align: 'center'
                            },
                            {
                                prop: 'province',
                                label: '省',
                                width: '90',
                                align: 'center'
                            },
                            {
                                prop: 'city',
                                label: '市',
                                align: 'center',
                                width: '100',
                                emptyText: '无'
                            },
                            {
                                prop: 'dist',
                                label: '区',
                                align: 'center',
                                width: '100',
                                emptyText: '无'
                            },
                            {
                                prop: 'fullAddress',
                                label: '地址',
                                align: 'center',
                                emptyText: '无',
                                width: '300'
                            },
                            {
                                prop: 'gatheringCode',
                                label: '收款二维码',
                                align: 'center',
                                width: '130'
                            }
                        ],
                        // 操作列
                        op: {
                          visible: true, // 是否显示
                          // 同 element-ui Table-column Attributes
                          props: {
                            width: 100,
                            align: 'center',
                            fixed: 'right',
                            label: '操作'
                          },
                          // 布局，请移步 `layout`
                          layout: ['slot-apply']
                        }
                    })
                    .set('layout', [
                        ['slot-tabs'],
                        ['flex1', 'refresh-btn'],
                        ['data-table'],
                        ['flex1', 'pagination']
                    ])
                    .done();
                app.refresh();
            },
            // 充值
            topUp(name, id) {
              this.dialogTitle = name
              this.topForm.shopId = id
              this.wxPayDialog = true
            },
             resetForm () {
              this.$refs['adForm'].resetFields();
              this.wxPayDialog = false;
            },
            submitForm () {
              this.$refs['adForm'].validate(valid => {
                if (valid) {
                  this.$service.saasShop.rechargeBalance(this.topForm).then(res => {
                    this.$message.success('操作成功')
                    this.wxPayDialog = false
                    this.app.refresh()
                  })
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
            },
            detailShowFn(item){
                this.optionData = item;
                this.showBalanceDetail = true;
                setTimeout(() => {
                    this.$refs.balanceDetail.init();
                });
            },
            AmountShowFn(item,type){
                this.optionData = {...item,io: type}
                console.log(this.optionData)
                // this.optionData = item;
                this.showAmountDetail = true;
                setTimeout(() => {
                    this.$refs.amountDetail.init();
                });
            },
            gotoPage(type,data) {
                console.log(data)
                let host = `http://api.pt.${getFirstHost()}`;
                let url=null
                switch (type) {
                    case 1:
                        url=`/user/gathering-code?id=${data.id}`
                        break
                    case 2:
                        url=`/user/apply-code?id=${data.id}`
                        break;
                }
                window.open(host + url);
            }
        }
    };
</script>
