<template>
  <div class="recharge" style="padding:20px">
    <el-form :inline="true" size="small">
      <el-form-item label="cpid">
        <el-input v-model="searchForm.cpid" placeholder="cpid" />
      </el-form-item>
      <el-form-item label="spid">
        <el-input v-model="searchForm.spid" placeholder="spid" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="searchForm.phone" placeholder="手机号" />
      </el-form-item>
      <el-form-item label="订单状态 ">
        <el-select v-model="searchForm.orderStatus" clearable placeholder="请选择">
          <el-option label="客户请求刚生成" value="0"></el-option>
          <el-option label="已提交订购处理中" value="1"></el-option>
          <el-option label="已返回成功" value="2"></el-option>
          <el-option label="已返回失败" value="3"></el-option>
          <el-option label="超时关闭" value="6"></el-option>
          <el-option label="发起请求" value="99"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充值时间">
        <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
          v-model="searchForm.beginCreateTime" type="datetime" placeholder="选择日期时间"></el-date-picker> -
        <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="searchForm.endCreateTime"
          type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="init()">搜索</el-button>
        <el-button @click="init(1)">刷新</el-button>
        <el-button @click="rechargeShow = true" type="warning">手动充值</el-button>
      </el-form-item>
    </el-form>
    <div style="margin: 30px 0;">
      <el-table max-height="700" border highlight-current-row :data="tableData"
        :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000' }" style="width: 100%;">
        <el-table-column prop="cpid" label="cpid" />
        <el-table-column prop="spid" label="spid" />
        <el-table-column prop="phone" label="phone" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="message" label="充值结果" />
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus == '0'">客户请求刚生成</span>
            <span v-if="scope.row.orderStatus == '1'">已提交订购处理中</span>
            <span v-if="scope.row.orderStatus == '2'">已返回成功</span>
            <span v-if="scope.row.orderStatus == '3'">已返回失败</span>
            <span v-if="scope.row.orderStatus == '6'">超时关闭</span>
            <span v-if="scope.row.orderStatus == '99'">发起请求</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="充值时间" />
      </el-table>
      <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="searchForm.current" :page-sizes="[10, 20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="searchForm.size">
      </el-pagination>
    </div>
    <!-- 套餐充值 -->
    <el-dialog title="套餐充值" :visible.sync="rechargeShow" width="50%">
      <el-form style="width:70%" ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="cpid" required prop="cpid">
          <el-input v-model="form.cpid" placeholder="cpid"></el-input>
        </el-form-item>
        <el-form-item label="spid" required prop="spid">
          <el-input v-model="form.spid" placeholder="spid"></el-input>
        </el-form-item>
        <el-form-item label="产品pwd" required prop="pwd">
          <el-input v-model="form.pwd" placeholder="产品pwd"></el-input>
        </el-form-item>
        <el-form-item label="手机号" required prop="mobiles">
          <el-input v-model="form.mobiles" placeholder="手机号以','分隔"></el-input>
          <span style="color:#F56C6C">提示：进行批量充值时，手机号要以,(英文)进行分割</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rechargeShow = false">取消</el-button>
        <el-button type="primary" @click="rechargeClick">充值</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { post, get } from '@/api/common';

export default {
  data () {
    return {
      tableData: [],
      searchForm: {
        cpid: "",
        spid: "",
        phone: "",
        beginCreateTime: "",
        endCreateTime: "",
        orderStatus: "",
        size: 10,
        current: 1
      },
      total: 0,
      form: {
        cpid: "",
        spid: "",
        pwd: "",
        mobiles: "",

      },
      rechargeShow: false,
      rules: {
        cpid: [{ required: true, message: 'cpid不能为空', trigger: 'blur' }],
        spid: [{ required: true, message: 'spid不能为空', trigger: 'blur' }],
        pwd: [{ required: true, message: '产品pwd不能为空', trigger: 'blur' }],
        mobiles: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    //初始化获取列表
    init (num) {
      if (num == 1) {
        for (let k in this.searchForm) {
          this.searchForm[k] = ''
        }
        this.searchForm.size = 10
        this.searchForm.current = 1
      }
      get('/cplus/page', this.searchForm).then(res => {
        if (res.code == 10000) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 充值
    rechargeClick () {
      // console.log(this.$refs.ruleForm)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          post('/cplus/router', this.form).then(res => {
            if (res.code == 10000) {
              this.$message.success('充值成功！')
              this.init(1)
              this.rechargeShow = false
              for (let k in this.form) {
                this.form[k] = ''
              }
            }
          })
        }
      });
    },
    // 每页数量
    handleSizeChange (val) {
      this.searchForm.current = 1
      this.searchForm.size = val
      this.init()
    },
    // 当前页
    handleCurrentChange (val) {
      this.searchForm.current = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped></style>