<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" width="900px">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="100px">
      <el-row :gutter="10">
        <el-col :span="8">
      <el-form-item label="优惠卷类型" prop="couponType">
        <!-- <el-input v-model="dataForm.type" placeholder="优惠卷类型"></el-input> -->
        <el-select v-model="dataForm.couponType" placeholder="请选择">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="8"><el-form-item label="使用门槛" prop="useLevel">
        <el-input v-model="dataForm.useLevel" placeholder="" oninput="value=value.replace(/[^\d.]/g,'')">
          <template slot="append">元</template>
        </el-input>
        
      </el-form-item></el-col>
    <el-col :span="8"><el-form-item label="商品类型" prop="couponProType">
        <!-- <el-input v-model="dataForm.type" placeholder="优惠卷类型"></el-input> -->
        <el-select v-model="dataForm.couponProType" placeholder="请选择">
          <el-option
      v-for="item in options2"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
        </el-select>
      </el-form-item></el-col>
    </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="优惠券名称" prop="couponName">
            <el-input v-model="dataForm.couponName" placeholder="名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="面额：" prop="couponAmount">
            <el-input v-model="dataForm.couponAmount" placeholder="面额" oninput="value=value.replace(/[^\d.]/g,'')">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="每人限领：" prop="limitedCollar">
            <el-input v-model="dataForm.limitedCollar" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="">
              <template slot="append">张</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>      
      <el-row ::gutter="10">
      </el-row>
      <el-row ::gutter="10">
        <el-col :span="8">
          <el-form-item label="开始时间" prop="takeEffectType">
            <el-radio-group v-model="dataForm.takeEffectType">
            <el-radio :label="0">领取日</el-radio>
            <el-radio :label="1">设置日期</el-radio>
          </el-radio-group>
          </el-form-item>
          <el-form-item label="开始时间" prop="takeEffectDate" v-if="dataForm.takeEffectType == '1'">
          <el-date-picker 
      v-model="dataForm.takeEffectDate" @change="datePicked"
      type="datetime" value-format="timestamp" 
      placeholder="选择日期时间"
      default-time="12:00:00">
    </el-date-picker>            
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="时效" prop="validity">
            <el-input placeholder="" v-model="dataForm.validity" oninput="value=value.replace(/[^\d.]/g,'')">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总发行量" prop="totalCirculation">
            <el-input v-model="dataForm.totalCirculation"  placeholder="发行数量" oninput="value=value.replace(/[^\d.]/g,'')">
              <template slot="append">张</template>
              </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="封面图" prop="couponUrl">
          <el-upload :limit="1" class="el-uploadfeng"
          :action= "baseUrl + '/oss/fileoss'" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :file-list="fileList" :on-success="handlePicSuccess"
            accept=".jpeg,.jpg,.gif,.png"  :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dataForm.couponUrl" alt="">
          </el-dialog>
        </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import global from '../../common/common.vue'     //引入共用组间
export default {
  baseUrl:global.baseUrl,
  data() {
    return {
      baseUrl:global.baseUrl,
      visible: false,
      options2: [{
        value: 0,
        label: '商品'
      },{
        value: 1,
        label: '电子书'
      }
      ],
      options: [{
        value: 0,
        label: '现金券'
      }, {
        value: 1,
        label: '折扣券'
      }],      
      
      dialogVisible:false,      
      fileList: [], // 封面图
      dataForm: {
        couponType:null,
        couponProType:null,  // 使用商品类型
        useLevel:null, // 使用门槛
        id: 0,
        couponName:'',
        couponAmount:null,
        couponUrl:'',
        limitedCollar:null,
        validity:'',
        takeEffectType: null,       // 生效方式
        takeEffectDate:null,
        totalCirculation:null,
        remark:''
        
      },
      dataRule: {
        couponType: [
          { required: true, message: '请填写本项', trigger: 'blur' }
        ],
        couponName: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        couponAmount: [
          { required: true, message: '优惠券面额不能为空', trigger: 'blur' }
        ],
        takeEffectType: [
          { required: true, message: '生效方式不能为空', trigger: 'blur' }
        ],
        validity: [
          { required: true, message: '时效不能为空', trigger: 'blur' }
        ],
        couponProType: [
          { required: true, message: '商品类型不能为空', trigger: 'blur' }
        ],
        useLevel: [
          { required: true, message: '使用门槛；0表示无门槛', trigger: 'blur' }
        ],
        // startTime: [
        //   { required: true, message: '开始使用时间不能为空', trigger: 'blur' }
        // ],
        // endTime: [
        //   { required: true, message: '结束使用时间不能为空', trigger: 'blur' }
        // ],
        // useType: [
        //   { required: true, message: '使用类型：0->全场通用；1->指定分类；2->指定商品不能为空', trigger: 'blur' }
        // ],
        // note: [
        //   { required: true, message: '备注不能为空', trigger: 'blur' }
        // ],
        // publishCount: [
        //   { required: true, message: '发行数量不能为空', trigger: 'blur' }
        // ],
        // useCount: [
        //   { required: true, message: '已使用数量不能为空', trigger: 'blur' }
        // ],
        // receiveCount: [
        //   { required: true, message: '领取数量不能为空', trigger: 'blur' }
        // ],
        // enableTime: [
        //   { required: true, message: '可以领取的日期不能为空', trigger: 'blur' }
        // ],
        // code: [
        //   { required: true, message: '优惠码不能为空', trigger: 'blur' }
        // ],
        // memberLevel: [
        //   { required: true, message: '可领取的会员类型：0->无限制不能为空', trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/book/coupon/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.id = data.coupon.id
              this.dataForm.couponType = data.coupon.couponType
              this.dataForm.couponName = data.coupon.couponName
              this.dataForm.couponAmount = data.coupon.couponAmount              
              this.dataForm.limitedCollar = data.coupon.limitedCollar
              this.dataForm.validity = data.coupon.validity
              this.dataForm.takeEffectType = data.coupon.takeEffectType
              this.dataForm.takeEffectDate = data.coupon.takeEffectDate
              this.dataForm.totalCirculation = data.coupon.totalCirculation
              this.dataForm.remark = data.coupon.remark
              this.dataForm.useLevel = data.coupon.useLevel,
              this.dataForm.couponProType = data.coupon.couponProType              
              // this.dataForm.couponUrl = {name:'', url:}
              if (data.coupon.couponUrl != "") {
                var img = { name: '', url: data.coupon.couponUrl }
                var attr = []
                attr.push(img)
                this.fileList = attr
              }
            }
          })
        }
      })
    },
    handlePicSuccess(res, file) {
      if (res.msg == "success") {
        this.dataForm.couponUrl = res.url;
        this.$message.success("上传成功");
      } else {
        this.$message.error("上传失败");
      }
    },
    handleRemove(file, fileList) {
      this.dataForm.couponUrl = '';      
    },
    handlePictureCardPreview(file) {
      this.dataForm.couponUrl = file.url;
      this.dialogVisible = true;
    },
    datePicked(){
      console.log(this.dataForm.startTime)
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/book/coupon/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'couponType':this.dataForm.couponType,        
        'couponName':this.dataForm.couponName,
       'couponAmount' :this.dataForm.couponAmount,
       'couponUrl': this.dataForm.couponUrl,
       'limitedCollar' :this.dataForm.limitedCollar,
       'validity' :this.dataForm.validity,
       'takeEffectType' :this.dataForm.takeEffectType,
       'takeEffectDate' :this.dataForm.takeEffectDate,
       'totalCirculation' :this.dataForm.totalCirculation,
        'remark':this.dataForm.remark ,
        'useLevel' : this.dataForm.useLevel,
        'couponProType' : this.dataForm.couponProType,
        'currentState' : '1',
        'delFlag':0
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-form-item__label {
  font-size: 12px;
}
.el-uploadfeng {
  /deep/ .el-upload-list__item {
    width: 60px;
    height: 60px;
  }

  /deep/ .el-upload--picture-card {
    width: 60px;
    height: 60px;
    line-height: 70px;

  }}
</style>
