<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" 
          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="手机号" prop="phoneNumber">
            <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="用户名称" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入名称" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="所属公司" prop="pname">
            <el-input v-model="queryParams.pname" placeholder="请输入公司名称" clearable style="width: 200px;" />
        </el-form-item>

        <el-form-item label="审核状态" prop="state">
          <el-select v-model="queryParams.state" placeholder="请选择审核状态" style="width: 200px;">
              <el-option label="待审核" :value="1" />
              <el-option label="通过" :value="2" />
              <el-option label="拒绝" :value="3" />
          </el-select>
        </el-form-item>
        

            <el-form-item>
              <el-button type="primary" icon="Search" @click="handBtnqu">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
      <div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">
        <!-- <div style="display: flex;justify-content: right;">
          <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
          highlight-current-row
          :max-height="search?'600px':'680px'"
        >
            <el-table-column type="index" min-width="50" align="center">
              <template  #default="{ $index }">
                <div>{{(queryParams.pageNo - 1) * queryParams.pageSize+ $index + 1}}</div>
              </template>
            </el-table-column>
            <el-table-column label="手机号" min-width="150" align="center" prop="phoneNumber" :show-overflow-tooltip="true">
              <template #default="scope">
                <div @click="showpop(scope.row)" style="display: inline-block;color:#16599d;border-bottom: 1px solid #417ebb;cursor:pointer">{{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.name?scope.row.name:'暂未设置'}}</div>
              </template>
            </el-table-column>
            <el-table-column label="用户昵称" min-width="150" align="center" prop="nickName" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.nickName?scope.row.nickName:'暂未设置'}}</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.gender == 1">男</div>
                    <div v-else-if="scope.row.gender == 2">女</div>
                    <div v-else>暂未设置</div>
                </template>
            </el-table-column>
            <el-table-column label="用户类型" min-width="150" align="center" prop="type" :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>
            <el-table-column label="所属公司" min-width="150" align="center" prop="name" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.pname?scope.row.pname:''}}</div>
              </template>
            </el-table-column>
            <el-table-column label="审核状态" min-width="100" align="center" prop="name" :show-overflow-tooltip="true">
              <template #default="scope">
                <div v-if="scope.row.state == 1">待审核</div>
                <div v-else-if="scope.row.state == 2" style="color: #529b2e;">通过</div>
                <div v-else-if="scope.row.state == 3" style="color: #b88230;">拒绝</div>
                <div v-else></div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="100" fixed="right">
              <template #default="scope">
                <el-button v-if="scope.row.state == 1" link type="primary" icon="Edit" @click="showshpop(scope.row.wuid)">审核</el-button>
                <el-button v-else-if="scope.row.state == 2" link type="danger" icon="Paperclip" @click="jiebing(scope.row.wuid,scope.row.pcode)">解绑公司</el-button>
                <el-button v-else link type="primary" icon="Connection" @click="showbdgs(scope.row.wuid)">绑定公司</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="bdgspop" 
          title="绑定公司" 
          width="800px" 
          append-to-body
          :close-on-click-modal="false"
        >

        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="gsList"
          border
          stripe
          max-height="800px"
          ref="taskTableRef"
          @select="selectClick"
          :header-cell-class-name="cellClass"
        >
            <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" /> -->
          </el-table>
          <div v-if="gstotal > 10" style="display: flex;justify-content: right;padding-top:20px;">
            <el-pagination
              v-model:current-page="gsqueryParams.pageNo"
              v-model:page-size="gsqueryParams.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>
    
      <!-- 修改手机号 名称 -->
        <el-dialog 
          v-model="openpop" 
          title="修改" 
          width="500px" 
          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="24">
                <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">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="addata.name" maxlength="20" placeholder="请输入用户名" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="账户余额(元)">
                    <el-input v-model="totalAmount" disabled 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="shenhepop" 
          title="审核" 
          width="500px" 
          append-to-body
          :close-on-click-modal="false"
        >

        <el-form ref="shRef" :model="shenhdata" :rules="shrules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="审核意见" prop="state">
                  <el-radio-group v-model="shenhdata.state">
                    <el-radio :value="2">同意</el-radio>
                    <el-radio :value="3">拒绝</el-radio>
                  </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col v-if="(shenhdata.state as any) == 3" :span="24">
                <el-form-item label="拒绝原因" prop="reason">
                    <el-input v-model="shenhdata.reason" maxlength="200" placeholder="请输入拒绝原因" clearable />
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="shehesave">确 定</el-button>
            <el-button @click="cancelsh">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup lang="ts">
      import { 
        getwxlist,
        gulgs, 
        update,
        examine,
        unbind
      } from '@/api/operation/wxuser'
      import { 
        getlist
      } from '@/api/operation/company'
      import { 
        getjqrlist
      } from '@/api/order/account'
      import { ref,reactive,watch} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'

      let search = ref(true)

      let queryParams = reactive({
        pageSize:20,	      //每页条数
        pageNo:1,	          //页数
        phoneNumber:'',	    //手机号
        name:'',	          //名称
        pname:'',           //公司名称
        state:''            //审核状态
        // wuid:'',	          //微信用户id
        // nickName:'',        //用户昵称
        // gender:'',	        //用户性别：1-男；2-女
       
        // type:'',	          //类型：1-独立账户，2-公司员工子账户
        // pcode:''	          //父账户编码
      })
      
      //查询
      let total = ref(0)
      let yysList = ref<any>([])
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }

      function getyys() {
        yysList.value.splice(0)
        getwxlist(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 bdgspop = ref(false) 
      let gsList = ref<any>([])
      let gstotal = ref(0)
      let bdgsobj = reactive({
        wuid:'',
        pcode:'',    //公司编码
        pname:''    //公司名称
      })
      let gsqueryParams = reactive({
        pageSize:20,	      //每页条数
        pageNo:1	          //页数 
      })
      function showbdgs(wuid:string){
        bdgspop.value = true
        bdgsobj.wuid = wuid
        bdgsobj.pcode = ''
        bdgsobj.pname = ''
        getsglist()
      }

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

      function sizeChange(val:number) {
        gsqueryParams.pageSize = val
        getsglist()
      }
      
      function savegs(){
        if(bdgsobj.pcode){
          gulgs(bdgsobj).then(() => {
            ElMessage({
                type: 'success',
                message: '绑定成功'
            })
            bdgspop.value = false
             setTimeout(()=> {
                getyys()
            },600)
          })
        }else{
          ElMessage({
              type: 'success',
              message: '请选择公司'
          })
        }
      }
      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时又变成了多选
        }
        bdgsobj.pcode = selection[0].ccode
        bdgsobj.pname = selection[0].cname
    }

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

      //修改手机号 用户名
      let openpop = ref(false)
      let yysRef = ref()
      let addata = reactive({
        wuid:'',
        phone:'',      //手机号
        name:''       //用户名
      })
      const rules = ref({
        phone:[
          { required: true, message: "请输入手机号", trigger: "blur" }
        ],
        name:[
          { required: true, message: "请输入用户名", trigger: "blur" }
        ]
      })
      
      watch(() => addata.phone,v => {
        addata.phone = v.replace(/[^\d]/g,'')
      })

      let totalAmount = ref<any>('')

      function showpop(row?:any){
        openpop.value = true
        yysRef.value?.resetFields()
        if(row){
          addata.wuid = row.wuid
          addata.name = row.name?row.name:''
          addata.phone = row.phoneNumber?row.phoneNumber:''              

          getjqrlist({
            pageSize:20,	            //每页条数
            pageNo:1,	                //页数
            ownerId:row.wuid	      //户主ID
          }).then(rps => {
            if(rps.data && (rps.data as any).records.length > 0){
              totalAmount.value = (rps.data as any).records[0].totalAmount
              totalAmount.value = totalAmount.value/100
            }else{
              totalAmount.value = '暂未开通' 
            }
        })
        }
      }

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

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

      //删除
    function handleDelete(row:any) {
      ElMessageBox.confirm(
        `确定解绑公司${row.plateNum}`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
 
      })
    }

    
    //审核
    let shenhepop = ref(false)
    let shenhdata = reactive({
      wuid:'',
      state:'',          //审核状态：1-待审核，2-审核通过，3-审核拒绝
      reason:''         //拒绝原因
    })

    const shrules = ref({
        state:[
          { required: true, message: "请选择审核意见", trigger: "blur" }
        ]
      })

    let shRef = ref()
    function showshpop(wuid:string) {
      shenhdata.wuid = wuid
      shenhdata.state = ''
      shenhdata.reason = ''
      shRef.value?.resetFields()
      shenhepop.value = true
    }
    
    
    function shehesave(){
      shRef.value?.validate((valid:Boolean) => {
          if (valid) {
            examine(shenhdata).then(() => {
                shenhepop.value = false
                ElMessage({
                      type: 'success',
                      message: '操作成功'
                  })
                  setTimeout(()=> {
                      openpop.value = false
                      getyys()
                  },600)
            })
          }
      })
  }



   function cancelsh() {
    shenhepop.value = false
   }


   //解绑公司
   function jiebing(wuid:string,pcode:string){
    ElMessageBox.confirm(
        `确定解绑`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
        unbind(wuid,pcode).then(() => {
          ElMessage({
              type: 'success',
              message: '解绑成功'
          })
          setTimeout(()=> {
              getyys()
          },600)
        })
      })
    
   }

    getyys()


    
  </script>
  <style>
  /* 隐藏全选按钮 */
  .el-table .disabledCheck .cell .el-checkbox__inner {
    display: none;
  }
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  /* .el-checkbox__inner{
    display: none;
  } */
  </style>