<template>
    <div>
      <div v-if="search" class="app-container" style="position: relative;margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
        <el-form
          ref="querform" 
          :model="queryParams" 
          :inline="true" 
          label-width="auto"
        >
        <el-form-item label="车辆类型" prop="typeCode">
          <el-select v-model="queryParams.typeCode" style="width: 200px;" placeholder="请选择车辆类型">
              <el-option v-for="n in cartypelist" :label="n.typeName" :value="n.typeCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="VIN号" prop="vinNo">
            <el-input v-model="queryParams.vinNo" placeholder="请输入VIN号" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="车架号" prop="frameworkNo">
            <el-input v-model="queryParams.frameworkNo" placeholder="请输入车架号" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="车主类型" prop="ownerType">
            <el-select v-model="queryParams.ownerType" placeholder="请选择车主类型" style="width: 200px;">
              <el-option label="个人" value="1" />
              <el-option label="企业" value="2" />
            </el-select>
        </el-form-item>
        <el-form-item label="车主名称" prop="ownerName">
            <el-input v-model="queryParams.ownerName" placeholder="请输入车主名称" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="车牌号" prop="plateNum">
            <el-input v-model="queryParams.plateNum" placeholder="请输入车牌号" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
            <el-input v-model="queryParams.phone" placeholder="请输入联系电话" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="引擎号" prop="engineNo">
            <el-input v-model="queryParams.engineNo" placeholder="请输入引擎号" clearable style="width: 200px;" />
        </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?'550px':'680px'"
        >
            <el-table-column label="车牌号" min-width="100" align="center" prop="plateNum" :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.plateNum}}</div>
              </template>
            </el-table-column>
            <el-table-column label="VIN号" min-width="180" align="center" prop="vinNo" :show-overflow-tooltip="true" />
            <el-table-column label="车架号" min-width="200" align="center" prop="frameworkNo" :show-overflow-tooltip="true" />
            <el-table-column label="车主类型" min-width="80" align="center" prop="sourceFrom" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div v-if="scope.row.ownerType == 1">个人</div>
                    <div v-else-if="scope.row.ownerType == 2">企业</div>
                </template>
            </el-table-column>
            <el-table-column label="车主名称" min-width="160" align="center" prop="ownerName" :show-overflow-tooltip="true" />
            <el-table-column label="引擎号" min-width="220" align="center" prop="engineNo" :show-overflow-tooltip="true" />
            <el-table-column label="消费方式" min-width="80" align="center" prop="usageType" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div v-if="scope.row.usageType == 1">电量</div>
                    <div v-else-if="scope.row.usageType == 2">里程</div>
                </template>
            </el-table-column>
            <el-table-column label="座位数" min-width="80" align="center" prop="seatsCount" :show-overflow-tooltip="true" />
            <el-table-column label="车身颜色" min-width="100" align="center" prop="carColor" :show-overflow-tooltip="true" />
            <el-table-column label="车籍/归属地" min-width="200" align="center" prop="carArea" :show-overflow-tooltip="true" />
            <el-table-column label="出厂日期" min-width="100" align="center" prop="productionDate" :show-overflow-tooltip="true">
            <template #default="scope">
                    <div>{{formatDa(scope.row.productionDate)}}</div>   
            </template>
            </el-table-column>
            <el-table-column label="购车日期" min-width="100" align="center" prop="purchaseDate" :show-overflow-tooltip="true">
              <template #default="scope">
                    <div>{{formatDa(scope.row.purchaseDate)}}</div>   
              </template>
            </el-table-column>
            <el-table-column label="上牌日期" min-width="100" align="center" prop="boardDate" :show-overflow-tooltip="true">
              <template #default="scope">
                    <div>{{formatDa(scope.row.boardDate)}}</div>   
              </template>
            </el-table-column>

            <el-table-column label="首次登记日期" min-width="120" align="center" prop="registrationDate" :show-overflow-tooltip="true">
              <template #default="scope">
                    <div>{{formatDa(scope.row.registrationDate)}}</div>   
              </template>
            </el-table-column>

            <el-table-column label="总里程(公里)" min-width="100" align="center" prop="totalMileage" :show-overflow-tooltip="true" />
            <el-table-column label="联系电话" min-width="120" align="center" prop="phone" :show-overflow-tooltip="true" />
            <el-table-column label="公司名称" min-width="200" align="center" prop="cname" :show-overflow-tooltip="true" />
            <el-table-column label="组织机构代码" min-width="180" align="center" prop="ccode" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" min-width="100" fixed="right">
              <template #default="scope">
                <!-- <el-button link type="primary" icon="Edit" @click="showbdgs(1,scope.row.plateNum)">绑定公司</el-button>
                <el-button link type="primary" icon="Edit" @click="showbdgs(2,scope.row.plateNum)">绑定个人</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-drawer 
        v-model="xqdaropen" 
        :with-header="false"
        size="65%"
      >
      <!-- <tit @close="handleClose" :name="addata.name" :hdzcode="addata.code" :showcode="true" /> -->
            <div style="padding: 0;border: 2px solid #98c3ef;border-radius: 10px;">

              <div class="mktit" style="margin-bottom: 20px;">车辆信息</div>
                <el-form ref="yysRef" :model="addata" :rules="rules" label-width="110px">
                  <el-row :gutter="20" style="padding: 20px;">
                    <el-col :span="12">
                        <el-form-item label="车辆类型" prop="typeCode">
                            <el-select v-model="addata.typeCode" 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="VIN号" prop="vinNo">
                            <el-input v-model="addata.vinNo" maxlength="17" placeholder="请输入VIN号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车架号" prop="frameworkNo">
                            <el-input v-model="addata.frameworkNo" maxlength="17" placeholder="请输入车架号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车主类型" prop="ownerType">
                          <el-radio-group v-model="addata.ownerType">
                            <el-radio value="1">个人</el-radio>
                            <el-radio value="2">企业</el-radio>
                          </el-radio-group>
                        </el-form-item>
                    </el-col> 
                    <template v-if="addata.ownerType == '2'">
                      <el-col :span="12">
                          <el-form-item label="公司名称" prop="cname">
                              <!-- <el-input v-model="addata.cname" maxlength="30" placeholder="请输入公司名称" clearable /> -->
                              <el-autocomplete
                                v-if="isgongs"
                                style="width: 100%"
                                v-model="state"
                                :fetch-suggestions="querySearchAsync"
                                placeholder="请输入公司名称查询"
                                clearable
                                @select="handleSelect"
                              />
                              <div v-else style="display: flex;align-items: center;color: #ccc;">暂无公司 <span @tap="tocompage" style="padding:0 5px 0 10px;font-size:16px;color:#0050b3;">去添加</span><el-icon color="#0050b3"><Plus /></el-icon></div>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="组织机构代码" prop="ccode">
                              <el-input v-model="addata.ccode" maxlength="30" disabled placeholder="" clearable />
                          </el-form-item>
                      </el-col>
                    </template>
                    
                    <el-col :span="12">
                        <el-form-item label="车主名称" prop="ownerName">
                            <el-input v-model="addata.ownerName" maxlength="15" placeholder="请输入车主名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车牌号" prop="plateNum">
                            <el-input v-model="addata.plateNum" maxlength="8" disabled placeholder="请输入车牌号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="引擎号" prop="engineNo">
                            <el-input v-model="addata.engineNo" maxlength="17" placeholder="请输入引擎号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="消费方式" prop="usageType">
                            <el-select v-model="addata.usageType" placeholder="请选择消费方式">
                                <el-option label="电量" :value="1" />
                                <el-option label="里程" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="座位数" prop="seatsCount">
                          <el-input v-model="addata.seatsCount" max="3" placeholder="请输入座位数" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车身颜色" prop="carColor">
                          <el-input v-model="addata.carColor" placeholder="请输入车身颜色" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车籍/归属地" prop="carArea">
                          <!-- <el-input v-model="addata.carArea" placeholder="请输入车籍/归属地" clearable /> -->
                          <el-cascader
                            ref="cascader"
                            v-model="slecas"
                            style="width: 100%;" 
                            :options="options" 
                            clearable
                            :props="{
                              label:'admdvsName',
                              value:'admdvsNo',
                              children:'subAdmdvsInfoList'
                            }" 
                            @change="change"
                          />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="出厂日期" prop="productionDate">
                        <el-date-picker
                            v-model="addata.productionDate"
                            value-format="YYYYMMDD"
                            style="width: 100%;" 
                            type="date"
                            placeholder="请选择日期"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="购车时间" prop="purchaseDate">
                        <el-date-picker
                            v-model="addata.purchaseDate"
                            value-format="YYYYMMDD"
                            style="width: 100%;" 
                            type="date"
                            placeholder="请选择日期"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="上牌时间" prop="boardDate">
                        <el-date-picker
                            v-model="addata.boardDate"
                            value-format="YYYYMMDD"
                            style="width: 100%;" 
                            type="date"
                            placeholder="请选择日期"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="首次登记日期" prop="registrationDate">
                        <el-date-picker
                            v-model="addata.registrationDate"
                            value-format="YYYYMMDD"
                            style="width: 100%;" 
                            type="date"
                            placeholder="请选择日期"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="总里程(公里)" prop="totalMileage">
                            <el-input v-model="addata.totalMileage" placeholder="请输入总里程" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input v-model="addata.phone" maxlength="11" placeholder="请输入联系电话" clearable />
                        </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>
            
            <div style="margin-top: 20px;padding: 0;border: 2px solid #73b9c9;border-radius: 10px;">
              <div class="mktit" style="margin-bottom: 20px;background: #73b9c9;">车辆绑定</div>
              <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="User" name="first">User</el-tab-pane>
                <el-tab-pane label="Config" name="second">Config</el-tab-pane>
                <el-tab-pane label="Role" name="third">Role</el-tab-pane>
                <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
              </el-tabs> -->
              <div style="padding: 0 20px 20px;">
                <div style="display: flex;;align-items: center;justify-content: space-between;padding-bottom:20px;">
                  <div>已绑定用户</div>
                  <el-button 
                    type="primary" 
                    plain 
                    icon="Plus" 
                    @click="showbdgs(2,addata.plateNum)">绑定用户</el-button>
                </div>
                
                <el-table 
                  style="width: 100%;"
                  :data="caruserlist"
                  border
                  stripe
                  max-height="500px"
                >
                    <el-table-column label="手机号" min-width="100" align="center" prop="phone" :show-overflow-tooltip="true" />
                    <el-table-column label="用户名" min-width="150" align="center" prop="uname" :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="unbinduser(scope.row)">解绑</el-button>
                      </template>
                    </el-table-column>
                </el-table>
              </div>
              
            </div>
           
              


              <!-- <el-tabs type="border-card" class="demo-tabs">
                <el-tab-pane>
                  
                </el-tab-pane>
                <el-tab-pane label="Config">Config</el-tab-pane>
                <el-tab-pane label="Role">Role</el-tab-pane>
                <el-tab-pane label="Task">Task</el-tab-pane>
              </el-tabs> -->
      </el-drawer>

    
      <!-- 添加或修改配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="800px" 
          append-to-body
          :close-on-click-modal="false"
        >

        <el-form ref="yysRef" :model="addata" :rules="rules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="车辆类型" prop="typeCode">
                    <el-select v-model="addata.typeCode" 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="VIN号" prop="vinNo">
                    <el-input v-model="addata.vinNo" maxlength="17" placeholder="请输入VIN号" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车架号" prop="frameworkNo">
                    <el-input v-model="addata.frameworkNo" maxlength="17" placeholder="请输入车架号" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车主类型" prop="ownerType">
                  <el-radio-group v-model="addata.ownerType">
                    <el-radio value="1">个人</el-radio>
                    <el-radio value="2">企业</el-radio>
                  </el-radio-group>
                </el-form-item>
            </el-col> 
            <template v-if="addata.ownerType == '2'">
              <el-col :span="12">
                  <el-form-item label="公司名称" prop="cname">
                      <!-- <el-input v-model="addata.cname" maxlength="30" placeholder="请输入公司名称" clearable /> -->
                      <el-autocomplete
                        v-if="isgongs"
                        style="width: 100%"
                        v-model="state"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入公司名称查询"
                        clearable
                        @select="handleSelect"
                      />
                      <div v-else style="display: flex;align-items: center;color: #ccc;">暂无公司 <span @tap="tocompage" style="padding:0 5px 0 10px;font-size:16px;color:#0050b3;">去添加</span><el-icon color="#0050b3"><Plus /></el-icon></div>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="组织机构代码">
                      <el-input v-model="addata.ccode" maxlength="20" disabled placeholder="" clearable />
                  </el-form-item>
              </el-col>
            </template>
            
            <el-col :span="12">
                <el-form-item label="车主名称" prop="ownerName">
                    <el-input v-model="addata.ownerName" maxlength="15" placeholder="请输入车主名称" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车牌号" prop="plateNum">
                    <el-input v-model="addata.plateNum" maxlength="8" placeholder="请输入车牌号" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="引擎号" prop="engineNo">
                    <el-input v-model="addata.engineNo" maxlength="17" placeholder="请输入引擎号" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="消费方式" prop="usageType">
                    <el-select v-model="addata.usageType" placeholder="请选择消费方式">
                        <el-option label="电量" :value="1" />
                        <el-option label="里程" :value="2" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="座位数" prop="seatsCount">
                  <el-input v-model="addata.seatsCount" max="3" placeholder="请输入座位数" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车身颜色" prop="carColor">
                  <el-input v-model="addata.carColor" placeholder="请输入车身颜色" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车籍/归属地" prop="carArea">
                  <!-- <el-input v-model="addata.carArea" placeholder="请输入车籍/归属地" clearable /> -->
                  <el-cascader
                    ref="cascader"
                    v-model="slecas"
                    style="width: 100%;" 
                    :options="options" 
                    clearable
                    :props="{
                      label:'admdvsName',
                      value:'admdvsNo',
                      children:'subAdmdvsInfoList'
                    }" 
                    @change="change"
                  />
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出厂日期" prop="productionDate">
                <el-date-picker
                    v-model="addata.productionDate"
                    value-format="YYYYMMDD"
                    style="width: 100%;" 
                    type="date"
                    placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购车时间" prop="purchaseDate">
                <el-date-picker
                    v-model="addata.purchaseDate"
                    value-format="YYYYMMDD"
                    style="width: 100%;" 
                    type="date"
                    placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上牌时间" prop="boardDate">
                <el-date-picker
                    v-model="addata.boardDate"
                    value-format="YYYYMMDD"
                    style="width: 100%;" 
                    type="date"
                    placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="首次登记日期" prop="registrationDate">
                <el-date-picker
                    v-model="addata.registrationDate"
                    value-format="YYYYMMDD"
                    style="width: 100%;" 
                    type="date"
                    placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="总里程(公里)" prop="totalMileage">
                    <el-input v-model="addata.totalMileage" placeholder="请输入总里程" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="addata.phone" maxlength="12" 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>
    
      <!--绑定公司-->
      <el-dialog 
          v-model="bdgspop" 
          :title="bdtype == 1?'绑定公司':'绑定个人'" 
          width="1200px" 
          append-to-body
          :close-on-click-modal="false"
        >

        <el-form
          ref="wxquerform" 
          :model="wxParams" 
          :inline="true" 
          label-width="auto"
        >
  
    
        <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="wxParams.phoneNumber" placeholder="请输入手机号" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="所属公司" prop="cname">
          <!-- <el-input v-model="addata.cname" maxlength="30" placeholder="请输入公司名称" clearable /> -->
          <el-autocomplete
            :disabled="bddisabled"
            style="width: 100%"
            v-model="wxstate"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入公司名称查询"
            clearable
            @select="wxhandleSelect" 
          /> 
      </el-form-item>
        <el-form-item label="用户名称" prop="name">
            <el-input v-model="wxParams.name" placeholder="请输入车主名称" clearable style="width: 200px;" />
        </el-form-item>
  
            <el-form-item>
              <el-button type="primary" icon="Search" @click="wxhandBtnqu">搜索</el-button>
              <el-button icon="Refresh" @click="wresetQuery">重置</el-button> 
            </el-form-item>
          </el-form>

          <el-table 
            style="width:100%;margin-top: 10px;"
            :data="gsList"
            border
            stripe
            max-height="600px"
            ref="taskTableRef"
            @select="selectClick"
            :header-cell-class-name="cellClass"
          >
              <template v-if="bdtype == 1">
                <el-table-column type="selection" width="40" />
                <!-- <el-table-column label="区划" width="200" align="center" prop="division" :show-overflow-tooltip="true" /> -->
                <el-table-column label="公司名称" min-width="200" align="center" prop="cname" :show-overflow-tooltip="true" />
                <el-table-column label="组织机构代码" min-width="200" align="center" prop="ccode" :show-overflow-tooltip="true" />
                <el-table-column label="详细地址" min-width="300" align="center" prop="address" :show-overflow-tooltip="true" />
                <!-- <el-table-column label="联系人" width="130" align="center" prop="contacts" :show-overflow-tooltip="true" />
                <el-table-column label="联系电话" width="160" align="center" prop="phone" :show-overflow-tooltip="true" /> -->
              </template>
              
              <template v-else>
                <el-table-column type="selection" width="40" />
                <el-table-column label="手机号" min-width="150" align="center" prop="phoneNumber" :show-overflow-tooltip="true">
                  <template #default="scope">
                        <div>{{scope.row.phoneNumber?scope.row.phoneNumber:'暂未设置'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="用户名称" min-width="150" align="center" prop="name" :show-overflow-tooltip="true">
                  <template #default="scope">
                        <div>{{scope.row.phoneNumber?scope.row.name:'暂未设置'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="所属公司" min-width="200" align="center" prop="pname" :show-overflow-tooltip="true" />
                <!-- <el-table-column label="用户昵称" min-width="150" align="center" prop="nickName" :show-overflow-tooltip="true" /> -->
                <!-- <el-table-column label="用户性别" min-width="150" align="center" prop="gender" :show-overflow-tooltip="true">
                  <template #default="scope">
                        <div v-if="scope.row.ownerType == 1">男</div>
                        <div v-else-if="scope.row.ownerType == 2">女</div>
                    </template>
                </el-table-column>
                <el-table-column label="用户类型" min-width="150" align="center" prop="gender" :show-overflow-tooltip="true">
                  <template #default="scope">
                        <div v-if="scope.row.type == 1">个人</div>
                        <div v-else-if="scope.row.type == 2">公司</div>
                    </template>
                </el-table-column> -->
              </template>


              
            </el-table>
            <div v-if="gstotal > 10" style="display: flex;justify-content: right;padding-top:20px;">
              <el-pagination
                v-model:current-page="wxParams.pageNo"
                v-model:page-size="wxParams.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                background
                size="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="gstotal"
                @size-change="sizeChange"
                @current-change="getsglist"
              />
            </div>

      
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="savegs">绑 定</el-button>
              <el-button @click="cancelgs">取 消</el-button>
            </div>
          </template>
        </el-dialog>
    </div>
  </template>
  <script setup lang="ts">
      import { 
        getjqrlist, 
        addhdz, 
        update,
        delhdz,
        Binggs,
        Bingwx,
        getcarwxlist,
        unbindwx,
        hasorder
      } from '@/api/swapstation/vehicle'
      import { 
        getdicttype
      } from '@/api/systemSet/cartype'
      import {
        getArea
      } from '@/api/common'

      import { 
        getlist
      } from '@/api/operation/company'
      import { 
        getwxlist
      } from '@/api/operation/wxuser'

      import { carNum } from '@/utils/validate'

      import { formatDate } from '@/utils/ruoyi'
      //  import { 
      //   getdict
      //  } from '@/api/systemSet/dict'
      import { ref,reactive,watch} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'

      import { useRouter } from 'vue-router'

      function formatDa(s:any) {
        return formatDate(s)
      }
      
      let search = ref(true)

      //跳转到公司页面
      let isgongs = ref(true)
      const router = useRouter()
      function tocompage() {
        router.push('/vehicle/company')
      }

      let queryParams = reactive({
        pageSize:20,	      //每页条数
        pageNo:1,	          //页数
        typeCode:'',	      //型号编码
        vinNo:'',	          //车辆识别代码VIN号
        frameworkNo:'',	    //车架号
        ownerType:'',	     //车主类型：1-个人，2-企业
        ownerId:'',	        //车主ID
        ownerName:'',	      //车主名称
        plateNum:'',	      //车牌号
        phone:'',	          //联系电话
        engineNo:''	        //引擎号
      })
      
      //查询
      let total = ref(0)
      let yysList = ref<any>([])
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }
      
      //初始查询字典类型
      // let yxtype = ref<any>([])
      // getdict({
      //   typeCode:'robotyxms'
      // }).then(rps => {
      //   yxtype.value = rps.data
      // })  

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


      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 state = ref('')
      
      async function querySearchAsync (queryString: string, cb:any) {
        getlist({
          pageSize:1000,	      //每页条数
          pageNo:1,	          //页数
          cname:queryString
        }).then((res) => {
            if (res.data && (res.data as any).records.length > 0) {
                // mapList.value = res.data;
                let listss = (res.data as any).records.map((n:any) => {
                    return {
                        value: n.cname,
                        code: n.ccode
                    }
                })
                cb(listss)
                //return listss
                // callback(mapList.value);
            }else{
                cb([])
            }
            }).catch(() => {
                cb([])
            })
        }

        //function handleSelect() {}

        function handleSelect(v: any) {
          addata.cname = v.value	                //公司名称
          addata.ccode = v.code	                //组织机构代码
        }
        
        let wxstate = ref('') 

        function wxhandleSelect(v: any) {
          wxParams.pcode = v.code	                  //父账户编码
        }
        
      //详情
      let xqdaropen = ref(false)

  

      //新增、修改
      let type = ref(1)
      let openpop = ref(false)
      let ystit = ref('添加车辆')
      let yysRef = ref()
      let slecas = ref('')
      let addata = reactive({
        typeCode:'',              //车辆类型编码
        vinNo:'',	                //车辆识别代码VIN号
        frameworkNo:'',	          //车架号
        ownerType:'',	            //车主类型：1-个人，2-企业
        ownerName:'',	            //车主名称
        plateNum:'',	            //车牌号
        engineNo:'',	            //引擎号
        usageType:'',	            //消费方式：1-电量，2-里程

        pkId:'',
        ownerId:'',	              //车主ID
        seatsCount:'',	          //座位数
        carColor:'',	            //车身颜色
        carArea:'',	              //车籍/归属地
        productionDate:'',	      //出厂日期
        purchaseDate:'',	        //购车日期
        boardDate:'',	            //上牌日期
        registrationDate:'',	    //首次登记日期
        totalMileage:'',	        //总里程
        phone:'',	                //联系电话
        cname:'',	                //公司名称
        ccode:''	                //组织机构代码
      })
      const rules = ref({
        typeCode:[
          { required: true, message: "请选择车辆类型", trigger: "blur" }
        ],
        vinNo:[
          { required: true, message: "请输入车辆识别代码VIN号", trigger: "blur" }
        ],
        frameworkNo:[
          { required: true, message: "请输入车架号", trigger: "blur" }
        ],
        ownerType:[
          { required: true, message: "请选择车主类型", trigger: "blur" }
        ],
        ownerName:[
          { required: true, message: "请输入车主名称", trigger: "blur" }
        ],
        plateNum:[
          { required: true, message: "请输入车牌号", trigger: "blur" }
          // { required: true, validator:carNum, trigger: "blur"}
        ],
        engineNo:[
          { required: true, message: "请输入引擎号", trigger: "blur" }
        ],
        usageType:[
          { required: true, message: "请选择消费方式", trigger: "blur" }
        ],
        cname:[
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        ccode:[
          { required: true, message: "请输入组织机构代码", trigger: "blur" }
        ]
      })

      //过滤格式
      watch(() => addata.vinNo,v => {
        addata.vinNo = v.replace(/[^a-zA-Z0-9]/g,'')
      })
      watch(() => addata.frameworkNo,v => {
        addata.frameworkNo = v.replace(/[^a-zA-Z0-9]/g,'')
      })

      // watch(() => addata.ccode,v => {
      //   addata.ccode = v.replace(/[^A-Z0-9]/g,'')
      // })
      watch(() => addata.engineNo,v => {
        addata.engineNo = v.replace(/[^A-Z0-9]/g,'')
      })
      watch(() => addata.seatsCount,v => {
        addata.seatsCount = v.replace(/[^0-9]/g,'')
      })
      watch(() => addata.totalMileage,v => {
        addata.totalMileage = v.replace(/[^0-9]/g,'')
      })
      watch(() => addata.phone,v => {
        if(v){
          addata.phone = v.replace(/[^0-9]/g,'')
        }
        
      })
      
      function resetupdate() {
        yysRef.value?.resetFields()
      }

      function showpop(num:any,row?:any){
        type.value = num
       // openpop.value = true
        ystit.value = num == 1?'添加车辆':'修改车辆'
        yysRef.value?.resetFields()

        
        if(type.value == 1){
          openpop.value = true
        }else if(type.value == 2){
          xqdaropen.value = true
        }

        if(row){
          addata.typeCode = row.typeCode
          addata.vinNo = row.vinNo
          addata.frameworkNo = row.frameworkNo
          addata.ownerType = row.ownerType+''
          addata.ownerName = row.ownerName
          addata.plateNum = row.plateNum
          addata.engineNo = row.engineNo
          addata.usageType = row.usageType

          addata.pkId = row.pkId
          addata.ownerId = row.ownerId
          addata.seatsCount = row.seatsCount+''
          addata.carColor = row.carColor
          addata.carArea = row.carArea
          addata.productionDate = row.productionDate
          addata.purchaseDate = row.purchaseDate
          addata.boardDate = row.boardDate
          addata.registrationDate = row.registrationDate
          addata.totalMileage = row.totalMileage+''
          addata.phone = row.phone
          addata.cname = row.cname
          state.value = row.cname
          addata.ccode = row.ccode    

          getcaruser(row.plateNum)
        }else{
          addata.typeCode = ''
          addata.vinNo = ''
          addata.frameworkNo = ''
          addata.ownerType = '1'
          addata.ownerName = ''
          addata.plateNum = ''
          addata.engineNo = ''
          addata.usageType = ''

          addata.pkId = ''
          addata.ownerId = ''
          addata.seatsCount = ''
          addata.carColor = ''
          addata.carArea = ''
          addata.productionDate = ''
          addata.purchaseDate = ''
          addata.boardDate = ''
          addata.registrationDate = ''
          addata.totalMileage = ''
          addata.phone = ''
          addata.cname = ''
          addata.ccode = ''    
          state.value = ''             
        }
      }
      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
                    xqdaropen.value = false
                    getyys()
                },600)
            })
            }
        })
      }

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

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

        // delhdz(row.pkId).then(() => {
        //     ElMessage({
        //         type: 'success',
        //         message: '删除成功'
        //     })
        //     getyys()
        //   })
      })
    }

      //绑定公司
      //查询公司 个人
      let bdtype = ref(1)
      let bdgspop = ref(false) 
      let gsList = ref<any>([])
      let gstotal = ref(0)
      let bdgsobj = reactive({
        plateNum:'',   //车牌  
        ccode:'',      //公司编码
        cname:''       //公司名称
      })

      //微信用户
      let wxobj = reactive({
        ucode:'',	          //用户编码
        uname:'',	          //用户名称
        plateNum:'',	      //车牌号
        ownerType:'',	      //车主类型：1-个人，2-企业
        phone:'',	          //关联人手机号
        openid:''
      })

      let gsqueryParams = reactive({
        pageSize:20,	      //每页条数
        pageNo:1	          //页数 
      })

      let wxParams = reactive({
        pageSize:20,	    //每页条数
        pageNo:1,	        //页数
        phoneNumber:'',	  //手机号
        name:'',	        //名称
        pcode:''           //父账户编码
      })

      let bddisabled = ref(false)
      function showbdgs(type:number,plateNum:string){
        bdtype.value = type
        bdgspop.value = true
        
        if(bdtype.value == 1){
          bdgsobj.ccode = ''
          bdgsobj.cname = ''
          bdgsobj.plateNum = plateNum
        }else{
          wxobj.plateNum = plateNum
          wxobj.ucode = ''	          
          wxobj.uname = ''	          
          wxobj.ownerType = ''	      
          wxobj.phone = ''	
          wxobj.openid = '' 
        }
        
        wxParams.pageSize = 20	    //每页条数
        wxParams.pageNo = 1	        //页数
        wxParams.phoneNumber = ''	  //手机号
        wxParams.name = ''	        //名称

        if(addata.ownerType == '2'){
          bddisabled.value = true
          wxParams.pcode = addata.ccode 
          wxstate.value =  addata.cname
        }else{
          bddisabled.value = false
          wxParams.pcode = ''        
          wxstate.value = ''
        }
       

        getsglist()
      }

      function qslist() {
        if(bdtype.value == 1){
          return getlist(gsqueryParams)
        }
        return getwxlist(wxParams)
      }

      function bingsave(){
        if(bdtype.value == 1){
          return Binggs(bdgsobj)
        }
        return Bingwx(wxobj)
      }

      function getsglist() {
        gsList.value.splice(0)
        qslist().then(rps => {
            if(rps.data){
              gsList.value = (rps.data as any).records
              gstotal.value = (rps.data as any).total
            }
        })
      }

      function sizeChange(val:number) {
        wxParams.pageSize = val
        getsglist()
      }
      
      function savegs(){
        if((bdtype.value == 1 && bdgsobj.ccode) ||(bdtype.value == 2 && wxobj.ucode)){
          bingsave().then(() => {
            ElMessage({
                type: 'success',
                message: '绑定成功'
            })
            bdgspop.value = false
            getcaruser(addata.plateNum)
            //getyys()
          })
        }else{
          ElMessage({
              type: 'success',
              message: `请选择${bdtype.value == 1?'公司':'微信用户'}`
          })
        }
      }
      function cancelgs(){
        bdgspop.value = false
      }

      
    //设置单选
    const taskTableRef = ref()
    const selectClick = (selection: any, row: any) => {
        if(selection.length > 1) {
            let del_row = selection.shift();
            taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
        }
        if(bdtype.value == 1){
          bdgsobj.ccode = selection[0].ccode
          bdgsobj.cname = selection[0].cname
        }else{
          wxobj.ucode = selection[0].wuid	          
          wxobj.uname = selection[0].name	          
          wxobj.ownerType = selection[0].type	      
          wxobj.phone = selection[0].phoneNumber	
          wxobj.openid = selection[0].openid
        }
    }

    function cellClass(row: any) {
      // 隐藏多选框一列的表头即全选框
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    }

    getyys()

    let options = ref<any>([])
    let cascader = ref()
    let alllsle = ref<any[]>([])
    getArea({}).then(rps => {
      options.value = rps.data
    })
    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.carArea = alllsle.value.join('')
      }else{
        addata.carArea = ''
        // addata.division = ''
        // addata.divisionNo = ''      
      }
      
    }

    //查询微信用户

    let wxquerform = ref()
    

    function wxhandBtnqu() {
      wxParams.pageNo = 1
      getsglist()
    }
    
    function wresetQuery() {
        wxquerform.value?.resetFields()
      }

    //车辆绑定
    let activeName = ref(0)

    //车辆绑定的微信用户
    let caruserlist = ref<any>([])
    function getcaruser(plateNum:string){
      getcarwxlist(plateNum).then(rps => {
        caruserlist.value = rps.data
      })
    }
    
    //解绑微信用户
     function unbinduser(row:any) {
        ElMessageBox.confirm(
          `${row.uname}确定解绑车辆?`,
          '温馨提示',
          {
              // confirmButtonText: '',
              // cancelButtonText: 'Cancel',
              type: 'warning',
          }
        ).then(() => {
          unbindwx(row.pkId).then(() => {
              ElMessage({
                  type: 'success',
                  message: '解绑成功'
              })
              getcaruser(addata.plateNum)
            })
        })
     }
    
    function handleClick() {}
  </script>
  <style>
    .el-table .disabledCheck .cell .el-checkbox__inner {
      display: none;
    }
    .el-divider--horizontal{
      border-color:#5b98cd;
    }
  </style>
  <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;
  }
  </style>