<template>
    <div :style="newBarStyle">
      <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:'582px'}"
             :class="['search-bar-input']" 
             />
        <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>
        <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>
        <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':isRecommend?'128px':'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 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'

export default {
  components: { capsuleList, autoComplete, flowCard },
  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>
.dof-search-bar {
  padding-left: 32px;
  padding-right: 32px;
  background-color: #ffffff;
  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: 40px;
  padding-left: 60px;
  font-size: 28px;
  width: 624px;
  height: 72px;
  line-height: 72px;
  background-color: #F6F6F6;
  border-radius: 36px;
  /* color: #8A8A8F; */
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#267AFF;
    font-weight: bold;
}

.search-bar-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  left: 50px;
  top: 28px;
}
.search-bar-clear {
  position: absolute;
  width: 32px;
  height: 32px;
  right: 152px;
  top: 28px;
}
.search-bar-button {
  width: 72px;
  font-size: 32px;
  text-align: center;
  line-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: #666666;
}

.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>
            <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 { DEL_ICON } from './icon';
export default {
    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})
        }
    }
}
</script>

<style scoped>
.capsule-wrap{
    margin-top: 48px;
}
.head{
    flex-direction: row;
    margin-left: 32px;
    margin-right: 32px;
    /* margin-top: 48px; */
    margin-bottom: 32px;
    justify-content: space-between;
    align-items: center;
}
.title{
    /* margin-left: 32px; */
    font-size: 28px;
}
.img{
    width: 36px;
    height: 36px;
}
.capsule-bar{
    flex-direction: row;
    justify-content: flex-start;
}
.capsule{
    font-size: 24px;
    height: 60px;   /* padding-top, padding-bottom  18 */
    line-height: 60px;
    padding-left: 18px;
    padding-right: 18px;
    color:#666666;
    background-color: #F6F6F6;
    border-radius: 48px;
    margin-left: 32px;
}
</style>

<template>
    <div class="wrap">
        <div class="item" v-for="(item, index) in list" :key="index"  @click="selectItem(index)">
            <text class="completeItem" v-for="(content, i) in item" :key="i" :style="{color: content.type === 1?'#FF8225':''}" 
            >{{content.value}}</text>
        </div>
    </div>
</template>

<script>
export default {
    data:()=>({
        test:'',
        showList:[]
    }),
    props:{
        keyword:{
            type:String,
            default:""
        },
        autocompleteList:{
            type:Array,
            default:()=>([])
        }
    },

    computed:{
        list(){
            const { keyword, autocompleteList } = this
            let finalKey = `(${keyword})`,  list=[]
            var reg = new RegExp(finalKey,'g')
            for (let i = 0; i < autocompleteList.length; i++) {
                let temp = []
                var arr = autocompleteList[i].replace(reg,'&$1&').split('&').filter(e => e !=='') 
                for (let index = 0; index < arr.length; index++) {
                   if (arr[index] == keyword) {
                       var finalItemArrKey = arr[index].split('').map(function(item,index,arr){
                           return { type:1, value:item }
                       })
                   }else{
                       var finalItemArrKey = arr[index].split('').map(function(item,index,arr){
                            return { type:0, value:item }
                       })
                   }
                   for (let index = 0; index < finalItemArrKey.length; index++) {
                       temp.push(finalItemArrKey[index])
                   }
                }
                list.push(temp)
            }
            this.showList = list
            return list
        }
    },

    methods:{
        selectItem(index){
            console.log("index", index)
            const { autocompleteList } = this
            let item = { text:autocompleteList[index], index}
            this.$emit('dofAutoCompleteClicked', item)
        }
    }
}
</script>

<style scoped>
.item{
    flex-direction: row;
    /* flex-wrap: nowrap; */   
    flex-wrap: wrap;
    margin-left: 32px;
    border-bottom-width: 1px;
    border-bottom-color: #F2F2F2;
    padding-top: 32px;
    padding-bottom: 32px;
    max-height: 144px; 
}
.completeItem{
    font-size: 28px;
    line-height: 40px;
    color: #000000;
}
</style>

<template>
  <div class="recipe-info">
    <div class="content-list">
      <div
        class="collect-item"
        v-for="(item, index) in recipeList"
        :key="index"
      >
        <div class="collect-img-box">
          <image
            class="collect-image"
            resize="cover"
            placeholder="../../assets/image/platform/platform-search/loading_ic_bglogo@2x.png"
            :src="item.recipeThumb ? item.recipeThumb + '?x-oss-process=image/resize,l_512' : ''"
          ></image>
          <div class="collect-tool-box">
            <text class="collect-tool">{{ item.applianceCate }}</text>
          </div>
        </div>
        <div class="collect-desc">
          <div class="collect-title-box">
            <text class="collect-title">{{ item.recipeName }}</text>
          </div>
          <div class="collect-time-box">
            <text class="time-text">{{ item.costTime }}分钟</text>
            <text class="time-text">|</text>
            <text class="time-text">{{ showDiff(item.difficulty) }}</text>
            <text class="time-text">|</text>
            <text class="time-text">{{ item.kcal }}千卡</text>
          </div>
        </div>
        <div class="lottie-box">
          <midea-lottie-view
            class="lottie"
            :data="item.likeFlag ? likeImg : unLikeImg"
            :loop="false"
            :progress="item.progress"
            :autoPlay="item.autoPlay"
            @click="animationControl(index)"
          ></midea-lottie-view>
        </div>
      </div>
      <!-- <div class="work-empty" v-if="!recipeList.length">
        <text class="empty-text">{{noResult}}</text>
      </div> -->
    </div>
  </div>
</template>

<script>
import likeImgSrc from '../../assets/lottie/heart/recipes_ic_like.json'
import unlikeImgSrc from '../../assets/lottie/heart/recipes_ic_unlike.json'
export default {
  name: 'recipeInfo',
  components: {},
  props: ['recipeData', 'keyword'],
  data() {
    return {
      likeImg: JSON.stringify(likeImgSrc),
      unLikeImg: JSON.stringify(unlikeImgSrc),
      recipeList: [],
      progress: 1
    }
  },
  computed: {
      noResult(){
          const { keyword } = this
          return `没有找到“${keyword}”相关食谱`
      }
  },
  created() {},
  mounted() {
    let self = this
  },
  watch: {
    recipeData: {
      handler: function(val) {
        this.recipeList = JSON.parse(JSON.stringify(val))
      },
      immediate: true, //关键
      deep: true
    }
  },

  methods: {
    //heart clicked
    animationControl(index) {
      let self = this
      let likeFlag = self.recipeList[index]['likeFlag']
      if (likeFlag) {
        self.favorCancel(index, likeFlag)
      } else {
        self.favorAdd(index, likeFlag)
      }
    },
    //收藏
    favorAdd(index, likeFlag) {
        let self = this
        Vue.set(self.recipeList[index], 'likeFlag', !likeFlag)
        Vue.set(self.recipeList[index], 'autoPlay', true)
        this.$toast('收藏成功')
    },
    //取消收藏
    favorCancel(index, likeFlag) {
        let self = this
        Vue.set(self.recipeList[index], 'likeFlag', !likeFlag)
        Vue.set(self.recipeList[index], 'autoPlay', true)
        this.$toast('取消收藏成功')
    },
    //食谱的难易程度
    showDiff(num) {
      let result = ''
      if (num == 1) {
        result = '简单'
      } else if (num == 2) {
        result = '较简单'
      } else if (num == 3) {
        result = '中等'
      } else if (num == 4) {
        result = '较困难'
      } else {
        result = '困难'
      }
      return result
    }
  }
}
</script>
<style scoped>
.recipe-info {
  padding: 0 32px;
  margin-top: 32px;
}
.content-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.collect-item {
  width: 334px;
  position: relative;
  margin-bottom: 48px;
}
.collect-image {
  width: 334px;
  height: 226px;
  border-radius: 16px;
}
.collect-desc {
  margin-top: 24px;
}
.collect-tool-box {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 4px 10px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 16px;
}
.collect-tool {
  font-size: 20px;
  color: #ffffff;
}
.collect-title-box {
  padding-right: 80px;
  margin-bottom: 12px;
}
.collect-title {
  font-size: 28px;
  color: #000000;
  lines: 1;
  text-overflow: ellipsis;
}
.collect-time-box {
  display: flex;
  flex-direction: row;
}
.time-text {
  font-size: 20px;
  line-height: 20px;
  color: #8a8a8f;
  margin-right: 8px;
}
.empty-box {
  width: 686px;
  margin-bottom: 48px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.empty-image {
  width: 480px;
  height: 400px;
}
.empty-text {
  font-size: 28px;
  color: #666666;
  text-align: center;
}
.lottie {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 0;
  top: 0;
}
.lottie-box {
  width: 160px;
  height: 160px;
  position: absolute;
  right: 0;
  top: 226px;
  z-index: 100;
}
.collect-img-box {
  width: 334px;
  height: 226px;
  background-color: #F9F9F9;
  border-radius: 16px;
  position: relative;
}
</style>