<template>
  <ArtTableFullScreen>
    <div class="operation-password-page" id="table-full-screen">
      <ElCard shadow="never" class="art-table-card">
        <ElTabs v-model="activeTab" type="card" class="setting-tabs">
          <ElTabPane label="操作密码" name="operation-password">
            <ElCard shadow="never">
              <div class="setting-card">
                <ElForm :model="opPwdForm" class="form" label-width="80">
                  <ElFormItem label="状态">
                    <ElTag :type="opPwdForm.is_set ? 'primary' : 'info'">
                      {{ opPwdForm.is_set ? '已设置' : '未设置' }}
                    </ElTag>
                  </ElFormItem>

                  <ElFormItem label="操作密码" prop="password">
                    <ElInput
                      v-model="opPwdForm.password"
                      type="password"
                      show-password
                      placeholder="请输入操作密码"
                      style="width: 300px"
                    />
                  </ElFormItem>

                  <ElFormItem label="确认密码" prop="confirm_password">
                    <ElInput
                      v-model="opPwdForm.confirm_password"
                      type="password"
                      show-password
                      placeholder="请再次输入操作密码"
                      style="width: 300px"
                    />
                  </ElFormItem>

                  <ElFormItem>
                    <ElButton
                      type="primary"
                      @click="handleSetOperationPassword"
                      :loading="opPwdLoading"
                    >
                      {{ opPwdForm.is_set ? '重置密码' : '设置密码' }}
                    </ElButton>
                  </ElFormItem>
                </ElForm>
              </div>
            </ElCard>
          </ElTabPane>
        </ElTabs>
      </ElCard>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/store/modules/user'
  import { ElForm, ElInput, ElTag, ElButton, ElMessage, ElTabs, ElTabPane } from 'element-plus'
  import { SuperAdminService } from '@/api/modules'

  defineOptions({ name: 'OperationPasswordSettings' })

  const userStore = useUserStore()
  const isSuperAdmin = computed(() => userStore.info.user_type === 1)

  const activeTab = ref('operation-password')

  const opPwdForm = reactive({
    password: '',
    confirm_password: '',
    is_set: false
  })
  const opPwdLoading = ref(false)

  const handleSetOperationPassword = async () => {
    if (!opPwdForm.password) {
      ElMessage.warning('请输入操作密码')
      return
    }
    if (!opPwdForm.confirm_password) {
      ElMessage.warning('请输入确认密码')
      return
    }
    if (opPwdForm.password !== opPwdForm.confirm_password) {
      ElMessage.warning('两次输入的密码不一致')
      return
    }

    opPwdLoading.value = true
    try {
      await SuperAdminService.setOperationPassword({
        password: opPwdForm.password,
        confirm_password: opPwdForm.confirm_password
      })
      ElMessage.success(opPwdForm.is_set ? '操作密码重置成功' : '操作密码设置成功')
      opPwdForm.password = ''
      opPwdForm.confirm_password = ''
      await fetchOperationPasswordStatus()
    } catch (error) {
      console.error(error)
    } finally {
      opPwdLoading.value = false
    }
  }

  const fetchOperationPasswordStatus = async () => {
    if (!isSuperAdmin.value) return
    try {
      const res = await SuperAdminService.getOperationPasswordStatus()
      if (res.code === 0) {
        opPwdForm.is_set = res.data.is_set
      }
    } catch (error) {
      console.error(error)
    }
  }

  onMounted(() => {
    fetchOperationPasswordStatus()
  })
</script>

<style scoped lang="scss">
  .operation-password-page {
    height: 100%;

    :deep(.setting-tabs) {
      .el-tabs__header {
        margin: 0;
      }

      .el-tabs__nav-wrap::after {
        display: none;
      }
    }

    .setting-card {
    }
  }
</style>
