<template>
  <div class="app-container">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px">
     <el-form-item label="油站名称" >
        <el-select disabled="disabled" 
          v-model="ruleForm.stationId"
          placeholder="请选择油站"
          clearable
          size="small"
          @change="onInstitutionChang"
        >
          <el-option
            v-for="item in stationOptions"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          ></el-option>
        </el-select>
      </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="油站名称"  prop="stationName" v-show="false">
        <el-input v-model="ruleForm.stationName" placeholder="请输入油站名称" />
      </el-form-item>
      <el-form-item label="支付模板"  prop="payMode">
        <el-upload
          class="avatar-uploader"
          :action="addressUrl"
          :headers="headers"
          multiple
          list-type="picture-card"
          :limit="4"
          :file-list="ruleForm.imgFileList"
          accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
          :before-upload="beforeAvatarUpload"
          :on-remove="handleRemove"
          :on-success="handlepaymentSuccess"
          :auto-upload="true"
        >
          <i class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，单张图片不超过1M</div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="公告信息" prop="notice" >
          <textarea cols="40" rows="3" v-model="ruleForm.notice"  placeholder="请输入公告信息"></textarea>
        </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="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-item label="小票打印模板" >
        <el-radio-group v-model="ruleForm.printSetting">
          <el-radio
            v-for="dict in printSettingOptions"
            :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.integralPrintFlag">
          <el-radio
            v-for="dict in integralPrintFlagOptions"
            :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 { getToken } from "@/utils/auth";
import {addPay, updatePay,getStationPay} from "@/api/station/pay";
import {stationinfo} from "@/api/station/gun";
export default {
  name: "Pay",
  data() {
    return {
      // 遮罩层
      imagePhotosFlagOptions:[],
      wsPrintFlagOptions:[],
      printSettingOptions:[],
      cardEnabledFlagOptions:[],
      discountSettingOptions:[],
      stationOptions:[],
      isNoOilOptions:[],
      integralPrintFlagOptions:[],
      deleteImgFileList: [], //存已被删除了的图片的id
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm:{
        imgFileList:[]
      },
      queryParams: {
        stationId: null
      },
      query:{
        deptId: null
      },
      // 表单校验
      rules: {
      },
      headers: { Authorization: "Bearer " + getToken() },
      addressUrl: location.protocol+"//"+location.host+ process.env.VUE_APP_BASE_API+"/common/upload"
    };
  },
  created() {
    this.look();
    this.getDicts("image_photos_flag").then(response => {
      
      this.imagePhotosFlagOptions = response.data;
    });
    this.query.deptId =this.$store.selectDeptId;
    stationinfo(this.query).then(response => {
      this.stationOptions = response.rows;
    });
    this.getDicts("ws_print_flag").then(response => {
      this.wsPrintFlagOptions = response.data;
    });
    this.getDicts("print_setting_flag").then(response => {
      this.printSettingOptions = response.data;
    });
    this.getDicts("card_enabled_flag").then(response => {
      this.cardEnabledFlagOptions = response.data;
    });
    this.getDicts("discount_setting").then(response => {
      this.discountSettingOptions = response.data;
    });
    this.getDicts("is_flag").then(response => {
      this.isNoOilOptions = response.data;
    });
    this.getDicts("is_flag").then(response => {
      this.integralPrintFlagOptions = response.data;
    });

  },
  mounted(){
    setTimeout(() => {
console.log(this.ruleForm)
    },1000)
    
  },
  methods: {
    handleRemove(file, fileList) {
      if(fileList!=null && fileList.length>0){
        this.ruleForm.imgFileList=[];
        for (let i = 0; i < fileList.length; i++) {
          let fileName = fileList[i].name;
          let imgurl = fileList[i].url;
          this.ruleForm.imgFileList.push({name:fileName,url:imgurl});
        }
      }else{
         this.ruleForm.imgFileList = fileList;
      }
    },
    beforeAvatarUpload(file) {
      const isType = file.type === 'image/jpeg' || 'image/png';
      const isLt5M = file.size / 1024 / 1024 < 1;
      if (!isType) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 1MB!');
      }
      return isType && isLt5M;
    },
     //上传成功
    handlepaymentSuccess(response,file, fileList){
        let imgurl=location.protocol+"//"+location.host+process.env.VUE_APP_BASE_API+response.fileName;
        this.ruleForm.imgFileList.push({name:file.name,url:imgurl});
    },
    onInstitutionChang(e){
      let obj = {};
      obj = this.stationOptions.find((item)=>{//这里的userList就是上面遍历的数据源
        return item.deptId === e;//筛选出匹配数据
      })
        this.ruleForm.stationName =obj.deptName;
    },
    /** 进入信息 */
    look() {
      this.queryParams.stationId= this.$store.selectDeptId;
      if(this.queryParams.stationId==null || this.queryParams.stationId==""){
        this.queryParams.stationId =this.$store.state.user.deptId;
      }
      getStationPay(this.queryParams).then(response => {
        console.log("response",response);
         this.ruleForm = response.data;
          if(response.data.imgFileList==null){
            this.ruleForm.imgFileList=[];
          }
          if(response.data.stationId==null){
            this.ruleForm.stationId=this.$store.state.user.deptId;
          }
        
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if (this.ruleForm.payId != null) {
            updatePay(this.ruleForm).then(response => {
              this.msgSuccess("修改成功");
              this.look();
            });
          } else {
            addPay(this.ruleForm).then(response => {
              this.msgSuccess("添加成功");
              this.look();
            });
          }
        }
      });  
    }
  }
};
</script>
