<script setup>
import { onMounted, ref, getCurrentInstance, watch, nextTick } from 'vue'
import Close from '@/components/icon/delete.vue'
import CloseBig from '@/components/icon/closeBig.vue'
import Empty from '@/components/icon/empty.vue'
import Refresh from '@/components/icon/refresh.vue'
import Back from '@/components/icon/back.vue'
import PullDown from '@/components/icon/down.vue'
import Help from '@/components/icon/help.vue'
import EyeClose from '@/components/icon/eye_close.vue'
import EyeOpen from '@/components/icon/eye_open.vue'
import Search from '@/components/icon/search.vue'
import { get, post } from '../../utils/request'
import { productListNameMapping } from '../../utils/mapping'

const { proxy } = getCurrentInstance()
const active = ref('directory')
const setFrequency = ref(false)
const deleteDomainDialog = ref(false)
const loading = ref(true)
const syncTime = ref()
const rotate = ref(false)
const resetTableHeader = ref(false)
const deleteDirectoryDialog = ref(false)
const openVerifyDialog = ref(false)
const openBindDialog = ref(false)
const verify = ref(false)
const domainId = ref('')
const tag = ref('dns')
const option = ref('1')
const userDomain = ref('')
const verificationPass = ref(false)
const verificationComplete = ref(false)
const verifyResult = ref(false)
const addDirectory = ref(false)
const directoryName = ref('')
const directoryNameError = ref('')
const domainError = ref('')
const directoryId = ref('')
const directorySetting = ref(false)
const editConfig = ref(false)
const passwordType = ref(false)
const scopeOption = ref('1')
const dnsContent = ref('')
const usableDomain = ref([])
const openUnbindDialog = ref(false)
const createdDirectory = ref(false)
const ruleForm = ref()
const microsoftList = ref([])
const domainTable = ref()
const isDisable = ref(true)
const groupIds = ref([])
const size = ref(5)
const microsoftTotal = ref(0)
const currentPage = ref(1)
const microsoftDialog = ref(false)
const disableBind = ref(true)
const isCreate = ref(false)
const queryString = ref('')
const formData = ref({
        appId: '',
        directoryId: '',
        secret: '',
        productList: [{
          productId: '',
          licenseNumber: ''
        }]
      })
const productList = ref([])
const rules = ref({
        appId: [
          { required: true,  message: 'Illegal entry of application ID.', trigger: [''] }
        ],
        directoryId: [
          { required: true, message: 'Illegal entry of directory ID.', trigger: [''] }
        ],
        secret: [
          { required: true, message: 'Illegal entry of application password.', trigger: [''] }
        ]
      })
const options = ref([
  {
    value: '0',
    label: 'Sync now'
  },
  {
    value: '1',
    label: 'Every hour'
  },
  {
    value: '2',
    label: 'Every day',
    children: [
      {
        value: '00:00',
        label: '00:00'
      },
      {
        value: '01:00',
        label: '01:00'
      },
      {
        value: '02:00',
        label: '02:00'
      },
      {
        value: '03:00',
        label: '03:00'
      },
      {
        value: '04:00',
        label: '04:00'
      },
      {
        value: '05:00',
        label: '05:00'
      },
      {
        value: '06:00',
        label: '06:00'
      },
      {
        value: '07:00',
        label: '07:00'
      },
      {
        value: '08:00',
        label: '08:00'
      },
      {
        value: '09:00',
        label: '09:00'
      },
      {
        value: '10:00',
        label: '10:00'
      },
      {
        value: '11:00',
        label: '11:00'
      },
      {
        value: '12:00',
        label: '12:00'
      },
      {
        value: '13:00',
        label: '13:00'
      },
      {
        value: '14:00',
        label: '14:00'
      },
      {
        value: '15:00',
        label: '15:00'
      },
      {
        value: '16:00',
        label: '16:00'
      },
      {
        value: '17:00',
        label: '17:00'
      },
      {
        value: '18:00',
        label: '18:00'
      },
      {
        value: '19:00',
        label: '19:00'
      },
      {
        value: '20:00',
        label: '20:00'
      },
      {
        value: '21:00',
        label: '21:00'
      },
      {
        value: '22:00',
        label: '22:00'
      },
      {
        value: '23:00',
        label: '23:00'
      }
    ]
  }
])
const tableData = ref([])
const domain = ref([])
const isUpdate = ref(false)
const productError = ref('')
const groupNameList = ref('')
const multipleTable = ref()
const syncLoading = ref(false)
onMounted(() => {
  getDirectoryList()
  getDNSFile()
  getProductList()
})
// 标签切换清空输入框值
watch(() => addDirectory.value, (nextValue, oldValue) => {
  if (!addDirectory.value) {
    directoryName.value = ''
    directoryNameError.value = ''
  }
})
// 监听绑定域按钮是否可用
watch(() => domainId.value, (nextValue, oldValue) => {
  if (domainId.value) {
    disableBind.value = false
  } else {
    disableBind.value = true
  }
})
// 监听绑定域按钮是否可用
watch(() => openVerifyDialog.value, (nextValue, oldValue) => {
  if (!openVerifyDialog.value) {
    domainError.value = ''
  }
})
// 监听点击返回清空错误
watch(() => directorySetting.value, (nextValue, oldValue) => {
  if (!directorySetting.value) {
    ruleForm.value.clearValidate(['appId', 'directoryId', 'secret'])
    productError.value = ''
    formData.value.productList = [{
      productId: '',
      licenseNumber: ''
    }]
    groupIds.value = []
    groupNameList.value = ''
    microsoftList.value = []
  }
})
// 获取DNS文件内容
const getDNSFile = async () => {
  const { data: { result } } = await get('/pdf-tech/domain/getDNSTxt')
  dnsContent.value = result
}
// 获取DNS文件
const downHTTPSFile = async () => {
  const { data } = await get('/pdf-tech/domain/getHttpTxt')
  // 要下载的字符串内容
  const content = data
  // 文件名
  const fileName = "PDFTech-Editor-domain-verification.txt"
  // 调用函数进行下载
  downloadTxtFile(content, fileName)
}
// 下载DNS文件内容
const downloadTxtFile = (textContent, fileName) => {
  // 创建一个 Blob 对象，用于存储文本内容
  const blob = new Blob([textContent], { type: 'text/plain' })
  // 创建一个临时 URL，指向该 Blob 对象
  const url = window.URL.createObjectURL(blob)
  // 创建一个 <a> 元素用于下载
  const a = document.createElement('a')
  a.href = url
  a.download = fileName
  // 将 <a> 元素添加到页面中并触发点击事件进行下载
  document.body.appendChild(a)
  a.click()
  // 下载完成后移除 <a> 元素和临时 URL
  document.body.removeChild(a)
  window.URL.revokeObjectURL(url)
}
// 获取目录列表
const getDirectoryList = async () => {
  try {
    const { data } = await get('/pdf-tech/directory/list')
    loading.value = false
    tableData.value = data.result
  } catch (error) {
    console.log(error)
  }
}
// 获取域列表
const getDomainList = async () => {
  loading.value = true
  try {
    const { data } = await get('/pdf-tech/domain/list')
    if (active.value === 'directory') {
      usableDomain.value = []
      data.result.forEach((element) => {
        if (Number(element.verified)) {
          usableDomain.value.push(element)
        }
      })
    }
    // 判断是否有可用域
    let i = 0
    usableDomain.value.forEach(item => {
      if (!Number(item.used)) {
        i++
      }
    })
    if (!i || !domainId.value) {
      disableBind.value = true
    } else {
      disableBind.value = false
    }
    loading.value = false
    domain.value = data.result
  } catch (error) {
    console.log(error)
  }
}
// 移除域名
const deleteDomain = async () => {
  try {
    const { data } = await post('/pdf-tech/domain/delete?domainId=' + domainId.value)
    if (data.code === 200) {
      proxy.$message({
        duration: 5000,
        message: 'Domain has been removed.',
        type: 'success'
      })
    } else {
      proxy.$message({
        duration: 5000,
        message: data.msg,
        type: 'error'
      })
    }
    deleteDomainDialog.value = false
    getDomainList()
  } catch (error) {
    console.log(error)
  }
}
// 刷新表单
const refresh = () => {
  loading.value = true
  if (active.value === 'directory') {
    getDirectoryList()
  } else {
    getDomainList()
  }
  rotate.value = true
  setTimeout(() => {
    rotate.value = false
    resetTableHeader.value =! resetTableHeader.value
  }, 1000)
  resetTableHeader.value =! resetTableHeader.value
}
// 复制内容
const copy = () => {
  const content = dnsContent.value
  if (navigator.clipboard) {
    // clipboard api 复制
    navigator.clipboard.writeText(content)
      .then(() => {
        proxy.$message({
          duration: 5000,
          message: 'Copy Successfully',
          type: 'success'
        })
      }).catch((error) => {
        proxy.$message({
          duration: 5000,
          message: 'Copy Fail',
          type: 'error'
        })
      })
  } else {
    let textarea = document.createElement('textarea')
    document.body.appendChild(textarea)
    // 隐藏此输入框
    textarea.style.position = 'fixed'
    textarea.style.clip = 'rect(0 0 0 0)'
    textarea.style.top = '10px'
    // 赋值
    textarea.value = content
    // 选中
    textarea.select()
    // 复制
    document.execCommand('copy', true)
    // 移除输入框
    document.body.removeChild(textarea)
    proxy.$message({
      duration: 5000,
      message: 'Copy Success!',
      type: 'success'
    })
  }
}
// 添加目录
const addDirectoryFnc = async () => {
  if (directoryName.value) {
    try {
      const { data } = await post('/pdf-tech/directory/create', { name: directoryName.value })
      if (data.code === 200 && data.msg === 'success') {
        proxy.$message({
          duration: 5000,
          message: 'Directory created successfully!',
          type: 'success'
        })
        addDirectory.value = false
        getDirectoryList()
        directoryName.value = ''
        directoryId.value = data.result.directoryId
        createdDirectory.value = true
      } else {
        directoryNameError.value = 'Directory created failed. Directory name is exist.'
      }
    } catch (error) {
      console.log(error)
    }
  } else {
    directoryNameError.value = 'Please enter a directory name.'
  }
}
// 更新目录
const updateDirectoryFnc = async () => {
  if (directoryName.value) {
    try {
      const { data } = await post('/pdf-tech/directory/update', { name: directoryName.value, directoryId: directoryId.value })
      if (data.code === 200 && data.msg === 'success') {
        proxy.$message({
          duration: 5000,
          message: 'Directory update successfully!',
          type: 'success'
        })
        addDirectory.value = false
        getDirectoryList()
        directoryName.value = ''
      } else {
        directoryNameError.value = 'Directory update failed. Directory name is exist.'
      }
    } catch (error) {
      console.log(error)
    }
  } else {
    directoryNameError.value = 'Please enter a directory name.'
  }
}
// 添加或验证域名
const handleDomain = async () => {
  if (verify.value) {
    // 验证域名
    try {
      const { data } = await post('/pdf-tech/domain/verify?domainId=' + domainId.value + '&type=' + option.value)
      if (data.code === 200) {
        proxy.$message({
          duration: 5000,
          message: 'Domain verification successful!',
          type: 'success'
        })
      } else if (data.code === 700 && data.msg === 'No domain name resolution record found.') {
        proxy.$message({
          duration: 5000,
          message: 'No domain resolution record found.',
          type: 'error'
        })
      } else if (data.code === 700 && data.msg === 'File does not exist.') {
        proxy.$message({
          duration: 5000,
          message: 'File does not exist.',
          type: 'error'
        })
      } else {
        proxy.$message({
          duration: 5000,
          message: data.msg,
          type: 'error'
        })
      }
      openVerifyDialog.value = false
      getDomainList()
    } catch (error) {
      console.log(error)
    }
  } else {
    if (userDomain.value && !domainError.value) {
      // 添加域名
      try {
        const { data } = await post('/pdf-tech/domain/create?verifyType=' + option.value + '&name=' + userDomain.value)
        if (data.code === 200) {
          openVerifyDialog.value = false
          getDomainList()
          proxy.$message({
            duration: 5000,
            message: 'Add domain successfully.',
            type: 'success'
          })
        } else {
          domainError.value = 'Domain name already exist. Please change to another one.'
        }
      } catch (error) {
        console.log(error)
      }
    } else if (domainError.value) {
      return
    } else {
      domainError.value = 'Please enter a domain name.'
    }
  }
}
// 打开删除目录弹框
const openDeleteDirectory = (val) => {
  directoryId.value = val
  deleteDirectoryDialog.value = true
}
// 移除目录
const deleteDirectory = async () => {
  try {
    const { data } = await post('/pdf-tech/directory/delete?directoryId=' + directoryId.value)
    if (data.code === 200 && data.msg === 'success') {
      proxy.$message({
        duration: 5000,
        message: 'Directory Removed Successfully',
        type: 'success'
      })
      getDirectoryList()
      deleteDirectoryDialog.value = false
    } else {
      proxy.$message({
        duration: 5000,
        message: data.msg,
        type: 'error'
      })
    }
  } catch (error) {
    console.log(error)
  }

}
// 绑定域名
const bindDomain = async () => {
  if (disableBind.value) return
  try {
    const { data } = await post('/pdf-tech/domain/bind?directoryId=' + directoryId.value + '&domainId='+ domainId.value)
    if (data.code === 200) {
      proxy.$message({
        duration: 5000,
        message: 'Success',
        type: 'success'
      })
    } else {
      proxy.$message({
        duration: 5000,
        message: data.msg,
        type: 'error'
      })
    }
    getDirectoryList()
    openBindDialog.value = false
  } catch (error) {
    console.log(error)
  }
}
// 域名是否可用
const selectable = (row,index) => {
  if (Number(row.used)) {
    return false
  } else {
    return true
  }
}
// 解绑域名
const unbindDomain = async (row,index) => {
  try {
    const { data } = await post('/pdf-tech/domain/unBind?domainId=' + domainId.value)
    if (data.code === 200) {
      proxy.$message({
        duration: 5000,
        message: 'Success',
        type: 'success'
      })
    } else {
      proxy.$message({
        duration: 5000,
        message: data.msg,
        type: 'error'
      })
    }
    getDirectoryList()
    openUnbindDialog.value = false
  } catch (error) {
    console.log(error)
  }
}
// 添加同步设置
const SyncSetting = () => {
  if (Number(scopeOption.value) === 2 && !groupIds.value.length) {
    microsoftDialog.value = true
    getMicrosoftList()
  } else {
    ruleForm.value.validate(async (valid) => {
      if (valid) {
        let i = 0
        formData.value.productList.forEach((item, index) => {
          if (!item.licenseNumber || !item.productId) {
            i++
          }
        })
        if (i && isCreate.value) {
          productError.value = 'Please fill in the missing fields.'
        } else {
          let reqData = {
            "directoryId": directoryId.value,
            "applicationID": formData.value.appId,
            "clientSecrets": formData.value.secret,
            "tenantId": formData.value.directoryId,
            "scope": scopeOption.value,
            "productList": formData.value.productList
          }
          if (Number(scopeOption.value) === 2) {
            let arr = []
            groupIds.value.forEach(item => {
              arr.push(item.id)
            })
            reqData.groupIds = arr
          }
          const { data } = await post('/pdf-tech/directory/addSyncSettings', reqData)
          if (data.code === 200) {
            proxy.$message({
              duration: 5000,
              message: 'Configuration Successful',
              type: 'success'
            })
            loading.value = true
            getDirectoryList()
            directorySetting.value = false
          } else {
            proxy.$message({
              duration: 5000,
              message: data.msg,
              type: 'error'
            })
          }
        }
      }
    })
  }
}
// 清除表单错误
const clearError = async (val) => {
  ruleForm.value.clearValidate([val])
}
// 获取所有产品
const getProductList = async () => {
  const { data } = await get('/pdf-tech/product/listWithAdmin')
  if (data.code === 200) {
    const list = productListNameMapping(data.result)
    list.forEach(item => {
      productList.value.push({
          label: item.name,
          value: item.id,
          disabled: false
      })
    })
  }
}
// 已经选择过的产品不能选
const changeSelect = () => {
  let idList = []
  formData.value.productList.forEach((item) => {
    idList.push(item.productId)
  })
  productList.value.forEach((items) => {
    items.disabled = idList.includes(items.value)
  })
}
// 获取微软组列表
const getMicrosoftList = async () => {
  const { data } = await get('/pdf-tech/directory/getGroupList?clientId=' + formData.value.appId + '&tenantId=' + formData.value.directoryId + '&clientSecret=' + formData.value.secret + '&queryString=' + queryString.value)
  loading.value = false
  microsoftList.value = data.result
  microsoftTotal.value = data.result.length
}
// 添加域只能单选
const handleSelectionChange = (val) => {
  if (val.length > 1) {
    domainTable.value.clearSelection()
    domainTable.value.toggleRowSelection(val[val.length-1])
    domainId.value = val[val.length-1].domainId
  } else if (val.length === 1) {
    domainId.value = val[0].domainId
  }
}
// 未添加域不能添加目录
const openSync = (val) => {
  if (val) {
    directorySetting.value = true
    isDisable.value = false
  } else {
    createdDirectory.value = true
  }
}
// 选择微软组
const handleSelectionChanges = (val) => {
  groupIds.value = val
}
// 同步
const synchronize = async () => {
  const { data } = await post('/pdf-tech/directory/syncSetting', {
   time: syncTime.value[1],
   type: syncTime.value[0],
   directoryId: directoryId.value
  })
  if (data.code === 200) {
    setFrequency.value = false
    syncTime.value = ''
    proxy.$message({
      duration: 5000,
      message: 'Synchronize Success',
      type: 'success'
    })
  } else {
    proxy.$message({
      duration: 5000,
      message: data.msg,
      type: 'error'
    })
  }
  getDirectoryList()
}
// 目录下是否有域名
const hasDomain = (val) => {
  if (val.domains.length) return
  openBindDialog.value = true
  getDomainList()
  directoryId.value = val.directoryId
}
// 域名是否验证
const isVerify = (val) => {
  domainId.value = val.domainId
  if (Number(val.verified)) {
    deleteDomainDialog.value = true
  } else {
    deleteDomain()
  }
}
// 校验域名是否合法
const checkout = () => {
  const pattern = /.+\..+/
  if (!pattern.test(userDomain.value)) {
    domainError.value = 'Invalid domain format.'
  } else {
    domainError.value = ''
  }
}
// 拼接选择组名字
const getGroupNameList = () => {
  const arr = []
  groupNameList.value = ''
  groupIds.value.forEach((item) => {
    arr.push(item.displayName)
  })
  groupNameList.value = arr.join(', ')
}
// 获取之前同步时间
const daySync = (val) => {
  if (val.time && val.type === '2') {
    syncTime.value = [val.type, val.time]
  } else {
    syncTime.value = val.type
  }
}
// 重新打开选择微软弹窗自动选中
const getRowKeys = (row) => {
  return row.id
}
// 是否显示产品设置
const handleDisable = () => {
  if (isDisable.value) {
    addDirectory.value = false
  } else isDisable.value = true
}
// 修改同步设置赋值
const syncSettings = async (val) => {
  directorySetting.value = true
  directoryId.value = val.directoryId
  formData.value.appId = val.applicationId
  formData.value.directoryId = val.tenantId
  formData.value.secret = val.clientSecrets
  isDisable.value = true
  isCreate.value = false
  scopeOption.value = val.scope
  if (val.msGroupIds && val.scope === '2') {
    groupIds.value = []
    syncLoading.value = true
    const { data: { result } } = await get('/pdf-tech/directory/getGroupList?clientId=' + formData.value.appId + '&tenantId=' + formData.value.directoryId + '&clientSecret=' + formData.value.secret + '&queryString=' + queryString.value)
    microsoftList.value = result
    const uniqueGroupIds = new Set()
    microsoftList.value.forEach((item) => {
      val.msGroupIds.split(',').forEach((items) => {
        if (item.id === items) {
          // 将匹配的项添加到 Set 中
          uniqueGroupIds.add(item)
        }
      })
    })
    // 将 Set 转换为数组
    groupIds.value = Array.from(uniqueGroupIds)
    getGroupNameList()
    syncLoading.value = false
  }
}
// 打开选择微软组对话框
const openSelectDialog = () => {
  getMicrosoftList()
  loading.value = true
  microsoftDialog.value = true
  nextTick(() => {
    // 清空用户选项
    multipleTable.value.clearSelection()
    microsoftList.value.forEach((item) => {
      groupIds.value.forEach((items) => {
        if (item.id === items.id) {
          setTimeout(() => {
            multipleTable.value.toggleRowSelection(item, true)
          })
        }
      })
    })
  })
}
</script>

<template>
  <div class="font pb-40px">
    <h1 class="text-28px leading-40px mb-15px font-700">Directory Settings</h1>
    <div class="flex">
      <span class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px cursor-pointer" @click="active = 'directory'" :class="active === 'directory' && 'active'">Directory</span>
      <span class="flex justify-center bg-[#C6C9CC] rounded-t-8px items-center font-bold w-200px h-32px ml-8px cursor-pointer" @click="active = 'domains', getDomainList()" :class="active === 'domains' && 'active'">Domains</span>
    </div>
    <!-- 目录分签 -->
    <div v-show="active === 'directory'" class="bg-[#fff] card p-40px rounded-r-t-8px">
      <div v-show="!(addDirectory || directorySetting)">
        <div class="text-16px leading-20px font-bold mb-4px text-[#232A40]">Single Sign-on</div>
        <div class="py-4px text-[#808185] text-14px leading-20px mb-48px">Single sign-on allows your users to log in using your organization's identity provider to access all your applications.</div>
        <div class="flex justify-between mb-16px">
          <div class="text-16px leading-20px font-bold text-[#232A40] py-4px">Directory List</div>
          <div class="bg-[#1460F3] rounded-4px text-14px leading-20px text-white px-8px py-4px hover:bg-[#4380f5] cursor-pointer" @click="addDirectory = true, directoryName = '', isUpdate = false">Add Directory</div>
        </div>
        <el-table v-loading="loading" :data="tableData" style="width: 100%" :key="resetTableHeader">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="table-expand">
                <el-form-item label="Domains:">
                  <template v-if="props.row.domains.length">
                    <span v-for="(item, index) in props.row.domains" :key="index" class="text-12px leading-16px inline-flex items-center w-auto border-[#CCE4FF] rounded-4px bg-[#F4F8FC] border-1 border-[#CCE4FF] py-2px px-4px">
                      {{ item.domain }}<Close class="ml-8px cursor-pointer" @click.native="openUnbindDialog = true, domainId = item.domainId" />
                    </span>
                  </template>
                  <span v-else class="text-12px leading-16px text-[#808185]">No domain</span>
                </el-form-item>
                <el-form-item label="Status details:">
                  <span v-if="props.row.sync" class="text-12px leading-16px">
                    <div v-if="!Number(props.row.sync?.status)">Synchronizing users/groups</div>
                    <div v-else-if="Number(props.row.sync?.status) === 2">user/group sync:Last synced at: {{ props.row.sync.syncTime }}</div>
                    <div v-else>user/group sync:Last synced succeeded at:  {{ props.row.sync.syncTime }}</div>
                  </span>
                  <span v-else class="text-12px leading-16px">The directory configuration is incomplete</span>
                </el-form-item>
              </el-form>
              <!-- 解绑弹窗 -->
              <el-dialog :visible.sync="openUnbindDialog" width="556px" top="30vh" center :show-close="false">
                <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left flex justify-between items-center">Remove Domain <CloseBig class="cursor-pointer" @click.native="openUnbindDialog = false" /></div>
                <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Are you sure you want to remove this Domain from the directory? After deletion, we will transfer the users that you have synchronized to the Domain users list. They still able to access to this site and collaborate with your team.</div>
                <div class="flex w-full mt-24px">
                  <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="openUnbindDialog = false">Cancel</div>
                  <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)] hover:bg-[#4380f5] cursor-pointer" @click="unbindDomain">Remove</div>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="Directory Name" min-width="100px">
          </el-table-column>
          <el-table-column prop="validFlag" min-width="180px">
            <div slot="header" class="flex items-center">
              Status
              <el-tooltip class="item" effect="dark" content="Refresh to get the last status." placement="top">
                <Refresh class="ml-10px cursor-pointer" :class="rotate ? 'rotate360' : ''" @click.native="refresh" />
              </el-tooltip>
            </div>
            <template slot-scope="scope">
              <div v-if="!scope.row.domains.length">No domain</div>
              <div v-else-if="scope.row.domains.length && !scope.row.sync">Active</div>
              <div v-else-if="scope.row.sync">
                <div v-if="!Number(scope.row.sync?.status)">Synchronizing...</div>
                <div v-else-if="Number(scope.row.sync?.status) === 2">Last synced at: {{ scope.row.sync.syncTime }}<br> Status:Fail</div>
                <div v-else>Last synced succeeded at: {{ scope.row.sync.syncTime }}</div>
              </div>
              <div v-else>The directory configuration is incomplete</div>
            </template>
          </el-table-column>
          <el-table-column label="Actions" min-width="188px">
            <template slot-scope="scope">
              <div class="flex">
                <div class="h-20px rounded-4px text-center text-14px leading-20px"
                  @click="hasDomain(scope.row)" :class="scope.row.domains.length ? 'text-[#979898] cursor-not-allowed' : 'text-[#1460F3] cursor-pointer hover:text-[#0C3A92]'">
                  Add Domain
                </div>
                <span class="text-[#D9D9D9]">丨</span>
                <div v-if="!scope.row.domains.length" class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer hover:text-[#0C3A92]"
                  @click="openSync(scope.row.domains.length), directoryId = scope.row.directoryId, formData.appId = scope.row.applicationId, formData.directoryId = scope.row.tenantId, formData.secret = scope.row.clientSecrets, isCreate = true">
                  Add Sync
                </div>
                <div v-else-if="Number(scope.row.sync?.status) === 1 || Number(scope.row.sync?.status) === 2" class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer hover:text-[#0C3A92]"
                  @click="setFrequency = true, directoryId = scope.row.directoryId, daySync(scope.row.scheduleSetting)">
                  Synchronize
                </div>
                <div v-else-if="Number(scope.row.sync?.status) === 0" class="text-14px leading-20px text-[#1460F3] cursor-pointer">Synchronizing...</div>
                <div v-else class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer hover:text-[#0C3A92]"
                  @click="openSync(scope.row.domains.length), directoryId = scope.row.directoryId, formData.appId = scope.row.applicationId, formData.directoryId = scope.row.tenantId, formData.secret = scope.row.clientSecrets, isCreate = true">
                  Add Sync
                </div>
                <span class="text-[#D9D9D9]">丨</span>
                <div class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer">
                  <el-dropdown>
                    <span class="el-dropdown-link flex items-center text-[#1460F3] hover:text-[#0C3A92]">More <PullDown class="ml-4px" /></span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <button type="submit" :disabled="scope.row.sync?.status === '0'" @click="addDirectory = true, directoryName = scope.row.name, isUpdate = true, directoryId = scope.row.directoryId" :class="scope.row.sync?.status === '0' && 'text-[#979898] cursor-not-allowed'">Directory Settings</button>
                      </el-dropdown-item>
                      <template v-if="scope.row.sync && scope.row.domains?.length">
                        <el-dropdown-item>
                          <button type="submit" @click="syncSettings(scope.row)">Sync Settings</button>
                        </el-dropdown-item>
                      </template>
                      <el-dropdown-item>
                        <button type="submit" :disabled="scope.row.sync?.status === '0'" @click="openDeleteDirectory(scope.row.directoryId)" :class="scope.row.sync?.status === '0' && 'text-[#979898] cursor-not-allowed'">Remove Directory</button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <!-- 给目录添加域名弹窗 -->
              <el-dialog :visible.sync="openBindDialog" width="556px" top="30vh" center class="addDomain">
                <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left flex justify-between items-center">Add Domain <CloseBig class="cursor-pointer" @click.native="openBindDialog = false" /></div>
                <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Select the domain to add to the directory</div>
                <!-- 可用域名列表 -->
                <el-table v-loading="loading" ref="domainTable" class="signSelect" :data="usableDomain" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
                  <el-table-column prop="domain" label="Domain" min-width="100px">
                  </el-table-column>
                  <el-table-column prop="status" label="Status" min-width="60px">
                    <template slot-scope="scope">
                      <div class="text-14px leading-20px flex items-center" :class="Number(scope.row.used) ? 'text-[#FFAE49]' : 'text-[#41CC00]'">
                        <template v-if="Number(scope.row.used)">
                          Occupied
                        </template>
                        <template v-else>
                          Verified
                        </template>
                      </div>
                    </template>
                  </el-table-column>
                  <div slot="empty" class="flex flex-col items-center py-12px">
                    <Empty class="mb-8px" />
                    <p class="text-14px leading-20px">No Data</p>
                    <div class="mt-12px rounded-8px px-52px py-10px bg-[#1460F3] text-white text-16px leading-20px font-bold cursor-pointer" @click="active = 'domains', openBindDialog = false, getDomainList()">Verify Domain</div>
                  </div>
                </el-table>
                <!-- 按钮 -->
                <div v-show="usableDomain.length" class="flex w-full mt-24px">
                  <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="openBindDialog = false">Cancel</div>
                  <div class="rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)]" @click="bindDomain()"
                    :class="disableBind ? 'bg-[#1460F333] cursor-not-allowed' : 'bg-[#1460F3] hover:bg-[#4380f5] cursor-pointer'">Add</div>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
          <div slot="empty" class="flex flex-col items-center py-12px">
            <Empty class="mb-8px" />
            <p class="text-14px leading-20px">No Data</p>
          </div>
        </el-table>
      </div>
      <!-- 添加目录模块 -->
      <div v-show="addDirectory" class="addDirectory">
        <div @click="addDirectory = false" class="flex items-center text-[#505258] text-14px leading-20px py-2px mb-12px cursor-pointer"><Back class="mr-5px" />Back</div>
        <div class="text-[#232A40] text-16px leading-20px mb-16px font-bold">Set directory name</div>
        <div class="text-[#808185] text-14px leading-20px mb-4px">Create a directory by naming it and selecting an authentication method for the directory.</div>
        <el-input v-model="directoryName" placeholder="Enter a directory name" class="text-[#808185] text-14px leading-20px" :class="directoryNameError && 'error'" @focus="directoryNameError = ''"></el-input>
        <div v-show="directoryNameError" class="mt-8px text-[#FF5054] text-12px leading-16px">{{ directoryNameError }}</div>
        <div class="flex w-full mt-24px">
          <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="addDirectory = false">Cancel</div>
          <div v-show="!isUpdate" class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="addDirectoryFnc">Create</div>
          <div v-show="isUpdate" class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="updateDirectoryFnc">Update</div>
        </div>
      </div>
      <!-- 添加同步设置模块 -->
      <div v-show="directorySetting" v-loading="syncLoading">
        <div @click="directorySetting = false" class="flex items-center text-[#505258] text-14px leading-20px py-2px mb-12px cursor-pointer"><img src="@/assets/images/back.png" width="12" height="12" class="mr-5px" />Back</div>
        <div class="text-[#232A40] text-16px leading-20px mb-16px font-bold">User Sync Configuration</div>
        <div class="text-[#232A40] font-bold test-16px leading-20px mt-16px mb-4px">Connector:</div>
        <div class="p-12px mb-16px">
          <div class="text-[#232A40] test-16px leading-20px mb-4px">Azure AD</div>
          <div class="text-[#808185] test-14px leading-20px mt-16px">
            The sync source cannot be changed. If you want to change the sync source, you need to delete the directory first. All the configuration with the sync source will be deleted. The previously synced user and user groups will be kept inside the Admin Console.
          </div>
        <div class="text-[#232A40] font-bold test-16px leading-20px mt-16px mb-4px">Connector Settings</div>
          <div class="p-12px mb-16px">
            <el-form :model="formData" ref="ruleForm" :rules="rules" label-position="top" label-width="100px">
              <el-form-item prop="appId" class="required">
                <span slot="label" class="label flex items-center">Application ID<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span>
                  <el-tooltip v-show="!isDisable" class="item" effect="dark" content="This is the ID of your application in the Microsoft Application Portal." placement="top">
                    <Help class="ml-4px" />
                  </el-tooltip>
                </span>
                <el-input :disabled="isDisable" v-model="formData.appId" placeholder="Please enter Application ID" class="max-w-400px" @focus="clearError('appId')"></el-input>
              </el-form-item>
              <el-form-item prop="directoryId" class="required">
                <span slot="label" class="label flex items-center">Directory (tenant) ID<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span>
                  <el-tooltip v-show="!isDisable" class="item" effect="dark" content="This tenant ID of the tenant with the directory that you are trying to synchronize with this connector." placement="top">
                    <Help class="ml-4px" />
                  </el-tooltip>
                </span>
                <el-input :disabled="isDisable" v-model="formData.directoryId" placeholder="Please enter Directory ID" class="max-w-400px" @focus="clearError('directoryId')"></el-input>
              </el-form-item>
              <el-form-item prop="secret" class="required">
                <span slot="label" class="label flex items-center">Application Secret<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span>
                  <el-tooltip v-show="!isDisable" class="item" effect="dark" placement="top">
                    <div slot="content">This application secret generated for your application in the Microsoft Application Portal.<br> It's only visible once. If you have forgotten this secret or you have problems with it during the sync try to create a new one and copy the value to this field.</div>
                    <Help class="ml-4px" />
                  </el-tooltip>
                </span>
                <div class="flex items-center">
                  <el-input :disabled="isDisable" v-model="formData.secret" class="max-w-400px" placeholder="Please enter Application Secret" :type="passwordType ? '' : 'password'" @focus="clearError('secret')"></el-input>
                  <span v-show="formData.password !== '' && !isDisable" class="ml-[-22px] z-2 inline-block cursor-pointer"
                    :class="passwordType ? 'eye-open' : 'eye-close'" @click="passwordType = !passwordType">
                    <EyeOpen v-show="passwordType" />
                    <EyeClose v-show="!passwordType" />
                  </span>
                </div>
              </el-form-item>
              <!-- 新建同步设置产品分配弹框 -->
              <template v-if="isCreate">
                <div class="text-[#232A40] text-16px leading-20px font-bold my-16px">Product Settings:</div>
                <div class="w-600px border-1 border-[#1460F3] rounded-8px p-12px pb-0 mb-24px relative" v-for="(item, index) in formData.productList" :key="index" :class="index === formData.productList.length - 1 && 'mb-0'">
                  <img v-show="formData.productList.length > 1 && !isDisable" src="@/assets/images/minus.png" alt="minus" class="w-24px h-24px absolute top-[-12px] right-[-12px] cursor-pointer" @click.prevent="formData.productList.splice(index, 1)">
                  <el-form-item>
                    <template slot="label">Product<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span></template>
                    <select v-model="item.productId"
                      :disabled="isDisable"
                      placeholder="Project"
                      class="w-[100%] !h-40px !pl-12px focus-visible:(outline-none)"
                      :class="{ '!text-[#232A40]': item.productId !== '' }"
                      @change="changeSelect(), productError = ''">
                      <option value="">Select Assigned Product</option>
                      <option v-for="item in productList" :key="item.value" :value="item.value" :disabled="item.disabled">
                        {{ item.label }}
                      </option>
                    </select>
                  </el-form-item>
                  <el-form-item label="Amount of Team License" class="!mb-22px">
                    <el-input :disabled="isDisable" v-model="item.licenseNumber" @input="productError = ''" placeholder="Enter number of team license"></el-input>
                  </el-form-item>
                </div>
                <div v-show="productError" class="mt-8px text-[#FF5054] text-12px leading-16px">{{ productError }}</div>
                <div v-show="!isDisable" class="w-600px h-48px mt-24px border-1 border-dashed border-[#1460F3] rounded-8px flex justify-center items-center">
                  <img src="@/assets/images/add.png" alt="add" class="w-24px h-24px cursor-pointer" @click="formData.productList.push({ licenseNumber: '', productId: '', disabled: false })">
                </div>
              </template>
              <div class="text-[#232A40] text-16px leading-20px font-bold my-16px">Sync Scope Settings:</div>
              <el-form-item class="required">
                <span class="label flex items-center">Scope<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span>
                  <el-tooltip v-show="!isDisable" class="item" effect="dark" content="Define the groups and users that you would like to provision to Admin Console by selecting the desired values in Scope. It is worth noting that if you choose to sync all/assigned groups and users, the wait time will be long." placement="top">
                    <Help class="ml-4px" />
                  </el-tooltip>
                </span>
                <el-select :disabled="isDisable" v-model="scopeOption" class="w-400px">
                  <el-option value="1" label="Sync all users"></el-option>
                  <el-option value="2" label="Sync only assigned groups and users"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div v-show="Number(scopeOption) === 2">
              <div class="text-[#232A40] text-14px leading-20px mb-8px">Class range<span class="text-[#FF5054] text-18px ml-2px align-bottom">*</span></div>
              <button type="submit" @click="openSelectDialog"
                :class="isDisable && '!bg-[#1460F333] !text-white border-none'" :disabled="isDisable"
                class="w-172px h-32px flex justify-center font-600 items-center border-1 border-[#1460F3] text-[#1460F3] cursor-pointer rounded-8px">
                Select group range
              </button>
              <div class="flex mt-12px">
                <el-input :disabled="true" v-model="groupNameList" class="max-w-400px"></el-input>
              </div>
            </div>
            <div v-show="isDisable" class="flex w-full mt-24px">
              <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="isDisable = false">Edit</div>
            </div>
            <div v-show="!isDisable" class="flex w-full mt-24px">
              <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="handleDisable">Cancel</div>
              <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="SyncSetting">Authorize</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 域名分签 -->
    <div v-show="active === 'domains'" class="p-40px bg-white">
      <div class="text-[#232A40] text-16px leading-20px font-700 mb-4px">Domain Settings</div>
      <div class="border-b-2px border-[#F1F1F2] text-[#404653] flex mb-12px">
        <div class="py-12px tet-14px leading-20px mb-[-2px] cursor-pointer mr-20px" :class="tag === 'dns' && 'border-b-2px border-[#1460F3] text-[#065CBC]'" @click="tag = 'dns'">DNS</div>
        <div class="py-12px tet-14px leading-20px mb-[-2px] cursor-pointer" :class="tag === 'https' && 'border-b-2px border-[#1460F3] text-[#065CBC]'" @click="tag = 'https'">HTTPS</div>
      </div>
      <div v-show="tag === 'dns'">
        <div class="mt-8px text-16px leading-20px text-[#232A40]">1. Add the .txt record below to the DNS host of the domain(s) you want to verify.</div>
        <div class="flex mt-12px">
          <div class="bg-[#F1F1F2] rounded-4px border-1px border-[#E2E3E5] px-12px py-6px text-[#505258] whitespace-nowrap">{{ dnsContent }}</div>
          <div class="border-1px border-[#1460F3] py-6px px-8px text-[#1460F3] rounded-4px ml-8px cursor-pointer" @click="copy">Copy</div>
        </div>
        <div class="my-4px text-[#B2B7BA] text-14px leading-20px">The same record can be used for multiple domains.</div>
        <div class="text-[#232A40] text-14px leading-20px mb-24px">DNS changes can take up to 72 hours to update depending on your DNS host.</div>
        <div class="text-16px leading-20px text-[#232A40]">2. After adding the .txt record, click Verify Domain below.</div>
        <div class="mt-12px text-[#B2B7BA] text-14px leading-20px">If you have difficulties with this process, ask your IT department for help.</div>
      </div>
      <div v-show="tag === 'https'">
        <div class="mt-8px text-16px leading-20px text-[#232A40]">1. Download the verification file.</div>
        <div class="flex mt-12px text-14px leading-20px">
          <div class="py-4px text-[#505258]" ref="copyText">PDF-Tech-Editor-domain-verification.txt</div>
          <div class="border-1px border-[#1460F3] py-4px px-8px text-[#1460F3] rounded-4px ml-8px hover:bg-[#e8effe] cursor-pointer" @click="downHTTPSFile">Download</div>
        </div>
        <div class="my-4px text-[#808185] text-14px leading-20px">The same file can be used for multiple domains. It includes information that will allow us to verify that you own the domain.</div>
        <div class="text-16px leading-20px text-[#232A40]">2. Upload the verification file to the root folder of your domain's website.</div>
        <div class="mt-12px text-[#808185] text-14px leading-20px">If you have difficulties with this process, ask your IT department for help.</div>
      </div>
      <div class="mt-36px flex justify-between mb-16px">
        <div class="text-16px leading-20px text-[#232A40] font-bold py-4px">Verified Domains List</div>
        <div class="bg-[#1460F3] text-white text-14px leading-20px py-4px px-8px rounded-4px hover:bg-[#4380f5] cursor-pointer" @click="openVerifyDialog = true, verify = false, userDomain = '', verify = false">Add Domain</div>
      </div>
      <!-- 域名表单 -->
      <el-table v-loading="loading" :data="domain" style="width: 100%" :key="resetTableHeader">
        <el-table-column prop="domain" label="Domain" min-width="100px">
        </el-table-column>
        <el-table-column prop="status" min-width="160px">
          <div slot="header" class="flex items-center">
            Status
            <el-tooltip class="item" effect="dark" content="Refresh to get the last status." placement="top">
              <Refresh class="ml-10px cursor-pointer" :class="rotate ? 'rotate360' : ''" @click.native="refresh" />
            </el-tooltip>
          </div>
          <template slot-scope="scope">
            <div class="text-14px leading-20px flex items-center" :class="Number(scope.row.verified) ? 'text-[#41CC00]' : 'text-[#808185]'">
              <span class="flex w-6px h-6px rounded-[50%] mr-8px" :class="Number(scope.row.verified) ? 'bg-[#41CC00]' : 'bg-[#808185]'"></span>{{ Number(scope.row.verified) ? 'Verified' : 'Unverified' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="verification" label="Verification" min-width="110px">
          <template slot-scope="scope">
            <div class="text-[#505258] text-14px leading-20px" v-if="scope.row.verifyType === '1'">DNS</div>
            <div class="text-[#505258] text-14px leading-20px" v-else>HTTPS</div>
          </template>
        </el-table-column>
        <el-table-column label="Actions" min-width="110px">
          <template slot-scope="scope">
              <div class="flex">
                <div v-if="!Number(scope.row.verified)" class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer"
                  @click="openVerifyDialog = true, verify = true, domainId = scope.row.domainId, userDomain = scope.row.domain">
                  Verify
                </div>
                <span v-if="!Number(scope.row.verified)" class="text-[#D9D9D9]">丨</span>
                <div class="h-20px rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer hover:text-[#0C3A92]"
                  @click="isVerify(scope.row)">
                  Remove
                </div>
              </div>
          </template>
        </el-table-column>
        <div slot="empty" class="flex flex-col items-center py-12px">
          <Empty class="mb-8px" />
          <p class="text-14px leading-20px">No Data</p>
        </div>
      </el-table>
    </div>
    <!-- 添加,验证域弹窗 -->
    <el-dialog :visible.sync="openVerifyDialog" width="556px" top="30vh" center :show-close="false" class="addDirectory">
      <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left flex justify-between items-center">{{ verify ? 'Verify Domain' : 'Add Domain' }}<CloseBig class="cursor-pointer" @click.native="openVerifyDialog = false" /></div>
      <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Complete the following details. We'll check for the record to verify your ownership of the domain.</div>
      <div class="text-[#232A40] text-16px leading-20px font-bold mb-12px w-full text-left w-full">Method:</div>
      <el-radio-group v-model="option">
        <el-radio label="1">TXT Record</el-radio>
        <el-radio label="2">HTTPS</el-radio>
      </el-radio-group>
      <div class="text-[#232A40] text-16px leading-20px font-bold mt-24px mb-12px w-full text-left w-full">Domain:</div>
      <el-input :disabled="verify" v-model="userDomain" :class="domainError && 'error'" @input="checkout" @blur="checkout" placeholder="Domain name" @focus="domainError = ''"></el-input>
      <div v-show="domainError" class="w-full text-left mt-8px text-[#FF5054] text-12px leading-16px ">{{ domainError }}</div>
      <div class="flex w-full mt-24px">
        <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="openVerifyDialog = false">Cancel</div>
        <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)] hover:bg-[#4380f5] cursor-pointer" @click="handleDomain">{{ verify ? 'Verify' : 'Confirm' }}</div>
      </div>
    </el-dialog>
    <!-- 移除域对话框 -->
    <el-dialog :visible.sync="deleteDomainDialog" width="556px" top="30vh" center :show-close="false">
      <h5 class="w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between items-center"><p>Remove Domain</p><CloseBig class="cursor-pointer" @click.native="deleteDomainDialog = false" /></h5>
      <p class="text-left mt-12px text-14px leading-20px text-[#808185]">
        Are you sure you want to remove this Domain? Please make sure that no user accounts are using this Domain name before you continue. After deletion, they will no longer have access to this site and won't be able to collaborate with your team.
      </p>
      <div slot="footer" class="dialog-footer flex justify-end">
        <el-button @click="deleteDomainDialog = false" class="!font-700">Cancel</el-button>
        <el-button type="primary" @click="deleteDomain" class="!font-700">Remove</el-button>
      </div>
    </el-dialog>
    <!-- 同步设置弹窗 -->
    <el-dialog :visible.sync="setFrequency" width="556px" top="30vh" center :show-close="false">
      <div class="text-left text-24px leading-32px font-bold text-[#232A40] w-full flex justify-between items-center">Synchronize <CloseBig class="cursor-pointer" @click.native="setFrequency = false, syncTime = ''" /></div>
      <div class="text-left text-14px leading-20px text-[#808185] w-full mt-12px mb-24px">You can set the frequency of synchronization here</div>
      <div class="text-left text-16px leading-20px text-[#232A40] w-full mb-8px">synchronize</div>
      <el-cascader class="w-full h-40px" v-model="syncTime" :options="options"></el-cascader>
      <div class="flex w-full mt-40px">
        <div class="bg-white rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-[#1460F3] w-[calc(50%-8px)] border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="setFrequency = false, syncTime = ''">Cancel</div>
        <button type="submit" :disabled="!syncTime"
          :class="!syncTime && '!bg-[#1460F333] cursor-not-allowed'"
          class="bg-[#1460F3] rounded-8px text-16px leading-20px py-14px flex justify-center font-bold text-white w-[calc(50%-8px)] hover:bg-[#4380f5] cursor-pointer" @click="synchronize">
          Synchronize
        </button>
      </div>
    </el-dialog>
    <!-- 删除目录弹窗 -->
    <el-dialog :visible.sync="deleteDirectoryDialog" width="556px" top="30vh" center :show-close="false">
      <h5 class="text-left w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between items-center">Remove Directory<CloseBig class="cursor-pointer" @click.native="deleteDirectoryDialog = false" /></h5>
      <p class="text-left mt-12px mb-24px text-14px leading-20px text-[#808185]">
        Are you sure you want to remove this directory? After deletion, we will transfer the users that you have synchronized to the Domain users list. They can still access this site and collaborate with your team.
      </p>
      <div slot="footer" class="dialog-footer flex justify-end">
        <el-button @click="deleteDirectoryDialog = false" class="!font-700" >Cancel</el-button>
        <el-button type="primary" @click="deleteDirectory" class="!font-700">Remove</el-button>
      </div>
    </el-dialog>
    <!-- 创建目录后提醒弹窗 -->
    <el-dialog :visible.sync="createdDirectory" width="556px" top="30vh" center :show-close="false">
      <div class="text-[#232A40] text-24px leading-32px font-bold mb-12px w-full text-left flex justify-between items-center">Add Domain<CloseBig class="cursor-pointer" @click.native="createdDirectory = false" /></div>
      <div class="text-[#808185] text-14px leading-20px mb-24px w-full text-left">Add Domains to the directory to make the directory active. Otherwise, the directory cannot be used.</div>
      <div class="flex justify-end w-full">
        <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="createdDirectory = false">Cancel</div>
        <div class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px hover:bg-[#4380f5] cursor-pointer" @click="openBindDialog = true, createdDirectory = false, getDomainList()">Add Domain</div>
      </div>
    </el-dialog>
    <!-- 选择微软指定组 -->
    <el-dialog :visible.sync="microsoftDialog" width="556px" top="15vh" center :show-close="false">
      <h5 class="text-left w-full text-24px leading-32px font-bold text-[#232A40] flex justify-between items-center">Select Group Scope<CloseBig class="cursor-pointer" @click.native="microsoftDialog = false" /></h5>
      <p class="text-left mt-12px mb-24px text-14px leading-20px text-[#808185]">
        The system will synchronize all group structures and users under the group scope you select. If you cancel the group scope, the synchronized user group will not be updated.
      </p>
      <div class="scrollbar relative w-full p-24px flex flex-col items-center bg-[#F6F7F999] max-h-520px overflow-auto">
        <div class="w-full relative mb-12px">
          <el-input v-model="queryString" size="mini" clearable class="input-with-select" placeholder="Search user name or email" @clear="getMicrosoftList"></el-input>
          <button class="absolute top-8px right-8px" @click="getMicrosoftList"><Search /></button>
        </div>
        <el-table
          height="450"
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="Group is synchronizing..."
          :data="microsoftList"
          tooltip-effect="dark"
          :key="resetTableHeader"
          :row-key="getRowKeys"
          @select="handleSelectionChanges"
          @select-all="handleSelectionChanges"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column prop="displayName" label="Group Name" min-width="120px"></el-table-column>
          <el-table-column min-width="200px">
            <div slot="header" class="flex justify-end items-center text-14px leading-20px font-400 pr-8px text-[#808185]">
              Selected/Total:
              {{ groupIds.length }} / {{ microsoftTotal }}
            </div>
          </el-table-column>
          <div slot="empty" class="flex flex-col items-center py-12px">
            <Empty class="mb-8px" />
            <p class="text-14px leading-20px">No Data</p>
          </div>
        </el-table>
      </div>
      <div class="flex justify-between items-center w-full mt-24px">
        <div @click="getMicrosoftList(), loading = true" class="text-[#1460F3] cursor-pointer">{{ microsoftList ? 'Sync group' : 'Refresh list' }}</div>
        <div class="flex">
          <div class="bg-white rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-[#1460F3] w-152px border-1 border-[#1460F3] mr-16px hover:bg-[#e8effe] cursor-pointer" @click="microsoftDialog = false">Cancel</div>
          <button :disabled="!groupIds.length" :class="groupIds.length ? 'bg-[#1460F3] hover:bg-[#4380f5] cursor-pointer' : 'bg-[#1460F333] cursor-not-allowed'"
            class="bg-[#1460F3] rounded-8px text-16px leading-20px py-10px flex justify-center font-bold text-white w-152px" @click="microsoftDialog = false, getGroupNameList()">Add</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.font {
  font-family: 'Helvetica';
  .shadow {
    box-shadow: 0px 0px 12px 0px #2361A90D;
  }
  .shadows {
    box-shadow: 0px 4px 12px 0px #1018281A;
  }
  .active {
    color: #1460f3;
    background-color: #fff;
  }
  .dialog-footer {
    ::v-deep .el-button {
      height: 40px;
    }
  }
}
::v-deep .el-input {
  input {
    height: 32px;
  }
}
::v-deep .addDirectory {
  .el-input {
    input {
      height: 40px;
    }
  }
  .el-input.error {
    input {
      border-color: #F04438;
    }
  }
}
::v-deep .el-cascader {
  .el-input input {
    height: 40px;
  }
}
.scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar::-webkit-scrollbar-track {
  display: none;
}
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #E2E3E5;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
::v-deep .el-form.el-form--label-top {
  .el-form-item.required {
    .el-form-item__label {
      color: #232A40;
      line-height: 20px;
      padding-bottom: 0;
    }
  }
}
::v-deep .el-radio-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .el-radio {
    padding: 6px 0;
    margin-right: 0;
    color: #232748;
    .el-radio__inner {
      width: 16px;
      height: 16px;
      background: transparent;
      border: 1.5px solid #E2E3E5;
    }
    .el-radio__input.is-checked .el-radio__inner {
      background: #0773ED;
      border: 1.5px solid #0773ED;
    }
    .el-radio__label {
      color: #232748;
      line-height: 20px;
      padding-left: 8px;
    }
    .el-radio, .el-radio__input {
      white-space: normal
    }
    .el-radio__inner::after {
      width: 6px;
      height: 6px;
      background-color: white;
    }
  }
  .el-radio.is-disabled {
    .el-radio__input.is-disabled {
      .el-radio__inner {
        background: #F1F1F2;
      }
    }
    .el-radio__input.is-checked .el-radio__inner {
      background: #82BDFF;
      border: 1.5px solid #82BDFF;
    }
  }
}
::v-deep .el-table {
  .el-table__header-wrapper {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    th.is-leaf.el-table__cell {
      padding-left: 20px;
      background: #F6F7F9;
      border-color: #D9D9D9;
    }
  }
  .el-table__body-wrapper {
    tr.el-table__row {
      .el-table__cell {
        padding-left: 20px;
      }
    }
  }
}
.rotate360 {
  animation: rotate360 1s ease-out 0s;
}
@keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}
::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  display: none;
}
</style>
