<template>
  <view>
    <up-sticky>
      <navbar-back title="设备巡检">
        <up-button
          v-if="detailInfo.id"
          type="primary"
          :plain="true"
          icon="list"
          size="small"
          text="设备巡检记录"
          @click="handleCheckRecord"
        ></up-button>
      </navbar-back>
    </up-sticky>
    <view class="container">
      <n-scanTemp
        v-if="!detailInfo.id"
        title="请扫描设备条码进行巡检"
        icon="dailyCheck"
        @deviceId="id => getDailyCheckRecord(id)"
        @scanResult="result => handleScanResult(result)"
      />
      <view v-else class="content">
        <view>
          <uni-section titleFontSize="22px" type="line" title="设备巡检信息">
            <template v-slot:right>
              <up-button
                v-if="detailInfo.submitFlag == '1'"
                type="success"
                text="新建巡检"
                @click="handleCreateDailyCheck"
              ></up-button>
            </template>
          </uni-section>
          <up-row class="flex-wrap p10" style="background-color: #f5f7fa">
            <up-col class="mb10" :span="gridCol" v-for="(item, index) in detailSchema">
              <view style="color: #666"
                ><span style="color: #333">{{ item.label }}：</span>{{ detailInfo[item.value] }}</view
              >
            </up-col>
          </up-row>
        </view>
        <view>
          <uni-section titleFontSize="22px" type="line" title="检查项"> </uni-section>
          <up-row class="p10 font-bold" style="background-color: #f5f5f5">
            <up-col span="4">巡检项目</up-col>
            <up-col span="3">检查标准</up-col>
            <up-col span="2"> 频次</up-col>
            <up-col style="text-align: center" span="3">是否正常</up-col>
          </up-row>
          <view class="pt10">
            <up-row class="pb12" v-for="(item, index) in detailInfo.maintainItemList" :key="index">
              <up-col span="4">
                <view class="x-f">
                  <u-badge type="warning " :value="index + 1"></u-badge>
                  <text class="pl10">
                    {{ item.itemName }}
                  </text>
                </view>
              </up-col>

              <up-col span="3">{{ item.standard }}</up-col>
              <up-col span="2">{{ item.frequencyRemark }}</up-col>
              <up-col span="3">
                <u-radio-group v-model="item.checkResult" placement="row">
                  <u-radio activeColor="green" label="正常" name="正常"></u-radio>
                  <u-radio activeColor="red" label="不正常" name="不正常"></u-radio>
                </u-radio-group>
              </up-col>
            </up-row>
          </view>
        </view>
        <view>
          <uni-section titleFontSize="22px" type="line" title="备注"> </uni-section>
          <up-textarea v-model="detailInfo.content" placeholder="请输入内容"></up-textarea>
          <view class="p10">附件照片：</view>
          <n-upload v-model="detailInfo.attachment" />
          <view class="p10">巡检人：</view>
          <up-input v-model="detailInfo.checkUserName"></up-input>
          <view v-if="detailInfo.submitFlag == '1'">
            <view class="p10">巡检日期：</view>
            <uni-datetime-picker type="datetime" v-model="detailInfo.checkDate" />
          </view>
        </view>
        <view class="mt40 x-bc" v-if="detailInfo.submitFlag == '0'">
          <up-button
            style="width: 40%"
            loadingText="保存中..."
            type="warning"
            text="暂存"
            @click="handleSubmit('0')"
          ></up-button>
          <up-button
            style="width: 40%"
            loadingText="提交中..."
            type="primary"
            text="提交"
            @click="handleSubmit('1')"
          ></up-button>
        </view>
      </view>
    </view>
    <up-modal
      :show="modalShow"
      title="提示"
      :content="modalText"
      ref="uModal"
      :asyncClose="true"
      showCancelButton
      @confirm="confirm"
      @cancel="modalShow = false"
    ></up-modal>
    <up-loading-page :loading="pageLoading"></up-loading-page>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, toRefs, computed } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import dailyCheckApi from '@/nx/api/dailyCheck'
import { detailSchema } from './dailyCheck.data'
import { useScreenOrientation } from '@/nx/hooks/useScreenOrientation'
import { useGridCol } from '@/nx/hooks/useGridCol'
import nx from '@/nx'

const { gridCol } = useGridCol([700], [6, 4])

const { lockOrientation } = useScreenOrientation()

const pageLoading = ref(false)
let detailInfo = ref({})
function handleScanResult(result) {
  const codeObj = JSON.parse(result)
  if (!pageLoading.value) {
    getDailyCheckRecord(codeObj.id)
  }
}
// const { scanQRInfo } = toRefs(nx.$store('biz'))
// watch(scanQRInfo, newVal => {
//   if (newVal && nx.$router.getCurrentPage().route == 'pages/device/deviceBusDailyCheck/index') {
//     try {
//       const codeObj = JSON.parse(newVal)
//       if (!pageLoading.value) {
//         getDailyCheckRecord(codeObj.id)
//       }
//       scanQRInfo.value = ''
//     } catch (error) {
//       scanQRInfo.value = ''
//       uni.showToast({
//         title: '请扫描设备码',
//         icon: 'none'
//       })
//     }
//   }
// })
const modalText = computed(() => {
  return `确定${modalType.value == '0' ? '暂存' : '提交'}吗？${modalType.value == '0' ? '' : '提交后不能修改'} `
})
// onShow(() => {
//   scanQRInfo.value = ''
// })
let goBack = ref(false) //设备使用前进行点检操作标记
onLoad(options => {
  if (options.deviceId) {
    goBack.value = true
    getDailyCheckRecord(options.deviceId)
  }
})

async function getDailyCheckRecord(id) {
  pageLoading.value = true
  const res = await dailyCheckApi
    .getCheckRecord({
      deviceId: id,
      dataType: 'dailyCheck'
    })
    .finally(() => {
      pageLoading.value = false
    })
  if (!res.checkUserName) {
    res.checkUserName = nx.$store('user').userInfo.realname
    res.checkUserId = nx.$store('user').userInfo.id
  }
  detailInfo.value = res
  modalType.value = res.submitFlag

  lockOrientation('landscape')
}

const modalShow = ref(false)
const modalType = ref('')
// 是否有异常项
const hasAbnormal = computed(() => {
  if (modalType.value == '1') {
    const items = detailInfo.value.maintainItemList || []
    for (let i = 0; i < items.length; i++) {
      const checkResult = items[i].checkResult
      if (checkResult == '不正常') {
        return true
      }
    }
  }
  return false
})
function handleSubmit(type) {
  // 新增维护保养项验证
  if (type == '1') {
    const items = detailInfo.value.maintainItemList || []
    for (let i = 0; i < items.length; i++) {
      const item = items[i]
      const itemNumber = `第${i + 1}项`
      if (!item.checkResult?.trim()) {
        return uni.showToast({ title: `${itemNumber}设备检查状态未选择`, icon: 'none' })
      }
    }
  }
  if (!detailInfo.value.checkUserName) {
    return uni.showToast({
      title: '请输入巡检人',
      icon: 'none'
    })
  }
  detailInfo.value.checkDate = nx.$dayjs().format('YYYY-MM-DD HH:mm:ss')
  modalType.value = type
  modalShow.value = true
  console.log(detailInfo.value)
}

const submitLoading = ref(false)
async function confirm() {
  if (submitLoading.value) return
  submitLoading.value = true

  await dailyCheckApi.submit({ ...detailInfo.value, submitFlag: modalType.value }).finally(() => {
    submitLoading.value = false
    modalShow.value = false
    reset()
  })
  if (goBack.value && modalType.value == 1) {
    uni.navigateBack()
  }
}
function reset() {
  detailInfo.value = {}
}
function handleCheckRecord() {
  let deviceInfo = {
    id: detailInfo.value.deviceId,
    deviceName: detailInfo.value.deviceName
  }
  nx.$store('biz').deviceInfo = deviceInfo
  nx.$router.go('/pages/device/deviceBusDailyCheck/list')
}
// 新建巡检
function handleCreateDailyCheck() {
  uni.showModal({
    title: '提示',
    content: '确定新建巡检吗？',
    success: async function (res) {
      if (res.confirm) {
        const res = await dailyCheckApi.createDailyCheck({
          deviceId: detailInfo.value.deviceId,
          dataType: 'dailyCheck'
        })
        res.checkUserName = nx.$store('user').userInfo.realname
        res.checkUserId = nx.$store('user').userInfo.id
        res.checkDate = nx.$dayjs().format('YYYY-MM-DD HH:mm:ss')
        detailInfo.value = res
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.u-sticky {
  top: 0 !important;
}
.container {
  .content {
    background-color: #fff;
    height: 100%;
    padding: 16px;
    padding-top: 10px;
    font-size: 18px;
    .title {
      font-size: 22px;
      font-weight: bold;
    }
    :deep(.u-checkbox) {
      justify-content: center;
    }
  }
}
</style>
