<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">
            <Select v-model="rejectReason">
              <Option v-for="(item, idx) in refuseReasonList" :key="idx" :value="item.id">
                {{ item.reason }}
              </Option>
            </Select>
          </Col>
        </Row>
      </div>
    </div>
    <div slot="footer">
      <Button type="text" size="large" @click="hide">取消</Button>
      <Button type="primary" size="large" :loading="showLoading" @click="submit()">提交</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: 'ModalReject',
  data() {
    return {
      rejectReason: 0,
      title: '商家驳回售后申请',
      showModal: false,
      showLoading: false,
      refuseReasonList: [],
    };
  },
  methods: {
    show(refuseReasonList) {
      this.showModal = true;
      this.refuseReasonList = refuseReasonList;
    },
    hide() {
      this.showLoading = false;
      this.showModal = false;
    },
    //提交
    submit() {
      this.showLoading = true;
      this.$emit('submitReject', this.rejectReason);
    },
  },
};
</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>