<template>
    <div>
    <div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
      <el-form ref="queryRef" :model="queryParams" :inline="true">
        <el-form-item label="型号名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入型号名称" clearable style="width: 200px" />
        </el-form-item>
        <!-- <el-form-item label="类型编码">
          <el-input v-model="queryParams.typeName" placeholder="请输入类型编码" clearable style="width: 200px" />
        </el-form-item> -->
        <!-- <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="字典状态" clearable style="width: 200px">
            <el-option :key="1" label="正常" :value="11" />
            <el-option :key="2" label="关闭" :value="22" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="Search" @click="search">搜索</el-button>
          <el-button icon="Refresh" plain @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container" style="margin-bottom: 20px;border-radius: 10px;">
      <el-button 
        type="primary" 
        plain 
        icon="Plus" 
        @click="showpop(1)"
      >新增</el-button>
      <el-table
        :data="dictlist"
        style="width: 100%;margin-top: 10px;"
        border
        stripe
        highlight-current-row
        row-key="id"
        max-height="600px"
      >
        <el-table-column min-width="150" label="型号名称" align="center" prop="name" />
        <el-table-column min-width="150" label="仓位数量下限" align="center" prop="dccNumMin" />
        <el-table-column min-width="150" label="仓位数量上限" align="center" prop="dccNumMax" />
        <el-table-column min-width="100" label="服务能力" align="center" prop="serviceCapability" />
        <el-table-column min-width="130" label="充电机功率(kW)" align="center" prop="chargerPower" />
        <el-table-column min-width="150" label="自动化级别" align="center" prop="autoLevel">
          <template #default="scope">
            <div v-if="scope.row.autoLevel == 1">无人值守</div>
            <div v-if="scope.row.autoLevel == 2">有人值守</div>
        </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <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-column label="创建时间" align="center" width="160" prop="createTime">
        <template #default="scope">
            <span>{{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
        </el-table-column> -->
      </el-table>
      <div v-if="total > 10" style="display: flex;justify-content: right;padding-top: 20px;">
        <el-pagination
          v-model:current-page="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          size="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="querytype"
        />
      </div>
      
    </div>
      <!--:row-style="{background: '#cde0f3'}"-->
      
      <!--添加字典类型-->
      <el-dialog 
        v-model="popshow" 
        :title="poptit" 
        width="500px" 
        append-to-body
        align-center
      >
        <el-form ref="typeform" :model="addObj" :rules="rules" label-width="150px">
          <el-form-item label="型号名称" prop="name">
            <el-input v-model="addObj.name" placeholder="请输入型号名称" />
          </el-form-item>
          <el-form-item label="仓位数量下限" prop="dccNumMin">
            <el-input v-model="addObj.dccNumMin" placeholder="请输入下限" />
          </el-form-item>
          <el-form-item label="仓位数量上限" prop="dccNumMax">
            <el-input v-model="addObj.dccNumMax" placeholder="请输入上限" />
          </el-form-item>
          <el-form-item label="服务能力" prop="serviceCapability">
            <el-input v-model="addObj.serviceCapability" placeholder="请输入服务能力" />
          </el-form-item>
          <el-form-item label="充电机功率(kW)" prop="chargerPower">
            <el-input v-model="addObj.chargerPower" placeholder="请输入充电机功率" />
          </el-form-item>
          <el-form-item label="自动化级别" prop="autoLevel">
            <el-radio-group v-model="addObj.autoLevel">
              <el-radio :value="1">无人值守</el-radio>
              <el-radio :value="2">有人值守</el-radio>
            </el-radio-group>
          </el-form-item>
          
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="save">确 定</el-button>
            <el-button @click="canceltype">取 消</el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </template>
  
  <script lang="ts" setup>
    import { 
      getdicttype,
      adddicttype,
      update,
      deltype
    } from '@/api/systemSet/hdzxh'
    import { ref,reactive } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'

    
    //查询  
    let total = ref(0)          
    let queryParams = reactive({
      pageSize:20,	    //每页条数
      pageNo:1,
      name:''	        //页数
      // typeName:'',	    //类型名称
      // typeCode:''	      //类型编码
     })

     let dictlist = ref([])
     function querytype() {
      dictlist.value.splice(0)
      getdicttype(queryParams).then(rps => {
        dictlist.value = (rps.data as any).records
        total.value = (rps.data as any).total
      })
     }

     let queryRef = ref()
     function resetQuery() {
      queryRef.value?.resetFields()
     }

     function search() {
      queryParams.pageNo = 1
      querytype()
     } 
    
     function handleSizeChange(val:number) {
        queryParams.pageSize = val
        querytype()
     }

     //新增、修改
     let cztype = ref(1)
     let typeform = ref()
     let popshow = ref(false) 
     let poptit = ref('添加型号')
     let addObj = reactive({
        pkId:'',
        name:'',	                //型号名称
        dccNumMin:'',	            //仓位数量下限
        dccNumMax:'',	            //仓位数量上限
        serviceCapability:'',	    //服务能力
        chargerPower:'',	        //充电机功率
        autoLevel:''	            //自动化级别：1-无人值守，2-有人值守
      })
      const rules = {
        name: [
            { required: true, message: "请输入型号", trigger: "blur" },
        ],
        dccNumMin:[
            { required: true, message: "请输入仓位数量下限", trigger: "blur" },
        ],
        dccNumMax: [
            { required: true, message: "请输入仓位数量上限", trigger: "blur" },
        ],
        serviceCapability:[
            { required: true, message: "请输入服务能力", trigger: "blur" },
        ],
        chargerPower: [
            { required: true, message: "请输入充电机功率", trigger: "blur" },
        ],
        autoLevel:[
            { required: true, message: "请选择自动化级别", trigger: "blur" },
        ]
      }
      function caoztype() {
        if(cztype.value == 1){
          return adddicttype(addObj) 
        }
        return update(addObj)
      }

      function showpop(type:number,row?:any) {
        cztype.value = type
        popshow.value = true
        poptit.value = type == 1?'添加型号':'修改型号'
        typeform.value?.resetFields()
        if(row){
          addObj.pkId = row.pkId
          addObj.name = row.name	                              
          addObj.dccNumMin = row.dccNumMin	                    
          addObj.dccNumMax = row.dccNumMax	                    
          addObj.serviceCapability = row.serviceCapability	    
          addObj.chargerPower = row.chargerPower	              
          addObj.autoLevel = row.autoLevel	                    
        }else{    
          addObj.pkId = ''
          addObj.name = ''	                     
          addObj.dccNumMin = ''	                    
          addObj.dccNumMax = ''	                    
          addObj.serviceCapability = ''	    
          addObj.chargerPower = ''	              
          addObj.autoLevel = ''   
        }
      }

      //保存
      function save() {
        typeform.value?.validate((valid:Boolean) => {
          if (valid) {
            caoztype().then(() => {
              ElMessage({
                type: 'success',
                message: cztype.value == 1?'添加成功':'修改成功'
              })
              setTimeout(() => {
                popshow.value = false
                search()
              },1000)
            })
          }
        })
      }

      //删除
      function handleDelete(row:any) {
        ElMessageBox.confirm(
        `确定删除：${row.name}`,
        '温馨提示',
        {
          // confirmButtonText: '',
          // cancelButtonText: 'Cancel',
          type: 'warning',
        }
      ).then(() => {
        deltype(row.pkId).then(rps => {
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
            querytype()
          })
        })
      }


      function canceltype() {
        popshow.value = false
      }

     querytype()
  </script>
  