<template>
  <el-dialog
    title="退款"
    center
    append-to-body
    :visible.sync="show"
    width="800px">
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" >
        <el-row  :gutter="20">
          <el-col :span="4"><label>退款金额</label></el-col>
          <el-col :span="8">
            <el-form-item  prop="key">
              <el-input v-model="form.money"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="success" round size="small" @click="form.money=100">￥100</el-button>
            <el-button type="success" round size="mini" @click="form.money=150">￥150</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4"><label>退课</label></el-col>
          <el-col :span="8">
            <el-form-item>
              <el-switch
                v-model="form.refund_type"
                :active-value="2"
                :inactive-value="1">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4"><label>退款原因</label></el-col>
          <el-col :span="12">
            <el-form-item>
              <el-input v-model="form.desc" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
  </el-dialog>

</template>

<script>
  import {refundApi} from "../../service/api";
  export default {
    name: "dialogObj",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        show:false,
        id: '',
        loading:true,
        form:{
          money:0,
          refund_type:1,
          desc:''
        },
        rules:{
          money:[
            { required: true, message: '请输入退款金额', trigger: 'change' }
          ],
          desc:[
            { required: true, message: '请输入退款原因', trigger: 'change' }
          ]
        }
      }
    },
    methods:{
      save(){
        this.$confirm('确定保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          if(this.dialogObj.id){
            this.$refs['form'].validate((valid) => {
              if(valid){
                let json = {
                  refund_money: parseFloat(this.form.money) * 100,
                  desc: this.form.desc,
                  refund_type:this.form.refund_type
                };
                if(this.dialogObj.order_type){
                  json.order_type = this.dialogObj.order_type
                }
                refundApi(this.dialogObj.id,json).then(res=>{
                  this.$message({
                    type: 'success',
                    message: '退款成功!'
                  });
                  this.$emit("reflash");
                  this.show = false;
                })
              }
            });
          }
        });

      },
      initDialog(){
        this.show = this.dialogObj.show;
        if (this.dialogObj.id) {
          this.id = this.dialogObj.id;
        }
        this.form.money = parseFloat(this.dialogObj.money / 100);
        this.form.desc = this.dialogObj.desc;
        this.loading = false
      }
    },
    watch:{
      dialogObj:{
        handler: function () {
          this.initDialog()
        },
        deep: true
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

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