<template>
    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑${editTempName}` ">
      <el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="模板名称" prop="tempName">
          <el-input v-model="formData.tempName" placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="soc限制" prop="socStatus" required>
          <el-switch v-model="formData.socStatus"></el-switch>
        </el-form-item>
        <el-form-item label="soc下限" prop="min">
          <el-input v-model="formData.min" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="soc上限" prop="max">
          <el-input v-model="formData.max" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="addTime">新增</el-button>
<!--      新增时间段表单-->
      <el-collapse-transition>
          <el-card v-show="showAddTime" shadow="always" class="common-card-container" style="margin-top:25px;">
            <el-form class="add-time-form transition-box" ref="addTimeForm" :model="formInline" :rules="formInlineRule" label-width="100px" style="margin-top:25px">
            <el-form-item label="开始时间" prop="startTime">
              <el-time-select
                placeholder="开始时间"
                v-model="formInline.startTime"
                :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00',
              }">
              </el-time-select>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
              <el-time-select
                placeholder="结束时间"
                v-model="formInline.endTime"
                :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '24:00',
                minTime: formInline.startTime
              }">
              </el-time-select>
            </el-form-item>
            <el-form-item label="冲放功率" prop="cfgl">
              <el-input v-model="formInline.cfgl" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="充电状态" prop="powerStatus">
              <el-select v-model="formInline.powerStatus" placeholder="请选择">
                <el-option v-for="(item,index) in powerStatusOptions" :key="index+'powerStatusOptions'" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="saveTime">保存</el-button>
              <el-button size="mini" @click="cancelAddTime">取消</el-button>
            </el-form-item>
          </el-form>
          </el-card>
      </el-collapse-transition>
      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top:25px">
        <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
        <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="充电状态">
          <template slot-scope="scope">
            {{scope.row.powerStatus === 1 ? '充电' :'放电'}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="warning"
              size="mini">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveDialog">确定</el-button>
      </div>
    </el-dialog>
</template>
<script>
export default {
  props:{
    mode:{
      type:String,
      default:"add"
    },
    editTempId:{
      type:Number,
      default:''
    },
    editTempName:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      dialogTableVisible:false,
      formData: {
        tempName: '',
        socStatus: false,
        min: '',
        max: '',
      },
      rules: {
        tempName: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        min: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        max: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
      },
      showAddTime: false,
      formInline:{
        startTime:'',endTime:'',cfgl:'',powerStatus:1
      },
      formInlineRule:{
        startTime: [{
          required: true,
          message: '请选择开始时间',
          trigger: 'change'
        }],
        endTime: [{
          required: true,
          message: '请选择结束时间',
          trigger: 'change'
        }],
        cfgl: [{
          required: true,
          message: '请输入冲放功率',
          trigger: 'blur'
        }],
      },
      tableData:[],
      powerStatusOptions:[{label:'充电',value:1},{label:'放电',value:2}],
    }
  },
  computed: {},
  watch: {
    "formInline.startTime":{
      handler(newVal,oldVal){
        if(newVal && this.formInline.endTime){
          const endTime = parseInt((this.formInline.endTime).split(':')[0] || 0)
          const startTime =parseInt(newVal.split(':')[0])
          if(endTime<=startTime){
            this.formInline.endTime = `${startTime+1 <=9 ? '0'+(startTime+1) : startTime+1}:00`
          }
        }
      },
      deep:true
    }
  },
  created() {},
  mounted() {},
  methods: {
    addTime(){
      this.showAddTime=true
    },
    cancelAddTime(){
      this.$refs.addTimeForm.resetFields()
      this.showAddTime=false
      this.formInline = {startTime:'',endTime:'',cfgl:'',powerStatus:1}
    },
    saveTime(){
      //表单校验，校验成功，添加到tableData里
      this.$refs.addTimeForm.validate(valid => {
        if (!valid) return
        this.tableData.push(JSON.parse(JSON.stringify(this.formInline)));
        this.$nextTick(() => {this.cancelAddTime()})
      })
    },
    deleteRow(index, table){
      this.tableData.splice(index,1)
    },
    saveDialog() {
      this.$refs.addTempForm.validate(valid => {
        if (!valid) return
        this.closeDialog()
      })
    },
    closeDialog(){
      // 清空所有数据
      this.$refs.addTempForm.resetFields()
      this.formData={
        tempName: '',
          socStatus: false,
          min: '',
          max: '',
      }
      this.tableData=[]
      this.cancelAddTime()
      this.dialogTableVisible=false
    }
  }
}

</script>
<style scoped>
.ems-dialog{
  .el-dialog{
    max-width: 700px;
  }
  .add-time-form{
    .el-input{
      width: 220px;
    }
  }
}
</style>
