<!--各种不同的modal-->
<template>
  <div>

    <div v-if="modal_type === 1">
      <Modal v-model="modal_first" width="370" :closable="false"  padding="0"
             @on-cancel="cancel">
        <div class="ivu-modal-header  create-header">
          <p class="create-header-title" slot="header" >
            <span>{{modal_name}}</span></p>
        </div>
        <div class="modal-content" style="text-align:center">
          <textarea class="Content_textArea" v-model="reason"  placeholder="请输入..." rows="3" cols="20"></textarea>
        </div>
        <div slot="footer" class="modal-footer">
          <button class="modal-refuse" @click="cancel1">取消</button>
          <span class="modal-separative">丨</span>
          <button class="modal-agree" @click="agree1">确定</button>
        </div>
      </Modal>
    </div>

    <div v-if="modal_type === 2">
      <Modal v-model="modal_second" width="300" :closable="false"  padding="0"
             @on-cancel="cancel"
             v-if="modal_type === 2">

        <div class="modal-content" style="text-align:center">
          <div style="margin: 20px 0px 15px;">
            <span class="st-icons st-icons-jurapp" ></span>
          </div>
          <div>
            <span v-if="modal_name === '退回'">确定退回吗？</span>
            <span v-else>确定撤回吗？</span>
          </div>
        </div>
        <div slot="footer" class="modal-footer">
          <button class="modal-refuse" style="width:40%" @click="cancel1">取消</button>
          <span class="modal-separative" style="margin-right:0px">丨</span>
          <button class="modal-agree" @click="agree1">确定</button>
        </div>
      </Modal>
    </div>

  </div>

</template>
<script>
export default {
  /**
   * modal_type: 模态框的类型（1：表示审批Modal框，2：表示撤回（退回模态框））
   * modal_flag_first：1：审批模态狂的model值
   * modal_flag_second：2 撤回模态框的model值
   * modal_name：模态框的标题
   */
  props: ['modal_type', 'modal_flag_first', 'modal_flag_second', 'modal_name'],
  data () {
    return {
      reason: '',
      aprrove_flag: true,
      modal_first: false,
      modal_second: false
    }
  },

  watch: {
    // 防止prop的值更改
    modal_flag_first: function (obj) {
      this.modal_first = obj;
    },

    modal_flag_second: function (obj) {
      this.modal_second = obj;
    },

    reason () {
      if (this.reason.length > 200) {
        this.$Message.error('内容不能超过200字符');
        this.aprrove_flag = false;
      } else {
        this.aprrove_flag = true;
      }
    }
  },

  methods: {
    agree1 () {
      if (this.aprrove_flag) {
        this.$emit('agree', this.modal_type, this.reason);
        this.reason = '';
      }
    },

    cancel () {
      this.$emit('cancel', this.modal_type);
    },

    cancel1 () {
      this.reason = '';
      this.$emit('cancel', this.modal_type);
    }
  }
}
</script>

<style scoped>
  .create-header{
    background-color:#f5f5f5;
    margin:-15px -15px 0 -15px;
  }
  .create-header-title{
    color:#666;font-size:16px;text-align:center;
    margin-top:1px;
  }

  .Content_textArea{
    overflow:auto;
    background-attachment:fixed;
    background-repeat:no-repeat;
    border-style:   solid;
    border-color:  #FFFFFF;
    margin-top: 10px;
    resize:none;
    width: 340px;
    height:200px;
  }

  .Content_textArea:focus {
    outline: none;
  }

  .modal-footer{
    background:#f5f5f5;
    margin:-12px -17px -11px -17px;
  }

  .modal-refuse{
    float:left;
    border:none;
    height:50px;
    background:none;
    font-size:14px;
    color:#666;
    width:45%;
    cursor: pointer;
  }

  .modal-refuse:focus{
    outline: none;
  }
  .modal-separative{
    text-align:center;
    line-height:50px;
    height:50px;
    font-size:25px;
    font-weight: 100;
    margin-right:6px;
    color:#cccccc;
  }
  .modal-agree{
    float:right;
    border:none;
    height:50px;
    background:none;
    font-size:14px;
    color:#666;
    width:45%;
    cursor: pointer;
  }
  .modal-agree:focus{
    outline: none;
  }
</style>
