<template>
    <div>
      <div v-if="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="关联方代码">
              <el-input v-model="queryParams.typeRelateCode" placeholder="请输入关联方代码" clearable style="width: 240px" />
            </el-form-item> -->
            <el-form-item label="运营商" prop="proxyId">
                <el-select v-model="queryParams.proxyId" placeholder="请选择运营商" style="width: 200px;">
                    <el-option v-for="n in yunList" :label="n.label" :value="n.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="站点名称" prop="name">
              <el-input v-model="queryParams.name" placeholder="请输入站点名称" clearable style="width: 160px" />
            </el-form-item>
            <el-form-item label="站点编码" prop="code">
              <el-input v-model="queryParams.code" placeholder="请输入站点编码" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 160px;">
                    <el-option value="1" label="正常营业" />
                    <el-option value="2" label="正常停运" />
                    <el-option value="3" label="故障停运" />
                    <el-option value="4" label="指令停运" />
                    <el-option value="9" label="其他" />
                </el-select>
            </el-form-item>
            <el-form-item label="站点类型" prop="type">
                <el-select v-model="queryParams.type" placeholder="请选择站点类型" style="width: 150px;">
                    <el-option 
                     v-for="n in hdztype" 
                     :value="n.dictValue" 
                     :label="n.dictName" 
                    />
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="创建时间" style="width: 308px">
              <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </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;">

          <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>

        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          :max-height="search?'600px':'680px'"
        >   
            <el-table-column label="站点名称" min-width="200" align="center" prop="name" :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.name}}</div>
              </template>
            </el-table-column>
            <el-table-column label="站点编码" min-width="300" align="center" prop="code" :show-overflow-tooltip="true" />
            <el-table-column label="运营商" min-width="200" align="center" prop="poname" :show-overflow-tooltip="true" />
            <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>
                    <div v-else-if="scope.row.status == 4">指令停运</div>
                    <div v-else-if="scope.row.status == 9">其它</div>
                </template>
            </el-table-column>
            <el-table-column label="站控锁定状态" min-width="120" align="center" prop="stop" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div v-if="scope.row.stop && dytiem(scope.row.stopTime)">预锁定</div>
                    <div v-else-if="scope.row.stop">锁定</div>
                    <div v-else>放开</div>
                </template>
            </el-table-column>
            <el-table-column label="锁定时间" min-width="160" align="center" prop="stopTime" :show-overflow-tooltip="true" >
               <template #default="scope">
                    <div v-if="scope.row.stop">{{scope.row.stopTime}}</div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="锁定提醒" min-width="300" align="center" prop="stopTip" :show-overflow-tooltip="true" >
               <template #default="scope">
                    <div v-if="scope.row.stop">{{scope.row.stopTip}}</div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="地址" min-width="400" align="center" prop="address" :show-overflow-tooltip="true" />
            <el-table-column label="注册日期" min-width="120" align="center" prop="registerDate" :show-overflow-tooltip="true" />
            <el-table-column label="联系人" min-width="200" align="center" prop="contacts" :show-overflow-tooltip="true" />
            <el-table-column label="联系电话" min-width="140" align="center" prop="phone" />
            <el-table-column label="激活日期" min-width="160" align="center" prop="activeDate" :show-overflow-tooltip="true" />
            <el-table-column label="营业时间" min-width="120" align="center" prop="openAllDay" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div v-if="scope.row.openAllDay == 1">全天</div>
                    <div v-else>{{scope.row.runStartTime}} — {{scope.row.runEndTime}}</div>
                </template>
            </el-table-column>
            <el-table-column label="通道数" min-width="100" align="center" prop="tdQuantity" />

            <el-table-column label="机器人数量" min-width="100" align="center" prop="jqrQuantity" />
            <el-table-column label="充电机数量" min-width="160" align="center" prop="cdjQuantity" :show-overflow-tooltip="true" />
            <el-table-column label="电池仓数量" min-width="100" align="center" prop="dccQuantity" :show-overflow-tooltip="true" />
            <el-table-column label="电池数量" min-width="100" align="center" prop="dcQuantity" />
            <!-- <el-table-column v-if="columns[6].visible" label="创建时间" align="center" prop="createTime" width="160">
              <template #default="scope">
                <span>{{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
              </template>
            </el-table-column> -->
            <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 v-if="scope.row.stop" link type="warning" icon="Unlock" @click="hdzstop(scope.row)">放开</el-button>
                <el-button v-else link type="warning" icon="Lock" @click="hdzlock(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>
  
    
      <!-- 添加或修改用户配置对话框 -->
       <!--:fullscreen="type == 2?true:false"-->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="800" 
          append-to-body
          destroy-on-close
          :close-on-click-modal="false"
        >
        <el-form ref="yysRef" :model="addata" :rules="rules" label-width="110px">
          <el-row>
            <el-col :span="12">
                <el-form-item label="运营商" prop="proxyId">
                    <el-select v-model="addata.proxyId" placeholder="请选择运营商">
                        <el-option v-for="n in yunList" :label="n.label" :value="n.value" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="站点名称" prop="name">
                    <el-input v-model="addata.name" placeholder="请输入站点名称" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="站点编码" prop="code">
                    <el-input v-model="addata.code" placeholder="请输入站点编码" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="状态" prop="status">
                    <el-select v-model="addata.status" placeholder="请选择状态">
                        <el-option 
                         v-for="n in hdzsta" 
                         :value="n.dictValue" 
                         :label="n.dictName" 
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="站点类型" prop="type">
                    <el-select v-model="addata.type" placeholder="请选择站点类型">
                        <el-option 
                        v-for="n in hdztype" 
                        :value="n.dictValue" 
                        :label="n.dictName" 
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="支持车辆类型" prop="carTypeCode">
                    <el-select multiple v-model="addata.carTypeCode" placeholder="请选择车辆类型">
                        <el-option v-for="n in cartypelist" :label="n.typeName" :value="n.typeCode" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区划" prop="division">
                <el-cascader
                  ref="cascader"
                  v-model="slecas"
                  style="width: 100%;" 
                  :options="options" 
                  clearable
                  :props="{
                    label:'admdvsName',
                    value:'admdvsNo',
                    children:'subAdmdvsInfoList'
                  }" 
                  @change="change"
                />
                <!-- <el-input v-model="addata.division" placeholder="请选择区划" maxlength="20" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址" prop="address">
                <el-input 
                  v-model="addata.address" 
                  placeholder="请输入详细地址" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="注册日期" prop="registerDate">
                <el-date-picker
                    v-model="addata.registerDate"
                    value-format="YYYY-MM-DD"
                    style="width: 100%;" 
                    type="date"
                    placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人" prop="contacts">
                <el-input 
                  v-model="addata.contacts" 
                  placeholder="请输入联系人" 
                  maxlength="20" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input 
                  v-model="addata.phone" 
                  placeholder="请输入联系电话" 
                  maxlength="11" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="激活日期" prop="activeDate">
                <el-date-picker
                    v-model="addata.activeDate"
                    value-format="YYYY-MM-DD"
                    style="width: 100%;" 
                    type="date"
                    placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经纬度" prop="locationPoint">
                <el-input 
                  v-model="addata.locationPoint" 
                  placeholder="请输入经纬度" 
                  maxlength="20" 
                  readonly
                  @click="mapshow = true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="全天营业" prop="openAllDay">
                <el-radio-group v-model="addata.openAllDay">
                  <el-radio value="1">是</el-radio>
                  <el-radio value="0">否</el-radio>
                </el-radio-group>
                <div v-if="addata.openAllDay == '0'" style="display: flex;">
                  <el-form-item label="" prop="runStartTime">
                      <el-time-select
                        v-model="addata.runStartTime"
                        style="width: 120px"
                        :max-time="addata.runEndTime"
                        class="mr-4"
                        placeholder="开始时间"
                        start="00:00"
                        step="00:30"
                        end="24:00"
                      />
                    </el-form-item>
                  
                    <div style="padding: 0 5px;">至</div>
                    <el-form-item label="" prop="runEndTime">
                      <el-time-select
                        v-model="addata.runEndTime"
                        style="width: 120px"
                        :min-time="addata.runStartTime"
                        placeholder="结束时间"
                        start="00:00"
                        step="00:30"
                        end="24:00"
                      />
                    </el-form-item>
                </div>
                
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通道数" prop="tdQuantity">
                <el-input 
                  v-model="addata.tdQuantity" 
                  placeholder="请输入通道数" 
                  maxlength="10" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="机器人数量" prop="jqrQuantity">
                <el-input 
                  v-model="addata.jqrQuantity" 
                  placeholder="请输入机器人数量" 
                  maxlength="10" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="充电机数量" prop="cdjQuantity">
                <el-input 
                  v-model="addata.cdjQuantity" 
                  placeholder="请输入充电机数量" 
                  maxlength="10" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电池仓数量" prop="dccQuantity">
                <el-input 
                  v-model="addata.dccQuantity" 
                  placeholder="请输入电池仓数量" 
                  maxlength="10" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电池数量" prop="dcQuantity">
                <el-input 
                  v-model="addata.dcQuantity" 
                  placeholder="请输入电池数量" 
                  maxlength="10" 
                />
              </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>

      <!--换电站详情-->
      <el-drawer 
        v-model="drawer" 
        :with-header="false"
        size="70%"
      >
      <tit 
        @close="handleClose" 
        :name="addata.name" 
        :hdzcode="addata.code" 
        :showcode="true"
        :openAllDay="addata.openAllDay"
        :startTime="addata.runStartTime"
        :endTime="addata.runEndTime"
      />
        <el-row :gutter="25">
          <el-col :span="24" style="margin-bottom: 20px;">
            <div style="padding: 0;border: 2px solid #73b9c9;border-radius: 10px;">
              <div class="mktit jqbg">基础信息</div>
              <!-- <div style="padding: 20px;">
                <el-row :gutter="50">
                  <el-col :span="24">
                    <el-col :span="12" style="border: 1px solid #ccc;text-align: center;"><img :src="urlcode" width="200" height="200" /></el-col>
                  </el-col>
                  <el-col :span="12">
                    <el-row style="border: 1px solid #ccc;border-bottom: none;">
                      <el-col :span="9" style="padding: 10px 0;background: #4e98a9;color: #fff;text-align: center;">运营商</el-col>
                      <el-col :span="15" style="padding: 10px 0;text-align: center;">河北伊特</el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row style="border: 1px solid #ccc;border-bottom: none;">
                      <el-col :span="9" style="padding: 10px 0;background: #4e98a9;color: #fff;text-align: center;">站点名称</el-col>
                      <el-col :span="15" style="padding: 10px 0;text-align: center;">北京一号换电站</el-col>
                    </el-row>
                  </el-col>
                </el-row>
                
              </div> -->
              
            <el-form ref="yysRef" :model="addata" :rules="rules" label-width="150px">
            <el-row style="padding:20px">
              <el-col :span="12">
                  <el-form-item label="运营商" prop="proxyId">
                      <el-select v-model="addata.proxyId" placeholder="请选择运营商">
                          <el-option v-for="n in yunList" :label="n.label" :value="n.value" />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="站点名称" prop="name">
                      <el-input v-model="addata.name" placeholder="请输入站点名称" clearable />
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="站点编码" prop="code">
                      <el-input v-model="addata.code" placeholder="请输入站点编码" clearable />
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="状态" prop="status">
                      <el-select v-model="addata.status" placeholder="请选择状态">
                          <el-option 
                          v-for="n in hdzsta" 
                          :value="n.dictValue" 
                          :label="n.dictName" 
                          />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="站点类型" prop="type">
                      <el-select v-model="addata.type" placeholder="请选择站点类型">
                          <el-option 
                          v-for="n in hdztype" 
                          :value="n.dictValue" 
                          :label="n.dictName" 
                          />
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="支持车辆类型" prop="carTypeCode">
                    <el-select multiple v-model="addata.carTypeCode" placeholder="请选择车辆类型">
                        <el-option v-for="n in cartypelist" :label="n.typeName" :value="n.typeCode" />
                    </el-select>
                </el-form-item>
              </el-col>
              

              <el-col :span="12">
                <el-form-item label="区划" prop="division">
                  <el-cascader
                    ref="cascader"
                    v-model="slecas"
                    style="width: 100%;" 
                    :options="options" 
                    clearable
                    :props="{
                      label:'admdvsName',
                      value:'admdvsNo',
                      children:'subAdmdvsInfoList'
                    }" 
                    @change="change"
                  />
                  <!-- <el-input v-model="addata.division" placeholder="请选择区划" maxlength="20" /> -->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详细地址" prop="address">
                  <el-input 
                    v-model="addata.address" 
                    placeholder="请输入详细地址" 
                    maxlength="50" 
                  />
                </el-form-item>
              </el-col>
              
              <el-col :span="12">
                <el-form-item label="注册日期" prop="registerDate">
                  <el-date-picker
                      v-model="addata.registerDate"
                      value-format="YYYY-MM-DD"
                      style="width: 100%;" 
                      type="date"
                      placeholder="请选择日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="激活日期" prop="activeDate">
                  <el-date-picker
                      v-model="addata.activeDate"
                      value-format="YYYY-MM-DD"
                      style="width: 100%;" 
                      type="date"
                      placeholder="请选择日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人" prop="contacts">
                  <el-input 
                    v-model="addata.contacts" 
                    placeholder="请输入联系人" 
                    maxlength="20" 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                  <el-input 
                    v-model="addata.phone" 
                    placeholder="请输入联系电话" 
                    maxlength="11" 
                  />
                </el-form-item>
              </el-col>
              
              <el-col :span="12">
                <el-form-item label="经纬度" prop="locationPoint">
                  <el-input 
                    readonly
                    v-model="addata.locationPoint" 
                    placeholder="请输入经纬度" 
                    maxlength="20" 
                    @click="mapshow = true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="全天营业" prop="openAllDay">
                  <el-radio-group v-model="addata.openAllDay">
                    <el-radio :value="1">是</el-radio>
                    <el-radio :value="0">否</el-radio>
                  </el-radio-group>
                  <div v-if="addata.openAllDay == '0'" style="display: flex;padding-left: 20px;">
                    <el-form-item label="" prop="runStartTime">
                      <el-time-select
                        v-model="addata.runStartTime"
                        style="width: 120px"
                        :max-time="addata.runEndTime"
                        class="mr-4"
                        placeholder="开始时间"
                        start="00:00"
                        step="00:30"
                        end="24:00"
                      />
                    </el-form-item>
                  
                    <div style="padding: 0 5px;">至</div>
                    <el-form-item label="" prop="runEndTime">
                      <el-time-select
                        v-model="addata.runEndTime"
                        style="width: 120px"
                        :min-time="addata.runStartTime"
                        placeholder="结束时间"
                        start="00:00"
                        step="00:30"
                        end="24:00"
                      />
                    </el-form-item>
                    
                </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="通道数" prop="tdQuantity">
                  <el-input 
                    v-model="addata.tdQuantity" 
                    placeholder="请输入通道数" 
                    maxlength="10" 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="机器人数量" prop="jqrQuantity">
                  <el-input 
                    v-model="addata.jqrQuantity" 
                    placeholder="请输入机器人数量" 
                    maxlength="10" 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="充电机数量" prop="cdjQuantity">
                  <el-input 
                    v-model="addata.cdjQuantity" 
                    placeholder="请输入充电机数量" 
                    maxlength="10" 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电池仓数量" prop="dccQuantity">
                  <el-input 
                    v-model="addata.dccQuantity" 
                    placeholder="请输入电池仓数量" 
                    maxlength="10" 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电池数量" prop="dcQuantity">
                  <el-input 
                    v-model="addata.dcQuantity" 
                    placeholder="请输入电池数量" 
                    maxlength="10" 
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24" style="text-align: center;">
                <el-button type="success" @click="handleAdd">保 存</el-button>
                <el-button @click="resetupdate">重 置</el-button>
              </el-col>
            </el-row>
            </el-form>
            </div>
          </el-col>
          <el-col :span="24">
            <div style="margin-bottom: 20px;border: 1px solid #98c3ef; border-radius: 10px;">
              <div class="mktit">机器人</div>
              <robot 
                v-if="drawer"
                zjtype="2" 
                :stationCode="addata.code"
                :stationName="addata.name"
                :list="robotlist"
                @update="getyys" 
              />
            </div>
            <div style="margin-bottom: 20px;border: 1px solid #98c3ef; border-radius: 10px;">
              <div class="mktit">电池仓</div>
              <dcc
                v-if="drawer"
                zjtype="2" 
                :stationCode="addata.code"
                :stationName="addata.name"
                :list="dcclist" 
                @update="getyys"
              />
            </div>
            <div style="margin-bottom: 20px;;border: 1px solid #98c3ef; border-radius: 10px;">
              <div class="mktit">充电机</div>
              <electmach
                v-if="drawer"
                zjtype="2" 
                :stationCode="addata.code"
                :stationName="addata.name"
                :list="elmlist" 
                @update="getyys"
              />
            </div>
            <div style="margin-bottom: 20px;border: 1px solid #98c3ef; border-radius: 10px;">
              <div class="mktit">电池</div>
              <battery
                v-if="drawer"
                zjtype="2" 
                :stationCode="addata.code"
                :stationName="addata.name"
                :list="batlist"
                @update="getyys"
              />
            </div>
          </el-col>
        </el-row>
      </el-drawer>

      <!--地图-->
      <el-dialog 
        v-model="mapshow" 
        title="获取经纬度" 
        width="70%" 
        append-to-body
        destroy-on-close
        :close-on-click-modal="false"
      >
        <latilonmap
          :lat = "lat"
          :lng = "lng" 
          @chang="latlngchang" 
        />
      </el-dialog>


      <!--锁定-->
      <el-dialog 
          v-model="lockpop" 
          :title="`锁定${hdzname}`" 
          width="400" 
          append-to-body
          destroy-on-close
          :close-on-click-modal="false"
        >
        <el-form ref="locksRef" :model="lockata" :rules="lockrules" label-width="110px">
          <el-form-item label="锁定时间" prop="stopTime">
              <el-date-picker
                v-model="lockata.stopTime"
                type="datetime"
                style="width: 240px"
                placeholder="锁定时间"
                format="YYYY/MM/DD HH:mm"
              />
          </el-form-item>
          <el-form-item label="提醒内容" prop="stopTip">
            <el-input
              v-model="lockata.stopTip"
              style="width: 240px"
              placeholder="提醒内容"
              type="textarea"
              rows = '3'
              resize="none" 
              clearable
            />
          </el-form-item>
        </el-form>
        
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="lockhand">确 定</el-button>
            <el-button @click="lockcancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup lang="ts">
      import { 
        gethdzlist, 
        addhdz, 
        update,
        delhdz,
        getqrcode,
        stastop
      } from '@/api/swapstation/hdz'
      import { 
        optionyyslist
      } from '@/api/systemSet/operator'
      import {
        getArea
      } from '@/api/common'
      import { 
        getdict
      } from '@/api/systemSet/dict'
      import { 
        getdicttype
      } from '@/api/systemSet/cartype'
      import { ref,reactive,watch } from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'
      import Robot from '../robot/index.vue'
      import Electmach from '../electmach/index.vue'
      import Dcc from '../dcc/index.vue'
      import Battery from '../battery/index.vue'
      import Tit from '@/views/components/detailstit.vue'
      import Latilonmap from '@/views/components/latilonmap.vue'

      import { useRoute } from 'vue-router'
     import { formatDate } from '@/utils/ruoyi'

      function timestamp() {
        return new Date().getTime()
      }

      function dytiem(date:any) {
        return new Date(date).getTime() > new Date().getTime()
      }

      let search = ref(true)

      let queryParams = reactive({
        pageSize:20,	                            //每页条数
        pageNo:1,	                                //页数
        proxyId:'',	                              //归属运营商ID
        name:'',	                                //站点名称
        code:'',	                                //站点编码
        status:useRoute().query.status,	          //状态：1-正常营业，2-正常停运，3-故障停运，4-指令停运，9-其它
        type:'',	                                //站点类型ID
      })
      
      //查询
      let total = ref(0)
      let yysList = ref([])
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }
      
      //初始查询运营商
      let yunList = ref<any>([])
      optionyyslist().then(rps => {
            if(rps.data){
                //let list = (rps.data as any).records
                yunList.value = rps.data
            }
        })
      
      //初始查询字典类型
      //换电站类型
      let hdztype = ref<any>([])
      getdict({
        typeCode:'huandianzhan'
      }).then(rps => {
        hdztype.value = rps.data
      })  

      //车辆类型
      let cartypelist = ref<any[]>([])
      getdicttype({
        pageSize:50,	        //每页条数
        pageNo:1
      }).then(rps => {
        cartypelist.value = (rps.data as any).records
      })

      //换电站状态
      let hdzsta = ref<any>([])
        getdict({
        typeCode:'hdzzhuangtai'
      }).then(rps => {
        hdzsta.value = rps.data
      })  

      function getyys() {
        yysList.value.splice(0)
        gethdzlist(queryParams).then(rps => {
            if(rps.data){
            total.value = (rps.data as any).total
              let list = (rps.data as any).records
              yysList.value = list?list:[]
            }
        })
      }

      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 drawer = ref(false)
      let ystit = ref('添加换电站')
      let yysRef = ref()
      let slecas = ref('')

      let robotlist = ref<any[]>([])  //机器人
      let elmlist = ref<any[]>([])    //电机
      let dcclist = ref<any[]>([])    //电池仓
      let batlist = ref<any[]>([])    //电池

      let lat = ref('')
      let lng = ref('') 

      let startTime = ref('')
      let endTime = ref('')

      let addata = reactive({
        pkId:'',
        proxyId:'',	                //归属运营商ID
        name:'',	                  //站点名称
        code:'',	                  //站点编码
        status:'',	                //状态：1-正常营业，2-正常停运，3-故障停运，4-指令停运，9-其它
        type:'',	                  //站点类型ID
        division:'',                //地区          ??
        divisionNo:'',              //地区编码      ??
        address:'',	                //地址
        addressProvince:'',	        //地址-省
        addressCity:'',	            //地址-市	query
        addressArea:'',	            //地址-区县
        registerDate:'',	          //注册日期
        contacts:'',	              //联系人
        phone:'',	                  //联系电话
        delFlag:'',	                //删除标识：1-已删除，0-未删除
        activeDate:'',	            //激活日期
        locationPoint:'',	          //经纬度信息
        openAllDay:'1',	            //全天营业：1-是，0-否
        runStartTime:'',	          //营业开始时间
        runEndTime:'',	            //营业结束时间
        tdQuantity:'',	            //通道数
        jqrQuantity:'',	            //机器人数量
        cdjQuantity:'',	            //充电机数量
        dccQuantity:'',	            //电池仓数量
        dcQuantity:'',	            //电池数量
        carTypeCode:''              //服务车辆类型
      })
      const rules = ref({
        proxyId:[
            { required: true, message: "请选择运营商", trigger: "blur" }
        ],
        name:[
          { required: true, message: "请输入站点名称", trigger: "blur" },
        ],
        code:[
          { required: true, message: "请输入站点编码", trigger: "blur" },
        ],
        status:[
          { required: true, message: "请选择状态", trigger: "blur" },
        ],
        type:[
          { required: true, message: "请选择换电站类型", trigger: "blur" },
        ],
        carTypeCode:[
          { required: true, message: "请选择支持的车辆类型", trigger: "blur" },
        ],
        runStartTime:[
          { required: true, message: "请选择营业开始时间", trigger: "blur" },
        ],
        runEndTime:[
          { required: true, message: "营业结束时间", trigger: "blur" }
        ]
      })
      
      watch(() => addata.phone,(v)=> {
        addata.phone = addata.phone.replace(/[^\d]/g,'')
      })
      watch(() => addata.tdQuantity,(v)=> {
        addata.tdQuantity = addata.tdQuantity.replace(/[^\d]/g,'')
      })
      watch(() => addata.jqrQuantity,(v)=> {
        addata.jqrQuantity = addata.jqrQuantity.replace(/[^\d]/g,'')
      })
      watch(() => addata.cdjQuantity,(v)=> {
        addata.cdjQuantity = addata.cdjQuantity.replace(/[^\d]/g,'')
      })
      watch(() => addata.dccQuantity,(v)=> {
        addata.dccQuantity = addata.dccQuantity.replace(/[^\d]/g,'')
      })
      watch(() => addata.dcQuantity,(v)=> {
        addata.dcQuantity = addata.dcQuantity.replace(/[^\d]/g,'')
      })
      let urlcode = ref<any>('')
      function showpop(num:any,row?:any){
        type.value = num
        if(type.value == 1){
          openpop.value = true
        }else if(type.value == 2){
          drawer.value = true
        }
        
        ystit.value = num == 1?'添加换电站':'修改换电站'
        yysRef.value?.resetFields()
        if(row){
          slecas.value = row.divisionNo

          addata.pkId = row.pkId
          addata.proxyId = row.proxyId	                    
          addata.name = row.name	                        
          addata.code = row.code	                        
          addata.status = row.status+''	                    
          addata.type = row.type?row.type+'':''	                        
          addata.division = row.division                    
          addata.divisionNo = row.divisionNo                
          addata.address = row.address	                    
          addata.addressProvince = row.addressProvince	    
          addata.addressCity = row.addressCity	            
          addata.addressArea = row.addressArea	            
          addata.registerDate = row.registerDate	        
          addata.contacts = row.contacts	                
          addata.phone = row.phone+''	                        
          //addata.delFlag = row.delFlag	                    
          addata.activeDate = row.activeDate	            
          addata.locationPoint = row.locationPoint	    
          addata.carTypeCode = row.carTypeCode?row.carTypeCode.split(','):''   
          if(addata.locationPoint){
            let latlng = addata.locationPoint.split(',')
            
            lng.value = latlng[0]
            lat.value = latlng[1]
          }else{
            lng.value = ''
            lat.value = ''
          }
           
          
          addata.openAllDay = row.openAllDay	   
          addata.runStartTime = row.runStartTime?row.runStartTime:''	       
          addata.runEndTime = row.runEndTime?row.runEndTime:''          
          addata.tdQuantity = row.tdQuantity+''	            
          addata.jqrQuantity = row.jqrQuantity+''	            
          addata.cdjQuantity = row.cdjQuantity+''	            
          addata.dccQuantity = row.dccQuantity+''	            
          addata.dcQuantity = row.dcQuantity+''	       
          
          robotlist.value = row.robotList 
          elmlist.value = row.djList
          dcclist.value = row.dccList
          batlist.value = row.dcList

          //获取小程序码
          getqrcode({
                path:`pages/home/index?code=${addata.code}`,
                width:'400',
                env_version:'release'    //要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"。默认是正式版。
          }).then((rps:any) => {
            let reader = new FileReader()
            reader.readAsDataURL(rps) // 转换为base64
            reader.onload = function () {
                urlcode.value = reader.result
            }
          })

        }else{
          slecas.value = ''

          addata.pkId = ''
          addata.proxyId = ''	                    
          addata.name = ''	                        
          addata.code = ''	                        
          addata.status = ''	                    
          addata.type = ''	                        
          addata.division = ''                    
          addata.divisionNo = ''                
          addata.address = ''	                    
          addata.addressProvince = ''	    
          addata.addressCity = ''	           
          addata.addressArea = ''	            
          addata.registerDate = ''	        
          addata.contacts = ''	                
          addata.phone = ''	                        
          addata.delFlag = ''	                   
          addata.activeDate = ''	            
          addata.locationPoint = ''	        
          addata.openAllDay = '1'	    
          addata.runStartTime = ''	       
          addata.runEndTime = ''                  
          addata.tdQuantity = ''	            
          addata.jqrQuantity = ''	            
          addata.cdjQuantity = ''	            
          addata.dccQuantity = ''	            
          addata.dcQuantity = ''	    
          addata.carTypeCode = ''

          lat.value = ''
          lng.value = ''
        }
      }
      function savehand() {
        let obj = Object.assign({},addata,{
          carTypeCode:(addata.carTypeCode as any).join()
        })
        if(type.value == 1){
            return addhdz(obj)
        }
        return update(obj)
      }

      function handleClose() {
        drawer.value = false
      }

      function resetupdate() {
        yysRef.value?.resetFields()
      }

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

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

    //锁定
     let lockpop = ref(false) 
     let hdzid = ref(0)
     let hdzname = ref('')
     let lockata = reactive<any>({
      stop:true,
      stopTime:'',
      stopTip:''
     }) 
     let locksRef = ref()
     const lockrules = {
      stopTime:[
            { required: true, message: "请选择时间", trigger: "blur" }
        ],
        stopTip:[
            { required: true, message: "请输入提醒内容", trigger: "blur" }
        ]
     }

    function hdzlock(row:any) {
      hdzname.value = row.name
      hdzid.value = row.pkId
      lockpop.value = true
      lockata.stopTime = ''
      lockata.stopTip = ''
      querform.value?.resetFields()
    }


    function lockhand() {
      locksRef.value?.validate((valid:Boolean) => {
          if (valid) {
            if (lockata.stopTime) {
                  lockata.stopTime = formatDate(lockata.stopTime)
                }
              stastop(hdzid.value,lockata).then(() => {
              ElMessage({
                  type: 'success',
                  message: '操作成功'
              })
              setTimeout(()=> {
                  lockpop.value = false
                  getyys()
              },600)
          })
          }
      })
    } 
    function lockcancel() {
      lockpop.value = false
    }

    function hdzstop(row:any) {
      ElMessageBox.confirm(
        `确定${row.stop?'放开':'锁定'}换电站：${row.name}`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
        stastop(row.pkId,{stop:false}).then(() => {
            ElMessage({
                type: 'success',
                message: '操作成功'
            })
            getyys()
          })
      })
      
    }

      //删除
    function handleDelete(row:any) {
      ElMessageBox.confirm(
        `确定删除换电站：${row.name}`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
        delhdz(row.pkId).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getyys()
          })
      })
    }
    
    //地图
    let mapshow = ref(false)
    function latlngchang(v?:string) {
      mapshow.value = false
      if(v){
        addata.locationPoint = v
      }
    }

    //获取区划
    let options = ref<any>([])
    let cascader = ref()
    let alllsle = ref('')

    //处理选中值
    function change(v:any) {
      if(cascader.value.getCheckedNodes().length>0){
        alllsle.value= cascader.value.getCheckedNodes()[0].pathLabels

        addata.division = alllsle.value[2]  //区划名称
        addata.divisionNo = v[2]	          //区划编码	 

        addata.addressProvince = alllsle.value[0]         //地址-省
        addata.addressCity = alllsle.value[1]	            //地址-市
        addata.addressArea = alllsle.value[2]	            //地址-区县
      }else{
        addata.division = ''
        addata.divisionNo = ''
        addata.addressProvince = ''     
        addata.addressCity = ''	        
        addata.addressArea = ''	       
      }
      
    }
    getArea({}).then(rps => {
      options.value = rps.data
    })

     

    getyys()
  </script>
  <style scoped>
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  .mktit{
    width: 100%; 
    height: 40px;
    line-height: 40px;
    border-radius: 10px 10px 0 0;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background: #98c3ef;
  }
  .jqbg{
    background: #73b9c9;
  }
  </style>