<template>
  <!-- 显示工具栏 -->
  <template v-if="visible">
    <template v-if="data">
      <!-- 首页才显示 -->
      <a-card
        v-if="data.home == 1"
        title="页面设置"
        size="small"
        :bordered="false"
        style="width: 300px"
      >
        <template #extra>
          <a-button v-if="visible" type="text">
            <template #icon>
              <MinusOutlined @click="openEdit" />
            </template>
          </a-button>
        </template>
        <a-form
          v-if="visible"
          ref="formRef"
          layout="vertical"
          :model="form"
          :rules="rules"
        >
          {{ layout }}
          <a-form-item label="画板">
            <a-descriptions :column="2">
              <a-descriptions-item
                label="内容区域"
                :labelStyle="{ width: '70px', alignItems: 'center' }"
              >
                <a-input
                  placeholder="1200"
                  v-model:value="data.layout"
                  style="width: 90px"
                />
              </a-descriptions-item>
            </a-descriptions>
          </a-form-item>
          <a-form-item label="颜色">
            <a-descriptions :column="2">
              <a-descriptions-item
                label="背景颜色"
                :labelStyle="{ width: '70px', alignItems: 'center' }"
              >
                <ele-color-picker
                  v-model:value="layout.backgroundColor"
                  @change="updateColor"
                />
              </a-descriptions-item>
              <a-descriptions-item
                label="文字颜色"
                :labelStyle="{ width: '70px', alignItems: 'center' }"
              >
                <ele-color-picker
                  v-model:value="layout.color"
                  @change="updateColor"
                />
              </a-descriptions-item>
              <a-descriptions-item
                label="高亮颜色"
                :labelStyle="{ width: '70px', alignItems: 'center' }"
              >
                <ele-color-picker
                  v-model:value="layout.color"
                  @change="updateColor"
                />
              </a-descriptions-item>
            </a-descriptions>
          </a-form-item>
        </a-form>
      </a-card>
      <a-card
        v-if="data.home == 0"
        title="数据面板"
        size="small"
        :bordered="false"
        style="width: 300px"
      >
        <template #extra>
          <a-button v-if="visible" type="text">
            <template #icon>
              <MinusOutlined @click="openEdit" />
            </template>
          </a-button>
        </template>
        <a-form
          v-if="visible"
          ref="formRef"
          layout="vertical"
          :model="form"
          :rules="rules"
        >
          <template v-if="item">
            <a-form-item label="画板">
              <a-descriptions :column="2">
                <a-descriptions-item
                  label="X"
                  :labelStyle="{ width: '25px', alignItems: 'center' }"
                >
                  <a-input-number
                    placeholder="X"
                    style="width: 90px"
                    v-model:value="item.style.marginLeft"
                  />
                </a-descriptions-item>
                <a-descriptions-item
                  label="X"
                  :labelStyle="{ width: '25px', alignItems: 'center' }"
                >
                  <a-input-number
                    placeholder="X"
                    style="width: 90px"
                    v-model:value="item.style.marginTop"
                  />
                </a-descriptions-item>
                <a-descriptions-item
                  label="W"
                  :labelStyle="{ width: '25px', alignItems: 'center' }"
                >
                  <a-input
                    placeholder="W"
                    v-model:value="item.style.width"
                    style="width: 90px"
                  />
                </a-descriptions-item>
                <a-descriptions-item
                  label="H"
                  :labelStyle="{ width: '25px', alignItems: 'center' }"
                >
                  <a-input-number
                    placeholder=""
                    style="width: 90px"
                    v-model:value="item.style.height"
                  />
                </a-descriptions-item>
                <a-descriptions-item
                  label="R"
                  :labelStyle="{ width: '25px', alignItems: 'center' }"
                >
                  <a-input-number
                    placeholder="圆角半径"
                    style="width: 90px"
                    v-model:value="item.style.borderRadius"
                  />
                </a-descriptions-item>
              </a-descriptions>
            </a-form-item>
            <a-form-item label="背景颜色">
              <ele-color-picker
                v-model:value="item.style.backgroundColor"
                @change="updateColor"
              />
            </a-form-item>
          </template>
        </a-form>
      </a-card>
    </template>
  </template>
  <!-- 隐藏工具栏 -->
  <a-button v-if="!visible" type="text" @click="openEdit">
    <template #icon>
      <SettingOutlined />
    </template>
  </a-button>
</template>
<script setup lang="ts">
  import useFormData from '@/utils/use-form-data';
  import { reactive, ref, watch } from 'vue';
  import { MinusOutlined, SettingOutlined } from '@ant-design/icons-vue';
  import { Design } from '@/api/cms/design/model';
  import { Layout } from '@/api/layout/model';

  const props = defineProps<{
    // 是否显示
    visible: boolean;
    // 修改回显的数据
    data?: Design | null;
    layout?: Layout;
    index?: number | 0;
  }>();

  const item = ref<any>({
    title: '页面设置',
    name: 'common',
    style: {
      width: '100vw',
      height: '100vh',
      borderRadius: '4'
    },
    data: []
  });

  const emit = defineEmits<{
    (e: 'done', index: number): void;
    (e: 'update'): void;
  }>();

  // 表单数据
  const { form, assignFields } = useFormData<Design>({
    pageId: undefined,
    home: undefined,
    layout: undefined
  });

  // 表单验证规则
  const rules = reactive({
    name: [
      {
        required: true,
        type: 'string',
        message: '请填写页面名称',
        trigger: 'blur'
      }
    ],
    path: [
      {
        required: true,
        type: 'string',
        message: '请填写路由地址',
        trigger: 'blur'
      }
    ],
    component: [
      {
        required: true,
        type: 'string',
        message: '请填写组件路径',
        trigger: 'blur'
      }
    ]
  });

  const openEdit = () => {
    emit('update');
  };

  const updateColor = (color: string) => {
    item.value.style.background = color;
    emit('done', item);
  };

  const onClick = () => {
    emit('done', Number(props.index));
  };

  watch(
    () => props.data,
    (data) => {
      console.log(data);
    }
  );
</script>
<style scoped lang="less"></style>
