<script lang="ts">
export default {
  name: 'AMIS',
};
</script>

<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount } from 'vue';
import { MyBtn } from 'src/components';
import request from 'src/http';

const boxRef = ref(null);
const boxRef2 = ref(null);

const amisScoped = ref<any>(null);
const amisjson = reactive({
  type: 'page',
  name: 'myPage1',
  title: '一个简单的表单页面',
  body: {
    type: 'form',
    name: 'myForm1',
    mode: 'horizontal', // 水平
    api: '/saveForm',
    body: [
      {
        label: '姓名',
        type: 'input-text',
        name: 'name',
      },
      {
        label: '邮箱',
        type: 'input-email',
        name: 'email',
      },
    ],
  },
});

const amisScoped2 = ref<any>(null);
const amisjson2 = reactive({
  type: 'page',
  name: 'myPage2',
  toolbar: [
    {
      type: 'form',
      panelClassName: 'mb-0',
      title: '',
      body: [
        {
          type: 'select',
          label: '区域',
          name: 'businessLineId',
          mode: 'inline',
          options: ['北京', '上海'],
          selectFirst: true,
          checkAll: false,
        },
        {
          type: 'input-date-range',
          label: '时间范围',
          name: 'dateRange',
          inline: true,
          value: '-1month,+0month',
          inputFormat: 'YYYY-MM-DD',
          format: 'YYYY-MM-DD',
          closeOnSelect: true,
          clearable: false,
        },
      ],
      actions: [],
      mode: 'inline',
      target: 'mainPage',
      submitOnChange: true,
      submitOnInit: true,
    },
  ],
  body: [
    {
      type: 'grid',
      columns: [
        {
          type: 'panel',
          className: 'h-full',
          body: {
            type: 'tabs',
            tabs: [
              {
                title: '消费趋势',
                tab: [
                  {
                    type: 'chart',
                    config: {
                      title: {
                        text: '消费趋势',
                      },
                      tooltip: {},
                      xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['一月', '二月', '三月', '四月', '五月', '六月'],
                      },
                      yAxis: {},
                      series: [
                        {
                          name: '销量',
                          type: 'line',
                          areaStyle: {
                            color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [
                                {
                                  offset: 0,
                                  color: 'rgba(84, 112, 197, 1)',
                                },
                                {
                                  offset: 1,
                                  color: 'rgba(84, 112, 197, 0)',
                                },
                              ],
                              global: false,
                            },
                          },
                          data: [5, 20, 36, 10, 10, 20],
                        },
                      ],
                    },
                  },
                ],
              },
              {
                title: '账户余额',
                tab: '0',
              },
            ],
          },
        },
        {
          type: 'panel',
          className: 'h-full',
          body: [
            {
              type: 'chart',
              config: {
                title: {
                  text: '使用资源占比',
                },
                series: [
                  {
                    type: 'pie',
                    data: [
                      {
                        name: 'BOS',
                        value: 70,
                      },
                      {
                        name: 'CDN',
                        value: 68,
                      },
                      {
                        name: 'BCC',
                        value: 48,
                      },
                      {
                        name: 'DCC',
                        value: 40,
                      },
                      {
                        name: 'RDS',
                        value: 32,
                      },
                    ],
                  },
                ],
              },
            },
          ],
        },
      ],
    },
    {
      type: 'crud',
      name: 'myCrud',
      className: 'm-t-sm',
      // https://aisuda.bce.baidu.com/amis/api/mock2/sample?page=6&perPage=10
      // api: '/amis/api/mock2/sample',
      columns: [
        {
          name: 'id',
          label: 'ID',
        },
        {
          name: 'engine',
          label: 'Rendering engine',
        },
        {
          name: 'browser',
          label: 'Browser',
        },
        {
          name: 'platform',
          label: 'Platform(s)',
        },
        {
          name: 'version',
          label: 'Engine version',
        },
        {
          name: 'grade',
          label: 'CSS grade',
        },
      ],
    },
  ],
});

const state = reactive({
  amisMap: new Map(),
});

onBeforeUnmount(() => {
  // 如果是单页应用，在离开当前页面的时候通常需要销毁实例，可以通过 unmount 方法来完成。
  amisScoped.value.unmount();
  amisScoped2.value.unmount();
});

onMounted(() => {
  console.log('amis onMounted');

  state.amisMap.set('amis1', amisjson);
  const amis = (window as any).amisRequire('amis/embed');
  amisScoped.value = amis.embed(boxRef.value, amisjson);

  state.amisMap.set('amis2', amisjson2);
  amisScoped2.value = amis.embed(boxRef2.value, amisjson2);

  // axios
  //   .get('https://aisuda.bce.baidu.com/amis/api/mock2/sample', {
  //     params: {
  //       page: 1,
  //       perPage: 10,
  //     },
  //   })
  //   .then((res) => {
  //     console.log('res', res);
  //   })
  //   .catch((err) => {
  //     console.log('err', err);
  //   });

  request({
    url: 'https://aisuda.bce.baidu.com/amis/api/mock2/sample',
    method: 'get',
    params: {
      page: 1,
      perPage: 10,
    },
    error_return: true,
  })
    .then((res: any) => {
      console.log('res', res.data);
    })
    .catch((err: any) => {
      console.log('err', err);
    });

  setTimeout(() => {
    const re = amisScoped2.value.getComponentByName('myPage2.myCrud');
    console.log('re >>>>', re);
  }, 2000);
});

function getFormData() {
  const re = amisScoped.value.getComponentByName('myPage1.myCrud');
  console.log('获取表单的值', re);
}

function setFormData() {
  amisScoped.value.getComponentByName('myPage1.myForm1').setValues({
    name: '张三',
    email: '111@qq.com',
  });
}

function viewConfig(key: string) {
  console.log(state.amisMap.get(key));
}
</script>

<template>
  <div class="page">
    <div class="item">
      <div class="actions">
        <q-btn
          unelevated
          color="primary"
          label="获取表单的值"
          no-caps
          @click="getFormData"
        />
        <q-btn
          unelevated
          color="primary"
          label="修改表单的值"
          no-caps
          @click="setFormData"
        />
        <q-btn
          unelevated
          color="primary"
          label="查看配置项"
          no-caps
          @click="viewConfig('amis1')"
        />
      </div>
      <div ref="boxRef"></div>
    </div>

    <div class="item">
      <div class="actions">
        <my-btn label="操作按钮" />
      </div>
      <div ref="boxRef2"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  margin: 10px;
  box-sizing: border-box;
  border: 1px solid #e8e9eb;
}
.actions {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
}
</style>
