<!-- 设备基本信息详情 -->
<script lang="ts" setup name="DeviceInfoDetail">
import { 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'
const activeName = ref('基本信息')
const $router = useRouter()
const $route = useRoute()
const statusName = ref('')
// 获取审批记录
const approvalList = ref()
const fetchData = () => {
  const data = JSON.parse($route.query.row as string)
  const statusName1 = $route.query.statusName as string
  statusName.value = statusName1
  if (statusName.value !== '全部') {
    getApprovalRecord(data.equipmentId).then((res) => {
      approvalList.value = res.data
    })
  }
}
// 获取设备流转日志
const logRecord = ref()
const fetchDevicelogs = () => {
  const data = JSON.parse($route.query.row as string)
  getTurnoverLogRecord(data.id).then((res) => {
    logRecord.value = res.data
  })
}
// 获取设备状态变更日志
const statusList = ref()
const fetchStatusList = () => {
  const data = JSON.parse($route.query.row as string)
  getStatusLogRecord(data.id).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 = []
  }
}, {
  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 apply = (type: string) => {
  baseRef.value.apply(type)
}
const editForm = () => {
  baseRef.value.editForm()
}
const submitForm = () => {
  baseRef.value.submitForm()
}
const delForm = () => {
  baseRef.value.delForm()
}
const cancelForm = () => {
  baseRef.value.cancelForm()
}
console.log(JSON.parse($route.query.row as string), 'row')
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="设备基本信息-详情">
      <template #btns>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="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="statusName === '已通过'" type="primary">
          打印
        </el-button>
        <el-button v-if="statusName === '已取消' || statusName === '审批'" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <!-- <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </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" status="detail" />
    <report-table v-if="current === 'certificateList'" :data="certificateList" status="detail" />
    <status-table v-if="current === 'statusChange'" :data="statusList" status="detail" />
    <roam-table v-if="current === 'logRecord'" :data="logRecord" status="detail" />
    <approval-record-table-device v-if="current === 'approvalList'" :id="JSON.parse($route.query.row as string).id" />
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
.device-base-info {
  ::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>