<template>
  <div :style="newBarStyle" class="wrapper">
    <!-- <dof-minibar title="智能搜索"> </dof-minibar>
    <SwitchTheme /> -->
    <div :class="['dof-search-bar']">
      <input
        autofocus="false"
        disabled="false"
        return-key-type="search"
        singleline="true"
        @return="rightBtnClicked"
        @focus="inputFocus"
        ref="search-input"
        v-model="inputContent"
        :placeholder="placeholder"
        :style="{ width: '592px' }"
        :class="['search-bar-input']"
      />
      <div class="search-bar-icon">
        <dof-iconfont size="64" :code="'\u4785'" color="rgba(255,255,255,0.40)"></dof-iconfont>
      </div>
      <!-- <image class="search-bar-icon" :aria-hidden="true" :src="searchIcon"></image> -->
      <!-- <image
        class="search-bar-clear"
        v-if="inputContent && inputContent != ''"
        :aria-hidden="true"
        @click="clearClicked"
        :src="clearIcon"
      ></image> -->
      <dof-iconfont
        class="search-bar-clear"
        v-if="inputContent && inputContent != ''"
        @dofIconFontClicked="clearClicked"
        size="48"
        :code="'\u4725'"
        color="#71717A"
      ></dof-iconfont>
      <text :class="['search-bar-button']" @click="rightBtnClicked">{{ rightLabel }}</text>
    </div>
    <scroller class="scroller" offset-accuracy="20" :loadmoreoffset="offsetValue" @loadmore="onloadmore">
      <auto-complete
        :keyword="inputContent"
        :autocompleteList="menuList"
        @dofAutoCompleteClicked="autoCompleteClicked"
      ></auto-complete>

      <capsule-list
        v-if="menuList && menuList.length == 0 && recipeData && recipeData.length == 0 && !noResult"
        :title="title1"
        :capsule-list="list1"
        @dofCapsuleClicked="dofCapsuleClick"
        @dofDeliconClicked="dofDeliconClick"
      >
      </capsule-list>
      <div class="h16"></div>
      <capsule-list
        v-if="menuList && menuList.length == 0 && recipeData && recipeData.length == 0 && !noResult"
        :title="title2"
        :capsule-list="list2"
        :show-del="false"
        @dofCapsuleClicked="dofCapsuleClick"
        @dofDeliconClicked="dofDeliconClick"
      >
      </capsule-list>
      <!-- 结果列表 -->
      <div v-if="noResult" class="empty-box" :style="{ 'margin-top': '300px' }">
        <!-- <image v-if="!isRecommend" class="empty-image" :src="noResultImg"></image> -->
        <div class="empty-text-box">
          <text class="empty-text">没有找到“</text><text class="empty-text">{{ inputContent }}</text
          ><text class="empty-text">”相关的内容</text>
        </div>
      </div>
      <!-- <flow-card
        v-if="recipeData && recipeData.length > 0 && !isRecommend"
        :recipe-data="recipeData"
        :keyword="inputContent"
      ></flow-card>

      <div v-if="isRecommend">
        <text class="title">配套食谱</text>
        <flow-card :recipe-data="recommendData" :keyword="inputContent"></flow-card>
      </div> -->
    </scroller>
  </div>
</template>

<script>
import { DofMinibar, DofSearchbar, Utils, DofButton, DofCatalog, DofIconfont } from 'dolphin-weex-ui'
import nativeService from 'src/service/nativeService.js'
import { SEARCH_ICON, CLEAR_ICON } from './icon'
import capsuleList from './capsule'
import autoComplete from './autocomplete'
import flowCard from './flowCard'
import SwitchTheme from 'src/components/SwitchTheme.vue'

export default {
  components: {
    DofMinibar,
    DofSearchbar,
    capsuleList,
    autoComplete,
    DofButton,
    DofCatalog,
    flowCard,
    SwitchTheme,
    DofIconfont
  },
  data: () => ({
    noResult: false,
    noResultImg: '../../assets/image/platform/platform-search/img_no_commodity@3x.png',
    searchIcon: SEARCH_ICON,
    clearIcon: CLEAR_ICON,
    placeholder: '搜索你感兴趣的内容',
    inputContent: '',
    rightLabel: '',
    isImmersion: true,
    // capsuleShow:true,
    title1: '历史搜索',
    list1: ['蒜茸炒娃娃菜', '炸薯条', '双皮奶'],
    title2: '热门搜索',
    list2: ['西红柿炒鸡蛋', '蒸鸡蛋'],
    menuList: [],
    offsetValue: 0,
    recipeData: [],
    isRecommend: false, //是否展示推荐
    isSetMenuList: true //解决点击autocomplete点击后，inputcontent 变化引起的menulist重新赋值
  }),

  mounted() {
    if (this.inputContent && this.inputContent != '') {
      this.rightLabel = '搜索'
    } else {
      this.rightLabel = '取消'
    }
  },

  methods: {
    dofCapsuleClick(item) {
      console.log('item', item)
      this.inputContent = item.text
      this.rightBtnClicked() //发起请求
    },

    dofDeliconClick(params) {
      console.log('dofDeliconClick', params)
      if (params.title == this.title1) {
        this.title1 = ''
        this.list1 = []
      } else {
        this.title2 = ''
        this.list2 = []
      }
    },

    clearClicked() {
      this.inputContent && this.inputContent != '' ? (this.inputContent = '') : ''
      this.recipeData = []
      this.menuList = []
      this.noResult = false
      this.isRecommend = false
    },

    autoCompleteClicked(params) {
      console.log('autoCompleteClicked params', params)
      this.inputContent = params.text
      // this.menuList = []  // 这里置空无效，因为inputContent变了，watch中会重新给menulist赋值
      this.isSetMenuList = false
      this.rightBtnClicked()
    },

    rightBtnClicked() {
      nativeService.killKeyboard()
      const { inputContent, rightLabel } = this
      if (rightLabel == '取消') return false
      if (inputContent == '西红柿炒鸡蛋') {
        this.isRecommend = true
      } else {
        this.isRecommend = false
      } //展示无结果和推荐菜单的效果
      this.noResult = false
      if (inputContent == '红烧' || inputContent == '红' || inputContent == '烧') {
        new Promise((resolve, reject) => {
          let data = [],
            food1 = {
              recipeThumb: '../../assets/image/platform/platform-search/food.jpg',
              applianceCate: '电饼铛',
              recipeName: '红烧煎饼果子',
              costTime: '5',
              difficulty: 2,
              kcal: '200',
              likeFlag: true,
              progress: 1,
              autoPlay: false
            },
            food2 = {
              recipeThumb: '../../assets/image/platform/platform-search/food2.jpg',
              applianceCate: '电饭煲',
              recipeName: '香菇红烧鸡肉',
              costTime: '40',
              difficulty: 3,
              kcal: '350',
              likeFlag: false,
              progress: 1,
              autoPlay: false
            }
          for (var index = 0; index < 10; index++) {
            let randomNum = Math.floor(Math.random() * 11)
            randomNum > 5 ? data.push(food1) : data.push(food2)
          }
          let response = { data }
          setTimeout(function() {
            resolve(response)
          }, 250)
        })
          .then(res => {
            console.log('responseList', res)
            this.menuList = []
            this.recipeData = res.data //模拟异步数据赋值
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.recipeData = []
        this.menuList = []
        this.noResult = true
      }
    },

    inputFocus() {
      const { inputContent } = this
      // this.noResult = false
      // this.isRecommend = false
    },
    onloadmore() {},
    swipe(e) {
      //监听手势, 刷新loadmoreoffset为0 ,不触发加载更多bug
      if (!e || !e.direction) return
      if (e.direction == 'down') {
        this.offsetValue = 0
      } else {
        this.offsetValue = 1
      }
    }
  },

  computed: {
    statusBarHeight: function() {
      let result = '20'
      if (weex.config.env.statusBarHeight) {
        if (weex.config.env.platform === 'iOS') {
          // iOS使用pt为单位
          result = weex.config.env.statusBarHeight
        } else {
          // 安卓使用px为单位
          result = weex.config.env.statusBarHeight / weex.config.env.scale
        }
      }
      return result
    },

    newBarStyle() {
      let result
      if (this.isImmersion) {
        // 全屏显示，weex自行处理状态栏高度
        result = {
          paddingTop: this.statusBarHeight + 'wx'
          //   height: +this.statusBarHeight + 44 + 'wx',
        }
      } else {
        // 非全屏显示，app已处理状态栏高度
        result = {
          height: '44wx'
        }
      }
      return result
    },

    // 推荐菜谱
    recommendData() {
      let recommendList = [],
        food = {
          recipeThumb: '../../assets/image/platform/platform-search/food.jpg',
          applianceCate: '电饼铛',
          recipeName: '红烧煎饼果子',
          costTime: '5',
          difficulty: 2,
          kcal: '200',
          likeFlag: true,
          progress: 1,
          autoPlay: false
        }
      for (let index = 0; index < 6; index++) {
        recommendList.push(food)
      }
      return recommendList
    }
  },

  watch: {
    inputContent(newVal, oldVal) {
      const { recipeData } = this
      recipeData == [] ? (this.noResult = true) : (this.noResult = false)
      this.isRecommend = false
      if (newVal && newVal != '') {
        this.rightLabel = '搜索'
        this.recipeData = []
        if (newVal == '红烧' || newVal == '红' || newVal == '烧') {
          // setTimeout模拟服务端异步数据
          new Promise((resolve, reject) => {
            let response = {
              data: [
                '红烧',
                '红烧鱼块',
                '红土豆红烧鸡土豆红烧鸡土豆红烧鸡土豆红烧鸡土豆红烧鸡土豆红烧鸡土豆红烧鸡',
                '红烧肥牛'
              ]
            }
            setTimeout(function() {
              resolve(response)
            }, 250)
          })
            .then(res => {
              console.log('responseList', res)
              this.isSetMenuList ? (this.menuList = res.data) : '' //模拟异步数据赋值, 解决点击autocomplete点击后，inputcontent 变化引起的menulist重新赋值
              this.isSetMenuList = true
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.menuList = []
        }
      } else {
        this.rightLabel = '取消'
        this.noResult = false
        this.isRecommend = false
        this.menuList = []
        this.recipeData = []
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  background-color: #151617;
  font-family: PingFangSC-Regular;
}
.dof-search-bar {
  padding-left: 32px;
  padding-right: 32px;
  background-color: #151617;
  width: 750px;
  height: 88px;
  flex-direction: row;
  align-items: center;
}

.search-bar-input {
  position: absolute;
  top: 8px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 64px;
  padding-left: 80px;
  font-size: 28px;
  width: 512px;
  height: 72px;
  line-height: 72px;
  background-color: rgba(177, 193, 234, 0.05);
  /* color: #8A8A8F; */
  color: rgba(255, 255, 255, 0.8);
  placeholder-color: rgba(255, 255, 255, 0.4);
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #267aff;
  font-weight: bold;
}
.h16 {
  height: 36px;
}

.search-bar-icon {
  position: absolute;
  width: 64px;
  height: 64px;
  left: 48px;
  top: 12px;
}
.search-bar-clear {
  position: absolute;
  width: 48px;
  height: 48px;
  right: 142px;
  top: 20px;
}
.search-bar-button {
  width: 72px;
  font-size: 32px;
  text-align: center;
  line-height: 88px;
  height: 88px;
  margin-right: 0;
  color: #666666;
  position: absolute;
  right: 32px;
}

.scroller {
  flex: 1;
}

.noResultScroller {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.empty-box {
  margin-top: 300px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.empty-image {
  width: 480px;
  height: 400px;
}
.empty-text-box {
  flex-direction: row;
  justify-content: center;
}
.empty-text {
  margin-top: 32px;
  font-size: 28px;
  line-height: 36px;
  color: rgba(255, 255, 255, 0.8);
}

.title {
  font-size: 36px;
  line-height: 32px;
  margin-top: 128px;
  margin-left: 32px;
  font-weight: bold;
}
</style>

<template>
  <div v-if="show" class="capsule-wrap">
    <div class="head">
      <text class="title">{{ title }}</text>
      <dof-iconfont
        v-if="showDel && capsuleList.length > 0"
        size="56"
        :code="'\u4733'"
        color="rgba(255,255,255,0.40)"
        @dofIconFontClicked="delIconClicked"
      ></dof-iconfont>

      <!-- <image v-if="showDel && capsuleList.length > 0" :src="delIcon" class="img" @click="delIconClicked"></image> -->
    </div>
    <div class="capsule-bar">
      <text class="capsule" @click="selectItem(item, index)" v-for="(item, index) in capsuleList" :key="index">{{
        item
      }}</text>
    </div>
  </div>
</template>

<script>
import { DofIconfont } from 'dolphin-weex-ui'

import { DEL_ICON } from './icon'
export default {
  components: {
    DofIconfont
  },
  data: () => ({
    delIcon: DEL_ICON,
    show: true
  }),

  props: {
    title: {
      type: String,
      default: ''
    },
    capsuleList: {
      type: Array,
      default: () => []
    },
    showDel: {
      type: Boolean,
      default: true
    }
  },

  methods: {
    selectItem(item, index) {
      const text = item
      if (item) {
        this.$emit('dofCapsuleClicked', { text, index })
      }
    },

    delIconClicked() {
      console.info('delIconClicked')
      const { title, capsuleList } = this
      this.show = false
      this.$emit('dofDeliconClicked', { title, capsuleList })
    }
  },

  computed: {}
}
</script>

<style scoped>
.capsule-wrap {
  margin-top: 56px;
}

.head {
  flex-direction: row;
  margin-left: 32px;
  margin-right: 28px;
  /* margin-top: 48px; */
  margin-bottom: 28px;
  justify-content: space-between;
  align-items: center;
}
.title {
  /* margin-left: 32px; */
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
}

.img {
  width: 56px;
  height: 56px;
}

.capsule-bar {
  flex-direction: row;
  justify-content: flex-start;
  margin-left: 16px;
}

.capsule {
  height: 64px; /* padding-top, padding-bottom  18 */
  line-height: 64px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: PingFangSC-Regular;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 16px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.2);
}
</style>