<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="maintain"
        @deviceId="id => getDetailInfo(id)"
      />
      <view v-else class="content">
        <view>
          <uni-section titleFontSize="22px" type="line" title="设备维护保养信息"> </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 class="check-header">
          <uni-section titleFontSize="22px" type="line" title="维护保养项"> </uni-section>
          <up-row class="p10 font-bold border-b" style="background-color: #f5f5f5">
            <up-col span="4">维护保养内容</up-col>
            <up-col span="4"> 频次</up-col>
            <up-col span="4">维护保养标准</up-col>
          </up-row>
          <view class="pt10">
            <view v-for="(item, index) in detailInfo.maintainItemList" :key="index">
              <up-row class="p20">
                <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="4">{{ item.frequencyRemark }}</up-col>
                <up-col span="4">{{ item.standard }}</up-col>
              </up-row>
              <up-row class="fill-content">
                <up-col span="12" class="x-f"
                  ><view class="p10"><text class="required-star">*</text>维护保养情况:</view>
                  <up-input class="bg-w" v-model="item.checkRemark" placeholder="请输入维护保养情况"></up-input
                ></up-col>
              </up-row>
            </view>
          </view>
        </view>
        <view>
          <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="date" 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, computed, watch, toRefs } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import dailyCheckApi from '@/nx/api/dailyCheck'
import nx from '@/nx'
import { useScreenOrientation } from '@/nx/hooks/useScreenOrientation'
import { useGridCol } from '@/nx/hooks/useGridCol'

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

const { lockOrientation } = useScreenOrientation()

const pageLoading = ref(false)
const detailSchema = [
  { label: '设备名称', value: 'deviceName' },
  { label: '设备型号', value: 'modelNo' },
  { label: '设备编码', value: 'deviceCode' },
  { label: '使用班组', value: 'deptName' }
]
let detailInfo = ref({})
let checkList = ref([])
const { scanQRInfo } = toRefs(nx.$store('biz'))
watch(scanQRInfo, newVal => {
  if (newVal && nx.$router.getCurrentPage().route == 'pages/device/deviceBusMaintain/index') {
    try {
      const codeObj = JSON.parse(newVal)
      if (!pageLoading.value) {
        getDetailInfo(codeObj.id)
      }
      scanQRInfo.value = ''
    } catch (error) {
      scanQRInfo.value = ''
      uni.showToast({
        title: '请扫描设备码',
        icon: 'none'
      })
    }
  }
})
onShow(() => {
  scanQRInfo.value = ''
})
const modalText = computed(() => {
  return `确定${modalType.value == '0' ? '暂存' : '提交'}吗？${modalType.value == '0' ? '' : '提交后不能修改'} `
})
async function getDetailInfo(id) {
  pageLoading.value = true
  const res = await dailyCheckApi
    .getCheckRecord({
      deviceId: id,
      dataType: 'maintain',
      submitFlag: '0',
      cancelFlag: '0'
    })
    .finally(() => {
      pageLoading.value = false
    })
  if (!res.checkUserName) {
    res.checkUserName = nx.$store('user').userInfo.realname
    res.checkUserId = nx.$store('user').userInfo.id
  }
  if (!res.checkDate) {
    res.checkDate = nx.$dayjs().format('YYYY-MM-DD 00:00:00')
  }
  detailInfo.value = res
  modalType.value = res.submitFlag
  lockOrientation('landscape')
}

const modalShow = ref(false)
const modalType = ref('')
function handleSubmit(type) {
  if (!detailInfo.value.checkUserName) {
    return uni.showToast({
      title: '请输入维护保养人',
      icon: 'none'
    })
  }
  if (!detailInfo.value.checkDate) {
    return uni.showToast({
      title: '请选择维护保养日期',
      icon: 'none'
    })
  }
  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.checkRemark?.trim()) {
        return uni.showToast({ title: `${itemNumber}维护保养情况未填写`, icon: 'none' })
      }
    }
  }
  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()
  })
}
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/deviceBusMaintain/list')
}
</script>

<style lang="scss" scoped>
.u-sticky {
  top: 0 !important;
}
.container {
  .required-star {
    color: red;
    margin-right: 4px;
  }
  .content {
    background-color: #fff;
    height: 100%;
    padding: 16px;
    padding-top: 10px;
    font-size: 18px;
    .title {
      font-size: 22px;
      font-weight: bold;
    }
    .check-header {
      .u-sticky {
        top: 70px !important;
      }
    }
    .fill-content {
      border-radius: 3px;
      box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);
      background-color: #fdf6ec;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}
</style>
