<template>
  <el-dialog
    class="create-dialog"
    :title="t('visualization.new_from_template')"
    v-model="state.dialogShow"
    width="700"
    :before-close="close"
    @submit.prevent
  >
    <el-row class="create-main" v-loading="state.loading">
      <el-row>
        <el-col :span="18" style="height: 40px">
          <el-radio v-model="state.inputType" label="new_outer_template"
            >{{ t('visualization.import_template') }}
          </el-radio>
          <el-radio v-model="state.inputType" label="new_inner_template" @click="getTree"
            >{{ t('visualization.copy_template') }}
          </el-radio>
        </el-col>
        <el-col v-if="state.inputType === 'new_outer_template'" :span="6" class="button-main">
          <el-button class="el-icon-upload" size="small" type="primary" @click="goFile"
            >{{ t('visualization.upload_template') }}
          </el-button>
          <input
            id="input"
            ref="files"
            type="file"
            accept=".DET2"
            hidden
            @change="handleFileChange"
          />
        </el-col>
      </el-row>
      <el-row style="margin-top: 5px">
        <el-col :span="4" class="name-area">{{ t('visualization.name') }}</el-col>
        <el-col :span="20">
          <el-input v-model="state.dvCreateInfo.name" clearable size="small" />
        </el-col>
      </el-row>
      <el-row v-if="state.inputType === 'new_inner_template'" class="preview">
        <el-col :span="8" style="height: 100%; overflow-y: auto">
          <de-template-preview-list
            :template-list="state.templateList"
            @showCurrentTemplateInfo="showCurrentTemplateInfo"
          />
        </el-col>
        <el-col :span="16" :style="classBackground" class="preview-show" />
      </el-row>
      <el-row
        v-if="state.inputType === 'new_outer_template'"
        class="preview"
        :style="classBackground"
      />
      <el-row class="root-class">
        <el-button size="small" @click="cancel()">{{ t('commons.cancel') }} </el-button>
        <el-button type="primary" size="small" :disabled="!saveStatus" @click="save()"
          >{{ t('commons.confirm') }}
        </el-button>
      </el-row>
    </el-row>
  </el-dialog>
</template>

<script setup lang="ts">
import { showTemplateList } from '@/api/template'
import { useI18n } from '@/hooks/web/useI18n'
import { computed, reactive, ref, watch } from 'vue'
import { imgUrlTrans } from '@/utils/imgUtils'
import { ElMessage } from 'element-plus-secondary'
import { decompression } from '@/api/visualization/dataVisualization'
import DeTemplatePreviewList from '@/views/common/DeTemplatePreviewList.vue'
const { t } = useI18n()
const emits = defineEmits(['finish'])
const files = ref(null)
const props = defineProps({
  curCanvasType: {
    type: String,
    required: true
  }
})

const state = reactive({
  dialogShow: false,
  loading: false,
  inputType: 'new_outer_template',
  fieldName: 'name',
  tableRadio: null,
  keyWordSearch: '',
  columnLabel: t('visualization.belong_to_category'),
  templateList: [],
  importTemplateInfo: {
    snapshot: ''
  },
  dvCreateInfo: {
    pid: -1,
    name: null,
    canvasStyleData: null,
    componentData: null,
    templateId: null,
    dynamicData: null,
    staticResource: null
  },
  templateSelected: false
})

const saveStatus = computed(() => {
  return state.dvCreateInfo.name && state.templateSelected
})

const classBackground = computed(() => {
  if (state.importTemplateInfo.snapshot) {
    return {
      background: `url(${imgUrlTrans(state.importTemplateInfo.snapshot)}) no-repeat`
    }
  } else {
    return {}
  }
})

watch(
  () => state.inputType,
  () => {
    createInit()
  }
)

const createInit = () => {
  state.templateSelected = false
  state.dvCreateInfo.name = null
  state.dvCreateInfo.canvasStyleData = null
  state.dvCreateInfo.componentData = null
  state.importTemplateInfo.snapshot = null
  state.dvCreateInfo.templateId = null
}

const showCurrentTemplateInfo = data => {
  state.dvCreateInfo.templateId = data.id
  if (data.nodeType === 'folder') {
    state.dvCreateInfo.name = null
    state.importTemplateInfo.snapshot = null
    state.templateSelected = false
  } else {
    state.dvCreateInfo.name = data.name
    state.importTemplateInfo.snapshot = data.snapshot
    state.templateSelected = true
  }
}

const getTree = () => {
  const request = {
    level: '0',
    leafDvType: props.curCanvasType,
    withChildren: true
  }
  state.loading = true
  showTemplateList(request).then(res => {
    state.templateList = res.data
    state.loading = false
  })
}

const cancel = () => {
  emits('finish')
}

const save = () => {
  if (!state.dvCreateInfo.name) {
    ElMessage.warning(t('common.save_success'))
    return false
  }

  if (state.dvCreateInfo.name.length > 50) {
    ElMessage.warning(t('common.char_can_not_more_50'))
    return false
  }

  if (!state.dvCreateInfo.templateId && state.inputType === 'new_inner_template') {
    ElMessage.warning('chart.template_can_not_empty')
    return false
  }
  state.dvCreateInfo['newFrom'] = state.inputType
  state.loading = true
  decompression(state.dvCreateInfo)
    .then(response => {
      state.loading = false
      emits('finish', response.data)
    })
    .catch(() => {
      state.loading = false
    })
}
const handleFileChange = e => {
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.onload = res => {
    state.templateSelected = true
    const result = res.target.result
    state.importTemplateInfo = JSON.parse(result)
    state.dvCreateInfo.name = state.importTemplateInfo['name'].name
    state.dvCreateInfo.canvasStyleData = state.importTemplateInfo['canvasStyleData']
    state.dvCreateInfo.componentData = state.importTemplateInfo['componentData']
    state.dvCreateInfo.dynamicData = state.importTemplateInfo['dynamicData']
    state.dvCreateInfo.staticResource = state.importTemplateInfo['staticResource']
  }
  reader.readAsText(file)
}
const goFile = () => {
  files.value.click()
}

const close = () => {
  state.dialogShow = false
}
const optInit = () => {
  state.dialogShow = true
  createInit()
}

defineExpose({
  optInit
})
</script>

<style scoped lang="less">
.create-main {
  display: inherit;
}

.name-area {
  display: flex;
  align-items: center;
  justify-content: left;
}

.button-main {
  display: flex;
  align-items: center;
  justify-content: right;
}
.root-class {
  display: flex;
  align-items: center;
  justify-content: right;
  margin: 15px 0px 5px;
}

.preview {
  margin-top: 5px;
  border: 1px solid #e6e6e6;
  height: 310px !important;
  overflow: hidden;
  background-size: 100% 100% !important;
}

.preview-show {
  border-left: 1px solid #e6e6e6;
  height: 310px;
  background-size: 100% 100% !important;
}
</style>