<template>
  <div class="detail">
    <nut-cell-group>
      <nut-cell title="巡检位置" :desc="info?.unitName"></nut-cell>
      <nut-cell title="创建时间" :desc="info?.createTime"></nut-cell>
    </nut-cell-group>
    <div class="lg">
      <template v-if="info?.status === 0">
        <nut-form :model-value="form" ref="refForm">
          <nut-form-item label="巡检时间" prop="inspectTime" required :rules="[{ required: true, message: '请选择巡检时间' }]">
            <nut-row>
              <nut-col :span="22">
                <nut-input class="nut-input-text text-right"  input-align="right"  v-model="form.inspectTime" placeholder="请选择巡检时间" readonly @click="showTime = true"></nut-input>
              </nut-col>
              <nut-col :span="2">
                <Icon name="arrow" size="16"></Icon>
              </nut-col>
            </nut-row>
          </nut-form-item>
          <nut-form-item label="巡检人员" prop="inspectPersonName" required :rules="[{ required: true, message: '请输入巡检人员' }]">
            <nut-input readonly class="nut-input-text text-right"  input-align="right"  v-model="form.inspectPersonName" placeholder="请输入巡检人员"></nut-input>
          </nut-form-item>
          <nut-form-item label="巡检描述" prop="description" required :rules="[{ required: true, message: '请输入巡检描述' }]">
            <nut-textarea v-model="form.description" rows="4" placeholder="请输入巡检描述" autosize />
          </nut-form-item>
          <nut-form-item label="巡检照片" required prop="fileList" :rules="[{ required: true, message: '请上传巡检照片' }, { validator: customImg, message: '请上传巡检照片' }]">
            <Uploader v-model="form.fileList" multiple :max-count="3"></Uploader>
          </nut-form-item>
        </nut-form>
        <div class="btn">
          <nut-button type="success" block @click="onSubmit">提交</nut-button>
        </div>
      </template>
      <template v-else-if="info?.status === 1">
        <nut-cell-group>
          <nut-cell title="巡检时间" :desc="info?.inspectTime"></nut-cell>
          <nut-cell title="巡检人员" :desc="info?.userName"></nut-cell>
          <nut-cell title="问题描述" :desc="info?.description"></nut-cell>
          <nut-cell title="巡检照片"></nut-cell>
          <div class="img_list">
            <div class="img_item" v-for="(item, i) in info.pages" :key="i" @click="openImg(item)">
              <img :src="item" alt="">
            </div>
          </div>
        </nut-cell-group>
      </template>
    </div>
  </div>
  <nut-calendar
    v-model:visible="showTime"
    :default-value="timeDate(new Date().getTime())"
    @close="showTime = false"
    @choose="setChooseValue"
    :start-date="`2024-01-01`"
    :end-date="timeDate(new Date().getTime())"
  >
  </nut-calendar>
  <nut-overlay v-model:visible="showSubmit" :lock-scroll="true">
    <div class="overlay_po">
      <div class="overlay_lg">
        <Loading size="24px" color="#0094ff" vertical>提交中...</Loading>
      </div>
    </div>
  </nut-overlay>
  <nut-overlay v-model:visible="showImg" :lock-scroll="true">
    <div class="overlay_po">
      <div class="overlay_max">
        <img :src="selectImg" alt="">
      </div>
    </div>
  </nut-overlay>
</template>

<script>
export default {
  name: "DailyDetail"
}
</script>
<script setup>
  import { ref, onMounted } from 'vue';
  import { Icon, Uploader } from "vant";
  import { timeDate, timeHms, timeList } from "../../utils";
  import { useRoute, useRouter } from "vue-router";
  import { getDailyById, putDaily } from "../../utils/api";
  import tool from "../../utils/tool";
  import {showToast} from "@nutui/nutui";

  const route = useRoute()
  const router = useRouter()

  const refForm = ref()
  const uploadRef = ref()
  const form = ref({
    inspectTime: timeList(new Date().getTime()),
    inspectPersonName: '',
    inspectPersonId: '',
    description: '',
    fileList: []
  })
  const showTime = ref(false)
  const setChooseValue = (params) => {
    form.value.inspectTime = params[3] + ' ' + timeHms(new Date().getTime())
    showTime.value = false;
  }


  const customImg = (val) => {
    if (val.length > 0) {
      return true
    } else {
      return false
    }
  }

  const showSubmit = ref(false)

  const onSubmit = () => {
    refForm.value.validate().then(({ valid, errors}) => {
      if(valid) {
        showSubmit.value = true
        let formData = new FormData()
        for(let i = 0; i < form.value.fileList.length; i++) {
          formData.append('img'+(i+1), form.value.fileList[i].file)
        }
        formData.append('id', info.value?.id)
        formData.append('description', form.value.description)
        formData.append('inspectPersonId', form.value.inspectPersonId)
        formData.append('inspectTime', form.value.inspectTime)
        putDaily(formData).then((res) => {
          if(res.code === 200) {
            showToast.success(res.msg)
            router.back()
          } else {
            showToast.fail(res.msg)
          }
        }).finally(() => {
          showSubmit.value = false;
        })
      }
    })
  }
  const id = ref('');
  const info = ref({})
  const init = () => {
    let params = {
      id: id.value
    }
    getDailyById(params).then((res) => {
      if(res.code === 200) {
        info.value = res.data
      }
    })
  }

  const showImg = ref(false)
  const selectImg = ref('')
  const openImg = (val) => {
    selectImg.value = val
    showImg.value = true
  }


  onMounted(() => {
    id.value = route.query.id;
    let userInfo = tool.data.get('snowy_user_info');
    form.value.inspectPersonId = userInfo.id;
    form.value.inspectPersonName = userInfo.name;
    init()
  })
</script>

<style scoped>
  .detail {
    width: 100%;
  }
  .lg {
    margin-top: 10px;
  }
  .text-right {
    text-align: right;
  }
  .margin-bottom {
    margin-bottom: 10px;
  }
  .btn {
    width: 80%;
    margin: 0 auto;
  }

  .img_list {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
  }
  .img_item {
    margin-left: 10px;
    width: 70px;
    height: 70px;
  }
  .img_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .overlay_po {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .overlay_lg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .overlay_max {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .overlay_max img {
    width: 100%;
    object-fit: cover;
  }
</style>
