<template>
  <div class="add-integral-page">
  <Card>
    <div class="head">
      <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
      <label>发布积分商品 - 填写商品信息</label>
    </div>
  <info-con title="基本信息：" class="base-info-con">
    <div class="item">
      <label class="label">商品名称：</label>
      <Input
        placeholder="请填写商品名称"
        v-model="form.name"
        :maxlength="30"
        style="width:400px;"
      />
    </div>
    <div class="item">
      <label class="label">商品描述：</label>
      <Input
        type="textarea"
        :rows="5"
        placeholder="请填写商品描述"
        v-model="form.description"
        :maxlength="250"
        style="width:400px;"
      />
    </div>
    <div class="item">
      <label class="label">商品缩略图：</label>
      <div class="upload-con">
        <file-upload
          :width="150"
          :iconSize="26"
          :maxNum="1"
          v-model="form.thumb"
          showWatch
        />
        <div class="tip">提示：仅可上传一张，建议尺寸100 * 100，大小不得超过6MB。</div>
        <!-- {{data.thumbList}} -->
      </div>
    </div>
    <div class="item">
      <label class="label">库存：</label>
      <Input
        type="number"
        placeholder="请输入库存量"
        v-model="form.stock"
        style="width:400px;"
      />
    </div>
    <div class="item">
      <label class="label">所需积分：</label>
      <Input
        type="number"
        placeholder="请输入该商品兑换所需积分"
        v-model="form.pnum"
        style="width:400px;"
      />
    </div>
  </info-con>
    <div class="submit-con">
      <Button
        type="primary"
        @click="handleSubmit"
        :loading="submitLoading"
      >提交商品信息</Button
      >
    </div>
  </Card>
  </div>
</template>

<script>
import InfoCon from './add-good/info-con'
import FileUpload from '_c/file-upload'
import { mapMutations } from 'vuex'
export default {
  name: 'add-integral-good',
  components: {
    InfoCon,
    FileUpload
  },
  data () {
    return {
      routeName: '',
      form: {
        name: '',
        description: '',
        thumb: [],
        stock: '',
        pnum: ''
      },
      submitLoading: false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    checkForm () {
      let { name, description, thumb, stock, pnum } = this.form
      let form = {
        name,
        description,
        thumb,
        stock,
        pnum
      }
      form.thumb = thumb.join()
      let errMsg = ''
      if (!pnum || !/^\d+$/.test(pnum)) {
        errMsg = '请输入整数积分！'
      }
      if (!stock || !/^\d+$/.test(stock)) {
        errMsg = '请输入整数库存！'
      }
      if (thumb.length == 0) {
        errMsg = '请选择商品缩略图！'
      }
      if (!description) {
        errMsg = '请填写商品描述！'
      }
      if (!name) {
        errMsg = '请填写商品名称！'
      }
      return { errMsg, form }
    },
    handleSubmit () {
      let { errMsg, form } = this.checkForm()
      console.log('form', form)
      if (errMsg) {
        return this.$Notice.warning({ title: errMsg })
      }
      this.submitLoading = true
      this.api({
        apiName: 'addIntegralGood',
        postdata: form,
        complete: () => {
          this.submitLoading = false
        },
        success: (res) => {
          let route = this.$route
          let toRouteName = 'integral_list'
          this.closeTag({ route, toRouteName })
          this.$Notice.success({ title: '添加成功！' })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .head {
    color: #17233d;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    i {
      margin-right: 10px;
    }
  }
  .base-info-con {

    .item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    .item .label {
      display: block;
      width: 150px;
      text-align: right;
    }

  }
  .submit-con {
    text-align: center;
  }
</style>
