<template>
  <div class="AddDiscounts">
    <div class="form">
      <input placeholder="输入优惠内容标题" v-model="title" placeholder-style="color: #999; font-size: 15px;" />
      <textarea placeholder="输入优惠内容详情" :maxlength="1000" v-model="content" placeholder-class="input-placeholder" placeholder-style="color: #999; font-size: 15px;" />
    </div>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="save">发布</div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    appName: '发布优惠',
    name: 'AddDiscounts',

    data () {
      return {
        title: '',
        content: '',
        id: ''
      }
    },

    computed: {
      ...mapState(['user'])
    },

    onLoad (query) {
      if (query.id) {
        this.id = query.id
        this.$instance.post(`/api/appmerchantinfo/queryDiscountDetailById?id=${query.id}`).then(res => {
          if (res.code === 0) {
            this.title = res.data.title
            this.content = res.data.content
          }
        })
      }
    },

    methods: {
      save () {
        if (!this.title) {
          return this.$toast('输入优惠内容标题')
        }

        if (!this.content) {
          return this.$toast('输入优惠内容详情')
        }

        this.$loading()
        this.$instance.post('/api/appmerchantinfo/addOrUpdateDiscount', {
          title: this.title,
          content: this.content,
          openId: this.user.openId,
          mid: this.user.merchantInfo.id,
          id: this.id || ''
        }).then(res => {
          if (res.code === 0) {
            this.$toast(this.id ? '修改成功' : '发布成功')
            uni.$emit('updateList')

            setTimeout(() => {
              wx.navigateBack()
            }, 600)
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .AddDiscounts {
    margin: 0 32px;
    padding-top: 32px;
    padding-bottom: 140px;

    .form {
      padding: 0 32px;
      background: #FFFFFF;
      border-radius: 32px;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);

      input {
        display: block;
        height: 128px;
        font-size: 30px;
        border-bottom: 1px solid #eee;
      }

      textarea {
        display: block;
        width: 100%;
        height: 480px;
        padding: 48px 0;
        font-size: 30px;
      }
    }
  }
</style>
