<template>
  <div style="padding-top: 13vw">
    <TopNav navTitle="处警报送" :showRight="isSeeInfo ? true : false" :showLeft="true" @clickRight="onClickRight" />
    <div class="main_box">
      <van-form @submit="onSubmit" class="form" :disabled="isSeeInfo ? false : true">
        <van-field name="radio" label="警情类型">
          <template #input>
            <van-radio-group v-model="params.cjsbLx" direction="horizontal" :disabled="isSeeInfo ? false : true">
              <van-radio :name="item.dm" v-for="item in D_QW_CJSBLX" :key="item">{{ item.zdmc }}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-model="params.cjsbQk" name="cjsbQk" type="textarea" label="处警情况" placeholder="请输入处警情况"
          :rules="[{ required: true, message: '请输入处警情况' }]" />
        <van-field name="uploader" label="图片">
          <template #input>
            <van-uploader :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: '',//图片
})
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 = () => {
  if (fileList.value.length > 0) params.value.cjsbTpid = fileList.value.join(',');
  qcckPost(params.value, "/mosty-qwzx/tbQwCjbs/save").then(res => {
    hintToast('添加成功')
    router.back()
  })
}
const onClickRight = () => {
  router.push('/cjbsList')
}
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];
      wpTpIdList.value.push({ url: await getImageUrl(el) });
      console.log(wpTpIdList.value, 'wpTpIdList.value');

    }
  }

})
</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>