<template>
  <Modal
    :options="getModalOptions"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
    :on-close="handleClose"
  >
    <template #Context>
      <n-form
        ref="formRef"
        :model="taskForm"
        :rules="taskRules"
        :label-width="80"
        label-placement="left"
        require-mark-placement="left"
        :disabled="disabled"
      >
        <template v-for="(item,index) in getFormOptions" :key="index">
          <n-form-item :label="item.label" :path="item.key">
            <n-input v-if="item.type === 'input'" v-model:value="taskForm[item.key]" v-bind="item.props" />
            <n-select v-if="item.type === 'select'" v-model:value="taskForm[item.key]" v-bind="item.props" />
            <n-date-picker v-if="item.type === 'date'" v-model:formatted-value="taskForm[item.key]" v-bind="item.props" />
          </n-form-item>
        </template>
      </n-form>
    </template>
  </Modal>
</template>

<script>
import { form, getAirOptions, getLineOptions, getOptions } from '../tools/form.js'
import { defineComponent, computed, watch, ref, reactive, toRefs } from 'vue'
import Modal from '@/components/Modal/index.vue'
import { createTask } from '@/api/task/index.js'
export default defineComponent({
  name: 'UserModal',
  components: { Modal },
  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 }) {
    getAirOptions()
    const formItem = ref([])
    if (props?.data?.id) {
      getLineOptions(props.data.droneId)
      if (![1, 2].includes(props.data.status)) {
        formItem.value = [
          { type: 'input', key: 'droneName', label: '执飞无人机' },
          { type: 'input', key: 'flyTime', label: '飞行时间' }
        ]
      } else {
        formItem.value = []
      }
    } else {
      formItem.value = []
    }

    const MODAL_TYPE = {
      'create': '新建任务',
      'preview': '任务详情',
      'update': '编辑任务'
    }
    const formRef = ref()
    const { taskForm, taskRules } = form
    const data = reactive({
      taskForm: {
        ...taskForm,
        ...props.data
      },
      taskRules: {
        ...taskRules
      },
      disabled: props.type === 'preview'
    })
    /* 获取弹窗的属性 */
    const getModalOptions = computed(() => {
      return {
        show: props.visible,
        title: MODAL_TYPE[props.type],
        width: 700,
        negativeText: props.type !== 'preview' ? '取消' : '',
        positiveText: props.type !== 'preview' ? '确认' : ''
      }
    })

    const getFormOptions = computed(() => {
      return {
        ...form.formItem.concat(formItem.value)
      }
    })

    watch(() => data.taskForm.airportId,
      (val) => {
        const { airOptions } = getOptions()
        const item = airOptions.value.find((item) => { return item.id === val })
        data.taskForm.inspectionLine = ''
        getLineOptions(item.droneId)
      })

    /**
     * @description: 保存&编辑
     * @return {*}
     */
    const handleConfirm = () => {
      formRef.value?.validate((errors) => {
        if (!errors) {
          const { airOptions, lineOptions } = getOptions()
          const airportInfo = airOptions.value.find((item) => { return (item.value === data.taskForm.airportId) })
          const airLineInfo = lineOptions.value.find((item) => { return (item.value === data.taskForm.inspectionLine) })
          const params = {
            ...data.taskForm,
            airportName: airportInfo.label,
            droneId: airportInfo.droneId,
            droneName: airportInfo.droneName,
            inspectionLineName: airLineInfo.label
          }
          if (params.id) {
            // 1
          } else {
            /* 新增 */
            createTask(params)
              .then(res => {
                if (res.code === 0) {
                  emit('reload')
                  handleClose()
                }
              })
          }
        } else {
          $message.error('请先完成校验')
        }
      })
      return false
    }

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

    return {
      ...toRefs(data),
      formRef,
      getModalOptions,
      getFormOptions,
      handleConfirm,
      handleClose
    }
  }

})
</script>
<style scoped lang='scss'>
.n-date-picker{
  width: 100%;
}
::v-deep(.n-date-picker--disabled){
  .n-input .n-input-wrapper .n-input__input {
    .n-input__input-el{
      text-decoration-color: transparent !important;
    }
  }
}
</style>
