<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="500px"
    @ok="handleSubmit"
  >
    <a-form>
      <div class="text-20px font-medium">温度</div>
      <div class="mt-30px flex">
        <div class="w-90px leading-32px">Ⅰ级预警：</div>
        <div>
          <div class="flex w-full items-center" v-for="item in 3" :key="item">
            <a-form-item>
              <a-input suffix="℃" />
            </a-form-item>
            <div class="mb-24px px-10px">-</div>
            <a-form-item>
              <a-input suffix="℃" />
            </a-form-item>
          </div>
        </div>
      </div>
    </a-form>
  </BasicDrawer>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Form, Input } from 'ant-design-vue';

  export default defineComponent({
    components: {
      BasicDrawer,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
    },
    setup() {
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        setDrawerProps({ confirmLoading: false });
        // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
      });

      const getTitle = '设置';

      async function handleSubmit() {}

      return {
        getTitle,
        registerDrawer,
        handleSubmit,
      };
    },
  });
</script>

<style scoped></style>
