<template>
  <div>
    <el-row>
      <el-col :span="24">
        <btn-list :msg="btn" class="contHide" @on-result-change="_btnClick" />
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            选择列表
          </div>
          <div :style="{height}">
            <draggable v-model="itemList" element="span" :options="dragOptions" :move="onMove" @sort="_handleSortItem">
              <transition-group
                type="transition"
                class="iview-admin-draggable-list list-group"
                :name="'flip-list'"
                tag="ul"
                @start="isDragging=true"
                @end="isDragging=false"
              >
                <li v-for="(item) in itemList" :key="item.key" class="todolist-item" style="white-space: nowrap">
                  <span style="display: inline-block;width: 50%">{{ item.label }}</span>
                  <span style="display: inline-block;width: 50%">{{ item.key }}</span>
                </li>
              </transition-group>
            </draggable>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="padding-left-10">
        <el-card>
          <div slot="header">
            结果
          </div>
          <div :style="{height}">
            <draggable v-model="itemResultList" element="span" :options="dragOptions" :move="onMove" @sort="_handleSortItem">
              <transition-group
                name="no"
                class="iview-admin-draggable-list list-group"
                tag="ul"
                @start="isDragging=true"
                @end="isDragging=false"
              >
                <li v-for="item in itemResultList" :key="item.key" class="todolist-item" style="white-space: nowrap">
                  <span style="display: inline-block;width: 50%">{{ item.label }}</span>
                  <span style="display: inline-block;width: 50%">{{ item.key }}</span>
                </li>
              </transition-group>
            </draggable>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import { componentFlow } from '../../../../api'

export default {
  components: {
    draggable
  },
  data() {
    return {
      btn: [{ type: 'primary', id: '', name: '保存' }],
      height: '',
      itemList: [],
      itemResultList: [],
      editable: true,
      isDragging: false,
      delayedDragging: false,
      companyId: '',
      list: []
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost'
      }
    }
  },
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true
        return
      }
      this.$nextTick(() => {
        this.delayedDragging = false
      })
    }
  },
  methods: {
    _open(companyId) {
      this.height = document.documentElement.clientHeight - 320 + 'px'
      this.companyId = companyId
      this._getAllStatus()
      this._getLeftList()
      this._getRightList()
    },
    _getLeftList: async function() {
      const result = await componentFlow.flowOption({
        type: 11,
        companyId: this.companyId
      })
      if (result) {
        this.itemList = result
        for (let i = 0; i < this.itemList.length; i++) {
          const key = this.itemList[i].key
          for (let j = 0; j < this.list.length; j++) {
            if (key === this.list[j].key) {
              this.itemList[i].sortNo = this.list[j].sortNo
              break
            }
          }
        }
      }
    },
    _getRightList: async function() {
      const result = await componentFlow.flowResult({
        type: 11,
        companyId: this.companyId
      })
      if (result) {
        this.itemResultList = result
        for (let i = 0; i < this.itemResultList.length; i++) {
          const key = this.itemResultList[i].key
          for (let j = 0; j < this.list.length; j++) {
            if (key === this.list[j].key) {
              this.itemResultList[i].sortNo = this.list[j].sortNo
              break
            }
          }
        }
      }
    },
    _getAllStatus: async function() {
      const result = await componentFlow.allStatus({ type: 11 })
      if (result) {
        this.list = result
      }
    },
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
    },
    _btnClick(msg) {
      switch (msg) {
        case '保存':
          this._save()
          break
      }
    },
    _save: async function() {
      const list = []
      for (let i = 0; i < this.itemResultList.length; i++) {
        list.push(this.itemResultList[i].key)
      }
      if (list.length === 0) {
        this.$message.error('请配置流程')
        return
      }
      const obj = {
        dto: { flows: list },
        companyId: this.companyId
      }
      const result = await componentFlow.saveItem(obj)
      if (result) {
        this.$message.success('保存成功！')
      }
    },
    _handleSortItem() {
      this.itemList.sort((e1, e2) => {
        return Number(e1.sortNo) - Number(e2.sortNo)
      })
      this.itemResultList.sort((e1, e2) => {
        return Number(e1.sortNo) - Number(e2.sortNo)
      })
    }
  }
}
</script>
