<template>
  <div class="rechargeSet">
    <div class="form-box" style="margin-top: 0">
      <div>
        <span style="color: rgb(64, 158, 255);cursor: pointer;margin-left: 20px" @click="cancel">充值管理</span>
        <span style="margin: 0 5px;color: #C0C4CC;">/</span>
        <span>设置</span>
      </div>
    </div>
    <div class="form-box">
      <el-form :model="msg" style="padding:0 50px;" ref="msg" label-width="160px">
        <el-form-item label="开启余额功能"  >
          <el-switch
            style="margin-left: 10px"
            :active-value="1"
            :inactive-value="0"
            v-model="msg.IsOpenBalance"
            active-text=""
            inactive-text="">
          </el-switch>
        </el-form-item>

        <el-form-item label="是否开放自定义金额"  >
          <el-switch
            style="margin-left: 10px"
            :active-value="1"
            :inactive-value="0"
            v-model="msg.IsExploitMoney"
            active-text=""
            inactive-text="">
          </el-switch>
        </el-form-item>
        <el-form-item label="背景图片"  >
          <button class="el-button el-button--default el-button--small inputM_l" @click="openChangeDig(1)">
            选择图标
          </button>
          <div class="img_yuan inputM_l">
            <img v-if="msg.BackImg=='' || msg.BackImg==null" src="../../assets/img/setup/default_img.png" alt="">
            <img v-else :src="msg.BackImg" alt="">
          </div>
        </el-form-item>

        <el-form-item label="广告图片"  >
          <button class="el-button el-button--default el-button--small inputM_l" @click="openChangeDig(2)">
            选择图标
          </button>
          <div class="img_yuan inputM_l">
            <img v-if="msg.AdvertisingImg=='' || msg.AdvertisingImg==null" src="../../assets/img/setup/default_img.png" alt="">
            <img v-else :src="msg.AdvertisingImg" alt="">
          </div>
        </el-form-item>

        <el-form-item label="跳转链接">
          <el-input placeholder="请输入内容" v-model="msg.AdvertisingLink" :disabled="true">
            <el-button slot="append" @click="isShowLink=true" style="background: white">选择链接</el-button>
          </el-input>
        </el-form-item>

        <el-form-item label="充值说明图标"  >
          <button class="el-button el-button--default el-button--small inputM_l" @click="openChangeDig(3)">
            选择图标
          </button>
          <div class="img_yuan inputM_l">
            <img v-if="msg.ExplainIco=='' || msg.ExplainIco==null" src="../../assets/img/setup/default_img.png" alt="">
            <img v-else :src="msg.ExplainIco" alt="">
          </div>
        </el-form-item>

        <el-form-item label="充值说明"  >
          <el-input
            type="textarea"
            :rows="2"
            v-model="msg.Explain">
          </el-input>
        </el-form-item>

      </el-form>
    </div>
    <el-button type="primary" style="margin: 12px 0 " @click="preserve()" :loading="loading">提交</el-button>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
    </el-dialog>
    <!-- 选择链接 -->
    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
      <chooseMeun ref="chooseMeun"></chooseMeun>
      <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="isShowLink=false">取 消</el-button>
                <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import chooseMeun from "../common/chooseMeun.vue";
    export default {
        name: "rechargeSet",
      components: {
        ChooseImg,
        chooseMeun
      },
      data(){
          return{
            msg:{
              IsOpenBalance:0,
              IsExploitMoney:0,
              BackImg:'',
              AdvertisingImg:'',
              AdvertisingLink:'',
              ExplainIco:'',
              Explain:'',
            },
            loading:false,
            Choiceimg:0,
            changeState:false,
            isShowLink:false
          }
      },
      created(){
        this.getRechargeSettingsList()
      },
      methods:{
        getRechargeSettingsList(){
          this.apipost("/api/Recharge/GetRechargeSettingsList",{} , res => {
            if (res.data.resultCode == 1) {
              this.msg =res.data.data
            } else {
              this.Info(res.data.message);
            }
          })
        },
        cancel(){
          this.$router.go(-1)
        },
        preserve(){
          this.apipost("/api/Recharge/AddOrUpdateRechargeSettings",this.msg , res => {
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.$router.go(-1)

            } else {
              this.Info(res.data.message);
            }
          })
        },
        openChangeDig(data){
          this.Choiceimg = data
          this.changeState=true;
          setTimeout(()=>{
            this.$refs.mychild.InitData();
          },10)
        },
        SelectId(msg){
          this.changeState=false;
          if(this.Choiceimg == 1){
            this.msg.BackImg=  this.getIconLink(msg.url);
          }else if(this.Choiceimg == 2){
            this.msg.AdvertisingImg=this.getIconLink(msg.url);
          }else if(this.Choiceimg == 3){
            this.msg.ExplainIco =this.getIconLink(msg.url);
          }
        },
        //获取选择链接
        getChoiceLink(){
          //调用子组件方法
          var obj = this.$refs.chooseMeun.getChooseMenu();
          this.msg.AdvertisingLink=obj.PageUrl;
          this.isShowLink = false;
        },
      }

    }
</script>

<style scoped>
  .rechargeSet .form-box{
    padding: 20px 0;
    background-color: #fff;
    margin-bottom: 20px;
    padding-right: 50%;
  }
  .rechargeSet .el-input__inner{
    height: 32px;
    line-height: 32px
  }
  .rechargeSet .img_yuan{
    width: 80px;
    height: 80px;
    margin-top: 5px;
    position: relative;
  }
  .rechargeSet .img_yuan img{
    width: 100%;
    height: 100%;
  }
</style>
