<template>
  <div class="m-review">
    <div class="m-review-main">
      <div class="m-review-content" style="width:50%;">
        <slot></slot>
      </div>
      <div class="m-review-control">
        <div class="remark-display" @click="handleShow">
          <i v-show="showTip" class="el-icon-d-arrow-left"></i>
          <i v-show="!showTip" class="el-icon-d-arrow-right"></i>
        </div>
        <div v-show="showTip" class="m-review-control-tab">
          <el-tabs v-model="activeName">
            <el-tab-pane label="复核意见" name="first">
              <div class="m-review-control-detail">
                <el-input size="small" type="textarea" v-model="reviewTip">

                </el-input>
              </div>
            </el-tab-pane>
            <el-tab-pane label="历史复核意见" name="last">
              <div class="m-review-control-detail">

              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="m-review-action">
      <el-button small type="primary" @click="handlePass">复核</el-button>
      <el-button small type="primary" @click="handleRefuse">打回</el-button>
      <el-button small @click="handleExit">退出</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ReviewWrapper',
  props: {

  },
  data() {
    return {
      showTip: true,
      activeName: 'first',
      reviewTip: '',
    }
  },
  methods: {
    handleShow() {
      this.showTip = !this.showTip;
    },
    handlePass() {
      this.$confirm('您确定复核该笔交易?',  '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async () => {
        let params = {
          reviewTip: ''
        }
        this.$emit('handlePass', params)
      })
    },
    handleRefuse() {
      this.$confirm('您确定退回该笔交易?',  '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async () => {
        let params = {
          reviewTip: ''
        }
        this.$emit('handleRefuse', params)
      })
    },
    handleExit() {
      this.$confirm('确认退出?',  '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(async () => {
        this.$emit('handleExit');
      })
    }
  },

}
</script>
<style scoped>
.m-review-control-tab {
  height: 100%;
  flex: 1 1 0%; 
  width: 200px; 
  margin-right: 10px;
}
.el-button+.el-button {
  margin-left: 10px;
}
</style>