<template>
    <div class="addCoupon">
      <!-- 新增优惠券 -->
      <div class="addCouponBox" style="padding-right: 30px;">
        <TitleWithCircle title="基本信息" style="margin-bottom: 20px;"/>
        <div style="padding-bottom: 15px;padding-right: 30px;padding-left: 80px;font-weight: bold;">
            所需金额：{{ changecouponfrom() }} 元
        </div>
        
        <el-form ref="ruleForm" class="formBox" :model="couponfrom" label-width="150px" :rules="couponRules">
            <el-form-item label="优惠券名称" prop="couponName">
                <el-input v-model="couponfrom.couponName" placeholder="请输入优惠券名称" onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"  />
            </el-form-item>
            <el-form-item label="优惠券类型">
                <el-radio v-model="couponfrom.couponType" label="1">满减券</el-radio>
                <el-radio v-model="couponfrom.couponType" label="2">折扣券</el-radio>
            </el-form-item>
            <el-form-item v-if="couponfrom.couponType === '1'" class="inputW" label="优惠内容" prop="maxDiscountAmount">
                订单满 <el-input-number v-model="couponfrom.maxDiscountAmount" :controls="false" :min="0" :precision="2" :step="0.01" /> 元 减 <el-input-number v-model="couponfrom.discountContent" :controls="false" :min="0" :precision="2" :step="0.01"  /> 元
            </el-form-item>
            <el-form-item v-else class="inputW discount" label="优惠内容" prop="discountContent">
                
                打 <el-input-number v-model="couponfrom.discountContent" :controls="false" :min="0" :max="9.9" :precision="1" :step="0.1"  /> 折
                <span v-if="couponfrom.couponType === '2'" style="margin-right: 10px;">
                    最高优惠金额
                    <el-input-number  v-model="couponfrom.maxDiscountAmount" :controls="false" :min="0" :precision="2" :step="0.01"  /> 元
                </span>
                <label>折数输入值要大于0 小于10，可保留一位小数</label>
                
            </el-form-item>
            <!-- <el-form-item v-if="couponfrom.couponType === '2'" class="inputW" label="最高优惠金额" prop="maxDiscountAmount">
                <el-input-number v-model="couponfrom.maxDiscountAmount" :controls="false" :min="0" :precision="2" :step="0.01"  /> 元
            </el-form-item> -->
            <!-- <el-form-item label="可用商品类别:">
                <el-radio-group v-model="couponfrom.useCategory" @change="changeType">
                    <el-radio :label="1" >全部</el-radio>
                    <el-radio :label="2" >选择类别</el-radio>     
                </el-radio-group>
            </el-form-item>
            <el-form-item label="选择商品类别:" v-if="couponfrom.useCategory === 2">
                <el-select style="width: 100%;"  multiple v-model="useCategory" placeholder="请选择" filterable @change="changeuseCategory">
                    <el-option
                        v-for="item in classList"
                        :key="item.classifyId"
                        :label="item.classifyName"
                        :value="item.classifyId"
                    />
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="使用范围:">
                <el-radio-group v-model="couponfrom.usedMerchants" >
                    <el-radio :label="1" >全平台</el-radio>
                    <el-radio :label="3" >部分商家</el-radio>    
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="选择商品:" >
                <el-select 
                    style="width: 100%;" 
                    multiple 
                    v-model="usedMerchants" 
                    placeholder="请选择" 
                    filterable
                    @change="changeusedMerchants"
                >
                    <el-option
                    v-for="item in shopList"
                    :key="item.productId"
                    :label="item.productName"
                    :value="item.productId"
                    />
                </el-select>
            </el-form-item>
            <div style="display: flex;">
                <el-form-item label="是否开启积分兑换:">
                <el-radio-group v-model="pointsRequired">
                    <el-radio :label="1" >是</el-radio>
                    <el-radio :label="0" >否</el-radio>
                </el-radio-group>
                </el-form-item>
                <el-form-item v-if="pointsRequired" label="所需积分:">
                <el-input v-model="couponfrom.pointsRequired" type="number" style="width: 150px" /> 分
                </el-form-item>
            </div>
            <el-form-item label="是否重复领用:">
                <el-radio-group v-model="couponfrom.receiveAgain">
                    <el-radio :label="1" >是</el-radio>
                    <el-radio :label="0" >否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="timeDataBox" label="用券时间" prop="startTime">
                <el-date-picker
                    v-model="dateInfo"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="changeDate"
                />
            </el-form-item>
            <el-form-item class="boxWidth" label="数量" prop="totalCoupons">
                <el-input-number v-model="couponfrom.totalCoupons" :controls="false" :min="1" :precision="0" :step="1" /> 张 <span v-if="coupoobj.symon && changecouponfrom()!=0">(最大：{{ (coupoobj.symon/changecouponfrom()).toFixed(0) }} 张)</span>
                <!-- <el-input v-model="couponfrom.totalCoupons" :controls="false"  type="number" :min="1" oninput="value=value.replace(/[^\d]/g,'')"  />张 <span v-if="coupoobj.symon && changecouponfrom()!=0">(最大：{{ (coupoobj.symon/changecouponfrom()).toFixed(0) }} 张)</span> -->
            </el-form-item>
            <el-form-item label="备注">
                <el-input maxlength="200" show-word-limit rows="4" v-model="couponfrom.remark" placeholder="请输入备注" type="textarea" />
            </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  // import { commdityClassGetAll } from '@/api/renovation';
  import TitleWithCircle from '@/components/top/index';
//   import {
//   businessListGetAll,
// } from '@/api/business'
import {
  getClassifyGetAll,
} from '@/api/commodity'
  export default {
    components: {
      TitleWithCircle
    },
    name: 'AddCoupon',
    props: {
        couponfrom: {
        type: Object,
        default: {},

      },
      coupoobj: {
        type: Object,
        default: {
          symon:0
        },
      },
    },
    data() {
      var moneyContent = (rule, value, callback) => {
        if(!this.couponfrom.maxDiscountAmount) {
          return callback(new Error('请输入优惠内容'));
        }
        if(!this.couponfrom.discountContent) {
          return callback(new Error('请输入优惠内容'));
        }
        if(this.couponfrom.couponType == '1') {
          if(Number(this.couponfrom.discountContent) >= Number(this.couponfrom.maxDiscountAmount)) {
            return callback(new Error('请满减金额大于优惠金额'));
          }   
        } 
        callback();
      }
      return {
        monys:0,
        usedMerchants:null,
        pointsRequired:0,
        dateInfo: null,
        isThreshold: true,
        useCategory:null,
        useCategory2:1,
        classList:[],
        shopList:[],
        couponRules: {
            couponName: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' }
        ],
        maxDiscountAmount: [ { validator: moneyContent, trigger: 'blur' }],
        startTime: [{required: true, message: '请选择时间', trigger: 'blur'}],
        totalCoupons: [{ required: true, message: '请输入数量', trigger: 'blur' }]
        },
      }
    },
    watch: {
      'couponfrom.couponType'(val) {
        this.couponfrom.maxDiscountAmount = 0
        this.couponfrom.discountContent = 0
      },
      'couponfrom.useCategory'(val) {
        if(val == '1') {
          this.useCategory = null
        } else {
        } 
      },
      'couponfrom.usedMerchants'(val) {
        this.usedMerchants = null
      },
      pointsRequired(val) {
        this.couponfrom.pointsRequired = 0
      },
    },
    mounted() {
        this.getAll()
    },
    methods: {
      changeuseCategory(e){
        this.$emit('changevalue','useCategorylist',e)
      },
      changeusedMerchants(e){
        this.$emit('changevalue','usedMerchantslist',e)
      },
      changeDate(e){
        console.error(e)
        if(e && e.length>0) {
          this.couponfrom.startTime = e[0]
          this.couponfrom.endTime = e[0]
        } else {
          this.couponfrom.startTime = ''
          this.couponfrom.endTime = ''
        }
        
      },
        changecouponfrom() {
            let num = 0
            if(this.couponfrom.couponType == '1') {
                num = (this.couponfrom.discountContent?Number(this.couponfrom.discountContent):0) * (this.couponfrom.totalCoupons?Number(this.couponfrom.totalCoupons):0)
            } else if(this.couponfrom.couponType == '2') {
                num = (this.couponfrom.maxDiscountAmount?Number(this.couponfrom.maxDiscountAmount):0) * (this.couponfrom.totalCoupons?Number(this.couponfrom.totalCoupons):0)
            }
            console.log(num)
            return num
        },
            // 获取类别
    async getAll () {
      // const res = await commdityClassGetAll({
      //   page: 1,
      //   pageSize: 100
      // })
      // this.classList = res.data.list

      const res1 = await getClassifyGetAll ({
        page: 1,
        pageSize: 400
      })
      this.shopList = res1.data.list
    },
        changeThreshold(val) { // 输入框值改变
            if (val) {
                this.couponfrom.threshold = 0
            }
        },
        changeType () {
        }
    }
  }
  </script>
  <style lang='scss' scoped>
  //@import url(); 引入公共css类
  @import url("../../styles/elDialog.scss");
  .addCoupon {
    background: #FFFFFF;
    .dialog-footer {
    //   margin-left: 300px;
    }
    .formBox {
      .flexBox {
        display: flex;
      }
      .applyType {
        span {
          width: 100px;
          height: 30px;
          line-height: 30px;
          background: #3F9B6A;
          color: #FFFFFF;
          text-align: center;
          display: inline-block;
          font-size: 14px;
          margin-right: 30px;
          border-radius: 4px;
          cursor: pointer;
          position: relative;
          i {
            position: absolute;
            right: -10px;
            top: -10px;
            width: 25px;
            height: 25px;
            line-height: 25px;
            background: #FFFFFF;
            border-radius: 50%;
            border: 1px solid #3F9B6A;
            text-align: center;
            color: #3F9B6A;
            font-style: normal;
            font-size: 12px;
          }
        }
      }
    }
  .footBtnBox {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
    .dateBox {
      display: flex;
      align-items: center;
      .description {
        width: 59px;
        text-align: center;
        display: block;
        font-size: 14px;
        color: #999999;
      }
    }
    .discount label {
      color: #cccccc;
      font-weight: 500;
      padding-left: 30px;
    }
  }
  
  </style>
  <style scoped>
  .flexBox /deep/ .el-input {
    width: 300px;
  }
  .inputW /deep/ .el-input, .el-input-number {
    width: 100px;
    /* margin: 0 8px; */
  }
  .inputW /deep/ .el-input .el-input__inner {
    text-align: center;
  }
  .inputW /deep/ .el-form-item__error {
    padding-left: 25px;
  }
  .inputW /deep/ .el-checkbox {
    margin-left: 20px;
  }
  .inputW /deep/ .el-radio {
    margin-left: 30px;
  }
  .boxWidth /deep/ .el-input {
    width: 100px;
    margin-right: 15px;
  }
  .boxWidth /deep/ .el-input .el-input__inner {
    text-align: center;
  }
  .addCoupon /deep/ .el-button--primary {
    background: #3F9B6A;
    border-color: #3F9B6A;
  }
  .addCoupon /deep/ .el-dialog__header {
    background-color: #3F9B6A;
  }
  .addCoupon /deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #FFFFFF;
  }
  .addCoupon .timeDataBox /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
  }
  .addCoupon .timeDataBox /deep/ .el-form-item__label {}
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
  
  </style>
  