<template>
  <div class="m-right-block fr mh576" style="position: relative;">
    <div class="right-block-bd">

      <div  class="ng-scope">
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>

          <el-table-column label="交易订单" prop="outTradeNo" align="center" />
          <el-table-column label="岗位名称" align="center" >
            <template slot-scope="{row, $index}">
              <span>{{row.courseName}}</span>
            </template>
          </el-table-column>

          <el-table-column label="证书编号" align="left" min-width="100" >
            <template slot-scope="{row, $index}">
              <span>{{row.rzCode}}</span>
            </template>
          </el-table-column>

          <el-table-column label="金额(元)" align="center" >
            <template slot-scope="{row}">
              <span>{{ row.payFee|money }} </span>
            </template>
          </el-table-column>

          <el-table-column label="提交时间" align="center" >
            <template slot-scope="{row, $index}">
              <span>{{row.createAt}}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" align="center" min-width="80">
            <template  slot-scope="{row}">
              <el-button v-if="row.refundStatus==0" @click="payRefund(row)" type="primary"  size="small" >退款</el-button>
              <el-button v-else-if="row.refundStatus==1" @click="getPayInfo(row )"  type="text" size="small">退款中</el-button>
              <el-button v-else-if="row.refundStatus==2" @click="getPayInfo(row )" type="text" size="small">退款通过</el-button>
              <el-button v-else-if="row.refundStatus==3" @click="getPayInfo(row )" type="text" style="color: green;" size="small" >到账</el-button>
              <el-button v-else type="text" size="small" @click="getPayInfo(row )" style="color: red;">拒绝</el-button>
            </template>
          </el-table-column>

        </el-table>


        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
           :page-size="size"
           layout="total, prev,pager, next"
           :total="total">
        </el-pagination>

        <el-dialog title="申请开通课程"  :visible.sync="buyCourseDialog" :append-to-body="true"
        width="800px" top="20px" align="center">
          <IBuyCourse :courseId="courseId" @finish="reload"></IBuyCourse>
        </el-dialog>

        <el-dialog title="退款申请"  :visible.sync="payRefundDialog" :append-to-body="true"  width="500px" top="20px" >
          <el-form :model="form" :rules="rules" label-width="120px" ref="elAdd">
          		<el-form-item label="订单信息" prop="type">
                <span> {{form.title}} </span>
          		</el-form-item>
              <el-form-item label="退款金额" prop="type">
                <span> ￥{{form.payFee/100}} 元 </span>
              </el-form-item>
          		<el-form-item label="退款原因" prop="footer">
          			<el-input v-model="form.reason" type="textarea" style="width: 300px;" />
          		</el-form-item>
          	</el-form>
          	<div class="dialog-footer" slot="footer" >
          		<el-button @click="closeDialog('payRefundDialog')">取 消</el-button>
          		<el-button @click="doPayRefund()" type="primary">确 定</el-button>
          	</div>
          </el-dialog>
        </el-dialog>


        <el-dialog  :visible.sync="refundInfoDialog" :append-to-body="true"
        width="800px" top="20px" align="center">
            <h2 style="text-align: center;">
                <span style="margin: 0 20px;">编号：{{refundInfo.outTradeNo}}</span>
                <span style="margin: 0 20px;">费用：{{refundInfo.payFee|money}}</span>
                <span style="margin: 0 20px;">状态：
                <strong style="color: red;">
                {{refundInfo.refundStatus|status}}
                </strong>
                </span>
            </h2>
            <el-table :data="refundList" border fit highlight-current-row style="margin-top: 10px;">
              <el-table-column label="编号" prop="id"  />
              <el-table-column label="动作" prop="action" />
              <el-table-column label="内容" prop="context" />
              <el-table-column label="时间" prop="createAt"/>
            </el-table>
        </el-dialog>

      </div>
    </div>
  </div>
</template>

<script>
  import {httpServer } from "@/components/httpServer/httpServer.js";
  import {str2time} from '@/utils/date.js'

  import IBuyCourse from '../components/pay/IBuyCourse.vue'


  export default {
    name: "Index",
    components:{IBuyCourse},
    data() {
      return {
        page: 1,
        size: 12,
        total: 1,
        courseId:0,
        list: [],
        form: {id:0, title:'', reason:'', payFee:0},
        refundInfo:{},
        refundList:[],
        buyCourseDialog: false,
        refundInfoDialog: false,
        payRefundDialog:false,
        listLoading: false
      };
    },
    beforeMount() {
      this.getData()
    },
    filters:{
      money(val){
        return '￥'+ (val/100);
      },
      status(val){
        let map ={
          1: '申请中',
          2: '审核通过',
          3: '退款成功',
          4: '拒绝退款'
        }
        return map[val];
      },
      payStatus(item){
        if(item.status == 2){
          return '支付完成';
        }
        let nowsec= Date.now()/1000
        if( nowsec - item.create_time > 300 ){
          return "支付超时"
        }
        return "支付中"
      }
    },
    methods: {
      rebuyInfo(row){
        this.courseId = row.courseId||0;
        this.buyCourseDialog = true;
      },
      reload(){
        this.buyCourseDialog = false;
        this.getData();
      },
      payRefund(row){
        this.form.logId = row.id;
        this.form.payFee = row.payFee;
        this.form.reason = ''
        this.form.title = `${row.type} - ${row.courseName} - ${row.nd}`
        this.payRefundDialog = true;
      },
      doPayRefund(){
        httpServer('Weixin.PayRefund', this.form).then(res => {
          if(res.code != 200) return;
          this.$message.successMsg("申请成功", 2);
          this.getData()
          this.payRefundDialog = false;
        })
      },
      getPayInfo(row){
        httpServer('Weixin.GetPayLogInfo', {logId:row.id}).then(res=>{
          if(res.code != 200) return;
          this.refundInfo = res.data.info||{};
          this.refundList = res.data.list||[];
          this.refundInfoDialog = true;
        })
      },
      closeDialog(modal){
        this[model] = false;
      },
      getData() {
        let param = {from: (this.page - 1) * this.size,size:this.size}
        httpServer('course.GetPayLogList', param).then(({
          data,
          code
        }) => {
          this.list = data.list || 0;
          this.total = data.total || 0;
        })
      },
      handleCurrentChange: function(page) {
        this.page = page
        this.getData()
      }
    }
  }
</script>

<style>
</style>
