<template>
  <MegaModal
    class="dia-batch avue-new-table"
    :title="$t('SELECT_PERSONNEL')"
    :visible.sync="visible"
    width="960px"
    top="50px"
    @close="handleCancel"
    @cancel="handleCancel"
  >
    <MomTable
      ref="MomTable"
      row-key="id"
      :row-selection="{
        selectedRowKeys: selectedRowKeysArray,
        onChange: rowSelection,
        type: 'radio',
      }"
      :show-util-operator="false"
      :columns="columns"
      :data-source="tableData"
      :total="total"
      :page.sync="page"
      :query-param="queryParam"
      :query-param-item="queryParamItem"
      :mega-extend="{
        rowIndex: false,
        rowAction: false,
      }"
      @search="searchPageData"
    >
      <span slot="sex" slot-scope="text">
        {{ getAttrValue(sexTypeList, text) }}
      </span>
      <span slot="type" slot-scope="text">
        {{ getAttrValue(typeList, text) }}
      </span>
      <template slot="enableFlag" slot-scope="text">
        <span class="status-box" :class="'able' + text">{{
          getAttrValue(statusList, text)
        }}</span>
      </template>
    </MomTable>
    <template slot="footer">
      <a-button type="primary" @click="handleConfirm">
        <i class="iconfont icon-baocun"></i> {{ $t("SAVE") }}
      </a-button>
      <a-button @click="handleCancel">
        <i class="iconfont icon-quxiao"></i> {{ $t("CANCEL") }}
      </a-button>
    </template>
  </MegaModal>
</template>
<script>
import { Modal as MegaModal } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: {
    MegaModal,
  },
  props: {
    selectedData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      page: 1, // 页码
      total: 0, // 每页个数
      tableData: [],
      sexTypeList: [], // 用户性别列表
      statusList: [], // 用户状态列表
      typeList: [], // 用户类型列表
      visible: false, // 弹框显示、隐藏
      queryParam: {
        userName: "", // 用户名
        employeeNo: "", // 关联员工工号
        name: "", // 姓名
        mobilePhone: "", // 手机号码
        companyName: "", // 公司编码
        departmentName: "", // 部门名称
        positionName: "", // 岗位代码
      },
      columns: [
        {
          dataIndex: "userName",
          title: () => this.$t("USER_NAME"),
          width: 120,
          ellipsis: true,
        },
        {
          dataIndex: "employeeNo",
          title: () => this.$t("EMPLOYEE_NO"),
          width: 180,
          ellipsis: true,
        },
        {
          dataIndex: "name",
          title: () => this.$t("FULL_NAME"),
          width: 180,
          ellipsis: true,
        },
        {
          dataIndex: "sex",
          title: () => this.$t("GENDER"),
          width: 98,
          ellipsis: true,
          scopedSlots: { customRender: "sex" },
        },
        {
          dataIndex: "type",
          title: () => this.$t("TYPE"),
          options: [],
          type: "object",
          width: 125,
          sorter: false,
          ellipsis: true,
          scopedSlots: { customRender: "type" },
        },
        {
          dataIndex: "status",
          title: () => this.$t("STATUS"),
          type: "status", // 这个类型比较特殊
          width: 98,
          options: [],
          sorter: false,
          ellipsis: true,
          scopedSlots: { customRender: "status" },
        },
        {
          dataIndex: "mobilePhone",
          ellipsis: true,
          sorter: false,
          title: () => this.$t("PHONE_NO"),
          width: 150,
        },
        {
          dataIndex: "companyName",
          sorter: false,
          ellipsis: true,
          title: () => this.$t("COMPANY_NAME"),
          width: 200,
        },
        {
          dataIndex: "departmentName",
          title: () => this.$t("DEPARTMENT_NAME"),
          width: 200,
          sorter: false,
          ellipsis: true,
        },
        {
          dataIndex: "positionName",
          title: () => this.$t("POSITION_MAME"),
          width: 200,
          ellipsis: true,
          sorter: false,
        },
      ],
      selectedRowKeysArray: [],
      selectedRows: [], // 选中行 数据
    };
  },
  computed: {
    // 表格搜索配置项
    queryParamItem() {
      return {
        userName: {
          label: () => this.$t("USER_NAME"),
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
        },
        employeeNo: {
          label: () => this.$t("EMPLOYEE_NO"), // 员工工号
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
        },
        name: {
          label: () => this.$t("FULL_NAME"), // 姓名
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
        },
        mobilePhone: {
          label: () => this.$t("PHONE_NO"),
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
        },
        companyName: {
          label: () => this.$t("COMPANY_NAME"),
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
        },
        departmentName: {
          label: () => this.$t("DEPARTMENT_NAME"),
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
        },
        positionName: {
          label: () => this.$t("POSITION_MAME"),
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
        },
      };
    },
  },
  mounted() {},
  methods: {
    rowSelection(selectedRowKeys, selectedRows) {
      this.selectedRowKeysArray = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 打开弹框事件
    openDialog() {
      this.visible = true;
      this.selectedRows = this.selectedData;
      const arr = [this.selectedData[0]?.id ? this.selectedData[0]?.id : ""];
      this.rowSelection(arr, this.selectedData);
      this.page = 1;
      this.initPageData();
    },
    // 获取数据字典
    initPageData() {
      Promise.all([
        this.getDictByCode("DIC:CORE:USER_TYPE"),
        this.getDictByCode("DIC:EPM:ENABLE_STATUS"),
        this.getDictByCode("DIC:COMMON:SEX_TYPE"),
      ]).then(([typeRes, statusRes, sexTypeRes]) => {
        this.typeList = typeRes.data.data;
        this.statusList = statusRes.data.data;
        this.sexTypeList = sexTypeRes.data.data;
        // this.queryParamItem.enableFlag.options = statusRes.data.data;
      });
    },
    /**
     * 获取table的数据
     */
    searchPageData(params) {
      this.tableData = [];
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/mdm/user/search-with-site`, {
          params: {
            ...params,
            enableFlag: "Y",
          },
        })
        .then((res) => {
          if (res.data.data.records.length > 0) {
            this.tableData = res.data.data.records;
          }
          this.total = Number(res.data.data.total);
        });
    },
    // 监听确认按钮事件
    handleConfirm() {
      // return;
      if (this.selectedRows.length === 0) {
        this.$message.error(this.$t("PLEASE_SELECT_AT_LEAST_ONE_USER"));
        return;
      }
      this.visible = false;
      this.$emit("returnData", this.selectedRows);
    },
    // 监听取消按钮事件
    handleCancel() {
      this.selectedRows = [];
      this.selectedRowKeysArray = [];
      this.visible = false;
    },
    // 关闭弹框
    closeDialog() {
      this.selectedRows = [];
      this.selectedRowKeysArray = [];
      this.visible = false;
    },
  },
};
</script>
<style lang="scss">
/* eslint-disable  */
/deep/ .el-tree-node__content {
  height: 34px !important;
}

.el-button--text {
  color: #3dc2e5;
}
/deep/ .form-header {
  height: 56px;
}
/deep/ .btn-item {
  padding-left: 30px;
}

/* 拖拽相关样式 */

/* 包围div样式 */
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
  .el-tree i {
    margin-right: 5px;
    font-size: 16px;
  }
  .el-tree-node__expand-icon {
    font-size: 16px;
  }
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-tree .el-icon-caret-right::before {
    content: "\e723";
  }
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right::before {
    content: "\e722";
  }
  .btns {
    margin-bottom: 10px;
    overflow: hidden;
  }
}

/* 左侧div样式 */
.left {
  float: left;
  width: calc(20% - 10px); /* 左侧初始化宽度 */
  height: 100%;
  margin-top: 10px;
  background: #fff;
}

/* 拖拽区div样式 */
.resize {
  position: relative;
  top: 45%;
  float: left;
  width: 10px;
  height: 42px;
  margin-top: -10px;
  color: white;

  /* z-index: 99999; */
  font-size: 32px;
  background-color: #d6d6d6;
  background-position: center;
  background-size: cover;
  border-radius: 5px;
  cursor: col-resize;
}

/* 拖拽区鼠标悬停样式 */
.resize:hover {
  color: #444;
}

/* 右侧div'样式 */
.mid {
  float: left;
  width: 80%; /* 右侧初始化宽度 */
  height: 100%;
  background: #fff;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.09);
}
.dialog_footer {
  position: absolute;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>
<style lang="less" scoped>
@import "@/assets/css/status_epms.less";
</style>
