<template>
  <ul
    v-if="sortFieldList && sortFieldList.length"
    class="sort-wrap"
  >
    <template v-for="item in sortFieldList">
      <li
        :key="item.name"
        class="sort-item"
      >
        <div
          class="item-left"
          :class="{
            selected:
              (item.selectedAsc || item.selectedDesc) &&
              currentSortId === item.id,
          }"
        >
          <van-icon
            v-show="
              (item.selectedAsc || item.selectedDesc) &&
                currentSortId === item.id
            "
            name="success"
            class="selected-icon"
          />
          <span>{{ item.desc }}</span>
        </div>
        <div class="item-right">
          <i
            class="icon-shengxu order-icon asc-order"
            :class="{
              'selected-icon': item.selectedAsc && currentSortId === item.id,
            }"
            @click="handleAscOrDesc(item, 'ASC')"
          ></i>
          <i
            class="icon-jiangxu order-icon"
            :class="{
              'selected-icon': item.selectedDesc && currentSortId === item.id,
            }"
            @click="handleAscOrDesc(item, 'DESC')"
          ></i>
        </div>
      </li>
    </template>
  </ul>
</template>

<script>
  const { Base64 } = require('js-base64')
  export default {
    name: 'HtMobileSort',
    props: {
      mobileDisplayField: {
        type: [String, Array],
      },
      mobilePermission: {
        type: String,
      },
      sortFields: {
        type: String,
      },
    },
    data() {
      return {
        mobileDisplayFieldList: [],
        currentSortId: '',
        sortFieldList: [],
      }
    },
    computed: {
      mobilePermissionMap() {
        const permissionMap = Base64.decode(this.mobilePermission)
        return permissionMap ? JSON.parse(permissionMap) : null
      },
    },
    watch: {
      mobileDisplayField: {
        handler(val) {
          if (val) {
            if (typeof val == 'string') {
              this.mobileDisplayFieldList = JSON.parse(val)
            }
          }
        },
        immediate: true,
      },
      sortFields: {
        handler(val) {
          if (typeof val == 'string') {
            this.sortFieldList = JSON.parse(val)
            // 生成ID
            this.sortFieldList.map((item) => {
              item.id = `${item.tableName}${item.name}`
            })
          }
        },
        immediate: true,
      },
    },
    methods: {
      handleAscOrDesc(item, type) {
        this.sortFieldList.map((it) => {
          const isAsc =
            item.id === it.id && type === 'ASC' ? !it.selectedAsc : false
          const isDesc =
            item.id === it.id && type === 'DESC' ? !it.selectedDesc : false
          this.$set(it, 'selectedAsc', isAsc)
          this.$set(it, 'selectedDesc', isDesc)
        })
        this.currentSortId = item.id
        this.$emit('handleAscOrDesc', item, type)
      },
      resetSort() {
        this.currentSortId = ''
        this.sortFieldList.map((item) => {
          this.$set(item, 'selectedAsc', false)
          this.$set(item, 'selectedDesc', false)
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>
