<template>
  <ai-detail class="add-detail">
    <template slot="title">
      <ai-title :title="params.id ? '编辑活动' : '添加活动'" :isShowBack="true" @onBackClick="cancel"
                :isShowBottomBorder="true"></ai-title>
    </template>
    <template slot="content">
      <ai-card title="标题信息">
        <template #content>
          <el-form :model="form" label-width="120px" ref="form">
            <el-form-item label="标题" prop="title" :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
              <el-input v-model="form.title" clearable placeholder="请输入..." size="small" maxlength="30"
                        show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="活动" prop="type" :rules="[{required: true, message: '请选择活动', trigger: 'blur'}]">
              <ai-select
                v-model="form.type"
                placeholder="请选择活动"
                :selectList="$dict.getDict('activityAirticleType')"
              ></ai-select>
            </el-form-item>
            <el-form-item label="摘要" prop="description" :rules="[{required: true, message: '请输入摘要', trigger: 'blur'}]">
              <el-input v-model="form.description" clearable placeholder="请输入..." size="small" maxlength="50"
                        show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="正文" prop="content" :rules="[{required: true, message: '请输入正文', trigger: 'blur'}]">
              <ai-editor v-model="form.content" :instance="instance"/>
            </el-form-item>
            <el-form-item label="封面" prop="thumbUrl">
              <ai-uploader
                :isShowTip="true"
                :instance="instance"
                v-model="form.thumbUrl"
                :limit="1"
                :cropOps="cropOps"
                is-crop>
              </ai-uploader>
            </el-form-item>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template slot="footer">
      <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
      <el-button type="primary" size="small" v-if="!params.id" @click="onSubmit(2)">发布</el-button>
      <el-button size="small" @click="onSubmit(1)">保存</el-button>
    </template>
  </ai-detail>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: 'Add',

    props: {
      dict: Object,
      params: Object,
      instance: Function,
      areaId: String
    },

    data() {
      return {
        form: {
          title: '',
          type: '',
          description: "",
          content: '',
          thumbUrl: []
        },
        isDetail: true,
      }
    },

    computed: {
      ...mapState(['user']),
      cropOps(){
        return {
          width: "336px",
          height: "210px"
        }
      }
    },

    created() {
      if (!!this.params.id) {
        this.getInfo()
      }
    },

    methods: {
      getInfo() {
        this.instance.post(`/app/appactivity/queryDetailById?id=${this.params.id}`).then(res => {
          if (res.code === 0) {
            this.form = {
              ...res.data
            }
            this.form.thumbUrl = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl) : []
          }
        })
      },

      onSubmit(index) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (!this.id) {
              if (index == 2) {
                this.form.status = 1
              } else {
                this.form.status = 0
              }
            }
            this.instance.post(`/app/appactivity/addOrUpdate`, {
              ...this.form,
              areaId: this.areaId,
              thumbUrl: this.form.thumbUrl.length ? JSON.stringify([{
                url: this.form.thumbUrl[0].url
              }]) : ''
            }).then(res => {
              if (res.code === 0) {
                this.$message.success(this.params.id ? '编辑成功' : ( index==1 ? "保存成功" : "发布成功"))
                setTimeout(() => {
                  this.cancel(true)
                }, 800)
              }
            })
          }
        })
      },

      cancel(isRefresh) {
        this.$emit('change', {
          type: 'list',
          isRefresh: isRefresh ? true : false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .add-detail {
    height: 100%;
    overflow: hidden;
  }
</style>
