
<template>
  <el-card shadow="always" class="common-card-container">
    <div slot="header">
      <span class="card-title">新增模板</span>
      <div style="float: right; padding: 3px 0">
        <el-button type="primary" size="mini">新增</el-button>
        <el-button type="warning" size="mini">编辑</el-button>
        <el-button type="primary" class="alarm-btn" size="mini">删除</el-button>
      </div>
    </div>
    <div>
      <el-button-group class="ems-btns-group">
        <el-button v-for="(item,index) in tempList" :key="index+'tempList'" :class="{'activeBtn' : activeBtn === item.id}" type="small" @click="changeTemp(item.id)">{{item.name}}</el-button>
      </el-button-group>
      <el-table
        :data="tableData"
        :span-method="tableSpanFilter"
        border
        style="width: 100%;">
        <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
        <el-table-column
          prop="name"
          label="模板名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="SOC限制">
          <template slot-scope="scope">
            <el-switch
              :value="scope.row.status === 1"
              disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="min"
          label="SOC下限">
          <template slot-scope="scope">
            {{scope.row.min}}%
          </template>
        </el-table-column>
        <el-table-column
          prop="max"
          label="SOC上限">
          <template slot-scope="scope">
            {{scope.row.max}}%
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间">
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间">
        </el-table-column>
        <el-table-column
          prop="cfgl"
          label="充放功率（kW）">
        </el-table-column>
        <el-table-column
          prop="powerStatus"
          label="充电状态">
        </el-table-column>

      </el-table>
    </div>

  </el-card>
</template>

<style scoped lang="scss">

</style>
<script>
export default {
  data() {
    return {
      activeBtn:1,
      tempList:[
        {name:'模板1',id:1},
        {name:'模板2',id:2},
        {name:'模板3',id:3},
      ],
      tableData:[
        {name:'模板一',status:1,min:10,max:90,startTime:'2023/05/07',endTime:'2030/05/07',cfgl:100,powerStatus:'充电'},
        {name:'模板一',status:1,min:10,max:90,startTime:'2024/06/07',endTime:'2030/05/07',cfgl:110,powerStatus:'充电'},
        {name:'模板一',status:1,min:10,max:90,startTime:'2023/07/07',endTime:'2030/05/07',cfgl:120,powerStatus:'充电'},
        {name:'模板一',status:1,min:10,max:90,startTime:'2023/08/07',endTime:'2030/05/07',cfgl:130,powerStatus:'充电'},
        {name:'模板一',status:1,min:10,max:90,startTime:'2023/09/07',endTime:'2030/05/07',cfgl:140,powerStatus:'充电'},
      ],
      mixinPrototype:['name','status','min','max']
    }
  },
  methods:{
    changeTemp(id){
      //切换模板 更新数据
      if(id !== this.activeBtn){
        this.activeBtn=id;
      }
    },
    tableSpanFilter({ row, column, rowIndex, columnIndex }){
      if(!this.mixinPrototype.includes(column.property)) return { rowspan: 1,colspan: 1 }
      if(rowIndex===0){
        return {
          rowspan: this.tableData.length,
          colspan: 1
        };
      }else{
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  },
  mounted(){

  }
}
</script>
