<template>
  <div class="flex-row">
    <div class="basic-main">
      <div style="height: 95%">
        <stop-apply-list v-ref:query></stop-apply-list>
      </div>
    </div>

    <validator name="v">
      <modal v-if="showModal" :show.sync="showModal" backdrop="false" large>
        <header slot="modal-header" class="modal-header">
          <button type="button" class="close" @click="closeModal()"><span>&times;</span></button>
          <span class="modal-title"><font size="3">撤销</font></span>
        </header>
        <article slot="modal-body" class="modal-body clearfix">
          <div class="form-group" :class="[$v.f_cancel_reason.required ? 'has-error' : '']">
            <label class="control-label-justify control-label col-sm-1">撤销原因</label>
            <div class="col-sm-9">
              <textarea
                class="form-control input_view" style="width: 100%" rows="5"
                v-model="selectdata.f_cancel_reason" :value="selectdata.f_cancel_reason"
                v-validate:f_cancel_reason = "['required']"
              ></textarea>
            </div>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button class="btn btn-primary" :disabled="!$v.valid" type="button" @click="confirmModal()">
            确认
          </button>
        </footer>
    </modal>
    </validator>
  </div>
</template>

<script>
export default {
  title: '终止报建',
  data () {
    return {
      showModal: false,
      selectdata: null
    }
  },
  ready () {
  },
  methods: {
    closeModal () {
      this.showModal = false
      this.selectdata = null

      this.$refs.query.$refs.cp.$refs.cri.search()
    },
    async confirmModal () {
      let data = {
        selectdata: this.selectdata,
        user: this.$login.f
      }

      let res = await this.$resetpost(
        `rs/logic/cancelStopApply`,
        {data: data},
        {resolveMsg: null, rejectMsg: '撤销失败！！！'}
      )

      this.closeModal()
    }
  },
  events: {
    'search' () {
      this.$refs.query.$refs.cp.$refs.cri.search()
    },
    'cancelStopApply' (row) {
      this.selectdata = row

      this.showModal = true
    }
  }
}
</script>

<style scoped>
  .control-label-justify {
    display: inline-block;
    vertical-align: top;
    width: 110px;
    text-align: justify;
    font-family: PingFang-SC-Bold;
  }

  .control-label-justify::after {
    content: "";
    display: inline-block;
    width: 100%;
    overflow: hidden;
    height: 0;
  }
  .clearfix:after,.clearfix:before{
    display: table;
  }
  .clearfix:after{
    clear: both;
  }
</style>
