<template>
  <div class="edit_add_page">
    <div class="content">
      <div class="title">
        活动列表/报名
        <div class="btn_list">
          <span @click="cancel">取消</span>
          <span @click="save">保存</span>
        </div>
      </div>
      <el-col :span="12">
        <el-form ref="form" :model="form" label-width="100px">
          <h2>基础信息</h2>
          <el-form-item label="活动名称:">
            <el-input v-model="form.name" placeholder="请输入活动名称" :disabled="unStart" />
          </el-form-item>

          <el-form-item label="活动介绍:">
            <el-input v-model="form.description" type="textarea" placeholder="请输入活动介绍" :disabled="unStart" />
          </el-form-item>
          <!-- :picker-options="pickerOptions" -->

          <el-form-item label="报名时间:">
            <el-date-picker
              v-model="date2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm"
              :picker-options="pickerOptions1"
            />
          </el-form-item>

          <el-form-item label="活动时间:">
            <el-date-picker
              v-model="date1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm"
              :disabled="applyEnd"
              :picker-options="pickerOptions"
            />
          </el-form-item>

          <el-form-item label="活动保证金:">
            <el-radio-group v-model="form.isNeedSecurityDeposit">
              <el-radio :label="1" :disabled="unStart">需要</el-radio>
              <el-radio :label="0" :disabled="unStart">不需要</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="form.isNeedSecurityDeposit===1" label="保证金金额:">
            <el-input v-model="form.securityDeposit" placeholder="请输入活动保证金金额" :disabled="unStart" />
          </el-form-item>

          <el-form-item label="活动标签">
            <el-input v-model="form.tag" placeholder="请输入活动标签" :disabled="unStart" />
          </el-form-item>

          <h2>优惠规则</h2>
          <el-form-item label="优惠方式:">
            <el-radio-group v-model="form.promotionType" @change="selectDiscount">
              <el-radio :label="1" :disabled="unStart">满减</el-radio>
              <el-radio :label="2" :disabled="unStart">优惠券</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="优惠方案:">
            <el-radio-group v-model="form.promotionPlan" @change="selectPreScheme">
              <el-radio :label="1" :disabled="form.promotionType ===2 || unStart">叠加优惠</el-radio>
              <el-radio :label="2" :disabled="unStart">阶梯优惠</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-for="(item,index) in list" :key="index">
            <el-col :span="10">
              满
              <el-input v-model="item.fullAmount" style="width: 80%;" :disabled="unStart" />
            </el-col>
            <el-col :span="10">
              减
              <el-input v-model="item.discountAmount" style="width: 80%;" :disabled="unStart" />
            </el-col>
          </el-form-item>

          <el-form-item v-if="form.promotionPlan===2">
            <el-button type="primary" :disabled="unStart" @click="add">添加层级</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div class="photo">
          <el-upload
            class="avatar-uploader"
            :headers="headers"
            :data="dataObj"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :disabled="unStart"
          >
            <img
              v-if="form.image"
              :src="form.image" class="avatar"
              width="80"
              height="80"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <el-button size="small" type="primary" :disabled="unStart">点击上传</el-button>
          </el-upload>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import db from '@/utils/localstorage'
import Marketing from '@/api/Marketing'
export default {
  data() {
    return {
      form: {
        name: '',
        description: '',
        isNeedSecurityDeposit: 0,
        securityDeposit: '',
        tag: '',
        promotionType: 1,
        promotionPlan: 1,
        image: ''

      },
      list: [
        { fullAmount: '', discountAmount: '' }
      ],
      date1: [],
      date2: [],
      type: false,
      headers: {
        Authorization: ''
      },
      action: `${process.env.VUE_APP_DEV_REQUEST_DOMAIN_PREFIX}/file/upload`,
      dataObj: {
        folderId: 1
      },
      pickerOptions: {
        disabledDate: (time) => {
          const t = this.$route.query.info
          if (this.date1[0] !== "" && t && t.status === 2) {
            return time.getTime() < new Date(this.date1[0]).getTime()
          }
          return ''
        }
      },
      pickerOptions1: {
        disabledDate: (time) => {
          const t = this.$route.query.info
          if (this.date2[0] !== "" && t && (t.status === 3 || t.status === 4)) {
            return time.getTime() < new Date(this.date2[0]).getTime()
          }
          return ''
        }
      }
    }
  },
  computed: {
    info() {
      return this.$route.query.info || {}
    },
    unStart() {
      const t = this.$route.query.info
      return t && !(t.status === 1)
    },
    applyEnd() {
      const t = this.$route.query.info
      return t && (t.status === 3 || t.status === 4)
    }
  },
  created() {
    this.headers.token = 'Bearer ' + db.get('TOKEN', '')
    this.headers.tenant = 'MDAwMA=='
    this.setForm()
  },
  methods: {
    setForm() {
      const vm = this
      const o = vm.form
      this.$route.meta.title = vm.info.id ? '修改活动' : '新增活动'
      if (vm.info.id) {
        Object.keys(o).forEach(item => {
          o[item] = vm.info[item]
          if (item === 'securityDeposit') {
            o[item] = vm.info[item] / 100
          }
        })
        const list = vm.info.promotionDetail
        if (list.length) {
          list.map(item => {
            item.fullAmount /= 100
            item.discountAmount /= 100
          })
          vm.list = list
        }

        this.date1 = [vm.info.activityStartTime, vm.info.activityEndTime]
        this.date2 = [vm.info.applyStartTime, vm.info.applyEndTime]
      }
    },
    selectDiscount(v) {
      if (v === 2) {
        this.form.promotionPlan = 2
      }
    },
    selectPreScheme(v) {
      if (v === 1) {
        this.list = [
          { fullAmount: '', discountAmount: '' }
        ]
      }
    },
    add() {
      if (this.form.promotionPlan === 2) {
        this.list.push({ fullAmount: '', discountAmount: '' })
      }
    },
    cancel() {
      this.$router.go(-1)
    },
    save() {
      const vm = this
      const temp = []
      vm.list.forEach(item => {
        temp.push({
          fullAmount: item.fullAmount * 100,
          discountAmount: item.discountAmount * 100
        })
      })
      const params = Object.assign({}, vm.form, {
        activityStartTime: vm.date1[0] || '', activityEndTime: vm.date1[1] || '',
        applyStartTime: vm.date2[0] || '', applyEndTime: vm.date2[1] || '',
        promotionDetail: temp,
        securityDeposit: vm.form.securityDeposit * 100
      })
      if (vm.info.id) {
        return Marketing.updatePromotion(Object.assign(params, { id: vm.info.id })).then(res => {
          const r = res.data
          if (r.code === 0) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            vm.reset()
            vm.cancel()
          }
        })
      }
      return Marketing.addPromotion(params).then(res => {
        const r = res.data
        if (r.code === 0) {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          vm.reset()
          vm.cancel()
        }
      })
    },
    handleAvatarSuccess (response) {
      const { url } = response.data
      this.form.image = url
    },
    reset() {
      this.form = {
        name: '',
        description: '',
        isNeedSecurityDeposit: 2,
        securityDeposit: '',
        tag: '',
        promotionType: 1,
        promotionPlan: 1,
        image: '',
        promotionDetail: '',
        activityStartTime: '',
        activityEndTime: '',
        applyStartTime: '',
        applyEndTime: ''
      }
      this.list = [
        { fullAmount: '', discountAmount: '' }
      ]
      this.date1 = []
      this.date2 = []
    }
  }
}
</script>

<style lang='less' scoped>
.edit_add_page {
  padding: 20px;
  h2 {
    font-size: 24px;
    font-weight: 500;
    position: relative;
    &::before {
      content: '';
      height: 24px;
      width: 4px;
      background-color: #3A68F2;
      position: absolute;
      left: -10px;
      top: 2px;
      display: block;
    }
  }
  .content {
    background-color: #fff;
    padding: 0 50px 20px;
    overflow: hidden;
    .title {
      height: 100px;
      line-height: 100px;;
      font-size:24px;
      position: relative;
      border-bottom: 1px solid #E0E5EB;
      .btn_list {
        position: absolute;
        right: 0;
        top: 0;
        height: 50px;
        span {
          padding: 0;
          margin: 0;
          width: 100px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          display: inline-block;
          font-size: 16px;
          border-radius:4px;
          box-sizing: border-box;
          &:hover {
            cursor: pointer;
          }
          &:nth-child(1) {
            background:rgba(255,255,255,1);
            order:1px solid rgba(224,229,235,1);
            margin-right: 20px;
            border:1px solid rgba(224,229,235,1);
          }
          &:nth-child(2) {
            background:rgba(58,104,242,1);
            color: #fff;
          }
        }
      }
    }
    .el-form {
      .el-form-item {
        label.el-form-item__label {
          font-size:16px !important;
          color: red !important;
        }
      }
    }
    .photo {
      padding:70px 100px;
      .avatar-uploader {
        width: 180px;
        .el-icon-plus, img {
          width: 180px;
          height: 180px;
          line-height: 180px;
          border: 1px #bbb solid;
          border-radius:4px 4px 0px 4px;
          margin-bottom: 10px;
          text-align: center
        }
        img {
          border: none;
        }
      }
    }
  }
}
</style>

