<template>
  <a-tabs :activeKey="activeKey" @change="changeTab">
    <a-tab-pane
      v-for="tab in filteredTabs"
      :key="tab.key"
      :tab="tab.label"
    >
      <component
        :is="tab.component"
        :currUserInfo="userInfo"
        v-if="activeKey === tab.key && userInfo"
      ></component>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import { mapState } from 'vuex'
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
import XDescriptions from '@vue2-client/base-client/components/common/XDescriptions/XDescriptions.vue'
import UserRecordQuery from '@vue2-client/pages/userInfoDetailManage/UserRecordQuery'
import MachineRecordQuery from '@vue2-client/pages/userInfoDetailManage/MachineRecordQuery'
import UserChargeRecordQuery from '@vue2-client/pages/userInfoDetailManage/UserChargeRecordQuery'
import UserHandRecordQuery from '@vue2-client/pages/userInfoDetailManage/UserHandRecordQuery'
import FillCardRecordQuery from '@vue2-client/pages/userInfoDetailManage/FillCardRecordQuery'
import FillGasRecordQuery from '@vue2-client/pages/userInfoDetailManage/FillGasRecordQuery'
import ChangeMeterRecordQuery from '@vue2-client/pages/userInfoDetailManage/ChangeMeterRecordQuery'
import InfoChangeRecordQuery from '@vue2-client/pages/userInfoDetailManage/InfoChangeRecordQuery'
import InstructRecordQuery from '@vue2-client/pages/userInfoDetailManage/InstructRecordQuery'
import InstructHistoryRecordQuery from '@vue2-client/pages/userInfoDetailManage/InstructHistoryRecordQuery'
import MeterParamRecordQuery from '@vue2-client/pages/userInfoDetailManage/MeterParamRecordQuery'
import OtherChargeRecordQuery from '@vue2-client/pages/userInfoDetailManage/OtherChargeRecordQuery'
import TransferRecordQuery from '@vue2-client/pages/userInfoDetailManage/TransferRecordQuery'
import WatchCollectionRecordQuery from '@vue2-client/pages/userInfoDetailManage/WatchCollectionRecordQuery'
import UserException from '@vue2-client/pages/userInfoDetailManage/UserException'
import PriceAdjustments from '@vue2-client/pages/userInfoDetailManage/PriceAdjustments'
import uploadFilesHistory from '@vue2-client/pages/userInfoDetailManage/uploadFilesHistory'
import InsuranceDetailQuery from '@vue2-client/pages/userInfoDetailManage/InsuranceDetailQuery'
import ExceptionRecordQuery from '@vue2-client/pages/userInfoDetailManage/ExceptionRecordQuery'
import ApplyRecordQuery from '@vue2-client/pages/userInfoDetailManage/ApplyRecordQuery'
import SafeCheckPaperV3RecordQuery from '@vue2-client/pages/userInfoDetailManage/SafeCheckPaperV3RecordQuery'
import TelephoneV3RecordQuery from '@vue2-client/pages/userInfoDetailManage/TelephoneV3RecordQuery'
import CallRecordQuery from "@vue2-client/pages/userInfoDetailManage/CallRecordQuery/index.vue";
export default {
  name: 'UserInfoDetailQueryTabs',
  components: {
    XFormTable,
    XDescriptions,
    XAddNativeForm,
    UserRecordQuery,
    MachineRecordQuery,
    UserChargeRecordQuery,
    FillCardRecordQuery,
    FillGasRecordQuery,
    ChangeMeterRecordQuery,
    InfoChangeRecordQuery,
    InstructRecordQuery,
    InstructHistoryRecordQuery,
    MeterParamRecordQuery,
    OtherChargeRecordQuery,
    WatchCollectionRecordQuery,
    TransferRecordQuery,
    UserHandRecordQuery,
    UserException,
    PriceAdjustments,
    uploadFilesHistory,
    InsuranceDetailQuery,
    ExceptionRecordQuery,
    ApplyRecordQuery,
    SafeCheckPaperV3RecordQuery,
    TelephoneV3RecordQuery,
    CallRecordQuery
  },
  props: {
    userInfo: {
      type: Object,
      default: () => undefined
    }
  },
  data () {
    return {
      activeKey: '1',
      tabs: [
        { key: '1', label: '流水查询', permission: '流水查询', component: 'UserRecordQuery' },
        {
          key: '2',
          label: '机表流水查询',
          permission: '机表流水查询',
          component: 'MachineRecordQuery',
          condition: () => this.userInfo?.f_meter_type === '机表'
        },
        { key: '3', label: '收费查询', permission: '收费查询', component: 'UserChargeRecordQuery' },
        { key: '4', label: '抄表记录', permission: '抄表记录', component: 'UserHandRecordQuery' },
        {
          key: '5',
          label: '补卡查询',
          permission: '补卡查询',
          component: 'FillCardRecordQuery',
          condition: () => this.userInfo?.f_meter_type?.includes('卡表')
        },
        { key: '6', label: '补气查询', permission: '补气查询', component: 'FillGasRecordQuery' },
        { key: '7', label: '换表查询', permission: '换表查询', component: 'ChangeMeterRecordQuery' },
        { key: '8', label: '其他收费', permission: '其他收费', component: 'OtherChargeRecordQuery' },
        { key: '9', label: '过户查询', permission: '过户查询', component: 'TransferRecordQuery' },
        { key: '10', label: '档案变更记录', permission: '变更记录', component: 'InfoChangeRecordQuery' },
        {
          key: '11',
          label: '指令查看',
          permission: '指令查看',
          component: 'InstructRecordQuery',
          condition: () => this.userInfo?.f_meter_type === '物联网表'
        },
        {
          key: '12',
          label: '历史指令查看',
          permission: '历史指令查看',
          component: 'InstructHistoryRecordQuery',
          condition: () => this.userInfo?.f_meter_type === '物联网表'
        },
        {
          key: '13',
          label: '表具采集',
          permission: '表具采集',
          component: 'WatchCollectionRecordQuery',
          condition: () => this.userInfo?.f_meter_type === '物联网表'
        },
        { key: '14', label: '流量计参数查看', permission: '流量计参数查看', component: 'MeterParamRecordQuery' },
        { key: '15', label: '异常报警', permission: '异常报警', component: 'UserException' },
        { key: '16', label: '价格调整', permission: '价格调整', component: 'PriceAdjustments' },
        { key: '17', label: '附件查看', permission: '附件查看', component: 'uploadFilesHistory' },
        { key: '18', label: '保险明细', permission: '保险明细', component: 'InsuranceDetailQuery' },
        { key: '19', label: '异常查看', permission: '异常查看', component: 'ExceptionRecordQuery', condition: () => this.userInfo?.f_meter_type === '物联网表' },
        { key: '20', label: '报建查看', permission: '报建查看', component: 'ApplyRecordQuery' },
        { key: '21', label: '安检查看', permission: '安检查看', component: 'SafeCheckPaperV3RecordQuery' },
        { key: '22', label: '工单查看', permission: '工单查看', component: 'TelephoneV3RecordQuery' },
        { key: '23', label: '呼叫记录', permission: '呼叫记录', component: 'CallRecordQuery' },
      ],
    }
  },
  computed: {
    ...mapState('account', { currUser: 'user', login: 'login' }),
    ...mapState('setting', { isMobile: 'isMobile' }),
    currUserInfo () {
      return this.userInfo
    },
    filteredTabs () {
      return this.tabs.filter((tab) => {
        const hasPermission = this.login?.r.includes(tab.permission)
        const meetsCondition = tab.condition ? tab.condition() : true
        return hasPermission && meetsCondition
      })
    },
  },
  methods: {
    changeTab (key) {
      this.activeKey = key
    },
  },
}
</script>

<style scoped lang="less">
:deep(.ant-statistic-content-value) {
  color: @primary-color;
}
</style>
