<template>
  <div>
    <el-input
      class="transfer_input"
      placeholder="请输入内容"
      v-model="knowledgeQuery.name"
      clearable
      @change="filterKonwledgeFn"
    >
    </el-input>
    <el-transfer
      v-model="knowledgeIds"
      :titles="['选择知识点', '已选择知识点']"
      :button-texts="['移除', '添加']"
      :data="knowledgeData"
      @change="handleKnowledgeChange"
    >
      <div class="transfer-footer" slot="left-footer">
        <el-pagination
          :pager-count="3"
          @size-change="transferSizeChange"
          @current-change="transferCurrentChange"
          :current-page="transferCurrentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="transferPageSize"
          layout=" sizes, prev, pager, next"
          :total="transferTotal"
        >
        </el-pagination>
      </div>
      <div class="transfer-footer" slot="right-footer">
        <el-pagination
          :pager-count="3"
          @size-change="transferSizeChange"
          @current-change="transferCurrentChange"
          :current-page="transferCurrentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="transferPageSize"
          layout=" sizes, prev, pager, next"
          :total="transferTotal"
        >
        </el-pagination>
      </div>
    </el-transfer>
  </div>
</template>

<script>
import {
  getListProduct,
  getRightList,
  addProduct,
  updateProduct,
  getProduct,
  delProduct,
} from "@/api/technology/routeprodproduct";

export default {
  name: "Routeprodproductnew",

  data() {
    return {
      knowledgeQuery: {
        // 数据传参列表
        cursor: 1,
        limit: 10,
        searchCount: true,
        name: "",
      },
      knowledgeIds: [], // 穿梭框选中项组成的数组
      knowledgeData: [], // 穿梭框要绑定的数据
      preKnowledgeData: [], // 上一页的穿梭框数据源
      transferCurrentPage: 1, //穿梭框分页当前页
      transferPageSize: 10, //穿梭框分页当前pagesize
      transferTotal: 0, //分页数据总数
      leftQueryParams: {
        routeId: this.routeId,
        pageNum: 1,
        pageSize: 20
       },
    };
  },
  props: {
    routeId: undefined,
    optType: undefined,
  },
  created() {
    this.getKnowledges();
    // this.getRightListFun();
  },
  methods: {
    // 获取目前已选中的穿梭框选像id用于回显
    getKnowledges() {
      const _this = this
      getListProduct(this.leftQueryParams).then(response => {
        // this.LPages = Math.ceil(response.total/this.LPageSize)
        // this.leftList = response.rows;
				// this.Ltotal = response.total;
        // this.LPageNum = this.leftQueryParams.pageNum;
        // this.LNextPage = this.leftQueryParams.pageNum+1;
        // this.loading = false;
        this.knowledges = response.rows;
        this.knowledges.forEach((e) => {
          _this.knowledgeIds.push(e.id);
        });
      });
    },
    // 获取分页展示的数据
    getKnowledgesFn() {
      getKnowledgesByPage(this.knowledgeQuery).then((res) => {
        // 获取所有的穿梭框展示数据
        console.log("res章节列表", res);
        this.transferTotal = res.result.total;
        this.dialogKnowledgeVisible = true;
        this.preKnowledgeData = [...this.knowledgeData];
        // 将数据转成穿梭框要求的格式并去重
        this.knowledgeData = res.result.records
          .map((item, index) => {
            return {
              key: item.id,
              label: item.name,
            };
          })
          .filter((item, index, self) => {
            return self.findIndex((el) => el.key == item.key) === index;
          });
        // console.log(' this.knowledgeData', this.knowledgeData)
        this.getChooseDataFn();
      });
    },
    // pageSize 改变
    transferSizeChange(size) {
      this.knowledgeQuery.limit = size;
      this.getKnowledgesFn();
    },
    // currentPage 改变时
    transferCurrentChange(page) {
      this.knowledgeQuery.cursor = page;
      this.transferCurrentPage = page;
      this.getKnowledgesFn();
    },
    // 获取到选中的穿梭数据,将选中的数据添加到分页展示的数据中
    getChooseDataFn() {
      this.knowledgeData = this.knowledgeData.filter((item) => {
        return !this.knowledgeIds.includes(item.key);
      });
      // console.log('knowledgeIds_55', this.knowledgeIds)
      // knowledgeIds 存着选中的选项id
      const pushArrVal = this.preKnowledgeData.filter((item, index, self) => {
        return this.knowledgeIds.includes(item.key);
      });
      // console.log('pushArrVal', pushArrVal)
      this.knowledgeData.push(...pushArrVal);
      // console.log('this.knowledgeData——888', this.knowledgeData) //  获取到了已经选过得数据
      // console.log(' this.preKnowledgeData', this.preKnowledgeData)
    },
    // 穿梭框添加操作
    handleKnowledgeChange(value, direction, movedKeys) {
      this.knowledges = [];
      for (let i = 0; i < value.length; i++) {
        this.knowledgeIds[i] = value[i];
        for (let j = 0; j < this.knowledgeData.length; j++) {
          if (this.knowledgeData[j].key == value[i]) {
            this.knowledges.push({
              id: this.knowledgeData[j].key,
              name: this.knowledgeData[j].label,
              category: this.knowledgeData[j].category,
            });
          }
        }
      }
    },
    // 穿梭框搜索
    filterKonwledgeFn(val) {
      this.transferCurrentPage = 1;
      this.knowledgeQuery.cursor = 1;
      this.getKnowledgesFn();
    },
  },
};
</script>
<style>
.el-transfer-panel {
  width: 350px;
}
</style>
