<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="typeName">
        <el-input v-model="queryParams.typeName" 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 label="型号名称" min-width="100" align="center" prop="typeName" />
      <el-table-column label="类型编码" min-width="100" align="center" prop="typeCode" />
      <el-table-column label="电芯厂商" min-width="180" align="center" prop="batteryCellManuafactory" />
      <el-table-column label="电池材料" align="center" prop="material">
        <template #default="scope">
          <div v-if="scope.row.material == 1">三元铁锂</div>
          <div v-else>磷酸铁锂</div>
        </template>
      </el-table-column>
      <el-table-column label="连接方式" align="center" prop="connectionMode" />
      <el-table-column label="标称容量(kWh)" align="center" prop="capacity" />
      <el-table-column label="标称电压(V)" align="center" prop="voltage" />
      <el-table-column label="重量(g)" align="center" prop="weight" />
      <el-table-column label="尺寸(mm)" align="center" prop="size" />
      <el-table-column label="操作" align="center" width="280" 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="120px">
        <el-form-item label="型号名称" prop="typeName">
          <el-input v-model="addObj.typeName" placeholder="请输入型号名称" />
        </el-form-item>
        <el-form-item label="类型编码" prop="typeCode">
          <el-input v-model="addObj.typeCode" placeholder="请输入型号编码" />
        </el-form-item>
        <el-form-item label="电芯厂商" prop="batteryCellManuafactory">
          <el-input v-model="addObj.batteryCellManuafactory" placeholder="请输入电芯厂商" />
        </el-form-item>
        <el-form-item label="电池包厂商" prop="batteryManuafactory">
          <el-input v-model="addObj.batteryManuafactory" placeholder="请输入电池包厂商" />
        </el-form-item>
        <el-form-item label="电池材料" prop="material">
          <el-radio-group v-model="addObj.material">
            <el-radio :value="1">三元铁锂</el-radio>
            <el-radio :value="2">磷酸铁锂</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="连接方式" prop="connectionMode">
          <el-input v-model="addObj.connectionMode" placeholder="请输入连接方式" />
        </el-form-item>
        <el-form-item label="标准容量(kwh)" prop="capacity">
          <el-input v-model="addObj.capacity" placeholder="请输入标准容量" />
        </el-form-item>
        <el-form-item label="标称电压(v)" prop="voltage">
          <el-input v-model="addObj.voltage" placeholder="请输入标称电压" />
        </el-form-item>
        <el-form-item label="重量(g)" prop="weight">
          <el-input v-model="addObj.weight" placeholder="请输入重量" />
        </el-form-item>
        <el-form-item label="尺寸(mm)" prop="announceNum">
          <el-input v-model="addObj.size" placeholder="请输入尺寸" />
        </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/modelno'
  import { ref,reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'

  
  //查询  
  let total = ref(0)          
  let queryParams = reactive({
    pageSize:20,	        //每页条数
    pageNo:1,
    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:'',
      typeName:'',	                //型号名称
      typeCode:'',	                //型号编码
      batteryCellManuafactory:'',	  //电芯厂商
      batteryManuafactory:'',	      //电池包厂商
      material:'',	                //电池材料：1-三元铁锂，2-磷酸铁锂
      connectionMode:'',	          //连接方式
      capacity:'',	                //标称容量，单位千瓦时kWh
      voltage:'',	                  //标称电压，单位伏特V
      weight:'', 	                  //重量，单位克
      size:''	                      //尺寸，长宽高
    })
    const rules = {
      typeName: [
          { required: true, message: "请输入类型名称", trigger: "blur" },
      ],
      typeCode:[
          { required: true, message: "请输入类型编码", trigger: "blur" },
      ],
      batteryCellManuafactory: [
          { required: true, message: "请输入电芯厂商", trigger: "blur" },
      ],
      batteryManuafactory:[
          { required: true, message: "请输入电池包厂商", trigger: "blur" },
      ],
      material:[
          { required: true, message: "请选择电池材料", trigger: "blur" },
      ],
      connectionMode: [
          { 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.typeName = row.typeName	                                
        addObj.typeCode = row.typeCode	                                
        addObj.batteryCellManuafactory = row.batteryCellManuafactory	  
        addObj.batteryManuafactory = row.batteryManuafactory	      
        addObj.material = row.material	                
        addObj.connectionMode = row.connectionMode	    
        addObj.capacity = row.capacity	                
        addObj.voltage = row.voltage	                  
        addObj.weight = row.weight 	                  
        addObj.size = row.size   
      }else{
        addObj.pkId = ''
        addObj.typeName = ''	                                
        addObj.typeCode = ''	                                
        addObj.batteryCellManuafactory = ''	  
        addObj.batteryManuafactory = ''	      
        addObj.material = ''	                
        addObj.connectionMode = ''	    
        addObj.capacity = ''	                
        addObj.voltage = ''	                  
        addObj.weight = '' 	                  
        addObj.size = ''        
      }
    }

    //保存
    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.typeName}`,
      '温馨提示',
      {
        // confirmButtonText: '',
        // cancelButtonText: 'Cancel',
        type: 'warning',
      }
    ).then(() => {
      deltype(row.pkId).then(rps => {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          querytype()
        })
      })
    }


    function canceltype() {
      popshow.value = false
    }

   querytype()
</script>
