<template>
  <div v-focus>
    <bo-button type="primary" col="5" @click="clickTest">
      打开消息弹窗
    </bo-button>
    <bo-button type="primary" @click="addDialogShowMid = true">
      打开消息弹窗
    </bo-button>

    <el-confirm-dialog
      v-model="addDialogShowMid"
      title="中型弹窗"
      message="111111"
      type="warning"
    >
      <span>这是一段信息</span>
      <template #footer>
        <bo-button type="primary" @click="addDialogShowMid = false">
          确 定
        </bo-button>
        <bo-button @click="addDialogShowMid = false">
          取 消
        </bo-button>
      </template>
    </el-confirm-dialog>

    <el-form ref="formRef" :model="form" label-width="180px">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name" disabled />
      </el-form-item>
    </el-form>
    <bo-button @click="clickTest">
      clickTest
    </bo-button>
    {{ formRef }}

    {{ form.inputSelectLabel }}

    <el-link @click="test = !test">
      122
    </el-link>
    <bo-button icon="el-icon-search" />
    <bo-button icon="el-icon-dingzhi" />
    {{ form.value1 }}

    <div class="el-col-2">
      <el-select
        v-model="form.value1"
        style="width:750px"
        multiple
        :options="options"
        @change="clickTest"
      >
        <!-- <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        /> -->
      </el-select>
      <el-input-select
        v-model="form.inputSelect"
        v-model:label="form.inputSelectLabel"
        style="width: 100px"
        :options="options"
        placeholder="查询1l"
        prefix-icon="el-icon-search"
        :loading="loading"
        @change="changeTest"
        @input="clickTest"
      />
      <!-- <el-select
        v-model="form.value2"
        value-key="value"
        :options="options"
        style="float:right;width:200px"
      /> -->
    </div>
  </div>
  <el-form
    ref="dynamicValidateForm"
    :model="form"
    label-width="100px"
    class="demo-dynamic"
  >
    <el-form-item
      prop="email"
      label="邮箱"
      :rules="[
        { required: true, message: '请输入邮箱地址', trigger: 'change' },
      ]"
    >
      <el-select v-model="form.email" style="width: 100px" :options="options" />
    </el-form-item>
  </el-form>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
// import { ElAlert, ElDatePicker, ElCheckbox, ElSelect } from "element-plus";
// import tzTable from "@/el-table/index.js";
export default {
  name: "App",
  components: {
    // tzTable,
    // ElAlert,
    // ElDatePicker,
    // ElCheckbox,
    // ElSelect,
  },
  directives: {
    focus: {
      // 指令的定义
      mounted(el) {
        // el.addEventListener("keyup", (e) => {
        //   console.log(2222, e);
        // });
        console.log("1222", el);
      },
    },
  },
  setup(props, context) {
    const options = ref([]);
    const arr = Array.from(Array(100), (v, k) => k);
    setTimeout(() => {
      options.value = arr.map((item) => {
        return {
          label: `test-${item}11111111111111111113444444444444444444444444456`,
          value: item,
          labelContent: `test-${item}-1`,
        };
      });
    }, 3000);

    const options1 = ref([
      { label: "test1", value: "1" },
      { label: "test2", value: "2" },
    ]);

    // const { proxy } = getCurrentInstance();
    const tableData = ref([
      {
        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 弄",
      },
    ]);
    const test = ref(true);
    const addDialogShowMid = ref(false);
    const form = reactive({
      name: "11",
      inputSelectLabel: "",
      value2: { value: "2" },
      value1: ["2"],
      email: 0,
    });
    const formRef = ref(null);
    const pasteFn = (value) => {
      console.log(value.clipboardData.getData("text/plain"));
      form.value.number1 = value.clipboardData.getData("text/plain");
    };
    const checkedCities = ref(["上海", "北京"]);
    const cities = ref(["上海", "北京", "广州", "深圳"]);
    const checkboxGroup1 = ref([]);
    // const msg = ref(null);
    const clickTest = (data) => {
      console.log("test", data);
      // console.log("222222");
      // console.log(proxy);ew
      // msg.value && msg.value.close();

      // console.log(options.value);
      // msg.value = proxy.$message("111", { closeOther: false });
      // console.log(msg);
    };
    const changeTest = (item) => {
      console.log(1111111, item);
    };
    const state = reactive({
      drawer: false,
      loading: false,
    });
    const changeOptions = (val) => {
      state.loading = true;
      setTimeout(() => {
        state.loading = false;
        options1.value = [
          {
            label: "test-1ssssssssssssssssssssssss11111",
            value: 2,
            labelContent: "test-1ssssssssssssssssssssssss",
          },
        ];
      }, 1000);

      console.log(options1.value);
    };
    return {
      ...toRefs(state),
      changeOptions,
      formRef,
      tableData,
      test,
      addDialogShowMid,
      clickTest,
      changeTest,
      pasteFn,
      form,
      checkedCities,
      cities,
      checkboxGroup1,
      options,
      options1,
    };
  },
  data() {
    const generateData = (_) => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          value: i,
          desc: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return data;
    };
    return {
      data: generateData(),
      value: [],
    };
  },

  methods: {},
};
</script>
<style lang="scss">
.width100 {
  width: 100px;
}
::-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;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
