<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createMaterial, updateMaterial } from '@/api/base'
import type { MaterialProp } from '@/types'
import AppUpload from '@/components/base/AppUpload.vue'

const ruleFormRef = ref<FormInstance>()

interface Props {
  data?: MaterialProp
  type: string
}
const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const form = $ref(
  props.data || {
    name: '',
    content: '',
    status: '1'
  }
)

const rules = ref<FormRules>({
  name: [{ required: true, message: '请输入' }],
  status: [{ required: true, message: '请选择' }],
  content: [{ required: true, message: '请输入' }]
})

// 提交
const submitForm = (formEl: FormInstance | undefined) => {
  const params = Object.assign(form, { type: props.type })
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      if (props.data?.id) {
        updateMaterial(form).then(() => {
          emit('update')
          emit('update:modelValue', false)
          ElMessage({ message: '更新成功', type: 'success' })
        })
      } else {
        createMaterial(params).then(() => {
          emit('update')
          emit('update:modelValue', false)
          ElMessage({ message: '新建成功', type: 'success' })
        })
      }
    } else {
      console.log('error submit!')
    }
  })
}

// 查看h5链接
const handleViewH5 = function () {
  window.open(`https://${form.content}`)
}

const typeName = computed(() => {
  const json: any = {
    '1': '文本',
    '2': '图片',
    '3': '语音',
    '4': '视频',
    '5': 'H5',
    '6': '二维码',
    '7': '小程序',
    '8': '卡券'
  }
  return json[props.type] || ''
})
</script>

<template>
  <el-dialog
    class="connect-form"
    :title="props.data ? (props.data?.isView ? `查看${typeName}资料` : `编辑${typeName}资料`) : `新建${typeName}资料`"
    :close-on-click-modal="false"
    width="800px"
    @closed="$emit('update:modelValue', false)">
    <el-form
      :disabled="props.data?.isView"
      ref="ruleFormRef"
      style="width: 400px; margin: 0 auto; padding: 0 30px 30px 0"
      :model="form"
      :rules="rules"
      label-suffix="："
      label-width="110px">
      <el-form-item label="资料名称" prop="name">
        <el-input placeholder="请输入" v-model="form.name" style="width: 100%"></el-input>
      </el-form-item>
      <el-form-item label="资料内容" prop="content">
        <el-input
          v-if="type === '1'"
          placeholder="请输入"
          type="textarea"
          :autosize="{ minRows: 10 }"
          v-model="form.content"
          style="width: 100%"></el-input>
        <AppUpload v-if="type === '2' || type === '6' || type === '7' || type === '8'" v-model="form.content" />
        <div class="audio" v-if="type === '3'">
          <AppUpload v-model="form.content" accept=".mp3">
            <el-button type="primary">上传语音</el-button>
          </AppUpload>
          <audio v-if="form.content" :src="form.content" controls></audio>
        </div>
        <div class="video" v-if="type === '4'">
          <AppUpload v-model="form.content" accept=".mp4">
            <el-button type="primary">上传视频</el-button>
          </AppUpload>
          <video controls id="video" v-if="form.content" style="width: 100%">
            <source :src="form.content" />
          </video>
        </div>
        <div class="h5" v-if="type === '5'">
          <el-input v-model="form.content" placeholder="请输入">
            <template #prepend>Http://</template>
          </el-input>
          <span v-if="form.content" @click="handleViewH5">查看</span>
        </div>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="form.status" active-text="生效" active-value="1" inactive-text="失效" inactive-value="0" />
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: center">
      <el-button v-if="!props.data?.isView" type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="$emit('update:modelValue', false)">关闭</el-button>
    </div>
  </el-dialog>
</template>
<style lang="scss">
.h5 {
  display: flex;
  span {
    white-space: nowrap;
    margin-left: 10px;
    color: rgba(15, 64, 245, 1);
    cursor: pointer;
  }
}
</style>
