<template>
  <n-spin :show="show" description="正在从服务器查询信息...">
    <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
      <n-grid-item>
        <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
          <n-form-item label="json配置地址" path="watermarkClarity">
            <n-input v-model:value="formValue.watermarkClarity" placeholder="设置json配置地址" />
          </n-form-item>

          <div>
            <n-space>
              <n-button type="primary" @click="formSubmit">保存</n-button>
            </n-space>
          </div>
        </n-form>
      </n-grid-item>
    </n-grid>
  </n-spin>
</template>

<script lang="ts">
  import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { getConfPath } from '@/api/account/list';

  const rules = {
    name: {
      required: true,
      message: '请输入网站名称',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入联系电话',
      trigger: 'input',
    },
  };
  const watermarkPlaceList = [
    {
      label: '左上',
      value: 1,
    },
    {
      label: '右上',
      value: 2,
    },
    {
      label: '居中',
      value: 3,
    },
    {
      label: '右下',
      value: 4,
    },
  ];

  const pricePreciseNumList = [
    {
      label: '2位',
      value: 1,
    },
    {
      label: '3位',
      value: 2,
    },
    {
      label: '4位',
      value: 3,
    },
  ];
  const pricePreciseList = [
    {
      label: '四舍五入',
      value: 1,
    },
    {
      label: '向上取整',
      value: 2,
    },
    {
      label: '向下取整',
      value: 3,
    },
  ];

  export default defineComponent({
    setup() {
      const formRef: any = ref(null);
      const message = useMessage();
      const dialog = useDialog();

      const show = ref(false);

      const data = ref({});

      const state = reactive({
        formValue: {
          bigWidth: '',
          bigHeight: '',
          smallWidth: '',
          smallHeight: '',
          watermarkClarity: null,
          pricePrecise: 1,
          isMarketPrice: true,
          pricePreciseNum: null,
        },
      });

      function systemOpenChange(value) {
        if (!value) {
          dialog.warning({
            title: '提示',
            content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
            positiveText: '确定',
            negativeText: '取消',
            onPositiveClick: () => {
              message.success('操作成功');
            },
            onNegativeClick: () => {
              state.formValue.systemOpen = true;
            },
          });
        }
      }

      function formSubmit() {
        formRef.value.validate((errors) => {
          if (!errors) {
            message.error('保存失败，请联系服务端');
          } else {
            message.error('验证失败，请填写完整信息');
          }
        });
      }

      function resetForm() {
        formRef.value.restoreValidation();
      }

      onMounted(() => {
        load();
      });

      function load() {
        show.value = true;
        new Promise((_resolve, _reject) => {
          getConfPath({})
            .then((res) => {
              show.value = false;
              state.formValue.watermarkClarity = res;
              console.log('res:' + JSON.stringify(res));
            })
            .catch((error) => {
              show.value = false;
              message.error(error.toString());
            });
        });
      }

      return {
        formRef,
        ...toRefs(state),
        pricePreciseList,
        watermarkPlaceList,
        pricePreciseNumList,
        rules,
        formSubmit,
        resetForm,
        systemOpenChange,
        show,
        data,
      };
    },
  });
</script>
