<template>
    <div>
      <div v-if="zjtype == 1 && search" class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
        <el-form
          ref="querform" 
          :model="queryParams" 
          :inline="true" 
        >
            <el-form-item label="换电站" prop="stationCode">
                <el-select v-model="queryParams.stationCode" placeholder="请选择换电站" style="width: 200px;">
                    <el-option v-for="n in yunList" :label="n.name" :value="n.code" />
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handBtnqu">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
      <div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">
          <template v-if="zjtype == 1">
            <div style="display: flex;justify-content: space-between;">
            <el-button 
            type="primary" 
            plain 
            icon="Plus" 
            @click="showpop(1)">新增</el-button>
            <el-tooltip class="item" effect="dark" :content="search? '隐藏搜索' : '显示搜索'" placement="top">
              <el-button size="mini" circle icon="Search" @click="search = !search" />
            </el-tooltip>
          </div>
        </template>
        <template v-else>
          <el-button 
            type="primary" 
            plain 
            icon="Plus" 
            @click="showpop(1)">新增</el-button>
        </template>
        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          :max-height="zjtype == 1?'600px':'400px'"
        >
            <el-table-column label="充电机编码" min-width="300" align="center" prop="code" :show-overflow-tooltip="true">
              <template #default="scope">
                <div  @click="showpop(2,scope.row)" style="display: inline-block;color:#16599d;border-bottom: 1px solid #417ebb;cursor:pointer">{{scope.row.code}}</div>
              </template>
            </el-table-column>
            <el-table-column v-if="zjtype == 1" label="换电站" min-width="400" align="center" prop="stationName" :show-overflow-tooltip="true" />
            <el-table-column label="充电机软件版本" min-width="200" align="center" prop="version" :show-overflow-tooltip="true" />
            <el-table-column label="充电连接类型" min-width="200" align="center" prop="switchType" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div v-if="scope.row.switchType == 1">连接器</div>
                    <div v-else-if="scope.row.switchType == 2">充电枪</div>
                </template>
            </el-table-column>
            <el-table-column label="状态" min-width="100" align="center" prop="status" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div v-if="scope.row.status == 1">正常</div>
                    <div v-else-if="scope.row.status == 2">检修</div>
                    <div v-else-if="scope.row.status == 3">坏</div>
                </template>
            </el-table-column>
            <el-table-column label="电池仓序号" min-width="200" align="center" prop="dccNo" :show-overflow-tooltip="true" />
            <el-table-column label="充电枪数量" min-width="200" align="center" prop="gunNum" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="100" 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 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="getyys"
            />
          </div>
          
      </div>
  
    
      <!-- 添加或修改配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="600px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <el-form ref="yysRef" :model="addata" :rules="rules" label-width="130px">
          <el-row>
            <el-col v-if="zjtype == 1" :span="24">
                <el-form-item label="换电站" prop="stationCode">
                    <el-select v-model="addata.stationCode" placeholder="请选择换电站">
                        <el-option v-for="n in yunList" :label="n.name" :value="n.code" @click.native="gethdzname(n.name)" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="充电机编码" prop="code">
                    <el-input v-model="addata.code" placeholder="请输入充电机编码" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="充电机软件版本" prop="version">
                    <el-input v-model="addata.version" placeholder="请输入充电机软件版本" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="状态" prop="status">
                  <el-radio-group v-model="addata.status">
                    <el-radio value="1">正常</el-radio>
                    <el-radio value="2">检修</el-radio>
                    <el-radio value="3">坏</el-radio>
                  </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="充电连接类型" prop="switchType">
                <el-select v-model="addata.switchType" placeholder="请选择充电连接类型">
                  <el-option label="连接器" value="1" />
                  <el-option label="充电枪" value="2" />
                </el-select>
              </el-form-item>
              
            </el-col>
            
            <el-col :span="24">
                <el-form-item label="电池仓序号" prop="dccNo">
                    <el-input v-model="addata.dccNo" placeholder="请输入电池仓序号" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="充电枪数量" prop="gunNum">
                    <el-input v-model="addata.gunNum" placeholder="请输入充电枪数量" clearable />
                </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 { 
            gethdzlist
        } from '@/api/swapstation/hdz'

        import { 
            getjqrlist, 
            addhdz, 
            update,
            delhdz
        } from '@/api/swapstation/electmach'
       import { 
        getdict
       } from '@/api/systemSet/dict'
      import { ref,reactive} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'

      let search = ref(true)

      const props = withDefaults(defineProps<{
        zjtype?:string|number
        stationCode?:string
        stationName?:string
        list:any[]
      }>(), {
        zjtype:1,
        stationCode:'',
        stationName:'',
        list:() => []
      })

      const emit = defineEmits<{
        update: []
      }>()

      let queryParams = reactive({
        pageSize:20,	      //每页条数
        pageNo:1,	          //页数
        stationCode:props.zjtype == 1?'':props.stationCode      //换电站编码  ??
      })
      
      //查询
      let total = ref(0)
      let yysList = ref<any>([])
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }
      
      //初始查询换电站
      let yunList = ref<any>([])

      if(props.zjtype == 1){
        gethdzlist({
          pageSize:20,	      //每页条数
          pageNo:1,	          //页数
          proxyId:'',	        //归属运营商ID
          name:'',	          //站点名称
          code:'',	          //站点编码
          status:'',	        //状态：1-正常营业，2-正常停运，3-故障停运，4-指令停运，9-其它
          type:'',	          //站点类型ID
        }).then(rps => {
            if(rps.data){
                let list = (rps.data as any).records
                yunList.value = list?list:[]
                //queryParams.stationCode = list[0].code
                //getyys()
            }
        })
        getyys()
      }else{
        if(props.list.length > 0){
          yysList.value = props.list
        }
      }
      

      //初始查询字典类型
      //机器人运行模式类型
      let yxtype = ref<any>([])
      getdict({
        typeCode:'robotyxms'
      }).then(rps => {
        yxtype.value = rps.data
      })  

      function getyys() {
        yysList.value.splice(0)
        getjqrlist(queryParams).then(rps => {
            if(rps.data){
              yysList.value = (rps.data as any).records
              total.value = (rps.data as any).total
            }
        })
      }

      function handleSizeChange(val:number) {
        queryParams.pageSize = val
        getyys()
      }
      
      //重置
      let querform = ref()
      function resetQuery() {
        querform.value?.resetFields()
      }

      
      //新增、修改
      let type = ref(1)
      let openpop = ref(false)
      let ystit = ref('添加充电机')
      let yysRef = ref()
      let slecas = ref('')
      let addata = reactive({
        pkId:'',
        stationCode:'',	     //换电站编码
        stationName:'',
        code:'',	           //充电机编码
        version:'',	         //充电机软件版本
        switchType:'',	     //充电连接类型：1-连接器，2-充电枪
        status:'',	         //状态：1-正常，2-检修， 3-坏	
        dccNo:'',	           //电池仓序号
        gunNum:''	           //充电枪数量
      })
      const rules = ref({
        stationCode:[
            { required: true, message: "请选择换电站", trigger: "blur" }
        ],
        code:[
          { required: true, message: "请输入充电机编码", trigger: "blur" },
        ],
        status:[
          { required: true, message: "请输选择状态", trigger: "blur" },
        ],
        version:[
          { required: true, message: "请输入充电机软件版本", trigger: "blur" },
        ],
        switchType:[
          { required: true, message: "请输选择连接类型", trigger: "blur" },
        ]
      })

      function gethdzname(n:string) {
        addata.stationName = n
      }

      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true
        ystit.value = num == 1?'添加充电机':'修改充电机'
        yysRef.value?.resetFields()
        if(row){
          addata.pkId = row.pkId
          addata.stationCode = row.stationCode
          addata.stationName = row.stationName	     
          addata.code = row.code	                 
          addata.version = row.version	                   
          addata.switchType = row.switchType+''	     
          addata.status = row.status+''	             	
          addata.dccNo = row.dccNo	               
          addata.gunNum = row.gunNum	   
        }else{
          addata.pkId = ''
          addata.stationCode = props.zjtype == 1?'':props.stationCode
          addata.stationName = props.zjtype == 1?'':props.stationName
          
          addata.code = ''
          addata.version = ''	                   
          addata.switchType = ''	     
          addata.status = ''	             	
          addata.dccNo = ''	               
          addata.gunNum = ''                  
        }
      }
      function savehand() {
        if(type.value == 1){
            return addhdz(addata)
        }
        return update(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('update')
                },600)
            })
            }
        })
      }

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

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

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