<template>
  <div class="">
    <el-dialog title="显示栏位管理" :visible.sync="visible" width="650px" append-to-body destroy-on-close :before-close="close" top="10vh">
      <div class="project-table-field">
        <el-transfer
            class="transfer"
            v-model="selected"
            filterable
            :filter-method="filterMethod"
            :titles="['未选择', '已选择']"
            :button-texts="['', '']"
            :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}' }"
            @right-check-change="rightCheckChange"
            @change="handleChange2"
            :data="dataList">
          <span slot-scope="{ option }">{{ option.name }}</span>
          <div slot="left-footer"></div>
          <div class="transfer-footer" slot="right-footer">
            <el-button @click="handleQueryOrder(-1)" type="primary" size="small" icon="el-icon-top" circle></el-button>
            <el-button @click="handleQueryOrder(1)" size="small" icon="el-icon-bottom" circle></el-button>
          </div>
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      visible: false,
      dataList: [],
      btnLoading: false,
      selected: [],
      rightSelect: [],
    }
  },
  mounted() {
  },
  methods: {
    handleQueryOrder(order) {
      this.rightSelect.map(item => {
        const index = this.selected.indexOf(item)
        const cIndex = index + order
        if (cIndex < 0 || cIndex >= this.selected.length) {
          return false
        }
        let current = this.dataList.find(item => item.key === this.selected[index])
        let exchange = this.dataList.find(item => item.key === this.selected[cIndex])
        current.order = current.order + order
        exchange.order = exchange.order + (order === -1 ? 1 : -1)
        this.dataList.sort((a, b) => {
          return a.order - b.order
        })
        const temp = this.selected[index]
        this.selected[index] = this.selected[cIndex] 
        this.selected[cIndex] = temp
      })
    },
    handleChange2() {
      let order = 1
      for (let i = 0; i < this.selected.length; i++) {
        const index = this.dataList.map(item => item.key).indexOf(this.selected[i])
        this.dataList[index].order = order++
      }
    },
    filterMethod(query, item) {
      return item.name.indexOf(query) !== -1
    },
    rightCheckChange(data) {
      this.rightSelect = data
    },
    open(dataList) {
      this.dataList = JSON.parse(JSON.stringify(dataList))
      this.selected = this.dataList.filter(item => !item.hidden).map(item => item.key)
      this.visible = true
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    submit() {
      this.dataList.map(item => item.hidden = this.selected.indexOf(item.key) === -1)
      let data = {
        data: this.dataList,
        projectId: 0,
        type: 'project',
      }
      this.btnLoading = true
      this.$api.updateUserSettingField(data).then(response => {
        this.$emit('update', response.data)
        this.visible = false
        this.btnLoading = false
        this.$message.success('操作成功')
      }).catch(error => {
        this.btnLoading = false
      })
    }
  }
}
</script>

<style lang="scss">
.project-table-field {
  text-align: center;
  .transfer {
    text-align: left;
    display: inline-block;
  }
  .el-transfer-panel__body {
    height: 400px;
  }
  .el-transfer-panel__list.is-filterable {
    height: 350px;
  }
  .transfer-footer {
    margin: 5px;
  }
}
</style>