<template>
    <div>
      <div style="padding:10px 0 20px;">
        <el-button 
          type="primary" 
          plain 
          icon="Plus" 
          @click="showpop(1)">新增</el-button>
        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          highlight-current-row
          max-height="650px"
        >
            <el-table-column label="开始时间" min-width="150" align="center" prop="beginTime" :show-overflow-tooltip="true" />
            <el-table-column label="结束时间" min-width="150" align="center" prop="endTime" :show-overflow-tooltip="true" />
            <el-table-column label="充电功率" min-width="150" align="center" prop="chargingPower" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="150" fixed="right">
              <template #default="scope">
                <el-button link type="primary" icon="Edit" @click="showpop(2,scope.row)">修改</el-button>
                <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          
      </div>
  
    
      <!-- 添加或修改用户配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="500px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <el-form 
         ref="yysRef" 
         :model="addata" 
         :rules="rules"
         label-width="120px">
          <el-row :gutter="30">
            <el-col :span="24">
              <el-form-item label="开始和结束时间" prop="beginTime">
                <el-time-picker
                  v-model="tiem"
                  :editable="false"
                  is-range
                  range-separator="至"
                  value-format="HH:mm:ss"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @change="tiemchange"
                />
              </el-form-item>
            </el-col>
 
            <el-col :span="24">
              <el-form-item label="充电功率" prop="chargingPower">
                <el-input 
                  v-model="addata.chargingPower" 
                  placeholder="请输入充电功率" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handleAdd">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup lang="ts">
        import { 
          addxq,
          updatexq, 
          delxq,
          getxql
        } from '@/api/swapstation/cdcl'
      import { ref,reactive} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'

      const props = defineProps<{
        stationCode:String
        stationName:String
        strategyId:String
        list:any[]
      }>()

      const emit = defineEmits<{
        updata:[]
      }>()
      
      //查询
      let yysList = ref<any>([])
      if(props.list.length > 0){
        yysList.value = props.list
      }

      function getyys() {
        yysList.value.splice(0)
        getxql(props.strategyId).then(rps => {
            if(rps.data){
              yysList.value = rps.data
            }
        })
      }
      
      //新增、修改
      let type = ref(1)
      let openpop = ref(false)
      let ystit = ref('添加充电策略详情')
      let yysRef = ref()
      let addata = reactive({
        pkId:'',
        stationCode:props.stationCode,	      //换电站编码
        stationName:props.stationName,	      //换电站名称
        strategyId:props.strategyId,	        //策略ID
        beginTime:'',	                        //开始时间,示例值(20:01:32)
        endTime:'',	                          //结束时间,示例值(23:05:41)
        chargingPower:''	                    //充电功率
      })

      const rules = ref({
        beginTime:[
          { required: true, message: "请选择开始和结束时间", trigger: "blur" },
        ]
      })

      //时间选框确定事件
      let tiem = ref<any[]>([])
      function tiemchange(v:any) {
        if(v){
          addata.beginTime = v[0]	      //开始时间
          addata.endTime = v[1]	        //结束时间
        }else{
          addata.beginTime = ''
          addata.endTime = ''
        }
      }

      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true
        ystit.value = num == 1?'添加充电策略详情':'修改充电策略详情'
        yysRef.value?.resetFields()
        if(row){
          tiem.value.push(row.beginTime)
          tiem.value.push(row.endTime)
          addata.pkId = row.pkId	                    
  
          addata.beginTime = row.beginTime	                              //开始时间,示例值(20:01:32)
          addata.endTime = row.endTime	                                  //结束时间,示例值(23:05:41)
          addata.chargingPower = row.chargingPower?row.chargingPower:''	  //充电功率

        }else{
          tiem.value.splice(0)
          addata.pkId = ''
          addata.beginTime = ''
          addata.endTime = ''
          addata.chargingPower = ''     
        }
      }

      function savehand() {
        if(type.value == 1){
            return addxq(addata)
        }
        return updatexq(addata)
        
      }
      //保存
      function handleAdd() {
        yysRef.value?.validate((valid:Boolean) => {
            if (valid) {  
                savehand().then(() => {
                ElMessage({
                    type: 'success',
                    message: type.value == 1?'添加成功':'修改成功'
                })
                setTimeout(()=> {
                    openpop.value = false
                    getyys()
                    emit('updata')
                },600)
              })
            }
        })
      }

    //取消
    function cancel() {
      openpop.value = false
    }

      //删除
    function handleDelete(row:any) {
      ElMessageBox.confirm(
        `确定删除?`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
        delxq(row.pkId).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getyys()
            emit('updata')
          })
      })
    }

    //getyys()
  </script>
  <style scoped>
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  </style>