
<template>
   <div v-loading="loading">
     <el-button type="primary" plain @click="settingStrategy" style="margin-bottom: 20px;">新增策略</el-button>
     <cl-container v-for="(item,index) in list" :key="index+'clContainer'" :info="item" class="contain" @update="init" @showSetting="settingStrategy(item)">
       <template v-slot:default>
         <div class="cl-items cl-items-main" @click="toDetail(item.mainStrategyId)">
           <div class="cl-header">主策略</div>
           <div class="cl-content" >
             <div class="cl-name">{{item.mainStrategyName}}</div>
           </div>
         </div>
         <div class="cl-items" v-show="item.auxStrategyName" @click="toDetail(item.auxStrategyId)">
           <div class="cl-header">辅助策略</div>
           <div class="cl-content">
             <div class="cl-name">{{item.auxStrategyName}}</div>
           </div>
         </div>
       </template>
     </cl-container>
     <div v-if="list.length === 0">
       <el-empty :image-size="200" ></el-empty>
     </div>
     <setting ref="setting"/>
   </div>
</template>


<script>
import Setting from './../Setting.vue'
import ClContainer from './../ClContainer.vue'
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
import {strategyRunningList} from '@/api/ems/dzjk'
export default {
  name:'DzjkClpzClyx',
  components:{ClContainer,Setting},
  mixins: [getQuerySiteId],
  data() {
    return {
      loading:false,
      list:[],
    }
  },
  provide(){
    return {$home:this}
  },
  methods:{
    settingStrategy(item=''){
      this.$refs.setting.showSettingDialog(item)
    },
    init(){
      this.loading = true
      this.list = []
      strategyRunningList(this.siteId).then(response => {
        this.list =JSON.parse(JSON.stringify(response?.data || {}))
      }).finally(() => {this.loading=false})
    },
    toDetail(id){
      id && this.$router.push({
        path:'/dzjk/clpz/xftg',
        query:{
          ...this.$route.query,
          id
        }
      })
    }
  },
}
</script>

<style scoped lang="scss">
.contain{
  margin-bottom: 20px;
}
  .clyx-main{
    padding:0 12px 0 12px;
    .cl-items{
      cursor: pointer;
      width: 228px;
      height: 156px;
      display: inline-block;
      margin:24px 12px 0 12px;
      font-size:14px;
      color:#333333;
      border: 1px solid #eeeeee;
      .cl-header{
        background:  #FFE5AC;
        text-align: center;
        font-size:16px;
        line-height: 40px;
        height: 40px;
        width: 100%;
      }
      .cl-content{
        background-color: #ffffff;
        position: relative;
        height: 114px;
        width: 100%;
        .cl-name{
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
        }
      }
      &.cl-items-main{
        .cl-header{
          background:  #FFBE29;
        }
        .cl-content{
          background-color: #FFF2CB;
        }
      }
    }
  }
</style>
