<!-- 设备基本信息详情 -->
<script lang="ts" setup name="DeviceInfoDetail">
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { getApprovalRecord, getStatusLogRecord, getTurnoverLogRecord } from '@/api/eqpt/device/info'
import baseInfo from '@/views/tested/device/info/components/edit.vue'
import reportTable from '@/views/tested/device/info/components/reportTable.vue'
import statusTable from '@/views/tested/device/info/components/statusTable.vue'
import roamTable from '@/views/tested/device/info/components/roamTable.vue'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'
const activeName = ref('基本信息')
const $router = useRouter()
const $route = useRoute()
const statusName = $route.query.statusName as string
const approvalId = ref('')
// 获取审批记录
// const approvalList = ref()
// const fetchData = (id: string) => {
//   const data = JSON.parse($route.query.row as string)
//   const statusName1 = $route.query.statusName as string
//   statusName.value = statusName1
//   if (statusName.value !== '全部') {
//     getApprovalRecord(id).then((res) => {
//       approvalList.value = res.data
//     })
//   }
// }
// 获取设备流转日志
const logRecord = ref()
const fetchDevicelogs = () => {
  if (!approvalId.value) { return }
  const data = JSON.parse($route.query.row as string)
  getTurnoverLogRecord(approvalId.value).then((res) => {
    logRecord.value = res.data
    console.log(logRecord.value, '设备流转日志')
  })
}
// 获取设备状态变更日志
const statusList = ref()
const fetchStatusList = () => {
  if (!approvalId.value) { return }
  const data = JSON.parse($route.query.row as string)
  getStatusLogRecord(approvalId.value).then((res) => {
    statusList.value = res.data
    console.log(statusList.value, '状态变更记录')
  })
}
// 获取证书报告列表
const baseRef = ref()

const certificateList = ref()
watch(() => baseRef?.value?.ruleForm, (newVal) => {
  if (newVal.certificateList.length) {
    certificateList.value = newVal.certificateList
  }
  else {
    certificateList.value = []
  }
  // equipmentId
  if (newVal.equipmentId || newVal.id) {
    // fetchData(newVal.equipmentId)
    approvalId.value = newVal.equipmentId ? newVal.equipmentId : newVal.id
    fetchStatusList()
    fetchDevicelogs()
  }
}, {
  deep: true,
})
// fetchStatusList()
// fetchDevicelogs()
// fetchData()
const radioMenus = ref([
  {
    name: '基本信息',
    value: 'baseinfo',
  },
  {
    name: '证书报告',
    value: 'certificateList',
  },
  {
    name: '状态变更记录',
    value: 'statusChange',
  },
  {
    name: '设备流转日志',
    value: 'logRecord',
  },
  {
    name: '审批详情',
    value: 'approvalList',
  },

])
const current = ref('baseinfo')
const approvalDialogRef = ref()
const apply = (type: string) => {
  // baseRef.value.apply(type)
  const data = JSON.parse($route.query.row as string)
  approvalDialogRef.value.initDialog(type, JSON.parse($route.query.row as string).taskId, data.processId, data.id)
}
const editForm = () => {
  baseRef.value.editForm()
}
const submitForm = () => {
  baseRef.value.submitForm()
}
const delForm = () => {
  baseRef.value.delForm()
}
const cancelForm = () => {
  baseRef.value.cancelForm()
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page title="设备基本信息-详情">
      <template #btns>
        <el-button v-if="$route.query.statusName === '待审批'" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="$route.query.statusName === '待审批'" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, 'detail')" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="submitBtn(statusName, 'detail')" type="primary" @click="submitForm()">
          提交
        </el-button>
        <el-button v-if="delTextBtn(statusName)" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button type="info" @click="$router.back()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-radio-group v-model="current">
        <el-radio-button v-for="item in radioMenus" :key="item.value" :label="item.value">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </detail-block-com>
    <base-info v-show="current === 'baseinfo'" ref="baseRef" class="device-base-info-detail" status="detail" />
    <report-table v-show="current === 'certificateList'" :data="certificateList" status="detail" />
    <status-table v-show="current === 'statusChange'" :data="statusList" status="detail" />
    <roam-table v-show="current === 'logRecord'" :data="logRecord" status="detail" />
    <approval-record-table-device v-show="current === 'approvalList'" :id="$route.query.statusName === '全部' ? JSON.parse($route.query.row as string).id : approvalId" />
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
.device-base-info-detail {
  ::v-deep(.base-info-device) {
    // display: none;
    .header {
      display: none;

      .title {
        display: none;
      }
    }
  }
}
// ::v-deep(.header) {
//   display: none;
// }
// }

// .demo-tabs {
//   ::v-deep(.detail-main) {
//     .header {
//       display: none;
//     }
//   }
// }
</style>