<template>
  <n-button type="primary" @click="showAddModal">添加数据</n-button>

  <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="添加" style="height: 550px;">
    <n-tabs type="line" animated :default-value="defVal" :on-update:value="syncBarPosition">
      <n-tab-pane name="oasis" tab="添加数据">
        <n-form :model="formValue" label-width="auto" show-require-mark>
          <n-form-item label="测点" path="T_id">
            <n-select v-model:value="formValue.T_id" label-field="T_id" value-field="T_id"
              @update:value="handleUpdateValue" :options="classList" />
          </n-form-item>
          <n-form-item label="温度" path="T_t">
            <n-input v-model:value="formValue.T_t">
              <template #suffix> ℃ </template>
            </n-input>
          </n-form-item>
          <n-form-item label="湿度" path="T_rh">
            <n-input v-model:value="formValue.T_rh">
              <template #suffix> % </template>
            </n-input>
          </n-form-item>
          <n-form-item label="时间" path="T_time">
            <n-date-picker v-model:formatted-value="formValue.T_time" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
              clearable class="w-full" />
          </n-form-item>
          <n-form-item>
            <n-button type="primary" style="margin-right: 20px;" @click="addTask">
              立即提交
            </n-button>
            <n-button @click="showModal = false">取消</n-button>
          </n-form-item>
        </n-form>
      </n-tab-pane>

      <n-tab-pane name="jaychou" tab="添加终端">
        <div style="height: 350px;overflow-y: auto;">
          <n-radio-group v-model:value="cheData.cities" name="radiogroup">
            <n-space style="display: flex;flex-direction: column;">
              <n-radio v-for="item in cheData.chechboxVal" :key="item.Id" :value="item.T_sn" @change="handleChange">
                {{item.T_sn}}
              </n-radio>
            </n-space>
          </n-radio-group>
         
        </div>
       
      </n-tab-pane>
    </n-tabs>
    <n-modal v-model:show="showModal1" :show-icon="false" preset="dialog" title="" style="height: auto;">
      <n-form show-require-mark>
          <n-form-item label="填写编号">
            <n-input v-model:value="cheData.radioValue"></n-input>
          </n-form-item>
      </n-form>
      <div style="margin-top: 20px;">
          <n-button type="primary" style="margin-right: 20px;" @click="allAddTask"><!--  -->
            立即提交
          </n-button>
          <n-button @click="showModal1 = false">取消</n-button>
        </div>
    </n-modal>
  </n-modal>
</template>

<script setup>
import { addTaskData, getCertificateList } from '@/api';
import { TimeData } from '@/plugin/timeFun';

const emit = defineEmits(["addFuns"]);

const props = defineProps({
  task: {
    required: true,
    default: {},
  },
  classList: {
    required: true,
    default: [],
  },
});
const defVal = ref('oasis')
const cheData = reactive({
  cities: null,//已选择
  radioValue:null,
  chechboxVal: [],//值
})
const message = useMessage();
const syncBarPosition = (e) => {

  defVal.value = e
}
const CarteApi = () => {
  getCertificateList({
    page: 1,
    page_z: 999,
    T_task_id: props.task.T_task_id
  }).then(res => {
    if (res.data.Code == 200) {
      cheData.chechboxVal = res.data.Data.List
    }
    console.log('111', res)
  })
}
const allAddTask = async () => {
  if (!cheData.radioValue) {message.error('编号不能为空');return}
  const times = TimeData(new Date())
  const { data: res } = await addTaskData({
    T_task_id: props.task.T_task_id,
    T_sn: cheData.cities,
    T_id: cheData.radioValue,
    T_t: 0,
    T_rh: 0,
    T_time: times,
  });
  if(res.Code==200) {message.success('添加成功');showModal1.value = false}
}
// 是否展示 Modal
const showModal = ref(false);
const showModal1 = ref(false);

const handleChange = ()=> {
  console.log('1',cheData.cities)
  showModal1.value = true
  cheData.radioValue = null
}
// 表单数据
const formValue = reactive({
  T_sn: null,
  T_id: null,
  T_t: null,
  T_rh: null,
  T_time: null,
});

// 值更新时执行的回调
const handleUpdateValue = (value, option) => {
  formValue.T_id = option.T_id;
  formValue.T_sn = option.T_sn;
};

// 显示添加
const showAddModal = () => {
  showModal.value = true;
  cheData.cities = null
  CarteApi()
  Object.keys(formValue).forEach((key) => (formValue[key] = null));
};

// 获取设备列表
const addTask = async () => {
  const sto = await inspect(formValue)
  console.log('999', formValue)
  if (sto) {
    Object.keys(formValue).forEach((key) => (formValue[key] += ''));
    const { data: res } = await addTaskData({
      T_task_id: props.task.T_task_id,
      ...formValue,
    });
    if (res.Code === 200) {
      showModal.value = false
      message.success(res.Msg);
    }
  } else {
    message.error('所有选项都为必填哦')
    return
  }
};
const inspect = (value) => {
  return new Promise(resolve => {
    const j = Object.keys(value).every(key => {
      return value[key] != null
    })
    resolve(j)
  })

} 
</script>

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