<template>
  <div class="setMember editDeposit addUsers">
    <div class="head-title">
      <span @click="goUrl" class="blue point">存储卡列表</span> / 存储卡编辑
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
        <el-form-item label="名称" prop="Name">
          <el-input v-model="addMsg.Name" style="width:478px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="封面" class="is-required" size="small">
          <el-button @click="openChangeDig()" size="small">选择文件</el-button>
          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
            <img v-if="!addMsg.CouponIco" src="../../assets/img/default.png" style="width:80px;height:80px" alt="" />
            <img style="width:80px;height:80px" v-else :src="addMsg.CouponIco" alt="" />
          </div>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="addMsg.SalePrice" @keyup.native="checkPrice(addMsg,'SalePrice')" style="width:478px"
            size="small"></el-input>
        </el-form-item>
        <el-form-item label="面值">
          <el-input v-model="addMsg.DepositPrice" @keyup.native="checkPrice(addMsg,'DepositPrice')" style="width:478px"
            size="small"></el-input>
        </el-form-item>
        <el-form-item label="有效期">
          <el-input v-model="addMsg.IndateDay" @keyup.native="checkInteger(addMsg,'IndateDay')" style="width:478px"
            size="small">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="加入充值中心">
          <el-switch
            v-model="addMsg.PickupCenter"
            :active-value="1" :inactive-value="0"
            >
          </el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    components: {
      ChooseImg
    },
    data() {
      return {
        addMsg: {
          ID: 0,
          Name: '', //名称
          CouponIco: '', //封面
          SalePrice: '', //售价
          DepositPrice: '', //金额
          IndateDay: '', //有效期
          PickupCenter:0,//加入充值中心
        },
        rules: {
          Name: [{
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }],
        },
        tableData: [],
        changeState: false
      };
    },
    created() {
      if (this.$route.query.ID) {
        this.getData(this.$route.query.ID)
      }
    },
    methods: {
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost("/api/Coupon/GetSetDeposit", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.goUrl();
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          }
        });
      },
      //修改获取数据
      getData(ID) {
        this.apipost("/api/Coupon/GetDepositList", {
          ID: ID
        }, res => {
          var tempDate = res.data.data;
          this.addMsg.ID = tempDate.ID;
          this.addMsg.Name = tempDate.Name;
          this.addMsg.CouponIco = tempDate.CouponIco;
          this.addMsg.SalePrice = tempDate.SalePrice;
          this.addMsg.DepositPrice = tempDate.DepositPrice;
          this.addMsg.IndateDay = tempDate.IndateDay;
          this.addMsg.PickupCenter = tempDate.PickupCenter;
        })
      },
      goUrl() {
        this.$router.push({
          name: 'depositCenter',
          query: {
            blank: "y"
          }
        });
      },
      openChangeDig(num) {
        this.changeState = true;
      },
      SelectId(msg) {
        let url = this.getIconLink(msg.url)
        this.addMsg.CouponIco = url
        this.changeState = false;
      },
    },
    mounted() {

    }
  };

</script>
<style>
  .addUsers .app-image {
    background-size: cover;
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }
  .editDeposit .blue {
    color: #409EFF;

  }
  .editDeposit .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
