<template>
    <el-dialog 
        v-model="showpop" 
        title="分配换电站" 
        width="800px" 
        append-to-body
        :close-on-click-modal="false"
        @close="cancel"
      >

      <el-table
        ref="tableRef"
        style="margin-top: 20px;"
        :data="hdzList"
        border
        stripe
        max-height="800px"
        @select="selectClick"
        @selection-change="selChange"
      >
            <!--:selectable="selectable"-->
            <el-table-column type="selection" width="55" />
            <el-table-column label="站点名称" min-width="200" align="center" prop="name" :show-overflow-tooltip="true" />
            
            <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="proxyId" :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="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>
      <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="fphdz"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="fphdzhand">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
</template>
<script setup lang="ts">
      import { ref,reactive,watch,nextTick } from 'vue'

      import { 
        gethdzlist
      } from '@/api/swapstation/hdz'
      

      import { 
        dispstation
    } from '@/api/systemSet/user'

      import { ElMessage} from 'element-plus'
      const props = withDefaults(defineProps<{
        show?:boolean,
        uid?:string,
        code?:string
      }>(), {
        show:false,
        uid:'',
        code:''
      })
      

      const emit = defineEmits<{
        cancel: [v?:boolean],
        update:[]
      }>()

    let showpop = ref(props.show)

    watch(() => props.show,(v) => {
        showpop.value = v
    })

    //分配换电站
    let fphdzpop = ref(false)
    let hdzList = ref([])
    let total = ref(0)
    //let selectable = (row:any) => ![1].includes(row.pkId)

    let queryParams = reactive({
        pageSize:20,	                            //每页条数
        pageNo:1,	                                //页数
        proxyId:'',	                              //归属运营商ID
        name:'',	                                //站点名称
        code:'',	                                //站点编码
        status:1,	          //状态：1-正常营业，2-正常停运，3-故障停运，4-指令停运，9-其它
        type:'',	                                //站点类型ID
      })

      
      const tableRef = ref()
    function fphdz() {
      hdzList.value.splice(0)
        gethdzlist(queryParams).then(rps => {
            if(rps.data){
            total.value = (rps.data as any).total
              let list = (rps.data as any).records
              hdzList.value = list?list:[]

              // 默认选中的ID数组
              if(props.code){
                
                nextTick(() => {
                    let hdzcode = props.code.split(',') 
                    hdzcode.forEach(n => {
                        const rows = hdzList.value.find((item:any) => item.code == n)
                        if (rows) {
                            tableRef.value?.toggleRowSelection(rows, true)
                        }
                    })
                })
              }
            
            }
        })
    }

    function handleSizeChange(val:number) {
        queryParams.pageSize = val
        fphdz()
     }
    
    function selectClick() {}

    function cancel() {
        showpop.value = false
        emit('cancel',showpop.value)
    }

    let xzarr = ref<any>([])
    function selChange(v:any) {
        xzarr.value = v
    }


    function fphdzhand() {
        if(xzarr.value.length > 0){
            dispstation({
                uid:props.uid,
                stationIds:xzarr.value.map((n:any)=>n.pkId).join(',')
            }).then(() => {
                ElMessage({
                    type: 'success',
                    message: '分配成功'
                })
                setTimeout(() => {
                    showpop.value = false
                    emit('update')
                },2000)
                
            })
        }else{
            ElMessage({
                type: 'warning',
                message: '请选择换电站'
            })
        }
    }

    fphdz()
</script>
<style>
</style>