<template>
  <div class="app-container">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
          <el-form-item label="支付模板"  prop="payMode">
            <el-upload
              action="http://localhost:8080/common/upload"
              list-type="picture-card"
              :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
<!--              <div slot="file" slot-scope="{file}">-->
<!--                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >-->
<!--              </div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="支付页面形象照" >
            <el-radio-group v-model="ruleForm.imagePhotosFlag">
              <el-radio
                v-for="dict in imagePhotosFlagOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电子会员卡">
            <el-radio-group v-model="ruleForm.cardEnabledFlag">
              <el-radio
                v-for="dict in cardEnabledFlagOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="支付回调"  prop="payCallbackPage">
            <el-input v-model="ruleForm.payCallbackPage" placeholder="请输入支付回调页面配置" style="width: 200px"/>
            <el-button>前往配置</el-button>
          </el-form-item>
          <el-form-item label="打印张数"  prop="payPrintNum">
            <el-input-number size="small" :min="0" v-model="ruleForm.payPrintNum" />
            <span> 张 </span>
          </el-form-item>
          <el-form-item label="班结是否打印" >
            <el-radio-group v-model="ruleForm.wsPrintFlag">
              <el-radio
                v-for="dict in wsPrintFlagOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
import {addPay, updatePay,getStationPay} from "@/api/station/pay";
export default {
  name: "Pay",
  data() {
    return {
      // 遮罩层
      imagePhotosFlagOptions:[],
      wsPrintFlagOptions:[],
      cardEnabledFlagOptions:[],
      ruleForm:{
      },
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.look();
    this.getDicts("image_photos_flag").then(response => {
      this.imagePhotosFlagOptions = response.data;
    });
    this.getDicts("ws_print_flag").then(response => {
      this.wsPrintFlagOptions = response.data;
    });
    this.getDicts("card_enabled_flag").then(response => {
      this.cardEnabledFlagOptions = response.data;
    });
  },
  methods: {
    /** 进入信息 */
    look() {
      getStationPay().then(response => {
        this.ruleForm = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if (this.ruleForm.payId != null) {
            updatePay(this.ruleForm).then(response => {
              this.msgSuccess("修改成功");
              getStationPay().then(response => {
                this.ruleForm = response.data;
              });
            });
          } else {
            addPay(this.ruleForm).then(response => {
              this.msgSuccess("新增成功");
              getStationPay().then(response => {
                this.ruleForm = response.data;
              });
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    }
  }
};
</script>
