<template>
  <div style="padding-top: 13vw">
    <TopNav navTitle="指令" :showRight="false" :showLeft="true" />
    <div class="main_box">
      <van-form @submit="onSubmit" class="form" :disabled="isSeeInfo ? false : true">
        <van-field v-model="params.zlbt" name="zlbt" label="指令标题" placeholder="请输入指令标题"
          :rules="[{ required: true, message: '请输入指令标题' }]" />
        <van-field v-model="params.zlnr" name="zlnr" type="textarea" label="指令内容" placeholder="请输入指令内容"
          :rules="[{ required: true, message: '请输入指令内容' }]" />
        <van-field name="uploader" label="图片">
          <template #input>
            <van-uploader :max-count="1" :disabled="isSeeInfo ? false : true" v-model="wpTpIdList" multiple
              :after-read="upLoadImg" />
          </template>
        </van-field>
        <div style="margin: 16px" v-show="isSeeInfo">
          <van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner"
            loading-text="提交中...">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup>
import TopNav from "../../../components/topNav.vue";
import { qcckGet, qcckPost } from "../../../api/qcckApi.js";
import ImageCompressor from "image-compressor.js";
import {
  timeValidate
} from "../../../utils/tools.js";
import { ImagePreview } from "vant";
import { getMybbTodayNew } from "../../../api/common";
import { useRoute } from "vue-router";
import { onMounted, ref } from 'vue';
import { upImage } from "@/api/common";
import { hintToast } from "@/utils/tools";
import router from "@/router";
import { getDictList, setDict } from "../../../utils/dict";
const { D_QW_CJSBLX } = getDictList(
  "D_QW_CJSBLX"
);
const route = useRoute();
const wpTpIdList = ref([]);
const isSeeInfo = ref(true);
const fileList = ref([])
const params = ref({
  cjsbTpid: '',//图片
  zllx: '10',
  zlbt:'请求协助'
})
const baseUrl = ref("");
const workTips = ref();
// 上传图片
async function upLoadImg(file) {
  file.message = "上传中...";
  let fileBlob = await _compressImage(file.file);
  let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
  const data = new FormData();
  data.append("file", fileData);
  upImage(data).then((res) => {
    console.log(res, 'res');
    file.status = "done";
    file.message = "上传成功";
    if (!fileList.value.includes(res)) fileList.value.push(res);
  });
}

//压缩图片
const _compressImage = (file) => {
  return new Promise((resolve, reject) => {
    new ImageCompressor(file, {
      quality: 0.6, //压缩质量
      success(res) {
        resolve(res);
      },
      error(e) {
        reject(e);
      },
    });
  });
};
const onSubmit = () => {
  let { lng, lat, zbly } = getLocation();
  params.value.jd = lng;
  params.value.wd = lat;
  if (fileList.value.length > 0) params.value.fjId = fileList.value.join(',');
  qcckPost(params.value, "/mosty-yjzl/tbZl/addZl").then(res => {
    hintToast('添加成功')
    router.back()
  })
}
const getImageUrl = (item) => {
  return new Promise((ok) => {
    qcckGet({}, `/mosty-base/minio/file/download/${item}`).then(res => {
      ok(res.url);
    })
  });
}
onMounted(async () => {
  if (route.query.item) {
    isSeeInfo.value = false;
    params.value = JSON.parse(route.query.item);
    let imgId = params.value.cjsbTpid.split(',');
    for (let i = 0; i < imgId.length; i++) {
      const el = imgId[i];
      fileList.value.push({ url: await getImageUrl(el) });
    }
  }

})
</script>
<style lang="scss" scoped>
.main_box {
  padding: 10px;
  box-sizing: border-box;
}

::v-deep .van-radio {
  margin-bottom: 4px;
}

::v-deep .van-radio__label--disabled {
  color: #000 !important;
}

::v-deep .van-field__label {
  color: #000 !important;
}
</style>