<template>
  <el-container class="clyx-container">
    <el-header class="clyx-header">
      <div class="clyx-title">策略状态：<span class="clyx-status save">已运行</span></div>
      <div class="clyx-btns">
        <el-button v-if="!hideSettingBtn" size="small" @click="$refs.setting.dialogFormVisible = true">配置</el-button>
        <el-button type="warning" class="alarm-btn" size="small" @click='close'>停止策略</el-button>
      </div>
    </el-header>
    <el-main class="clyx-main">
      <slot name="default"></slot>
      <setting ref="setting"/>
    </el-main>
  </el-container>
</template>

<script>
import Setting from './Setting.vue'
export default {
  name:'DzjkClpzClContainer',
  components:{Setting},
  props:{
    hideSettingBtn:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
    }
  },
  methods:{
    close(){
      this.$confirm('确认要停止策略吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose:false,
        closeOnClickModal:false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            setTimeout(() => {
              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
              done();
              // setTimeout(() => {
              instance.confirmButtonLoading = false;
              // }, 300);
            }, 3000);
          } else {
            done();
          }
        }
      }).then(() => {
        //只有在故障复位成功的情况下会走到这里
        this.$message({
          type: 'success',
          message: '停止策略成功!'
        });
      }).catch(() => {
        //取消复位
      });
    }
  },
  mounted(){

  }
}
</script>

<style scoped lang="scss">
.clyx-container{
  border:1px solid #eee;
  .clyx-header{
    background: #F1F5FB;
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    height: 60px;
    border-radius: 6px 6px 0 0;
    .clyx-title{
      color: #333333;
      line-height: 20px;
      padding: 0 50px 0 25px;
      .clyx-status{
        font-weight: 500;
        font-size: 16px;
        &.danger{
          color:#FC6B69;
        }
        &.save{
          color:#09ADA3;
        }
        &.keep{
          color:#3C81FF;
        }
      }
    }
    .clyx-btns{
      position: absolute;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
