<template>
  <div class="patent-export">
    <el-container class="">
      <el-header >
        <span style="padding-left:20px;" class="title">选择导出字段</span>
      </el-header>
      <el-container>
        <el-aside width="650px">
          <div style="padding:20px 0px 0px 40px;">
            <el-transfer v-model="selected" :titles="['未选择', '已选择']" :props="{ key: 'value', label: 'name' }"
              :data="field" @change="handleChange" @right-check-change="rightCheckChange" filterable
              :filter-method="filterMethod">
              <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 class="button">
            <el-button type="primary" style="margin-top:20px;width: 200px;" :loading="btnLoading" @click="handleExport">导出</el-button>
          </div>
        </el-aside>
        <!-- 列表 -->
        <el-main>
          <systemTask ref="systemTask" :importToId="projectId"></systemTask>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import systemTask from "@/views/components/import/task/components/index.vue"
export default {
  components: {
    systemTask
  },
  props: {
    // 项目id
    projectId: '',
    // 选择条件、检索条件、自定义字段筛选条件
    condition: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      selected: [],
      // 数据源
      field: [],
      // 按钮Loading
      btnLoading: false,
      rightSelect:[],
    }
  },
  async mounted() {
    await this.getList()
  },
  methods: {
    // 获取栏位数据
    async getList() {
      this.field = await this.$commonJS.getCustomField('patent', { projectId: this.projectId, taskId: this.taskId })
    },
    // 导出
    handleExport() { 
      if (!this.selected.length) {
        this.$message.error('请选择导出字段')
        return false
      }
      this.field.map(item => item.selected = this.selected.indexOf(item.value) !== -1)
      let params = {
        projectId: this.projectId,
        ...this.condition,//检索条件、自定义字段筛选条件、选择专利条件、排序条件
        selected:this.field,
      }
      this.btnLoading = true
      this.$api.exportPatentExcel(params).then(response => {
        this.btnLoading = false
        this.$message.success('导出任务请求成功')
        //调用查询任务的方法
        this.$refs.systemTask.getList()
      }).catch(error => {
        this.btnLoading = false
      })
    },
    rightCheckChange(data) {
      this.rightSelect = data
    },
    handleChange(val) {
      let order = 1
      for (let i = 0; i < this.selected.length; i++) {
        const index = this.field.map(item => item.value).indexOf(this.selected[i])
        this.field[index].order = order++
      }
    },
    // 搜索栏位值
    filterMethod(query, item) {
      return item.name.indexOf(query) !== -1
    },
    // 移动位置
    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.field.find(item => item.value === this.selected[index])
        let exchange = this.field.find(item => item.value === this.selected[cIndex])
        current.order = current.order + order
        exchange.order = exchange.order + (order === -1 ? 1 : -1)
        this.field.sort((a, b) => {
          return a.order - b.order
        })
        const temp = this.selected[index]
        this.selected[index] = this.selected[cIndex]
        this.selected[cIndex] = temp
      })
    },
  },
}
</script>

<style lang="scss">
.patent-export {
  height: calc(100% - 80px);
  .el-transfer-panel {
    height: 650px;

    .el-transfer-panel__list {
      height: 510px;
    }
  }

  .button {
    text-align: center;
    
  }
}
</style>