<template>
  <el-dialog :title="title" v-model="show" width="800px">
    <el-form :model="form" ref="resourceForm" :rules="rules" label-width="60px">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="标签" prop="tipList">
            <el-select
              v-model="form.tipList"
              multiple
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="请选择标签或输入"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="item in tipOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <el-form-item label="内容" prop="content">
            <UploadFile
              v-if="form.type == 1"
              v-model="form.sliderPicUrls"
              :isShowTip="false"
              :fileType="[]"
            />
            <UploadImgs
              v-else-if="form.type == 2"
              v-model:modelValue="form.sliderPicUrls"
              width="100px"
              height="100px"
            />
            <Editor v-else v-model:modelValue="form.content" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
const show = ref(false)
const title = ref('')
const form = ref({})
const rules = ref({})

const tipOptions = ref([{ label: '绿色', value: '绿色' }])

function open(type, val) {
  show.value = true
  if (val) {
    title.value = '修改资源'
    form.value = { ...val, type }
  } else {
    title.value = '新增资源'
    form.value = {
      type,
      title: '',
      tipList: [],
      sliderPicUrls: [],
      content: '',
      remark: null
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

function handleSave() {
  console.log('保存成功')
}
</script>

<style lang="scss" scoped></style>
