<template>
  <div class="order-set-page">
    <Card v-if="loading" class="loading-card">
      <Spin fix size="large" />
    </Card>
    <Card v-else>
      <div class="head">
        <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
        <label>订单设置</label>
      </div>
      <div class="item">
        <label class="label">订单提交后超过：</label>
        <Input
          placeholder="分钟"
          v-model="form.orderCloseLimit"
          :maxlength="2"
          class="order-input"
        >
          <span slot="append"> 分钟</span>
        </Input>
        <span slot="append"> 未付款，自动关闭订单</span>
      </div>
      <div class="item">
        <label class="label">平台发货后超过：</label>
        <Input
          placeholder="天数"
          v-model="form.goodsReceivedLimit"
          class="order-input"
          :maxlength="2"
        >
          <span slot="append"> 天</span>
        </Input>
        <span slot="append"> 未确认收货，系统自动收货</span>
      </div>
      <div class="item">
        <label class="label">订单完成后超过：</label>
        <Input
          placeholder="天数"
          v-model="form.dealCloseLimit"
          :maxlength="2"
          class="order-input"
        >
          <span slot="append"> 天</span>
        </Input>
        <span slot="append">自动结束交易</span>
      </div>
      <div class="item">
        <label class="label">订单完成后超过：</label>
        <Input
          placeholder="天数"
          v-model="form.highOpinionLimit"
          :maxlength="2"
          class="order-input"
        >
          <span slot="append"> 天</span>
        </Input>
        <span slot="append"> 未评价，系统自动好评</span>
      </div>
      <div class="footer-con">
        <Button
          type="primary"
          @click="handleSubmit"
          size="large"
        >提 交</Button>
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'add-question',
  data () {
    return {
      form: {
        orderCloseLimit: '',
        goodsReceivedLimit: '',
        dealCloseLimit: '',
        highOpinionLimit: '',
        updateTime: '',
        id: ''
      },
      loading: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'orderConfig',
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          if (res.data.length) {
            this.form = res.data[0]
          }
        }
      })
    },
    handleSubmit () {
      let { dealCloseLimit, goodsReceivedLimit, highOpinionLimit, orderCloseLimit } = this.form
      if (!dealCloseLimit || !goodsReceivedLimit || !highOpinionLimit || !orderCloseLimit) {
        return this.$Notice.warning({ title: '所有项均为必填项哦！' })
      }
      if (orderCloseLimit <= 0 || !/^\d+$/.test(orderCloseLimit)) {
        return this.$Notice.warning({ title: '订单设置中格式输入有误哦！' })
      }
      if (dealCloseLimit <= 0 || !/^\d+$/.test(dealCloseLimit)) {
        return this.$Notice.warning({ title: '订单设置中格式输入有误哦！' })
      }
      if (goodsReceivedLimit <= 0 || !/^\d+$/.test(goodsReceivedLimit)) {
        return this.$Notice.warning({ title: '订单设置中格式输入有误哦！' })
      }
      if (highOpinionLimit <= 0 || !/^\d+$/.test(highOpinionLimit)) {
        return this.$Notice.warning({ title: '订单设置中格式输入有误哦！' })
      }
      this.api({
        apiName: 'editOrderConfig',
        postdata: this.form,
        success: (res) => {
          this.$Notice.success({ title: '提交成功' })
          this.requestData()
        }
      })
    }
  },
  mounted () {
    this.requestData()
  }
}
</script>

<style scoped lang="less">
  .loading-card {
    height: 100%;
  }
  .head {
    color: #17233d;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    i {
      margin-right: 10px;
    }
  }
  .item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .label{
      width: 200px;
      text-align: right;
      flex-shrink: 0;
    }
    .order-input {
      width: 100px;
      margin-right: 10px;
    }
  }
  .footer-con {
    margin-top: 20px;
   padding-left: 200px;
  }
  .model-item {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
</style>
