<template>
  <Modal v-model="showModal" :title="title" width="600">
    <div class="deliver-modal">
      <div class="deliver-info">
        <Row class-name="info-row">
          <Col span="5" class-name="info-col">模版名称*：</Col>
          <Col span="19"><Input v-model="templateName" placeholder=""/></Col>
        </Row>
        <Row class-name="info-row">
          <Col span="5" class-name="info-col">设置默认运费*：</Col>
          <Col span="19"><Input v-model="defaultFee" placeholder=""/></Col>
        </Row>
        <Row class-name="info-row">
          <Col span="5">设置包邮条件：</Col><Col span="2">满</Col>
          <Col span="5"><Input v-model="freeMount" placeholder=""/></Col>
          <Col span="6">&nbsp;&nbsp;元包邮</Col>
        </Row>
      </div>
    </div>
    <div slot="footer">
      <Button type="text" size="large" @click="hide">取消</Button>
      <Button type="primary" size="large" :loading="showLoading" @click="submit(templateId)">提交</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  name: 'TemplateEdit',
  props: [],
  data() {
    return {
      title: '新增运费模版',
      showModal: false,
      showLoading: false,
      templateName: '',
      defaultFee: '',
      freeMount: '',
      templateId: 0,
    };
  },
  watch: {
    defaultFee: {
      handler(newValue) {
        if (newValue > 50) {
          this.defaultFee = '';
          this.$Message.error('默认运费不能大于50元!');
        }
      },
      deep: true,
    },
  },
  methods: {
    show() {
      this.title = '新增运费模版';
      this.templateName = '';
      this.defaultFee = '';
      this.freeMount = '';
      this.templateId = 0;
      this.showModal = true;
    },
    hide() {
      this.showLoading = false;
      this.showModal = false;
    },
    //提交
    submit() {
      this.showLoading = true;
      this.$emit('submit', {
        templateName: this.templateName,
        defaultFee: this.defaultFee,
        freeMount: this.freeMount,
        id: this.templateId,
      });
    },
    //编辑
    edit(params) {
      this.title = '编辑运费模板';
      const { templateName, defaultFee, freeMount, id } = params;
      this.templateName = templateName;
      this.defaultFee = defaultFee;
      this.freeMount = freeMount;
      this.templateId = id;
      this.showModal = true;
    },
  },
};
</script>

<style lang="scss">
.deliver-modal {
  padding: 30px;
  .info-row {
    line-height: 40px;
  }
  .info-tip {
    margin-top: 20px;
    color: #f00;
    text-align: center;
  }
  .ivu-modal {
    width: 50%;
  }
}
</style>