Tmr-Multilingual/.svn/pristine/74/74059e8c02fab891484a3093ac43c728c90ab1f1.svn-base

<template>
  <el-form-item label="排序">
    <!-- <draggable v-model="orderByStrs" :group="{name: 'orderBy',pull: false, put: false}" style="display: inline-block;">
      <el-tag v-for="(item,index) in orderByStrs" :key="index" closable size="small" @close="handleCloseOrderBy">
        {{ item }}
      </el-tag>
    </draggable> -->

    <draggable v-model="orderByStrs" :group="{name: 'orderBy',pull: false, put: false}" style="display: inline-block;">
      <el-tag v-for="(item,index) in orderByStrs" :key="index" closable size="small" @close="handleCloseOrderBy" style="display:none">
        {{ item }}
      </el-tag>

      <el-tag v-for="(item,index) in orderByStrs1" :key="index" closable size="small" @close="handleCloseOrderBy">
        {{ item }}
      </el-tag>
    </draggable>

    <el-cascader v-model="orderBy" :options="orderByOption" :disabled="orderByOption.length===0" size="mini" :placeholder="$t('chart.selectOrderBy')" style="width: 150px;" @change="handleOrderByChange" />

  </el-form-item>
</template>
<script>
import draggable from 'vuedraggable'
import store from '../store'

export default {
  components: { draggable },
  props: {
    value: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      orderBy: [],
      orderBy1: [],

      orderByStrs1: []
    }
  },
  computed: {
    allSelected() {
      return store.state.caculCols.concat(store.state.dimensions)
    },
    orderByStrs: {
      set(value) {
        this.$emit('input', value)
      },
      get() {
        return this.value
      }
    },


    orderByOption() {
      return this.allSelected.map(col => {
        return {
          value: col.Column,
          label: col.Comment,
          children: [{
            value: 'desc',
            label: '降序'
          }, {
            value: 'asc',
            label: '正序'
          }]
        }
      })
    }
  },
  watch: {
    'store.state.dimensions': function (value) {
      this.watchHandler(value)
    },
    'store.state.caculCols': function (value) {
      this.watchHandler(value)
    }
  },
  methods: {
    watchHandler(cols) {
      console.log("cols", cols)
      this.orderByStrs.forEach((orderByStr, index) => {
        console.log('orderByStr', orderByStr)
        const colName = orderByStr.split(' ')[0]
        console.log('colName', colName)
        if (!cols.findIndex(col => col.Column === colName)) {
          this.orderByStrs.splice(index, 1)
        }
      })


    },
    // handleOrderByChange(value) {


    //   console.log('handleOrderByChange：', value)

    //   this.orderBy = []
    //   const index = this.orderByStrs.findIndex(orderBy => orderBy.indexOf(value[0]) >= 0)
    //   if (index >= 0) {
    //     this.orderByStrs.splice(index, 1, `${value[0]} ${value[1]}`)
    //   } else {
    //     this.orderByStrs.push(`${value[0]} ${value[1]}`)
    //   }

    //   console.log('handleOrderByChange：', value)
    //   console.log('this.orderByStrs', this.orderByStrs)
    // },

    handleOrderByChange(value) {


      console.log('handleOrderByChange：', value)


      console.log('orderBy：', this.orderBy)
      console.log('orderByOption：', this.orderByOption)

      var china_value = ""
      this.orderByOption.forEach(function (i, j) {
        if (i.value == value[0]) {
          china_value = i.label
        }
      })

      console.log('china_value：', china_value)


      this.orderBy = []

      const index = this.orderByStrs.findIndex(orderBy => orderBy.indexOf(value[0]) >= 0)
      if (index >= 0) {
        this.orderByStrs.splice(index, 1, `${value[0]} ${value[1]}`)
      } else {
        this.orderByStrs.push(`${value[0]} ${value[1]}`)
      }





      this.orderBy1 = []

      if (value[1] == 'desc') {
        var sort = '降序'
      } else {
        var sort = '正序'
      }

      const index1 = this.orderByStrs1.findIndex(orderBy1 => orderBy1.indexOf(china_value) >= 0)
      if (index1 >= 0) {
        this.orderByStrs1.splice(index1, 1, `${china_value} ${sort}`)
      } else {
        this.orderByStrs1.push(`${china_value} ${sort}`)
      }


      console.log('handleOrderByChange：', value)
      console.log('this.orderByStrs', this.orderByStrs)
      console.log('this.orderByStrs1', this.orderByStrs1)
    },


    handleCloseOrderBy(value) {
      this.orderByStrs.splice(this.orderByStrs.indexOf(value), 1)
      this.orderByStrs1.splice(this.orderByStrs1.indexOf(value), 1)
    }
  }
}
</script>