<template>
  <el-dialog title="搜索页面" :visible="value" width="480px" @close="toggleVisiable(false)">
    <div class="wrapper">
      <el-button plain @click="handleClick(1)">商城</el-button>
      <el-button plain @click="handleClick(2)">美业资料</el-button>
      <el-button plain @click="handleClick(3)">信息平台</el-button>
      <el-button plain @click="handleClick(4)">采美百科</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    keyword: {
      type: String,
      default: ''
    }
  },
  methods: {
    toggleVisiable(visible) {
      this.$emit('change', visible)
    },
    handleClick(type) {
      const localhost = process.env.VUE_APP_CAIMEI_URL
      const urls = {
        1: localhost + '/product/list.html?keyword=' + this.keyword,
        2: localhost + '/document/beauty-archive.html?keyword=' + this.keyword,
        3: localhost + '/info/search-1.html?keyword=' + this.keyword,
        4: localhost + '/encyclopedia/search.html?keyword=' + this.keyword
      }
      window.open(urls[type], '_blank')
      this.$emit('change', false)
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
</style>
