<template>
  <u-popup :show="show" mode="right" @close="close" @open="open" closeable>
    <view class="p20 cell-content">
      <scroll-view scroll-y="true">
        <view class="x-f pb20 pt20">
          <u-avatar src=""></u-avatar>
          <view>
            <view class="pl20">您好！{{ userInfo.nickname }}</view>
            <view class="pl20">{{ deptName }}</view>
          </view>
        </view>

        <u-cell-group>
          <u-cell
            icon="grid-fill"
            v-if="showSelectDept"
            title="公司部门选择"
            :is-link="true"
            @click="handleSelectCompany"
          />
          <u-cell icon="grid-fill" title="模块选择" :is-link="true" @click="handleTo('/pages/index/index')" />

          <u-cell icon="order" title="打印设置" :isLink="true" @click="handleTo('/pages/setting/print')"></u-cell>
          <u-cell icon="info-circle-fill" title="关于我们" :is-link="true" @click="handleTo('/pages/me/aboutMe')" />
        </u-cell-group>

        <u-button class="mt40" type="warning" plain text="退出当前账号" @click="handleLoginOut('general')" />
      </scroll-view>
    </view>

    <u-modal
      width="250px"
      :show="modalShow"
      title="提示"
      content="确定退出登录吗？"
      show-cancel-button
      async-close
      @confirm="confirm"
      @cancel="modalShow = false"
    />
  </u-popup>
  <company-dept-dialog />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import nx from '@/nx'
import { VISIT_COMPANY_STORAGE_KEY, VISIT_DEPT_STORAGE_KEY } from '@/nx/config'

// Props & Emits
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:show', 'open', 'close'])

// 响应式数据
const modalShow = ref(false)
const dialogStore = nx.$store('company-dept')
const { companyList, selectedCompanyId, selectedDeptId, showSelectDept } = storeToRefs(dialogStore)
// 计算属性
const userInfo = computed(() => nx.$store('user').userInfo)
const deptName = computed(() => {
  const selectedCompany = companyList.value.find(company => company.companyId === selectedCompanyId.value)
  const selectedDept = selectedCompany?.depts.find(dept => dept.deptId === selectedDeptId.value)
  return selectedDept?.deptName || ''
})

// 方法
const handleTo = url => {
  nx.$router.go(url)
}

const handleSelectCompany = () => {
  dialogStore.open({
    companyList: companyList.value,
    defaultCompanyId: selectedCompanyId.value,
    defaultDeptId: selectedDeptId.value,
    showCancel: true,
    onConfirm: ({ companyId, deptId }) => {
      const selectedCompany = companyList.value.find(company => company.companyId === selectedCompanyId.value)
      const selectedDept = selectedCompany?.depts.find(dept => dept.deptId === selectedDeptId.value)
      uni.setStorageSync(VISIT_COMPANY_STORAGE_KEY, {
        id: companyId,
        name: selectedCompany?.companyName || ''
      })
      uni.setStorageSync(VISIT_DEPT_STORAGE_KEY, {
        id: deptId,
        name: selectedDept?.deptName || ''
      })
    }
  })
}
const handleLoginOut = () => {
  modalShow.value = true
}

const confirm = async () => {
  try {
    await nx.$store('user').logout()
  } catch (error) {
    console.error('退出登录失败:', error)
  } finally {
    modalShow.value = false
  }
}

const open = () => {
  emit('open')
}

const close = () => {
  emit('close')
  emit('update:show', false)
}
onMounted(async () => {
  await nx.$api.assayTask.getAssayTaskPage()
})
</script>

<style lang="scss" scoped>
.cell-content {
  width: 50vw;
}
@media (max-width: 700px) {
  .cell-content {
    width: 70vw;
  }
}
</style>
