<template>
  <div class="flex mb20">
    <div class="tag bg-primary">
      122
    </div>
    <div class="tag bg-success">
      222
    </div>
    <div class="tag bg-warning">
      222
    </div>
    <div class="tag bg-danger">
      3333
    </div>
    <span class="fc-primary">primary</span>
    <span class="fc-success">success</span>
    <span class="fc-warning">warning</span>
    <span class="fc-danger">danger</span>
  </div>

  <bo-button type="primary" @click="showAddDialog">
    打开常规弹窗
  </bo-button>

  <bo-button type="success" @click="showAddDialog">
    打开常规弹窗
  </bo-button>

  <bo-button type="danger" @click="showAddDialog">
    打开常规弹窗
  </bo-button>
</template>

<script>
import { ref, h, reactive, unref } from "vue";
import test from "../test/App.vue";
function addDialogFn() {
  const addDialog = reactive({
    show: false,
    showLarge: false,
    title: "测试",
  });
  function showLargeDialog() {
    addDialog.showLarge = true;
  }
  function showAddDialog() {
    addDialog.show = true;
  }
  function handleClose() {
    addDialog.show = false;
  }
  function handleCloseLargeDialog() {
    addDialog.showLarge = false;
  }
  return {
    addDialog,
    handleClose,
    showAddDialog,
    showLargeDialog,
    handleCloseLargeDialog,
  };
}
function uploadFn() {
  function handlePreview() {
    console.log(1);
  }
  function handleRemove() {
    console.log(1);
  }
  function handleExceed() {
    console.log(1);
  }
  function beforeRemove() {
    console.log(1);
  }
  const fileList = ref([]);
  return {
    handlePreview,
    handleRemove,
    handleExceed,
    beforeRemove,
    fileList,
  };
}
function pageFn() {
  function handleSizeChange() {
    console.log(1);
  }
  function handleCurrentChange() {
    console.log(1);
  }
  const currentPage = ref(1);
  return {
    handleSizeChange,
    handleCurrentChange,
    currentPage,
  };
}
function treeFn() {
  function handleNodeClick() {
    console.log(1);
  }
  const treeData = ref({
    data: [
      {
        label: "一级 1",
        children: [
          {
            label: "二级 1-1",
            children: [
              {
                label: "三级 1-1-1",
              },
            ],
          },
        ],
      },
      {
        label: "一级 2",
        children: [
          {
            label: "二级 2-1",
            children: [
              {
                label: "三级 2-1-1",
              },
            ],
          },
          {
            label: "二级 2-2",
            children: [
              {
                label: "三级 2-2-1",
              },
            ],
          },
        ],
      },
      {
        label: "一级 3",
        children: [
          {
            label: "二级 3-1",
            children: [
              {
                label: "三级 3-1-1",
              },
            ],
          },
          {
            label: "二级 3-2",
            children: [
              {
                label: "三级 3-2-1",
              },
            ],
          },
        ],
      },
    ],
    defaultProps: {
      children: "children",
      label: "label",
    },
  });
  return {
    handleNodeClick,
    treeData,
  };
}
export default {
  name: "App",
  components: { test },

  setup(props, ctx) {
    console.log(ctx);
    const myRef = ref([]);
    const loading = ref(true);
    const formRef = ref(null);
    const activeName = ref("first");
    const check = ref(true);
    const select = ref(null);
    const options = ref([
      { label: "啊哈哈", value: "1" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
      { label: "aboard", value: "12" },
    ]);
    const data = ref({});
    const inputRef = ref(null);
    // const form = ref({
    //   name: 1
    // });
    const {
      handlePreview,
      handleRemove,
      handleExceed,
      beforeRemove,
      fileList,
    } = uploadFn;
    const { handleSizeChange, handleCurrentChange, currentPage } = pageFn();
    const addDialog = addDialogFn();
    const { handleNodeClick, treeData } = treeFn();
    function clickFn() {
      check.value = false;
      const form = unref(formRef);
      form.validate((valid) => {
        console.log(valid);
      });
      setTimeout(() => {
        form.clearValidate();
      }, 2000);
      console.log(111111111, inputRef.value);
      inputRef.value.focus();
    }
    function handleClick(tab, event) {
      console.log(tab, event);
    }
    const testData = [];
    const setRef = (el) => {
      myRef.value.push(el);
    };
    const tzFormRef = ref(null);
    const qhInputRef = ref(null);
    return {
      inputRef,
      loading,
      setRef,
      myRef,
      qhInputRef,
      h,
      formRef,
      tzFormRef,
      handleClick,
      activeName,
      select,
      check,
      options,
      clickFn,
      data,
      handlePreview,
      handleRemove,
      handleExceed,
      beforeRemove,
      fileList,
      handleSizeChange,
      handleCurrentChange,
      currentPage,
      ...addDialog,
      handleNodeClick,
      treeData,
      testData,
    };
  },
  data() {
    return {
      form: { name: 11, select: "" },
      count: 0,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    load() {
      this.count += 2;
    },
  },
};
</script>
<style>
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #1c88ee;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #efefef;
}
.flex {
  display: flex;
}
.tag {
  width: 50px;
  height: 50px;
}
.mb20 {
  margin-bottom: 20px;
}
</style>
