<template>
  <div 
  class="flow-sort-box"
    style="height: 100%;overflow-y: auto;"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255,255, 0.8)">
    <Draggable
      class="flow-sort-draggable"
      :list="sortList"
    >
      <es-button style="margin-top: 10px;" v-for="item in sortList" :key="item.id" plain>{{
        item.name
      }}</es-button></Draggable
    >
    <div class="flow-sort-btn">
        <es-button type="primary" @click="saveSort(true)">保存</es-button>
        <es-button  @click="saveSort(false)">取消</es-button>
    </div>
  </div>
</template>

<script>
import util from 'eoss-ui/src/utils/util';
import Draggable from 'vuedraggable';
import { toDefinitionChangeSort,setSort } from 'eoss-ui/src/config/api';
export default {
  name: 'SortFlow',
  components: {
    Draggable
  },
  props: {
    flowTypeCode: {
      type: String,
      default: ''
    },
    defaultProcessKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      sortList: [],
      loading:false
    };
  },
  mounted() {
    this.getSortInfo();
  },
  methods: {
    saveSort(type){
        if(type){
            let arr = [];
            this.sortList.map((item,index)=>{
                arr.push({
                    id:item.id,
                    processDefId:item.processDefId,
                    sort:this.sortList.length - index
                })
            });
            const params = {
        url: setSort,
        method: 'post',
        format: false,
        headers: {
                Accept: 'application/json,text/plain',
                'Content-Type': 'application/json;charset=UTF-8'
              },
        data: arr
      };
      this.loading=true;
      util.ajax(params).then((res) => {
         this.loading=false;
        if (res.rCode === 0 || res.status=== 'success') {
          this.$message.success('保存成功');
          this.$emit('success',this.sortList)
        }
      }).catch(() => {
        this.loading=false;
      });
        }else{
            this.$emit('close')
        }
    },
    getSortInfo() {
      const params = {
        url: toDefinitionChangeSort,
        method: 'get',
        params: {
          flowTypeCode: this.flowTypeCode,
          defaultProcessKey: this.defaultProcessKey
        }
      };
      this.loading=true;
      util.ajax(params).then((res) => {
         this.loading=false;
        if (res.rCode === 0) {
          this.sortList = res.results.definitionList || [];
        }
      }).catch(() => {
        this.loading=false;
      });
    }
  }
};
</script>

<style></style>
