<template>
  <el-dialog
    :close-on-click-modal="false" :title="isAdd ? '新建弹窗广告' : '编辑弹窗广告'" width="800px" top="5vh"
    :visible.sync="visible"
  >
    <el-form ref="form" class="dialog-form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="广告名称" prop="name">
        <el-input v-model="form.name" maxlength="20" />
      </el-form-item>
      <el-form-item label="上线时间" prop="onlineTime">
        <el-date-picker
          v-model="form.onlineTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="弹窗图片" prop="popupImg">
        <el-upload
          class="avatar-uploader" :action="action" :headers="myHeaders" :show-file-list="false"
          :on-success="(res) => { handleAvatarSuccess(res, 'popupImg') }"
        >
          <img v-if="form.popupImg" :src="form.popupImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <span class="tips">建议尺寸：500*700px</span>
      </el-form-item>
      <el-form-item label="关闭按钮" prop="closeImg">
        <el-upload
          class="avatar-uploader" :action="action" :headers="myHeaders" :show-file-list="false"
          :on-success="(res) => { handleAvatarSuccess(res, 'closeImg') }"
        >
          <img v-if="form.closeImg" :src="form.closeImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <span class="tips">建议尺寸：60*60px</span>
      </el-form-item>
      <el-form-item label="跳转类型" prop="jumpType">
        <el-radio-group v-model="form.jumpType" class="radio-link-type" @change="jumpTypeChange">
          <el-radio class="radio" :label="0">不跳转</el-radio>
          <el-radio class="radio" :label="1">商品</el-radio>
          <el-radio class="radio" :label="2">分类</el-radio>
          <el-radio class="radio" :label="3">平台券</el-radio>
          <el-radio class="radio" :label="4">小程序</el-radio>
          <!--<el-radio class="radio" :label="5">公众号文章</el-radio>-->
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.jumpType !== 0" label="链接配置" prop="jumpContent">
        <LinkConfig v-model="jumpContent" :link-type="form.jumpType" />
      </el-form-item>
      <el-form-item label="触发条件" prop="triggerCondition">
        <el-radio-group v-model="form.triggerCondition">
          <el-radio :label="1">每天进入商城首页</el-radio>
          <el-radio :label="2">支付成功后</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="针对会员" prop="applyGroup">
        <el-radio-group v-model="form.applyGroup">
          <el-radio :label="1">全体成员</el-radio>
          <el-radio :label="2">会员</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--      <el-form-item label="权重" prop="weight">-->
      <!--        <el-input v-model="form.weight" class="input-num" type="number" placeholder="输入数字" />-->
      <!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="doCancel">取消</el-button>
      <el-button type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import LinkConfig from '@/components/adCoverConfig/linkConfig'
import { uploadUrl, token } from '@/utils/request'
import {
  add,
  update
} from '@/api/advert'
import {
  getCoupons
} from '@/api/public'
export default {
  name: 'AdForm',
  components: { LinkConfig },
  data() {
    return {
      visible: false,
      action: uploadUrl,
      myHeaders: {
        'Authorization-admin': token
      },
      form: {
        popupImg: '',
        name: '',
        closeImg: '',
        customerType: 1,
        triggerCondition: 1,
        jumpContent: '',
        jumpType: 0,
        status: 1,
        weight: 0
      },
      rules: {
        name: [
          { required: true, message: '广告名称不能为空', trigger: 'blur' }
        ],
        onlineTime: [
          { required: true, message: '上线时间不能为空', trigger: 'change' }
        ],
        jumpType: [
          { required: true, message: '跳转类型不能为空', trigger: 'change' }
        ],
        popupImg: [
          { required: true, message: '弹窗图片不能为空', trigger: 'none' }
        ],
        closeImg: [
          { required: true, message: '关闭按钮不能为空', trigger: 'none' }
        ],
        jumpContent: [
          { required: true, message: '链接配置不能为空', trigger: 'none' }
        ],
        triggerCondition: [
          { required: true, message: '触发条件不能为空', trigger: 'change' }
        ],
        applyGroup: [
          { required: true, message: '针对会员不能为空', trigger: 'change' }
        ],
        weight: [
          { required: true, message: '权重不能为空', trigger: 'blur' }
        ]
      },
      isAdd: false,
      jumpContent: {}
    }
  },
  methods: {
    // 图片上传回调
    handleAvatarSuccess(response, key) {
      const { url } = response.data
      this.form[key] = url
      console.log(this.form, 'urls')
      this.$forceUpdate()
    },
    // 打开弹出窗
    show(row) {
      this.isAdd = !row
      this.visible = true
      if (this.isAdd) {
        this.form = {
          popupImg: '',
          name: '',
          closeImg: '',
          applyGroup: 1,
          triggerCondition: 1,
          jumpContent: '',
          jumpType: 0,
          status: 1,
          weight: 0
        }
        this.jumpContent = {}
        this.onlineTime = []
        this.$nextTick(function () {
          this.$refs.form.clearValidate()
        })
      } else {
        this.form = JSON.parse(JSON.stringify(row))
        this.jumpContent = row.jumpContent ? JSON.parse(row.jumpContent) : {}
        if (this.form.jumpType === 3) {
          this.getCoupons(this.jumpContent.items)
        }
        this.$nextTick(function () {
          this.$set(this.form, 'onlineTime', [row.startTime, row.endTime])
        })
      }
    },
    // 跳转类型切换
    jumpTypeChange() {
      this.jumpContent = {}
    },
    // 取消
    doCancel() {
      this.visible = false
    },
    // 提交
    doSubmit() {
      if (this.form.jumpType === 3) {
        const ids = this.jumpContent.items.map((item) => item.activityId).join(',')
        this.jumpContent.items = ids
      }
      var _jumpContent = JSON.stringify(this.jumpContent)
      if (_jumpContent && _jumpContent !== '{}') {
        this.form.jumpContent = _jumpContent
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.startTime = this.form.onlineTime[0]
          this.form.endTime = this.form.onlineTime[1]
          delete this.form.onlineTime
          if (this.isAdd) {
            add(this.form).then((res) => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$emit('reset')
              this.visible = false
            })
              .catch((err) => {
                this.visible = false
              })
          } else {
            update(this.form).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$emit('reset')
              this.visible = false
            })
              .catch((err) => {
                this.visible = false
              })
          }
        }
      })
    },
    // 获取优惠券信息
    getCoupons(ids) {
      var _this = this
      const params = {
        page: 1,
        pageSize: 999,
        ids
      }
      getCoupons(params).then((res) => {
        console.log(this.form, res.data, 'form')
        this.jumpContent.items = res.data.list
      })
    }
  }
}
</script>

<style scoped>
.radio-link-type .el-radio {
	padding: 5px 0;
}

.tips {
	font-size: 12px;
	color: #8c8c8c;
}
</style>
