<template>
  <Modal
    :options="getModalOptions"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
    :on-close="handleClose"
  >
    <template #Context>
      <n-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-width="80"
        label-placement="left"
        require-mark-placement="left"
      >
        <n-form-item label="横幅图片" path="cover">
          <UploadOss
            ref="ossRefs"
            :rem-btn="type !== 'preview'"
            :default-list="initUpload"
            @upload-status="handleUploadStatus"
          />
        </n-form-item>
        <!-- <n-form-item label="排序" path="sort">
          <n-input-number v-model:value="form.sort" clearable />
        </n-form-item> -->
      </n-form>
    </template>
  </Modal>
</template>

<script>
import { defineComponent, ref, reactive, computed, toRefs, watch, getCurrentInstance } from 'vue'
import Modal from '@/components/Modal/index.vue'
// import UploadOss from '@/components/UploadOss/index.vue'
import UploadOss from '@/components/UploadOss/fileOss.vue'
import { bannerCreate, bannerUpdate } from '@/api/system/banner.js'
export default defineComponent({
  name: 'BannerModal',
  components: { Modal, UploadOss },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'create'
    },
    data: {
      type: Object,
      default: () => null
    }
  },
  emits: {
    'update:visible': null,
    'reload': null
  },
  setup(props, { emit }) {
    const MODAL_TYPE = {
      'create': '新建横幅',
      'preview': '横幅详情',
      'update': '编辑横幅'
    }
    const data = reactive({
      form: { ...props.data },
      initUpload: '',
      rules: {
        cover: [{ required: true, message: '请选择横幅图片', type: 'string', trigger: 'blur' }]
      }
    })

    watch(() => props.visible, (value) => {
      if (value) {
        if (props.data) {
          data.initUpload = props.data.cover
        }
      } else {
        data.initUpload = ''
      }
    }, { immediate: true })

    const getModalOptions = computed(() => {
      return {
        show: props.visible,
        title: MODAL_TYPE[props.type],
        negativeText: '取消',
        positiveText: '确认'
      }
    })

    function handleUploadStatus(status, list) {
      // console.log('status', status, list)
      data.form.cover = status
      data.form.list = list
    }

    const formRef = ref()
    const ossRefs = ref()
    function handleConfirm() {
      formRef.value.validate().then(() => {
        if (data.form.cover === 'success') {
          const params = {
            ...data.form,
            cover: data.form.list[0]
          }
          if (params.id) {
            /* 编辑 */
            bannerUpdate(params)
              .then(({ code }) => {
                if (code === 0) {
                  emit('reload')
                  handleClose()
                }
              })
          } else {
            /* 新增 */
            bannerCreate(params)
              .then(({ code }) => {
                if (code === 0) {
                  emit('reload')
                  handleClose()
                }
              })
          }
        } else {
          handleClose()
        }
      }).catch(e => {
        console.log('e:', e)
      })
    }

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(data),
      getModalOptions,
      handleUploadStatus,
      handleConfirm,
      handleClose,
      formRef,
      ossRefs
    }
  }
})
</script>
