<script setup>
import RPC from '@/utils/rpc'
import MapSelector from '@/components/MapSelector.vue'
import UploadFile from '@/components/UploadFile.vue'
const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  row: [Object],
})
import { VueDraggable } from 'vue-draggable-plus'
const images = ref([])

const emit = defineEmits(['closed', 'onSuccess'])

const dialogVisible = ref(false)

const isAdd = computed(() => props.type === 'add')

onMounted(() => {
  dialogVisible.value = true
})

const formRef = ref(null)
const formField = ref({})
const formRules = reactive({
  name: [{ required: true, message: '不可为空', trigger: 'change' }],
  sort: [{ required: true, message: '不可为空', trigger: 'change' }],
})

const loading = ref(false)
const showMapSelector = ref(false)

function closed() {
  emit('closed')
}

const submitForm = async () => {
  await formRef.value.validate()
  const api = isAdd.value ? '/content/type/create' : '/content/type/update'
  const params = {
    ...formField.value,
    images: images.value ? JSON.stringify(images.value) : '[]',
    id: isAdd.value ? null : props.row.id,
  }
  loading.value = true
  RPC.post(api, params)
    .then((res) => {
      ElMessage.success('操作成功')
      emit('onSuccess')
      emit('closed')
    })
    .finally(() => {
      loading.value = false
    })
}

if (!isAdd.value) {
  formField.value = props.row
  images.value = props.row.images ? JSON.parse(props.row.images) : []
}

const set_video = (val) => {
  console.log('val', val)
  formField.value.video = val.fullUrl
}
const set_image = (val) => {
  images.value.push(val.fullUrl)
}

const delImage = (item) => {
  images.value = images.value.filter((ele) => ele !== item)
}
</script>

<template>
  <el-dialog
    align-center
    :title="isAdd ? '新增' : '修改'"
    width="80%"
    v-model="dialogVisible"
    @closed="closed"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      label-position="right"
      label-suffix=":"
      :model="formField"
      :rules="formRules"
      v-loading="loading"
      label-width="100"
    >
      <el-form-item prop="name" label="分类名称">
        <el-input placeholder="请输入" v-model="formField.name" />
      </el-form-item>
      <el-form-item prop="sort" label="分类排序">
        <el-input-number placeholder="请输入" v-model="formField.sort" />
      </el-form-item>
      <el-form-item prop="main_image" label="视频">
        <video
          controls
          muted
          :src="formField.video"
          alt=""
          class="video_box"
          v-if="formField.video"
        />
        <UploadFile v-else accept="video/*" @on-success="set_video"></UploadFile>
      </el-form-item>
      <el-form-item prop="images" label="图片">
        <VueDraggable ghost-class="ghost" target=".sort-target" v-model="images">
          <TransitionGroup class="sort-target" name="list" tag="div">
            <div class="imgBox" v-for="item in images" :key="item">
              <el-image
                ref="imageRef"
                style="width: 100%; height: 100%"
                :src="item"
                show-progress
                :preview-src-list="[item]"
                fit="cover"
              />
              <div class="closeBox" @click="delImage(item)">
                <el-icon size="20"><CircleClose /></el-icon>
              </div>
            </div>
          </TransitionGroup>
        </VueDraggable>
        <UploadFile @on-success="set_image"></UploadFile>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed"> 取 消 </el-button>
        <el-button type="primary" :loading="loading" @click="submitForm"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.video_box {
  width: 370px;
  height: 130px;
}
.sort-target {
  display: flex;
  flex-wrap: wrap;
}
.imgBox {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  .closeBox {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
}

.list-enter-active,
.list-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: scale(0);
}

.ghost {
  opacity: 0.5;
}
</style>
