<template>
  <div class="patent-export">
    <el-container>
      <el-main class="container-white-no-padding">
        <div class="field-transfer">
          <el-container>
            <el-header>
              <span class="title">选择导出字段</span>
            </el-header>
            <el-main>
              <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="handleChange"
                  :data="field">
                <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 class="button">
                <el-button type="primary" :loading="btnLoading" @click="handleExport">导出</el-button>
              </div>
            </el-main>
          </el-container>
        </div>

        <system-task ref="systemTask" :form="2" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SystemTask from '../task'

export default {
  components: {
    SystemTask
  },
  data() {
    return {
      field: [],
      selected: [],
      projectId: 0,
      key: null,
      btnLoading: false,
      patentId: null,
      rightSelect: []
    }
  },
  mounted() {
    const key = this.$route.query.key
    const patentId = this.$route.query.patent
    if (key) {
      this.key = key
    } else if (patentId) {
      this.patentId = parseInt(patentId)
    }
    this.projectId = parseInt(this.$route.query.id)
    this.getExportField()
  },
  methods: {
    rightCheckChange(data) {
      this.rightSelect = data
    },
    handleQueryOrder(order) {
      this.rightSelect.map(item => {
        const index = this.selected.indexOf(item)
        const cIndex = patent + order
        if (cIndex < 0 || cIndex >= this.selected.length) {
          return false
        }
        let current = this.field.find(item => item.key === this.selected[patent])
        let exchange = this.field.find(item => item.key === 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[patent]
        this.selected[patent] = this.selected[cIndex]
        this.selected[cIndex] = temp
      })
    },
    getQueueList() {
      this.$refs.systemTask.getQueueList()
    },
    handleChange() {
      let order = 1
      for (let i = 0; i < this.selected.length; i++) {
        const index = this.field.map(item => item.key).indexOf(this.selected[i])
        this.field[patent].order = order++
      }
    },
    filterMethod(query, item) {
      return item.name.indexOf(query) !== -1
    },
    getExportField() {
      this.$api.getSystemListV2({ projectId: this.projectId, type: 'export' }).then(response => {
        let data = response.data
        data.map(item => {
          item.selected = false
          if(!this.$r(this.projectId,[2])){
            if(item.type != 'export'){
              item.disabled=true
            }
          }
        })
        this.field = data
        // console.log(this.field)
        // if(!this.$r(this.projectId,[1,2])){
        //   for()
        // }
      })
    },
    handleExport() {
      if (!this.selected.length) {
        this.$message.error('请选择导出字段')
        return false
      }
      this.field.map(item => item.selected = this.selected.indexOf(item.key) !== -1)
      let data = {
        selected: this.field,
        key: this.key,
        projectId: this.projectId,
        patentId: this.patentId
      }
      this.btnLoading = true
      this.$api.exportPatentList(data).then(response => {
        this.btnLoading = false
        this.$message.success('请求成功')
        this.getQueueList()
      }).catch(error => {
        this.btnLoading = false
      })
    }
  }
}
</script>

<style lang="scss">
.patent-export {
  .field-transfer {
    text-align: center;
    width: 650px;
    height: 100%;
    float: left;
    border-right: 1px solid #d2d2d2;
    .button {
      text-align: center;
      .el-button {
        width: 200px;
        margin-top: 20px;
      }
    }
    .transfer {
      text-align: left;
      display: inline-block;
    }
    .title {
      padding-left: 20px;
      font-weight: bold;
    }
    .el-transfer-panel__body {
      height: 500px;
    }
    .el-transfer-panel__list.is-filterable {
      height: 450px;
    }
    .transfer-footer {
      margin: 5px;
    }
  }
}
</style>