<template>
  <div
    class="search-list-wrap"
    v-loading="loading">
    <div class="search-wrap">
      <el-input
        clearable
        class="search-input"
        placeholder="快速筛选"
        prefix-icon="el-icon-search"
        v-model="searchInput">
        <i
          class="el-icon-search el-input__icon"
          slot="suffix">
        </i>
      </el-input>
    </div>
    <div class="list-wrap custom-scroll">
      <ul class="list-content">
        <li
          class="list-item"
          :class="{active:currentTypeIndex===index}"
          v-for="(item,index) in tableData"
          :key="index"
          @click="clickRow(item)">
          <h5 class="title">
            <span @click.stop="checkInfo(item)">
              {{ item.name }}
            </span>
          </h5>
          <span class="price">
            <b>{{ item.capital }}</b> 元
          </span>
        </li>
      </ul>

      <div
        class="mask"
        @click="forbidden"
        v-if="disabled"></div>
    </div>
    <ElDialog
      title="会员类型信息"
      width="700px"
      v-model="infoDialogVisible">
      <InfoDialog
        :scenic-list="scenicList"
        :info="memberTypeInfo"
      ></InfoDialog>
    </ElDialog>
  </div>
</template>

<script>
import { getScenic } from '@/api/ticketType'
import { getMemberType } from '@/api/member'
import moment from 'moment'
import ElDialog from '@/components/Dialog'
import InfoDialog from './InfoDialog'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    ElDialog,
    InfoDialog
  },
  data () {
    return {
      searchInput: '',
      loading: false,
      scenicList: [],
      memberList: [],
      infoDialogVisible: false,
      memberTypeInfo: {},
      currentTypeIndex: 0,
      currentType: null
    }
  },
  filters: {
    checkPattern (input) {
      switch (input) {
        case 'count':
          return '单人按次'
        case 'time':
          return '按有效期'
        default:
          return ''
      }
    }
  },
  computed: {
    tableData () {
      if (this.searchInput) {
        return this.memberList.filter(row => row.name.indexOf(this.searchInput) !== -1)
      } else {
        return this.memberList
      }
    }
  },
  watch: {
    // '$store.getters.quickSearch' (val) {
    //   this.keyword = val
    // }
    tableData (val) {
      let index = val.findIndex(item => {
        return item.id === this.currentType.id
      })
      // let n = index === -1 ? 0 : index
      this.$nextTick(() => {
        // this.$refs.ticketTable.setCurrentRow(val[index])
        this.currentTypeIndex = index
      })
    },
    currentType (val) {
      if (!val) return null
      let index = this.tableData.findIndex(item => {
        return item.id === val.id
      })
      this.$nextTick(() => {
        this.currentTypeIndex = index
      })
    }
  },
  mounted () {
    this.getScenicList()
    this.getMemberTypeList()
    // this.$store.commit('setQuickSearch', '')
    // document.getElementById('quick-search').focus()
  },
  methods: {
    // 获取景点列表
    getScenicList () {
      getScenic().then(res => {
        this.scenicList = res?.data.children.map(item => item.data)
      })
    },
    // 获取会员类型
    getMemberTypeList () {
      this.loading = true
      this.memberList = []
      getMemberType({
        pageNum: 1,
        pageSize: 1000,
        keyWords6: 1,
        keyWords8: 1,
        keyWords9: 1
      }).then(res => {
        res.list.forEach(item => {
          item.valid = moment().isBetween(item.saleDateStart, item.saleDateEnd)
        })
        this.$nextTick(() => {
          this.memberList = res.list.filter(item => item.valid)
          this.currentType = this.memberList[0] || {}
          this.$emit('input', this.currentType)
          this.loading = false
          // this.$refs.memberTable.setCurrentRow(this.memberList[0])
        })
      }).finally(() => {
        this.loading = false
      })
    },
    // 查看会员详情
    checkInfo (item) {
      this.memberTypeInfo = item
      this.infoDialogVisible = true
    },
    // 选择会员类型
    clickRow (row) {
      if (row) {
        this.currentType = row
        this.$emit('input', row)
      }
    },
    selectOrderMemberType (order) {
      this.currentType = this.memberList.find(i => i.id === (order.tickets[0] && order.tickets[0].memberTypeId)) || null
      this.$emit('input', this.currentType)
    },
    forbidden () {
      this.$message.error('线上会员不可手动切换类型，请选择线上订单')
    }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  .price-inner {
    margin-top: 3px;
    b {
      font-size: 1.2em;
    }
  }
}
.search-list-wrap {
  position: relative;
  .mask {
    position: absolute; top: 0; left: 0; z-index: 100; width: 100%;height: 100%; background: rgba(253, 253, 253, .5); cursor:not-allowed;
  }
}

</style>
