<template>
  <div
    class="search-list-wrap"
    :class="{focusFlash:isFocus}">
    <div
      class="search-wrap"
      slot="search">
      <el-input
        ref="quickSearch"
        id="quick-search"
        clearable
        class="search-input"
        placeholder="按F2 快速筛选"
        v-model="keyword">
        <i
          class="el-icon-search el-input__icon"
          slot="suffix">
        </i>
      </el-input>

      <!-- <TagSelector v-model="selectedTag"></TagSelector> -->

      <ScenicCheckTag
        v-if="showScenicTag"
        style="margin:10px 0"
        v-model="selectedScenic"
        :list="scenicList"></ScenicCheckTag>
    </div>
    <div
      class="list-wrap custom-scroll"
      v-loading="loading">
      <div
        class="noData"
        v-if="!filterTableData.length">
        暂无数据
      </div>
      <ul class="list-content">
        <li
          class="list-item"
          :style="showScenicTag?{padding:'25px 10px 8px 5px'}:{padding:'15px 10px 15px 5px'}"
          :class="{
            active:currentTicket&&currentTicket.id===item.id,
            active2:item.isTop && currentTicket &&currentTicket.id!==item.id
          }"
          v-for="(item,index) in filterTableData"
          :key="index"
          @click="changeTicket(item)"
          @contextmenu.prevent="showTopBtn(item)">
          <div class="scenicTag">
            <ColorTag
              :value="getScenicTag(item)"
              v-if="showScenicTag">
            </ColorTag>
          </div>
          <h5 class="title">
            <el-tooltip
              :content="item.isTop?'取消置顶':'置顶'"
              placement="top"
              effect="dark">
              <span
                v-if="!item.isTop"
                class="goTop"
                @click.stop="setTop(item)"><i class="el-icon-upload2"></i></span>
              <span
                class="goTop"
                v-else
                @click.stop="cancelTop(item)"><i class="el-icon-download"></i></span>
            </el-tooltip>
            <span @click.stop="showTicketInfo(item)">
              {{ item.name }}
            </span>
          </h5>
          <i
            class="top-sign"
            v-if="item.isTop"></i>
          <!-- <span
            class="mutipleTag"
            v-if="item.ticketTypeScenic.length>1 && showScenicTag"><i>多</i></span> -->
          <span
            class="price"
            v-if="item.price">
            <b>{{ item.price }}</b> 元
          </span>
          <span
            class="price"
            v-else>
            无今日价格
          </span>
        </li>
      </ul>
    </div>

    <ElDialog
      :title="ticketDetail.name"
      width="600px"
      v-model="ticketInfoVisible">
      <TicketInfo :data="ticketDetail"></TicketInfo>
    </ElDialog>
  </div>
</template>

<script>
import { getTicketTypeList } from '@/api/ticketType'
import moment from 'moment'
import ElDialog from '@/components/Dialog'
import TicketInfo from './TicketInfo'
// import TagSelector from './TagSelector.vue'
import { getTicketTypeTagList } from '@/api/ticketTypeTag'
export default {
  props: {
    typeId: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    ElDialog,
    TicketInfo
  },
  data () {
    return {
      keyControl: 1, // 键盘控制：1,2,3标识选中顺序
      isFocus: false, // 组件是否是选中状态
      loading: false,
      keyword: '',
      tableData: [],
      currentTicket: {},
      showTopBtnId: -1,
      ticketDetail: {},
      ticketInfoVisible: false,
      topIds: [],
      selectedScenic: [],
      ticketTagList: [],
      selectedTag: ''
    }
  },
  computed: {
    userScenic () {
      return this.$store.state.app.account.manager_scenic_matrix ? this.$store.state.app.account.manager_scenic_matrix.map(i => i.id) : []
    },
    showScenicTag () {
      return this.$localStore.get('showScenicTag') && this.$store.state.app.scenicList.length > 1
    },
    scenicList () {
      return this.$store.state.app.scenicList
    },
    filterTableData () {
      let result = this.tableData.filter(item => {
        if (
          ((item.name).toLowerCase().indexOf(this.keyword.toLowerCase()) > -1 ||
          (item.pinyin).toLowerCase().indexOf(this.keyword.toLowerCase()) > -1 ||
          (item.shorthand).toLowerCase().indexOf(this.keyword.toLowerCase()) > -1)
        ) {
          return true
        }
      })
      let topList = []
      for (let i = 0; i < this.topIds.length; i++) {
        let topItem = result.find(item => item.id === this.topIds[i])
        if (topItem) {
          topItem.isTop = true
          topList.push(topItem)
        }
      }
      let downList = result.filter(item => topList.indexOf(item) === -1)
        .map(item => {
          item.isTop = false
          return item
        })
      return [...topList, ...downList]
    }
  },
  watch: {
    // 当数据变化时，选择第一行
    filterTableData (val) {
      this.$nextTick(() => {
        if (val && val[0]) {
          this.changeTicket(val[0])
        } else {
          this.changeTicket(null)
        }
      })
    },
    selectedTag (val) {
      console.log('val', val)
      this.getTicketTypeList()
    },
    userScenic: {
      handler (val) {
        this.selectedScenic = val
      },
      immediate: true
    }
  },
  mounted () {
    document.getElementById('quick-search').focus()
    // this.getTicketTagList()
    this.getTicketTypeList()
    this.getTopIds()
  },
  methods: {
    // 按enter,移动组件焦点
    // handleEnter (keyBind) {
    //   keyBind.currentIndex++
    //   keyBind.setFocus()
    // },
    getTicketTagList () {
      getTicketTypeTagList({}).then(res => {
        res.children.forEach(item => {
          this.ticketTagList = this.ticketTagList.concat(item.children)
        })
      })
    },
    getScenicTag (item) {
      let tags = item.ticketTypeScenic.map(i => {
        return i.scenic
      })

      // if (item.ticketTypeScenic.length === this.scenicList.length) {
      //   return ['全景点']
      // }
      return tags
    },
    getTicketTypeList () {
      this.loading = true
      getTicketTypeList({
        keyWords2: this.typeId,
        keyWords4: 1,
        keyWords11: 1, // 与用户景区相同的门票
        pageNum: 1,
        keyWords12: this.selectedTag,
        pageSize: 1000,
        ticketTypeName: '',
        category: ''
      }).then(res => {
        this.tableData = res.data.records.map(item => {
          // 添加拼音首字母
          item.pinyin = pinyinUtil.getFirstLetter(item.name)
          return item
        })
      }).finally(() => {
        this.loading = false
      })
    },
    changeTicket (ticket) {
      this.currentTicket = ticket
      this.$emit('update', ticket)
      this.$emit('input', ticket)
    },
    formatDate (input) {
      return moment(input).format('YYYY-MM-DD')
    },
    showTicketInfo (data) {
      data.scenics = data.ticketTypeScenic.map(s => s.scenic)
      this.ticketInfoVisible = true
      this.ticketDetail = data
    },
    setFocus () {
      this.$refs.quickSearch.focus()
      this.keyword = ''
    },
    arrowUp () {
      this.arrowCtrl(-1)
    },
    arrowDown () {
      this.arrowCtrl(1)
    },
    arrowCtrl (n) {
      let currentIndex = this.filterTableData.findIndex(item => item.id === this.currentTicket.id)
      let i = currentIndex + n
      if (this.filterTableData[i]) {
        this.changeTicket(this.filterTableData[i])
      }
    },
    showTopBtn (item) {
      this.showTopBtnId = item.id
    },
    getTopIds () {
      let arr = this.$localStore.get('topIds')
      if (!arr) arr = []
      this.topIds = arr
      // console.log('置顶', this.topIds)
    },
    setTop (item) {
      let arr = this.$localStore.get('topIds')
      if (!arr) arr = []
      if (arr.indexOf(item.id) !== -1) {
        arr.splice(arr.indexOf(item.id), 1)
      }
      arr.unshift(item.id)
      this.$localStore.set({
        'topIds': arr
      })
      this.getTopIds()
      this.showTopBtnId = -1
    },
    cancelTop (item) {
      let arr = this.$localStore.get('topIds')
      if (!arr) arr = []
      if (arr.indexOf(item.id) !== -1) {
        arr.splice(arr.indexOf(item.id), 1)
      }
      this.$localStore.set({
        'topIds': arr
      })
      this.getTopIds()
      this.showTopBtnId = -1
    }
  }
}
</script>

<style lang="scss" scoped>
.el-radio {
  margin-right: 0;
}
.noData {
  padding: 10px; font-size: 14px; color: #666;  text-align: center;
}
.price b {
  color: red;
}
.mutipleTag {
  position: absolute;top: 0; left: 0; width: 0;height: 0;color: #fff; pointer-events: none;

border: 14px solid rgb(255, 94, 0); border-right-color: transparent; border-bottom-color: transparent;

  i {
    position: absolute;  font-size: 12px; transform: translate(-12px,-12px);
  }
}
.scenicTag {
  position: absolute; top: 0;left: 0;
}

</style>
