<template>
  <!--
        作者：luoyiming
        时间：2020-04-25
        描述：插件中心-首页推送
    -->
  <div class="pb50">
    <el-form size="small" ref="form" :model="form" label-width="100px">
      <el-form-item label="开启首页推送" prop="is_open"><el-switch v-model="form.is_open"></el-switch></el-form-item>
      <el-form-item label="活动名称" :rules="[{ required: true, message: ' ' }]" prop="name">
        <el-input class="max-w460" v-model="form.name" placeholder="" type="text"></el-input>
        <div class="gray">建议换活动，此名称更换，商城首页弹窗根据此名称不同来弹窗</div>
      </el-form-item>
      <div v-if="form.is_open">
        <el-form-item label="类型">
          <el-radio v-model="form.type" label="1">图文</el-radio>
          <el-radio v-model="form.type" label="2">纯图</el-radio>
          <el-radio v-model="form.type" label="3">领取优惠券</el-radio>
        </el-form-item>

        <el-form-item v-if="form.type == 1" label="标题" :rules="[{ required: true, message: ' ' }]" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" class="max-w460"></el-input>
        </el-form-item>

        <el-form-item label="弹窗图片">
          <el-row>
            <el-button icon="el-icon-upload" @click="openUpload">选择图片</el-button>
            <div v-if="form.image_id > 0" class="img mt10"><img :src="form.file_path" width="100" height="100" /></div>
          </el-row>
          <div class="gray">图片为2M以内大小，格式限png，jpg格式
          <span v-if="form.type==1">建议尺寸：600x300；</span>
          <span v-if="form.type==2">建议尺寸：600x420；</span>
          <span v-if="form.type==3">建议尺寸：600x250；</span></div>
        </el-form-item>
        <el-form-item v-if="form.type == 1" label="按钮文案" :rules="[{ required: true, message: ' ' }]" prop="des">
          <el-input class="max-w460" v-model="form.des" placeholder="" type="text"></el-input>
        </el-form-item>
        <el-form-item v-if="form.type == 1" label="简介说明" :rules="[{ required: true, message: ' ' }]" prop="remark">
          <el-input type="textarea" :rows="2" max="100" placeholder="请输入说明" v-model="form.remark" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="跳转地址" v-if="form.type < 3" :rules="[{ required: true, message: ' ' }]" prop="link">
          <el-input class="max-w460" placeholder="点击选择你要链接的位置" v-if="form.link" v-model="'链接到' + form.link.type + ' ' + form.link.name" :disabled="true"></el-input>
          <el-input class="max-w460" placeholder="点击选择你要链接的位置" v-if="!form.link" :disabled="true"></el-input>
          <el-button icon="el-icon-link" @click="changeLink">选择链接</el-button>
        </el-form-item>
        <!--选择优惠券-->
        <el-form-item label="选择优惠券" v-if="form.type == 3">
          <div class="btn-box">
            <el-button size="small" icon="el-icon-plus" @click="addCoupon()">添加优惠券</el-button>
            （最多可以添加三张）
          </div>
          <div class="mt10">
            <el-table size="small" :data="coupon" style="width: 100%">
              <el-table-column prop="name" label="优惠券">
                <template slot-scope="scope">
                  <span class="fb orange">{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="类型">
                <template slot-scope="scope">
                  <span class="fb orange">{{scope.row.type}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                     <el-button @click="deleteCouponClick(scope.$index)" type="text" size="small">删除</el-button>
                  </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </div>
      <!--提交-->
      <div class="common-button-wrapper"><el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button></div>
    </el-form>

    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>

    <!--选择连接-->
    <Setlink v-if="is_linkset" :is_linkset="is_linkset" @closeDialog="closeLinkset">选择链接</Setlink>

    <!--选择优惠券-->
    <GetCoupon v-if="open_add" :open_add="open_add" @closeDialog="closeProductDialogFunc($event)">选择优惠券弹出层</GetCoupon>
  </div>
</template>
<script>
import HomepushApi from '@/api/homepush.js';
import Upload from '@/components/file/Upload';
import Setlink from '@/components/setlink/Setlink';
import GetCoupon from '@/components/coupon/GetCoupon';
export default {
  components: {
    Upload,
    Setlink,
    GetCoupon
  },
  data() {
    return {
      form: {
        is_open: false,
        name: '',
        des: '查看详情',
        title: '',
        remark: '',
        link: '',
        type: '1',
        image_id: 0,
        file_path: ''
      },
      coupon: [],
      /*是否加载完成*/
      loading: false,
      /*添加优惠券*/
      open_add: false,
      /*是否上传图片*/
      isupload: false,
      /*是否选择链接*/
      is_linkset: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },

    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.form.file_path = e[0].file_path;
        this.form.image_id = e[0].file_id;
      }
      this.isupload = false;
    },

    /*获取数据*/
    getData() {
      let self = this;
      HomepushApi.getData()
        .then(data => {
          self.form = data.data.vars.values;
          if (self.form.is_open == 'true') {
            self.form.is_open = true;
          }
          if (!self.form.hasOwnProperty('coupon')) {
            self.coupon = [];
          } else {
            self.coupon = self.form.coupon;
          }
        })
        .catch(error => {});
    },

    /*提交*/
    onSubmit() {
      let self = this;
      let params = self.form;
      if (self.form.type == 3) {
        params.coupon = self.coupon;
      }
      if (params.is_open && !self.checkData(params)) {
        return false;
      }
      self.loading = true;
      HomepushApi.saveData(params, true)
        .then(data => {
          self.loading = false;
          if (data.code == 1) {
            self.$message({
              message: '恭喜你，保存成功',
              type: 'success'
            });
            self.getData();
          }
        })
        .catch(error => {
          self.loading = false;
        });
    },

    /*选择链接*/
    changeLink() {
      this.is_linkset = true;
    },

    /*获取链接并关闭弹窗*/
    closeLinkset(e) {
      this.is_linkset = false;
      if(e){
        this.form.link = e;
      }
    },

    /*添加优惠券*/
    addCoupon() {
      this.open_add = true;
    },

    /*关闭弹窗*/
    closeProductDialogFunc(e) {
      this.open_add = e.openDialog;
      let len = this.coupon.length;
      if (len >= 3) {
        this.$message({
          message: '最多添加3张优惠券',
          type: 'error'
        });
        return false;
      }
      if (e.type == 'success') {
        let obj = {};
        obj.coupon_id = e.params.coupon_id;
        obj.name = e.params.name;
        obj.type = e.params.coupon_type.text;
        this.coupon.push(obj);
      }
    },

    /*删除优惠券*/
    deleteCouponClick(e) {
      this.coupon.splice(e, 1);
    },

    /*数据验证*/
    checkData(param) {
      if (param.type == 1) {
        if (!param.title) {
          this.$message({
            message: '标题不能为空',
            type: 'error'
          });
          return false;
        }
        if (!param.des || !param.remark) {
          return false;
        }
      }
      if (param.type < 3) {
        if (!param.link) {
          this.$message({
            message: '请选择跳转链接',
            type: 'error'
          });
          return false;
        }
      } else {
        if (param.coupon.length == 0) {
          this.$message({
            message: '请选择优惠卷',
            type: 'error'
          });
          return false;
        }
      }

      if (!(param.image_id > 0)) {
        this.$message({
          message: '请上传图片',
          type: 'error'
        });
        return false;
      }
      return true;
    }
  }
};
</script>

<style>
.reward-list .reward-item {
  margin-bottom: 10px;
  padding: 10px 20px;
  border: 1px solid #ebeef5;
}

.reward-list .delete-reward {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  z-index: 10;
}
</style>
