<template>
  <div class="custom-head-cell">
    <div class="image-question custom-table-head-img" v-if="[12, 13, 14].includes(question_type)" v-html="content"></div>
    <a-tooltip placement="topLeft" v-else>
      <template #title>
        <div class="custom-head-preview" v-html="content"></div>
      </template>
      <div class="custom-head-main">
<!--        下载题型-->
        <div class="file-question" v-if="question_type === 18" :style="{width:data.width + 'px'}">
          <div class="label">{{ content }}</div>
          <i
            class="iconfont icon-xiazai"
            style="color: #70b936; cursor: pointer"
            @click="download"
          ></i>
<!--          <a-button size="mini" @click="download">下载全部附件333</a-button>-->
        </div>
<!--        图文题-->

        <div class="common-text" v-else>{{ content }}</div>
      </div>
    </a-tooltip>
    <!-- 下载中心 -->
    <DownloadCenter v-model:visible="downloadVisible" v-if="downloadVisible"></DownloadCenter>
  </div>
</template>

<script setup>
import { ref, computed, watchEffect, defineProps } from "vue";
import { useStore } from 'vuex';
import { downloadAnswerFile } from '@api/data-analyse'
import { convertQueryToString } from "@utils/httpFormat";
import { downloadFile } from "@views/DataAnalyse/composables/downloadFile";
import { addDownloadCenter } from "@/api/download.js";
import { useRouter, useRoute } from "vue-router";
import DownloadCenter from "@/views/DownloadCenter/index.vue"
const store = useStore()
const props = defineProps({
  data: {
    type: Object
  },
  search_params: {
    type: Object
  },
  sn: {
    type: String
  }
});
const content = ref('')
const question_index = ref(null)
const question_type = ref(null)

// https://stackoverflow.com/questions/15458876/check-if-a-string-is-html-or-not
const includeHtmlTag = computed(() =>/<\/?[a-z][\s\S]*>/i.test(content.value))
const shortTitle = computed(() => content.value ? content.value.slice(0, 40) : '')
const searchParams = ref({});
function download() {
  const params = JSON.parse(JSON.stringify(props.search_params))
  const query = convertQueryToString(params)
  // console.log("serpar",params);
  searchParams.value = params;
  // downloadAnswerFile(props.sn, question_index.value, query).then(res => {
  //   // const url = res.data.url
  //   // downloadFile(url)
  //   const {title,url} = res.data.url
  //   const subdata = {
  //     fileURL:url,
  //     fileName:title
  //   }
  //   store.dispatch('common/fileDown',subdata)
  // })
  downloadCenter()
}

const router = useRouter();
const route = useRoute();
const downloadVisible = ref(false);
// 下载中心
function downloadCenter() {
  let data ={ download_type: '3', question_index:question_index.value, ...searchParams.value }
  addDownloadCenter(props.sn,data).then(res=>{
    store.dispatch('downloadCenter/changeCenterUrl',route.path)
    // downloadVisible.value = true
    store.dispatch('downloadCenter/changeCenterShow',true)
    // router.push({
    //   path: "/downloadCenter",
    //   query: { path:route.path,sn:props.sn },
    // });
  })
}

watchEffect(() => {
  content.value = props.data.title
  question_index.value = props.data.question_index
  question_type.value = props.data.question_type
})
</script>

<style lang="scss">
.custom-table-head-img img {
  width: 40px;
  height: 40px;
}
</style>

<style lang="scss" scoped>
.custom-head-cell {
  width: 100%;
  .custom-head-main {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .file-question {
    display: flex;
    align-items: center;
    .label {
      width: 40%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .image-question {
    display: flex;
    align-items: center;
  }
  .common-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .custom-head-preview {
    display: flex;
    align-items: center;
    word-wrap: break-word;
  }

}
</style>
