<template>
  <div class="divBox">
    <!-- <el-card class="box-card">
      <div style="width :100%;height:45px;line-height: 45px;background: #f3f3f3; padding-left:20px">
        添加广告
      </div> -->
    <el-form :rules="rules" ref="form" :model="advertisement" class="formValidate" label-width="100px">
      <el-row>
        <el-col :span="13">
          <el-form-item label="广告名称" prop="advertiseName">
            <el-input v-model="advertisement.advertiseName" maxlength="249" placeholder="请输入商品名称" />
          </el-form-item>
        </el-col>

        <el-col :span="13">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker style="width:100%" v-model="advertisement.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker style="width:100%" v-model="advertisement.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="上线/下线" >
            <el-radio-group v-model="advertisement.isDownline">
              <el-radio :label="1">上线</el-radio>
              <el-radio :label="0">下线</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item label="广告图片" prop="positionImage">
            <div class="upLoadPicBox">
              <upload :photo="advertisement.positionImage" @success="uploadSuccess" tip="只能上传jpg/png格式文件，文件不能超过50kb"></upload>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="13">
          <el-form-item label="广告链接" prop="advertiseUrl">
            <el-input v-model="advertisement.advertiseUrl" type="url" placeholder="请输入广告链接" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" class="submission" @click="handleSubmit">提交</el-button>
        <el-button :size="$store.getters.size" @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- </el-card> -->
  </div>
</template>
<script>
import marketingApi from '@/api/finance/marketing.js'
import upload from '@/components/Upload/index'
export default {
  components: { upload },
  props: {
    advertisement: {
      type: Object,
      default() {}
    }
  },
  data() {
    return {
      advertisement: {},

      rules: {
        advertiseName: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        picture: [{ required: true, message: '请上传广告图片', trigger: 'change' }],
        advertiseUrl: [{ required: true, message: '请输入广告链接', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.update()
        }
      })
    },
    update() {
      loadingFn.call(
        this,
        'loading',
        marketingApi.update(this.advertisement).then(res => {
          if ((res.code = 20000)) this.$message.success(res.msg)
          this.$emit('closeDialog')
          this.$emit('getList')
        })
      )
    },
    uploadSuccess(e, res) {
      console.log(res)
      if (res.code == 20000) {
        this.advertisement.positionImage = res.data.publicUrl
      }
    },
    close() {
      this.$emit('closeDialog')
    }
  }
}
</script>
<style scoped lang="stylus"></style>
