<template>
  <div>
    <WlPopup
      style="height: 80%"
      class="material_sheet"
      v-model="actionDatabaseVisible"
      :close-on-popstate="true"
      cancelText=""
      overlay-class="material_overlay"
      title="从资料库选择"
    >
      <BCMaterialList
        :env_data="env_data"
        @onHandleChecked="handleMaterialChoose"
        :checkedData="checkedData"
        v-bind="$attrs"
      />
    </WlPopup>
    <WlActionSheet
      v-model="actionMaterialChoose"
      :actions="actionsChoose"
      cancel-text="取消"
      @closed="closed"
      close-on-click-action
      @select="handelClick"
      @cancel="actionMaterialChoose = false"
    />
    <Van-uploader
      ref="refUploader"
      :max-size="2048 * 1024"
      class="van_upload"
      @oversize="onOversize"
      :after-read="afterRead"
      :max-count="1"
    >
    </Van-uploader>
  </div>
</template>
<script lang="ts">
export default {
  name: "MaterialSelect",
};
</script>
<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import BCMaterialList from "@mobileUI/components/BCMaterialList/src/index.vue";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";
import WlActionSheet from "@mobileUI/components/WlActionSheet/src/index.vue";
import { sizeTostr } from "@mobileUI/utils";
import Api from "../../http/api";
import Store from "@mobileUI/store";
import qs from "qs";

type Props = {
  modelValue: boolean;
  env_data: TEnv.TEnvData;
  checkedData: any[];
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  checkedData: () => [],
  env_data: () => {
    return {
      sid: "",
      domain: "",
      corp_id: "",
      node_env: "dev",
      app_id: "",
      token: "",
      card_resource: "",
    };
  },
});
const emit = defineEmits<{
  (e: "onHandleChange", val: Object);
  (e: "update:modelValue", val: boolean);
}>();
Store.corp_id = props.env_data.corp_id;
Store.sid = props.env_data.sid;
Store.token = props.env_data.token;
Store.card_resource = props.env_data.card_resource;
const actionMaterialChoose = ref(false);
const actionDatabaseVisible = ref(false);
const refUploader = ref(null);
const actionsChoose = ref([
  {
    name: "从资料库选择",
    type: 1,
  },
  // {
  //   name: "本地上传图片",
  //   type: 2,
  // },
]);
const splicingMonitorFile = (material_id: string, source_type: any) => {
  const params = {
    material_id,
    source_type,
    corp_id: props.env_data.corp_id,
    sid: props.env_data.sid,
    card_resource: props.env_data.card_resource,
  };
  delete params.sid;
  return `${props.env_data.domain}/h5/monitorFile/index.html?${qs.stringify(
    params
  )}`;
};
const handelClick = (res: any) => {
  if (res.type == 1) {
    actionDatabaseVisible.value = true;
  } else {
    refUploader.value.chooseFile();
  }
};
const closed = () => emit("update:modelValue", false);
// 资料库选择某一项
const handleMaterialChoose = (item: any) => {
  const type = item.material_scope == 1 ? "user" : "corp";
  let desc = "";
  if (item.material_type == 1) {
    desc = item.material_subtitle;
  } else {
    desc = sizeTostr(item.material_size);
  }
  let link = {
    title: item.material_name,
    picurl: item.material_logo,
    desc,
    url: splicingMonitorFile(item.id, type),
  };
  emit("onHandleChange", { msgtype: "link", link });
  actionDatabaseVisible.value = false;
};
const afterRead = async (file: any) => {
  const { data } = await Api.postUploadFile(
    {
      file: file.file,
    },
    props.env_data.node_env
  );
  emit("onHandleChange", {
    msgtype: "image",
    image: {
      pic_url: data.pic_url,
    },
  });
};

watchEffect(() => {
  actionMaterialChoose.value = props.modelValue;
});
</script>

<style scoped lang="scss">
.van-uploader {
  display: block;
  position: fixed;
  width: 0;
  height: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

:deep(.material_overlay + .van-popup) {
  height: 86%;
  max-height: initial;
}
</style>
