<template>
  <div class="entrySreach">
    <el-form
      class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
      ref="sreachForm"
      :model="sreachFormData"
      label-position="top"
      size="small"
    >
      <el-row class="row-border">
        <!-- 姓名 -->
        <el-col :span="5">
          <Formitem label="姓名" prop="userName">
            <el-input
              type="text"
              class="inputShadow"
              id="inputInner--userName"
              resize="none"
              v-model="sreachFormData.userName"
              clearable
              placeholder=""
            ></el-input>
          </Formitem>
        </el-col>
        <!-- 员工号 -->
        <el-col :span="5">
          <Formitem label="员工号" prop="employeeNumber">
            <el-input
              type="text"
              class="inputShadow"
              id="inputInner--employeeNumber"
              resize="none"
              v-model="sreachFormData.employeeNumber"
              clearable
              placeholder=""
            ></el-input>
          </Formitem>
        </el-col>
        <!-- 口岸 -->
        <el-col :span="5">
          <Formitem label="口岸" prop="port">
            <el-select
              type="text"
              id="inputInner--port"
              v-model="sreachFormData.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="5">
          <Formitem label="角色" prop="roleIds" :activeType="activeType">
            <el-select
              id="inputInner--roleIds"
              class="multipleElSelect"
              v-model="sreachFormData.roleIds"
              filterable
              multiple
              clearable
              placeholder=""
              @visible-change="visibleChange"
              @remove-tag="removeTag"
              @clear="clear"
            >
              <el-option
                v-for="(item, index) in dict.roleList"
                :key="index"
                :label="item.roleName"
                :value="item.roleId"
              ></el-option>
            </el-select>
          </Formitem>
        </el-col>
        <el-col :span="2">
          <el-form-item class="textCenter">
            <el-button
              class="entrySreachButton"
              type="text"
              icon="el-icon-search"
              :loading="loadings.searchLoading"
              @click="search(0)"
            ></el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="optionButton">
      <!-- <el-button
        class="entrySaveButton"
        icon="el-icon-plus"
        size="small"
        @click="addRole"
      >
        新增角色
      </el-button> -->
    </div>
    <Table
      class="fedexDetialTable fedexSreachTable"
      ref="entryTable"
      :data="tableData"
      :headerData="headerData"
      :maxHeight="tableMaxheight"
      :border="true"
      :pagination="true"
      :order="false"
      :loading="loadings.searchLoading"
      :page="page.pageIndex"
      :pageSizes="[20, 30, 50, 100]"
      :totalCount="page.total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
      :selection="false"
      :selectFixed="false"
      :rowSelectDataType="false"
    >
      <template slot="optionColumn">
        <el-table-column align="left" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)">
              信息编辑
            </el-button>
            <el-button type="text" @click="roleChange(scope.row)">
              角色编辑
            </el-button>
          </template>
        </el-table-column>
      </template>
    </Table>
    <DialogVue
      :outerVisible="outerVisible"
      :title="dialogTitle"
      :type="editType"
      :dict="dict"
      :active="activeData"
      @close="dialogClose"
    />
  </div>
</template>

<script>
import { getRoleDict, getUserData, getPortList } from "@/api/system/user.js";
import DialogVue from "../userRoleConfig/dialog.vue";
export default {
  name: "UserRoleConfig",
  components: {
    DialogVue,
  },
  data() {
    return {
      sreachFormData: {
        userName: "",
        employeeNumber: "",
        roleIds: [],
        port: "",
      },
      page: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
      },
      activeData: null,
      tableData: [],
      headerData: [
        {
          name: "员工号",
          value: "employeeNumber",
          width: "",
          align: "left",
        },
        {
          name: "姓名",
          value: "username",
          width: "",
          align: "left",
        },
        {
          name: "联系方式",
          value: "phone",
          width: "",
          align: "left",
        },
        {
          name: "电子邮箱",
          value: "email",
          width: "",
          align: "left",
        },
        {
          name: "传真",
          value: "fax",
          width: "",
          align: "left",
        },
        {
          name: "口岸代码",
          value: "port",
          width: "",
          align: "left",
        },
        {
          name: "所属角色",
          value: "roleName",
          width: "",
          align: "left",
        },
        {
          name: "备注",
          value: "remark",
          width: "",
          align: "left",
        },
      ],
      dict: {
        roleList: [],
        port: [],
      },
      loadings: {
        searchLoading: false,
      },
      tableMaxheight: null,
      outerVisible: false,
      activeType: false,
      dialogTitle: "",
      editType: "",
    };
  },
  created() {
    this.searchPort();
    this.searchRole();
    this.search(0);
  },
  mounted() {
    this.tableMaxheight = window.innerHeight - 300;
  },
  methods: {
    //查询
    search(val) {
      this.loadings.searchLoading = true;
      if (val == 0) {
        this.page.pageIndex = 1;
      }
      let obj = this.sreachFormData;
      obj.pageIndex = this.page.pageIndex;
      obj.pageSize = this.page.pageSize;
      getUserData(obj)
        .then((res) => {
          if (res.code === "200") {
            this.tableData = res.data.value;
            this.page.total = res.data.totalItems;
          } else {
            this.alertWarningMsg(res.message);
          }
          this.loadings.searchLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadings.searchLoading = false;
        });
    },
    //查询角色
    searchRole() {
      getRoleDict()
        .then((res) => {
          if (res.code === "200") {
            this.dict.roleList = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询口岸
    searchPort() {
      getPortList()
        .then((res) => {
          if (res.code === "200") {
            this.dict.port = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    update(val) {
      this.dialogTitle = "信息编辑";
      this.editType = "update";
      this.outerVisible = true;
      this.activeData = val;
    },
    roleChange(val) {
      this.dialogTitle = "角色编辑";
      this.editType = "roleChange";
      this.outerVisible = true;
      this.activeData = val;
    },
    dialogClose() {
      this.outerVisible = false;
      this.activeData = null;
      this.search(1);
    },
    //分页
    currentChange(val) {
      this.page.pageIndex = val.page;
      this.search(1);
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.search(1);
    },
    visibleChange(type) {
      if (type) {
        this.activeType = true;
      } else {
        if (this.sreachFormData.roleIds.length > 0) {
          this.activeType = true;
        } else {
          this.activeType = false;
          document
            .querySelector("#inputInner--roleIds")
            .classList.remove("inputFocus");
        }
      }
    },
    removeTag(val) {
      if (this.sreachFormData.roleIds.length > 0) {
        this.activeType = true;
      } else {
        this.activeType = false;
        document
          .querySelector("#inputInner--roleIds")
          .classList.remove("inputFocus");
      }
    },
    clear() {
      this.activeType = false;
      document
        .querySelector("#inputInner--roleIds")
        .classList.remove("inputFocus");
    },
    input() {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.entrySreach {
  height: 100%;
  background-color: $menuLightBg;

  .entrySreachButton {
    display: inline-block;
    font-size: 20px;
    color: $fedexButton !important;
  }

  .optionButton {
    padding: 10px;
    text-align: left;

    .el-button {
      color: $fedexButton;
      border-color: $fedexButton !important;

      svg {
        display: inline-block;
        margin-right: 5px;
        fill: $fedexButton;
      }
    }

    .entrySaveButton:hover,
    .entrySaveButton:focus {
      color: $menuLightBg !important;
      background-color: $fedexButton !important;
    }
  }
}

.texttareaTip {
  position: absolute;
  top: 52%;
  right: 20px;
  transform: translate(0, -50%);
  z-index: 10;
}
</style>