<template>
  <el-dialog
    v-if="isDataLoaded"
    class="entryDialog classCUploadDialog"
    :title="title"
    :visible.sync="outerVisible"
    :show-close="false"
    width="40%"
    :close-on-click-modal="false"
    v-loading="loadings.dialogLoading"
    @close="close"
  >
    <div class="modelItem">
      <el-form
        class="fedexFormStyle"
        ref="formData"
        :model="formData"
        :rules="type == 'roleChange' ? {} : rules"
        label-position="top"
        :disabled="type == 'roleChange'"
        size="small"
      >
        <el-row :gutter="5">
          <!-- 口岸 -->
          <el-col :span="8">
            <Formitem label="口岸" prop="port" type="edit">
              <el-select
                type="text"
                id="inputInner-edit-port"
                v-model="formData.port"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="(item, index) in dict.port"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </Formitem>
          </el-col>
          <!-- 姓名 -->
          <el-col :span="8">
            <Formitem label="姓名" prop="username" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-username"
                resize="none"
                v-model="formData.username"
                clearable
                disabled
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 员工号 -->
          <el-col :span="8">
            <Formitem label="员工号" prop="employeeNumber" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-employeeNumber"
                resize="none"
                v-model="formData.employeeNumber"
                clearable
                disabled
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="type != 'roleChange'">
          <!-- 联系电话 -->
          <el-col :span="8">
            <Formitem label="联系电话" prop="phone" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-phone"
                resize="none"
                v-model="formData.phone"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 传真 -->
          <el-col :span="8">
            <Formitem label="传真" prop="fax" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-fax"
                resize="none"
                v-model="formData.fax"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
          <!-- 电子邮箱 -->
          <el-col :span="8">
            <Formitem label="电子邮箱" prop="email" type="edit">
              <el-input
                type="text"
                class="inputShadow"
                id="inputInner-edit-email"
                resize="none"
                v-model="formData.email"
                clearable
                placeholder=""
              ></el-input>
            </Formitem>
          </el-col>
        </el-row>
        <!-- 备注 -->
        <Formitem
          v-show="type != 'roleChange'"
          label="备注"
          prop="remark"
          type="edit"
        >
          <el-input
            type="text"
            class="inputShadow"
            id="inputInner-edit-remark"
            resize="none"
            v-model="formData.remark"
            clearable
            placeholder=""
          ></el-input>
        </Formitem>
      </el-form>
      <div class="mt20" v-show="type == 'roleChange'">
        <div class="transferDom">
          <el-transfer
            class="customTransfer"
            ref="customTransfer"
            filterable
            target-order="push"
            :titles="titles"
            v-model="value"
            :data="customData"
            :props="{
              key: 'poolCode',
              label: 'displayName',
              disabled: 'disabled',
            }"
            @change="valueChange"
            @right-check-change="rightCheckChange"
          >
            <span slot-scope="{ option }">{{ option.displayName }} </span>
          </el-transfer>
          <div class="transfer-rightOption">
            <el-button
              type="text"
              class="el-icon-arrow-up"
              :disabled="
                rightSelect.length != 1 ||
                value.length == 1 ||
                rightSelectIdx == 0
              "
              @click="up"
            ></el-button>
            <el-button
              type="text"
              class="el-icon-arrow-down"
              :disabled="
                rightSelect.length != 1 ||
                value.length == 1 ||
                rightSelectIdx == value.length - 1
              "
              @click="down"
            ></el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="dialogOption entrySave">
      <el-button
        class="entrySaveButton"
        :disabled="loadings.submitLoading"
        @click="submit"
        >确 定</el-button
      >
      <el-button
        class="entrySaveButton"
        :disabled="loadings.uploadLoading"
        @click="close"
        >关 闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  updateUserData,
  updateUserRoleChange,
  getUserRoleType,
  getUserDetailData,
} from "@/api/system/user.js";
export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "信息编辑",
    },
    type: {
      type: String,
      default: "",
    },
    active: {
      type: Object,
      default: null,
    },
    dict: {
      type: Object,
      default() {
        return {
          roleList: [],
          port: [],
        };
      },
    },
  },
  data() {
    return {
      formData: {
        id: null,
        username: "",
        remark: "",
        port: "",
        fax: "",
        phone: "",
        employeeNumber: "",
        email: "",
      },
      customData: [],
      rules: {
        port: [
          {
            required: true,
            trigger: "change",
            message: "口岸不能为空！",
          },
        ],
        username: [
          {
            required: true,
            trigger: "blur",
            message: "姓名不能为空！",
          },
        ],
        employeeNumber: [
          {
            required: true,
            trigger: "blur",
            message: "员工号不能为空！",
          },
        ],
      },
      titles: ["未分配角色", "已分配角色"],
      rightSelect: [],
      value: [],
      rightSelectIdx: 0,
      loadings: {
        dialogLoading: false,
        uploadLoading: false,
        submitLoading: false,
      },
      loadingText: "",
      isDataLoaded: false, // 新增变量
    };
  },
  watch: {
    outerVisible(val) {
      if (val) {
        this.loadings.dialogLoading = true;
        this.isDataLoaded = false; // 重置数据加载状态
        this.searchUserData(this.active.id);
        if (this.type == "update") {
        } else if (this.type == "roleChange") {
          this.searchRoleData();
        }
      } else {
        this.isDataLoaded = false; // 关闭弹窗时重置数据加载状态
      }
    },
    isDataLoaded(val) {
      if (val) {
        this.loadings.dialogLoading = false;
        this.$emit('update:outerVisible', true); // 设置 outerVisible 为 true
      }
    },
  },
  methods: {
    // 查询用户信息详情
    searchUserData(id) {
      getUserDetailData({ id: id })
        .then((res) => {
          if (res.code === "200") {
            this.formData = res.data;
          } else {
            this.alertWarningMsg(res.message);
          }
          this.isDataLoaded = true; // 设置数据加载完成
        })
        .catch((err) => {
          console.log(err);
          this.alertWarningMsg("数据加载失败，请重试");
          this.isDataLoaded = true; // 设置数据加载完成
        });
    },
    // 查询角色
    searchRoleData() {
      getUserRoleType({ userId: this.active.id })
        .then((res) => {
          if (res.code === "200") {
            let unassigned = res.data.unassigned.concat(res.data.assigned);
            this.portDataInfo(unassigned, res.data.assigned);
          }
          this.isDataLoaded = true; // 设置数据加载完成
        })
        .catch((err) => {
          console.log(err);
          this.alertWarningMsg("数据加载失败，请重试");
          this.isDataLoaded = true; // 设置数据加载完成
        });
    },
    //数据保存
    submit() {
      this.loadings.dialogLoading = true;
      let obj = {};
      if (this.type == "update") {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            obj = this.formData;
            this.updateapi(obj);
          } else {
            this.loadings.dialogLoading = false;
          }
        });
      } else if (this.type == "roleChange") {
        obj.employeeNumber = this.formData.employeeNumber;
        obj.port = this.formData.port;
        obj.userId = this.formData.id;
        obj.username = this.formData.username;
        obj.roleIds = this.value;
        this.menuChangeapi(obj);
      }
    },
    //修改
    updateapi(val) {
      updateUserData(val)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess(res.message);
            this.close();
          } else {
            this.alertWarningMsg(res.message);
            this.loadings.dialogLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },
    //用户权限修改
    menuChangeapi(val) {
      updateUserRoleChange(val)
        .then((res) => {
          if (res.code === "200") {
            this.msgSuccess(res.message);
            this.close();
            this.$store.dispatch('GenerateRoutes')
          } else {
            this.alertWarningMsg(res.message);
            this.loadings.dialogLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadings.dialogLoading = false;
        });
    },
    //右侧数据改变
    valueChange(val) {
      this.rightSelect = [];
      this.rightSelectIdx = 0;
    },
    //右侧选中数据改变
    rightCheckChange(val) {
      this.rightSelect = val;
      this.value.find((value, index) => {
        if (value == val) {
          this.rightSelectIdx = index;
        }
      });
    },
    //上移
    up() {
      let arr = JSON.parse(JSON.stringify(this.value));
      let selectid = JSON.parse(
        JSON.stringify(this.value[this.rightSelectIdx])
      );
      let shiftSelect = JSON.parse(
        JSON.stringify(this.value[this.rightSelectIdx - 1])
      );
      arr[this.rightSelectIdx] = shiftSelect;
      arr[this.rightSelectIdx - 1] = selectid;
      this.$nextTick(() => {
        this.value = arr;
        // this.rightSelect = [];
        this.rightSelectIdx = this.rightSelectIdx - 1;
        // this.$refs.customTransfer.$children[3].checked = [];
      });
    },
    //下移
    down() {
      let arr = JSON.parse(JSON.stringify(this.value));
      let selectid = JSON.parse(
        JSON.stringify(this.value[this.rightSelectIdx])
      );
      let shiftSelect = JSON.parse(
        JSON.stringify(this.value[this.rightSelectIdx + 1])
      );
      arr[this.rightSelectIdx] = shiftSelect;
      arr[this.rightSelectIdx + 1] = selectid;
      this.$nextTick(() => {
        this.value = arr;
        // this.rightSelect = [];
        this.rightSelectIdx = this.rightSelectIdx + 1;
        // this.$refs.customTransfer.$children[3].checked = [];
      });
    },
    //穿梭框数据初始化
    portDataInfo(roleList, valueList) {
      let arr = [];
      let select = [];
      if (valueList != null && valueList != "") {
        valueList.forEach((item) => {
          select.push(item.roleId);
        });
      }
      roleList.forEach((item, idx) => {
        let obj = {
          index: idx,
          poolCode: item.roleId,
          displayName: item.roleName,
          disabled: false,
        };
        arr.push(obj);
      });
      this.customData = arr;
      this.value = select;
    },
    close() {
      this.formData = {
        id: null,
        username: "",
        remark: "",
        port: "",
        phone: "",
        employeeNumber: "",
        email: "",
      };
      this.customData = [];
      this.rightSelect = [];
      this.value = [];
      this.rightSelectIdx = 0;
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
</style>