<template>
  <!-- 授权用户 -->
  <el-dialog title="大棚关联用户" close-on-press-escape :close="closeDialog" :visible.sync="visible" width="700px" top="5vh" append-to-body>
    <div class="transfer-center-container">
      <el-transfer
        filterable
        :titles="['全部用户', '关联用户']"
        filter-placeholder="请输入用户名称"
        v-model="value"
        :props="{
          key: 'userId',
          label: 'userName'
        }"
        @change="handleChange"
        :data="data">
      </el-transfer>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSelectUser">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {batchAssociaUser, findAllUser} from "@/api/assets/userAgri";

export default {
  dicts: [],
  props: {

  },
  data() {
    return {
      data: [],
      value: [],

      // 遮罩层
      visible: false,
      // 选中数组值
      userIds: [],
      // 总条数
      userList:[],
      // 查询参数
      queryParams: {
        agriId:null,
        sysUser: {
          userName: undefined
        }
      }
    }
  },

  methods: {
    // 当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
      this.value = value;
    },
    associaUser(imei) {
      this.reset();
      this.visible=true;
      this.queryParams.agriId = imei;
      findAllUser(this.queryParams).then(res => {
        if (res.rows.length>0) {
          for (let i = 0; i < res.rows.length; i++) {
            this.data.push({
              userId: res.rows[i].sysUser.userId,
              userName: res.rows[i].sysUser.userName,
            });
            if (res.rows[i].disabled === true) {
              this.value.push(res.rows[i].sysUser.userId)
            }
          }
        }
      })
    },
    reset() {
      this.data = [];
      this.value = []
      this.userIds = [];
      this.userList = [];
    },
    closeDialog() {
      console.info("关闭方法执行")
      this.data = [];
      this.value = []
    },
    /** 选择授权用户操作 */
    handleSelectUser() {
      this.value.forEach(item => {
        this.userList.push({
          agriId:this.queryParams.agriId,
          userId:item
        })
      });
      this.$emit('confirm-user', this.userList); // 抛出选中的用户关联数据
      this.visible = false
    },
  }
}
</script>
<style scoped>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

.transfer-center-container {
  width: 100%; /* 撑满父容器（el-dialog）宽度 */
  display: flex; /* 开启 Flex 布局 */
  justify-content: center; /* 水平居中 */
  margin: 20px 0; /* 上下外边距，优化间距 */
}
/deep/ .el-dialog__body {
  padding: 10px 10px;
}
</style>
