<template>
  <div style="margin-left: 15px">
    <el-transfer v-model="value" :data="data"
                 class="edit_dev"
                 filterable
                 :titles="['未选入单据类型', '已选入单据类型']"
    >

      <template slot-scope="scope">
        <span>
          <span>{{ scope.option.label }}</span>
        </span>
      </template>

    </el-transfer>
    <div style="text-align: center;margin-top: 20px">
      <el-button type="primary" size="small" icon="search" @click="onAddSubmit"
      >提交
      </el-button
      >
      <el-button type="primary" size="small" icon="search" @click="cancelDialog"
      >取消
      </el-button
      >
    </div>
  </div>
</template>

<script>

import {
  filterSelectInvUser, postInvUser
} from "@/api/basic/invRelBusTypes";

export default {
  name: "invUserRelBusTypes",
  props: {
    inputQuery: {
      type: Object,
      required: true,
    },
    closeDialog: {
      type: Function,
      required: true,
    },
  },

  data() {
    return {
      filterQuery: {
        subInvCode: null,
        userId: null,
      },
      bussinessTypeData: null,
      multipleSelection: [],
      data: [],
      value: [],
    }
  },
  methods: {
    getList() {
      this.filterQuery = {
        subInvCode: this.inputQuery.code,
        userId: this.inputQuery.userid,
      };
      filterSelectInvUser(this.filterQuery).then((res) => {
        if (res.code == 20000) {
          this.bussinessTypeData = res.data;
          this.$nextTick(() => {
            for (let i = 0; i < this.bussinessTypeData.length; i++) {
              // this.$refs.fileTable.toggleRowSelection(this.bussinessTypeData[i], this.bussinessTypeData[i].select)
              this.data.push({
                key: this.bussinessTypeData[i].action,
                label: this.bussinessTypeData[i].name,
              });
              if (this.bussinessTypeData[i].select) {
                this.value.push(
                  this.bussinessTypeData[i].action
                );
              }
            }
          });

        } else {
          this.$message.error(res.message);
        }
      }).catch((error) => {
      });
    },

    checkSelectable(row) {
      return !row.select;
    },

    cancelDialog() {
      this.closeDialog();
    },


    onAddSubmit() {
      let postRequesty = {
        subInvCode: this.inputQuery.code,
        userId: this.inputQuery.userid,
      };
      postRequesty.selectActions = this.value;
      postInvUser(postRequesty).then((res) => {
        if (res.code == 20000) {
          this.closeDialog();
        } else {
          this.$message.error(res.message);
        }

      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },

  created() {
    this.getList();
  },
}
</script>

<style scoped>
/*.edit_dev >>> .el-transfer__button {*/
/*  display: flex;*/
/*}*/

/*.edit_dev >>> .el-transfer__button {*/
/*  display: flex;*/
/*  width: 50px;*/
/*}*/

</style>
