<!-- 项目穿梭框 -->
<template>
  <div>
    <TableTransfer
      ref="tableTransfer"
      v-model="tableData"
      v-loading="tableLoading"
      :show-query="true"
      :show-pagination="false"
      :pagination-call-back="paginationCallBack"
      :left-columns="leftColumns"
      :title-texts="['待选项目', '已选项目']"
      :button-texts="['添加', '删除']"
      :query-texts="['查询', '筛选']"
      :table-row-key="row => row.projectNo"
    >
      <template v-slot:leftCondition="{ scope }">
        <el-form-item label="" class="inline-form-item">
          <el-input v-model="scope.keyword" placeholder="请输入项目编号或名称搜索" style="width: 100%;" clearable />
        </el-form-item>
      </template>
      <template v-slot:rightCondition="{ scope }">
        <el-form-item label="">
          <el-input v-model="scope.keyword" placeholder="请输入项目编号或名称搜索" />
        </el-form-item>
      </template>
    </TableTransfer>
  </div>
</template>

<script>

import { getProjectList } from '@/apiV2/project'
import TableTransfer from './index.vue'

export default {
  name: 'TableTransferProject',
  components: {
    TableTransfer
  },
  props: {
    companyId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      leftColumns: [
        { label: '项目编号', id: 'projectNo' },
        { label: '项目名称', id: 'name' }
      ],
      tableData: [ // 已选（右）
      ],
      tableOption: [ // 选项（左）
      ],
      tableLoading: false
    }
  },
  watch: {
    companyId: {
      async handler(val, oldVal) {
        console.log(`output->val`, val)
        this.tableLoading = true
        try {
          const { success, data } = await getProjectList({ companyId: val })
          if (success && data) {
            this.tableOption = data.map(item => ({
              ...item,
              disabled: item.status === 0 // 禁用状态不可选
            }))
            this.$refs.tableTransfer.handlePaginationCallBack() // 更新选项数据
          }
        } finally {
          this.tableLoading = false
        }
      },
      immediate: true
    }
  },
  methods: {
    paginationCallBack(obj) {
      // console.log(obj)
      const data = this.tableOption.filter((item, index) => {
        const isMatch = obj.keyword === '' || obj.keyword == null || item.name.indexOf(obj.keyword) !== -1 || item.projectNo.indexOf(obj.keyword) !== -1
        const isSelected = this.tableData.some(data => data.projectNo === item.projectNo)
        if (index >= (obj.pageIndex - 1) * obj.pageSize && index < obj.pageIndex * obj.pageSize && isMatch && !isSelected) {
          return true
        }
        return false
      })
      return new Promise((resolve, reject) => {
        try {
          resolve({ total: this.tableOption.length, data })
        } catch {
          reject()
        }
      })
    },
    clearTransfer() {
      this.tableData = []
      this.$refs.tableTransfer.clear()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
