<template>
    <div>
      <div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
        <el-form
          ref="querform" 
          :model="queryParams" 
          :inline="true" 
        >
            <el-form-item label="区划" prop="divisionNo">
              <el-cascader
                ref="qrcasca"
                v-model="queryParams.divisionNo"
                style="width: 100%;" 
                :options="options" 
                clearable
                :props="{
                  label:'admdvsName',
                  value:'admdvsNo',
                  children:'subAdmdvsInfoList',
                  checkStrictly:true
                }" 
                @change="qrchange"
              />
            </el-form-item>
            <!-- <el-form-item label="关联方代码">
              <el-input v-model="queryParams.typeRelateCode" placeholder="请输入关联方代码" clearable style="width: 240px" />
            </el-form-item> -->
            <el-form-item label="运营商名称" prop="poname">
              <el-input v-model="queryParams.poname" placeholder="请输入运营商名称" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="组织机构代码" prop="pocode">
              <el-input v-model="queryParams.pocode" placeholder="请输入组织机构代码" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 120px">
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="0" />
              </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;">
        <el-button 
          type="primary" 
          plain 
          icon="Plus" 
          @click="showpop(1)">新增</el-button>
        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          max-height="600px"
        >
            
            <el-table-column label="运营商名称" min-width="200" align="center" prop="poname" :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.poname}}</div>
              </template>
            </el-table-column>
            <el-table-column label="运营商组织机构代码" min-width="200" align="center" prop="pocode" :show-overflow-tooltip="true" />
            <el-table-column label="区划" min-width="200" align="center" prop="division" :show-overflow-tooltip="true" />
            <el-table-column label="详细地址" min-width="400" align="center" prop="address" :show-overflow-tooltip="true" />
            <el-table-column label="联系人" min-width="130" align="center" prop="contacts" :show-overflow-tooltip="true" />
            <el-table-column label="联系电话" min-width="160" align="center" prop="phone" :show-overflow-tooltip="true" />
            <el-table-column label="换电站数量" min-width="100" align="center" prop="stationCount" :show-overflow-tooltip="true" />
            <el-table-column label="状态" min-width="100" align="center" prop="status">
              <template #default="scope">
                <div v-if="scope.row.status == 1">启用</div>
                <div v-else style="color: #ccc;">禁用</div>
              </template>
            </el-table-column>
            <!-- <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 link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="total > 10" style="display: flex;justify-content: right;padding-top:20px;">
            <el-pagination
              v-model:current-page="queryParams.pageNo"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 20, 30, 40]"
              background
              size="small"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="getyys"
            />
          </div>
          
      </div>
  
    
      <!-- 添加或修改用户配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="800px" 
          append-to-body
          :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="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="poname">
                <el-input v-model="addata.poname" placeholder="请输入运营商名称" maxlength="50" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织机构代码" prop="pocode">
                <el-input 
                  v-model="addata.pocode" 
                  placeholder="请输入运营商组织机构代码" 
                  maxlength="50" 
                />
              </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="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="readonly">
                <el-radio-group v-model="addata.readonly">
                  <el-radio :value="1">是</el-radio>
                  <el-radio :value="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="addata.status">
                  <el-radio :value="1">启用</el-radio>
                  <el-radio :value="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="换电站数量" prop="stationCount">
                <el-input 
                  v-model="addata.stationCount" 
                  placeholder="请输入换电站数量" 
                  maxlength="11" 
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handleAdd">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup lang="ts" name="UserPage">
      import { 
        getyyslist,
        addyunys,
        updateyys,
        delyys
      } from '@/api/systemSet/operator'
      import {
        getArea
      } from '@/api/common'
      import { ref,reactive,watch } from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'

      let queryParams = reactive({
        pageSize:20,	      //每页条数
        pageNo:1,	          //页数
        divisionNo:'',      //区划编码
        poname:'',	        //运营商名称
        pocode:'',	        //运营商组织机构代码
        status:''	          //状态：1-启用，0-禁用
      })
      
      //查询
      let total = ref(0)
      let yysList = ref([])
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }
      
      //查询条件区划
      function qrchange(v:any) {
        if(v){
          queryParams.divisionNo = v[v.length - 1]
        }else{
          queryParams.divisionNo = ''
        }
      }

      function getyys() {
        yysList.value.splice(0)
        getyyslist(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 ystit = ref('添加运营商')
      let yysRef = ref()
      let slecas = ref('')
      let addata = reactive({
        pkId:'',
        division:'',	          //区划名称
        divisionNo:'',	        //区划编码	
        poname:'',	            //运营商名称
        pocode:'',	            //运营商组织机构代码
        address:'',	            //地址
        addressProvince:'',     //地址-省
        addressCity:'',	        //地址-市
        addressArea:'',	        //地址-区县
        contacts:'',	          //联系人
        phone:'',	              //联系电话
        status:'',	            //状态：1-启用，0-禁用
        readonly:'',            //只读：1-是，0-否
        stationCount:''	        //换电站数量
      })
      const rules = ref({
        division:[
          { required: true, message: "请选择区划", trigger: "blur" },
        ],
        poname:[
          { required: true, message: "请输入运营商名称", trigger: "blur" },
        ],
        pocode:[
          { required: true, message: "请输入运营商组织机构代码", trigger: "blur" },
        ]
      })

      watch(() => addata.stationCount,v => {
        addata.stationCount = v.replace(/[^\d]/g,'')
      })

      watch(() => addata.phone,v => {
        addata.phone = v.replace(/[^\d]/g,'')
      })
      
      
      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true
        ystit.value = num == 1?'添加运营商':'修改运营商'
        yysRef.value?.resetFields()
        if(row){
          slecas.value = row.divisionNo

          addata.pkId = row.pkId
          addata.division = row.division	                
          addata.divisionNo = row.divisionNo	            	
          addata.poname = row.poname	                    
          addata.pocode = row.pocode	                    
          addata.address = row.address	                  
          addata.addressProvince = row.addressProvince    
          addata.addressCity = row.addressCity	          
          addata.addressArea = row.addressArea	          
          addata.contacts = row.contacts	                
          addata.phone = row.phone	                      
          addata.status = row.status	                    
          addata.readonly = row.readonly                  
          addata.stationCount = row.stationCount?row.stationCount+'':''	        
        }else{
          slecas.value = ''

          addata.pkId = ''
          addata.division = ''	                
          addata.divisionNo = ''	            	
          addata.poname = ''	                    
          addata.pocode = ''	                    
          addata.address = ''	                  
          addata.addressProvince = ''    
          addata.addressCity = ''	          
          addata.addressArea = ''	          
          addata.contacts = ''	                
          addata.phone = ''	                      
          addata.status = ''	                    
          addata.readonly = ''                  
          addata.stationCount = ''
        }
      }
      function savehand() {
        if(type.value == 1){
            return addyunys(addata)
        }
        return updateyys(addata)
        
      }
      //保存
      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
    }

      //删除
    function handleDelete(row:any) {
      ElMessageBox.confirm(
        `确定删除运营商：${row.poname}`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
          delyys(row.pkId).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getyys()
          })
      })
    }
    
    //获取区划
    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;
  }
  </style>