<template>
  <div>
    <div class="live-tools-wrapper">
      <el-button type="primary" @click="addLive">新增</el-button>
    </div>
    <div class="live-search-wrapper">
      <el-input v-model="liveName" placeholder="请输入直播名称" style="width: 270px;" />
      <el-button type="success">查询</el-button>
    </div>
    <el-table
      :data="liveList"
    >
      <el-table-column
        prop="name"
        label="直播名称"
        width="280"
      />
      <el-table-column
        prop="introduce"
        label="简介"
        width="360"
      />
      <el-table-column
        prop="time"
        label="直播时间"
      />
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="curPageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalPageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="新增在线直播"
      :visible.sync="addLiveShow"
    >
      <el-form
        ref="addLiveForm"
        :model="addFormInfo"
        label-width="120px"
      >
        <el-form-item
          label="直播名称"
        >
          <el-input v-model="addFormInfo.name" />
        </el-form-item>
        <el-form-item
          label="直播简介"
        >
          <el-input v-model="addFormInfo.introduce" />
        </el-form-item>
        <el-form-item
          label="时间"
        >
          <el-date-picker
            v-model="addFormInfo.time"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item
          label="企业"
        >
          <div class="live-enter-search-wrapper">
            <!-- <div contenteditable spellcheck="false" class="inputSearch-div" /> -->
            <input ref="searchInput" class="inputSearch-input" type="text" placeholder="请输入企业名称" @keydown.enter="inputEnterSearch" @compositionend="inputCompositionEnd">
            <div v-show="isShowSearchEntries" class="live-enter-search-result-wrapper">
              <div v-for="item in searchEntries" :key="item.companyId" class="live-enter-search-result-item" @click.stop="chooseEnter(item.companyId)">{{ item.companyName }}</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button style="margin-top: 100px;">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      liveName: '',
      liveList: [
        {
          name: '1',
          introduce: '2',
          time: '3'
        },
        {
          name: '3',
          introduce: '2',
          time: '1'
        }
      ],
      currentPage: 1,
      curPageSize: 10,
      totalPageSize: 40,
      addLiveShow: false,
      addFormInfo: {
        name: '',
        introduce: '',
        time: '',
        company: ''
      },
      searchEntries: [],
      isShowSearchEntries: false
    }
  },
  mounted() {
    this.checkSearchItemClick = (event) => {
      // if (event.target.contains())
      this.isShowSearchEntries = false
    }
    document.addEventListener('click', this.checkSearchItemClick)
  },
  beforeDestroy() {
    // this.checkSearchItemClick = false
    document.removeEventListener('click', this.checkSearchItemClick)
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      this.curPageSize = val
    },
    addLive() {
      //
      this.addLiveShow = true
    },
    inputEnterSearch() {
      // event
      // this.$refs.searchInput.value
      // this.isShowSearchEntries = true
      // this.searchEntries = [
      //   {
      //     companyName: '威海光华1广场',
      //     companyId: 10
      //   },
      //   {
      //     companyName: '威海光华2广场',
      //     companyId: 11
      //   },
      //   {
      //     companyName: '威海光华3广场',
      //     companyId: 12
      //   },
      //   {
      //     companyName: '威海光华4广场',
      //     companyId: 13
      //   },
      //   {
      //     companyName: '威海光华5广场',
      //     companyId: 14
      //   },
      //   {
      //     companyName: '发士大夫',
      //     companyId: 15
      //   }
      // ]
    },
    inputCompositionEnd() {
      this.$refs.searchInput.value
      this.isShowSearchEntries = true
      this.searchEntries = [
        {
          companyName: '威海光华1广场',
          companyId: 10
        },
        {
          companyName: '威海光华2广场',
          companyId: 11
        },
        {
          companyName: '威海光华3广场',
          companyId: 12
        },
        {
          companyName: '威海光华4广场',
          companyId: 13
        },
        {
          companyName: '威海光华5广场',
          companyId: 14
        },
        {
          companyName: '发士大夫',
          companyId: 15
        }
      ]
    },
    chooseEnter(companyId) {
      // 当前选中的 companyId
      this.isShowSearchEntries = false
      //
    },
    cancelChosenEnter() {
      //
      console.log('被点击了吗')
      this.isShowSearchEntries = false
    }
  }
}
</script>

<style lang="scss">
  .live-search-wrapper {
    margin: 20px 0;
  }
  .live-enter-search-wrapper {
    position: relative;
    background: #eee;
  }
  .inputSearch-div {
    font-size: 16px;
    line-height: 16px;
    padding-left: 10px;
    white-space: nowrap;
    &:empty::after{
      content: "请输入企业名称";
    }
  }
  .live-enter-search-result-wrapper {
    position: absolute;
    top: 32px;
    left: 20px;
    width: 280px;
    height: 100px;
    overflow-y: scroll;
    /* border: 1px solid #eee; */
    box-shadow: 1px 1px 1px 2px #eee;
    &::-webkit-scrollbar {
      display: none;
    }
    .live-enter-search-result-item {
      height: 20px;
      width: 100%;
      margin: 7px 0;
      line-height: 20px;
      padding-left: 7px;
      /* background: silver; */
      &:hover {
        background: #eee;
        cursor: pointer;
      }
    }
  }
  .inputSearch-input {
    outline: none;
    border: none;
    background: #eee;
    padding-left: 10px;
  }
</style>
