<template>
  <Poptip trigger="hover" placement="right-end">
    <a style="color: #808695"><Icon type="md-funnel" size="22"/><span style="font-size: 8px">排序</span></a>
    <Card :padding="1" slot="content">
      <Tooltip max-width="300" :content="'排序: '+sortStr">
        <span>排序: {{shortSortStr}}</span>
      </Tooltip>
      <Icon style="float: right;cursor: pointer" type="ios-backspace" @click="resizeSort" size="20"/>
    </Card>
  </Poptip>
</template>
<script>
    /*import {getUserLayoutColumns,saveUserLayoutColumns} from '@/api/base/layout-columns-api'*/

    let $this;
    export default {
        name: "bcCustomSort",
        props: {
            sortParams: {//[{title: 姓名, orderStr: 降序, sortKey: name, order: -}]
                type: Array,
                default: function () {
                      return []
                },
            },
            searchForm: {
                type: Object,
                default:{}
            },
        },
        data() {
            return {
              params: [],
              formParams: {},
              sortStr: '',
              shortSortStr: '',
            }
        },
        methods: {
            sortChange(column) {//column：当前列数据 key：排序依据的指标 order：排序的顺序，值为 asc 或 desc
                let order = column.order === 'asc' ? '+' : '-';
                let orderStr = column.order === 'asc' ? '升' : '降';
                let contain = false;
                this.params.forEach((n, i) => {
                    if (n.sortKey === column.key) {//包含当前排序元素
                        n.order = order;
                        n.orderStr = orderStr;
                        contain = true;
                        if (column.order === 'normal'){
                            delete this.params[i];
                        }
                        this.initSortStr();
                    }
                });
                if (!contain) {//不包含当前排序元素
                    let newSortObj = {
                        title: column.column.title,
                        orderStr: orderStr,
                        sortKey: column.key,
                        order: order
                    };
                    this.params.push(newSortObj);
                }
                this.$emit('update:sortParams', this.params);
                 this.addFormParams();
                this.$emit('reload-data');
            },
            resizeSort (){
                this.params = [];
                this.$emit('update:sortParams', this.params);
                this.addFormParams();
                this.$emit('reload-data');
            },
            initSortStr (){
                this.shortSortStr = '';
                this.sortStr = '';
                this.params.forEach(n =>{
                    if (n){
                        this.sortStr += n.title+'('+n.orderStr+');'
                        if (this.shortSortStr.length<13){
                            this.shortSortStr += n.title+'('+n.orderStr+');'
                        }else{
                            this.shortSortStr += '...'
                        }
                    }
                })
            },
            addFormParams (){
                //处理排序参数
                this.formParams = this.searchForm;
                this.formParams.sort = '';
                if (this.params.length !== 0) {
                    this.params.forEach(sort => {
                        this.formParams.sort += sort.order + sort.sortKey + '|';
                    });
                }
                this.$emit('update:searchForm', this.formParams);
            }
        },
        mounted() {
            $this = this;
            //查询用户的布局配置
            this.params = this.sortParams;
            //this.formParams = this.searchForm;
        },
        watch: {
            params: function(newVal,oldVal){
                this.initSortStr();
            }

        }
    }
</script>

<style scoped>

</style>
