<template>
  <BasicModal
  :maskClosable="false"
    :width="500"
    @register="registerModal"
    v-bind="$attrs"
    :title="getTitle"
    @ok="handleSubmit"
  >
    <div class="modal-box">
      <div><BasicForm @register="registerForm" /></div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
const { createMessage } = useMessage();
import { useMessage } from '/@/hooks/web/useMessage';
import { getWeatherType, getAutoConfigUpdata } from '/@/api/swHome/index';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
export default defineComponent({
  name: 'AccountModal',
  components: { BasicModal, BasicForm },
  setup(_, { emit }) {
    let accountFormSchema = ref([
      {
        field: 'time',
        label: '起始时间',
        component: 'DatePicker',
        colProps: { span: 22 },
        required: true,
        componentProps: {
          showTime: {
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            format: 'YYYY-MM-DD HH:mm:ss',
          },
        },
      },
      {
        field: 'delay',
        label: '延时数',
        component: 'InputNumber',
        colProps: { span: 22 },
        required: true,
        componentProps: {
          maxLength: 30,
          max: 30,
        },
      },
      {
        field: 'repeat',
        label: '重复时段数',
        component: 'InputNumber',
        colProps: { span: 22 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
      {
        field: 'q_delay',
        label: '流量延时数',
        component: 'InputNumber',
        colProps: { span: 22 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
      {
        field: 'weather_type',
        label: '预报断面',
        component: 'ApiSelect',
        colProps: { span: 22 },
        required: true,
        componentProps: {
          api: getWeatherType,
          labelField: 'weather_name',
          valueField: 'weather_type',
          resultField: 'data',
        },
      },
      {
        field: 'forecast_time',
        label: '预见期',
        component: 'InputNumber',
        colProps: { span: 22 },
        required: true,
        componentProps: {
          maxLength: 30,
        },
      },
    ]);

    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      console.log('data', data);
      setFieldsValue(data.data);
    });
    const [registerForm, { setFieldsValue, updateSchema, resetFields, validate, getFieldsValue }] =
      useForm({
        labelWidth: 100,
        schemas: accountFormSchema,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });
    const getTitle = ref('编辑');
    async function handleSubmit() {
      try {
        let formData = getFieldsValue();
        console.log(formData);
        getAutoConfigUpdata(formData).then(res => {
          if(res.code == 200){
            createMessage.success(res.msg);
            closeModal();
            emit('success');
          }else{
            createMessage.warning(res.msg);
          }
        })
      } finally {
        setTimeout(() => {
          setModalProps({ confirmLoading: false });
        }, 300);
      }
    }
    return {
      registerModal,
      getTitle,
      handleSubmit,
      registerForm,
    };
  },
});
</script>
<style lang="less" scoped>
// .modal-box {
//   display: flex;
//   & > div:nth-child(1) {
//     width: 40%;
//   }
//   & > div:nth-child(2) {
//     width: 60%;
//   }
// }
::v-deep(.ant-calendar-picker) {
  width: 100% !important;
}
::v-deep(.ant-input-number) {
  width: 100% !important;
}
</style>
