<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="path">
              <el-input v-model="queryParams.path" placeholder="请输入路径" />
            </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
          highlight-current-row
          max-height="600px"
        >
            <el-table-column label="路径" min-width="200" align="center" prop="path" :show-overflow-tooltip="true" />
            <el-table-column label="通知人员" min-width="200" align="center" prop="recipientNames" :show-overflow-tooltip="true" />
            <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="500px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <el-form ref="yysRef" :model="addata" :rules="rules" label-width="110px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="路径" prop="path">
                <!-- <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.path" placeholder="请输入路径" />
              </el-form-item>
              
            </el-col>
            <el-col :span="24">
              <el-form-item label="通知人员" prop="recipientIds">
                <!-- <el-autocomplete
                    multiple
                    style="width: 100%"
                    v-model="wxuser"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入手机号查询"
                    clearable
                    @blur="autoblur"
                    @select="handleSelect"
                    @clear="autoclear"
                  /> -->

                  <!--  @focus="wxfocus"-->

                  <el-select
                    v-model="wxuser"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    value-key="value"
                    placeholder="请输入手机号查询"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    @focus="wxfocus"
                    @change="wxchange"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="n in userlist"
                      :key="n.wuid"
                      :label="`${n.name?n.name:'暂未设置'}, ${n.phoneNumber?n.phoneNumber:'暂未设置'}`"
                      :value="n.wuid"
                    />
                  </el-select>

                <!-- <el-input v-model="addata.recipientIds" placeholder="请选择人员" /> -->
              </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">
      import { ref,reactive,watch } from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'
      import { 
        getadlist, 
        addyctz, 
        updateab, 
        delab
      } from '@/api/systemSet/abnormal'

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

      

      //获取微信用户
      let wxuser = ref<any>([])
      let userlist = ref<any>([])
      let loading = ref<any>(false) 
      function remoteMethod (queryString: string) {
        //if(queryString !== ''){
          loading.value = true
          userlist.value.splice(0)
          getwxlist({
            pageSize:1000,	               //每页条数
            pageNo:1,	                     //页数
            phoneNumber:queryString,       //手机号
            // nickName:queryString,          //昵称
            // name:queryString               //名称
          }).then((res:any) => {
            loading.value = false
            if (res.data && res.data.records.length > 0) {
              // mapList.value = res.data;
              userlist.value = res.data.records
            }
          }).catch(() => {
            loading.value = false
          })
        //}
      }

      let queryParams = reactive({
        pageSize:20,	      //每页条数
        pageNo:1,	          //页数
        path:''               //路径
      })
      
      //查询
      let total = ref(0)
      let yysList = ref([])
      function handBtnqu(){
        queryParams.pageNo = 1
        getyys()
      }
      

      function getyys() {
        yysList.value.splice(0)
        getadlist(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({
        path:'',            //路径
        recipientIds:''     //通知人员   
      })
      const rules = ref({
        path:[
          { required: true, message: "请输入路径", trigger: "blur" },
        ],
        recipientIds:[
          { required: true, message: "请选择通知人员", trigger: "blur" },
        ]
      })
      
      let pkId = ''
      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true
        ystit.value = num == 1?'添加异常':'修改异常'
        yysRef.value?.resetFields()

        wxuser.value = []
        if(row){
          pkId = row.pkId
          addata.path = row.path
          addata.recipientIds = row.recipientIds
          if(row.recipientIds){
            wxuser.value = row.recipientIds?row.recipientIds.split(','):[] 
          }
          getwxlist({
            pageSize:1000,	               //每页条数
            pageNo:1,	                     //页数
            phoneNumber:'',       //手机号
            // nickName:queryString,          //昵称
            // name:queryString               //名称
          }).then((res:any) => {
            
            if (res.data && res.data.records.length > 0) {
              // mapList.value = res.data;
              userlist.value = res.data.records
            }
          })

        }else{
          addata.path = ''
          addata.recipientIds = ''
          
        }

        console.log(wxuser.value,'wxuser1')

      }
      function savehand() {
        if(type.value == 1){
            return addyctz(addata)
        }
        return updateab(Object.assign({},addata,{
          pkId
        }))
        
      }
      //保存
      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.path}的异常？`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
          delab(row.pkId).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            setTimeout(() => {
              getyys()
            },600)
          })
      })
    }

    function wxchange(v:any) {
      console.log(v)
      console.log(wxuser.value,'wxuser.value')
      if(v.length > 0){
        addata.recipientIds = v.join()
      }
    }

    function wxfocus() {
     // userlist.value.splice(0)
      //wxuser.value = []
      //addata.recipientIds = ''
    }

    getyys()

    
  </script>
  <style scoped>
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  </style>