<template>
  <div class="ContainerBox tableAlign">
    <!-- 按钮区域 -->
    <section class="buttonBox">
      <el-row type="flex">
        <div style="color: red">
          <div>注意</div>
          <div style="margin-top: 12px">事项</div>
        </div>

        <div style="color: gray; margin-left: 12px">
          <div>
            1.
            用户获得对应角色之后，就可以获得该角色的对应功能权限，重新登录系统后即可查看对应功能；
          </div>
          <div style="margin-top: 12px">
            2. 在【功能授权】菜单中给用户已配置的功能权限不受角色授权影响。
          </div>
        </div>
        <!-- <el-col :span='4'>
                                    <el-input v-model="search" placeholder="请输入部门名称" clearable/>
                                  </el-col> -->
      </el-row>
    </section>

    <!-- 内容区域 -->
    <section
      class="contentBox"
      style="display: flex; justify-content: space-between; margin-top: 16px"
    >
      <div class="left" style="width: 250px">
        <div style="display: flex; justify-content: space-between">
          <el-input
            v-model="inputRoleVb"
            placeholder="搜索角色名称"
            prefix-icon="el-icon-search"
          >
            <el-button
              slot="append"
              @click="search"
              icon="el-icon-search"
            ></el-button>
          </el-input>

          <el-button
            @click="sortRole"
            icon="el-icon-d-caret"
            style="margin-left: 6px"
          ></el-button>
        </div>

        <div
          class=""
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
          "
        >
          <el-button style="width: 115px" @click="editDept({}, 0)">
            新增角色</el-button
          >

          <el-dropdown>
            <el-button style="width: 115px; margin-left: 6px">
              批量操作</el-button
            >

            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item>
                <div @click="batchImportVbAction(true)">导入角色</div>
              </el-dropdown-item> -->

              <el-dropdown-item>
                <div @click="batchDeleteVb = true">批量删除</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div
          class=""
          style="margin-top: 12px; max-height: 500px; overflow: auto"
        >
          <div
            class="item-f"
            v-for="item in leftList"
            :class="{ actived: item.id === activeRole.id }"
            :key="item.id"
          >
            <div
              style="cursor: pointer; flex: 1"
              @click="
                () => {
                  params.pageIndex = 1;
                  tableData = [];
                  getRoleUserList(item);
                }
              "
            >
              {{ item.roleName }}
            </div>

            <el-dropdown>
              <el-button type="text" size="small"> 操作 </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="editDept(item, 3)">查看角色详情</div>
                </el-dropdown-item>
                <el-dropdown-item >
                  <div @click="setPt([{userName: item.roleName,roleId:item.id}])">
                    配置功能权限
                  </div>
                  </el-dropdown-item>
                <!-- <el-dropdown-item>配置数据权限</el-dropdown-item> -->
                <el-dropdown-item>
                  <div @click="editDept(item, 2)">编辑角色</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="editDept(item, 1)">复制角色</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="delDept(item)">删除角色</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>

      <div style="flex: 1; margin-left: 16px">
        <div style="font-size: 16px; margin-bottom: 29px">
          {{ activeRole.roleName }}角色成员列表
        </div>

        <div style="margin: 16px 0">
          <el-button type="primary" @click="getDepartmentList">
            添加成员</el-button
          >
          <el-button @click="batchImportVbAction(false)">
            批量导入成员</el-button
          >

          <el-button @click="batchRemoveMeber"> 批量移除成员</el-button>
        </div>
        <!-- 选中表格内容展示区域 -->
        <section class="TableSelectBox" v-if="multipleSelection.length">
          <span
            ><i class="el-icon-warning-outline el-icon-flag"></i>已选中：<span
              v-for="(item, index) in multipleSelection"
              :key="index"
              >{{ item.userName
              }}<b v-if="index != multipleSelection.length - 1">,</b></span
            ></span
          >
        </section>

        <el-table
          :data="tableData"
          ref="districtTable"
          max-height="500"
          row-key="id"
          @selection-change="handleSelectionChange"
          @select-all="handleSelectionAllChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column
            v-for="(item, index) in tableColumn"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align"
          >
            <template slot-scope="scope">
              <div v-if="item.label == '应用权限'">
                <el-tooltip
                  class="item"
                  :content="scope.row[item.prop]"
                  placement="top-start"
                >
                  <div class="two-elp">
                    {{ scope.row[item.prop] }}
                  </div>
                </el-tooltip>
              </div>

              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pages
          :total="params.total"
          :currentPage.sync="params.pageIndex"
          :pageSize="params.pageSize"
          @handleCurrentChangeSub="handleCurrentChange"
          @handleSizeChangeSub="handleSizeChange"
        ></pages>
      </div>
    </section>

    <!-- 添加 -->

    <!-- 详情 -->
    <Detail
      @callBack="search"
      :showdialog.sync="showdialogImport"
      :type="type"
      :data="rowOne"
    ></Detail>
    <!-- 批量删除角色 -->
    <el-dialog
      v-dialogDrag
      title="批量删除角色"
      :visible="batchDeleteVb"
      center
      style="width: 70%; margin: auto"
      @close="batchDeleteVb = false"
      :close-on-click-modal="false"
    >
      <div style="margin: 0 0 16px 0">
        选择需要
        <span style="color: red">删除</span
        >的角色，删除前请确认该属于该角色的成员

        <span style="color: red">已全部移除。</span>
      </div>
      <el-table
        :data="leftList"
        ref="roleMainList"
        max-height="400"
        row-key="id"
        @selection-change="roleMainListhandleSelectionChange"
        @select-all="roleMainListhandleSelectionAllChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="150">
        </el-table-column>
        <el-table-column prop="remark" label="角色说明"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="delDept()">确定删除</el-button>
        <el-button @click="batchDeleteVb = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 批量导入角色 批量导入成员  -->
    <el-dialog
      v-dialogDrag
      :title="roleOrMeberFlag ? '批量导入角色' : '批量导入成员'"
      :visible="batchImportVb"
      center
      style="width: 60%; margin: auto"
      @close="batchImportVb = false"
      :close-on-click-modal="false"
    >
      <div style="margin: 36px; text-align: center">
        <div>
          请点击下载模板按钮下载批量导入文件，编辑完善后上传完成导入
        </div>

        <div style="margin: 18px; display: flex; justify-content: center">
          <el-button type="primary" @click="downloadTemp"> 下载模板</el-button>

          <el-upload
            :limit="1"
            accept=".xls"
            :before-upload="beforeUpload"
            :http-request="uploadImg"
            @on-remove="uploadloading = false"
            :show-file-list="true"
            ref="upload"
          >
            <el-button :loading="uploadloading" style="margin-left: 18px">
              {{ uploadloading ? "上传中" : "上传模板" }}
            </el-button>
          </el-upload>
        </div>

        <div style="margin-top: 26px; color: gray">
          注意：文档文件大小需控制在5M以下,一次上传一个文件
        </div>
      </div>
    </el-dialog>
    <!-- 选择需要添加的成员  -->
    <el-dialog
      v-dialogDrag
      title="选择需要添加的成员"
      :visible="chooseVb"
      center
      style="width: 100%; margin: auto"
      @close="chooseVb = false"
      :close-on-click-modal="false"
    >
      <div
        style="
          display: flex;
          justify-content: space-between;
          max-height: 400px;
          min-height: 400px;
          overflow: auto;
        "
      >
        <div style="flex: 1">
          <el-input
            v-model="inputchooseVb"
            placeholder="搜索"
            prefix-icon="el-icon-search"
          >
          </el-input>
          <div style="margin: 16px 0">选择需要添加的成员</div>
          <el-tree
            :props="{
              label: 'name',
              children: 'children',
            }"
            :expand-on-click-node="false"
            :data="dpTreeData"
            :default-expanded-keys="dpTreeData[0]?.id ? [dpTreeData[0].id] : []"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
          >
            <div
              class="custom-tree-node"
              style="
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                margin: 6px 0;
              "
              slot-scope="{ node, data }"
            >
              <div
                style="
                  margin: 0 2px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <img
                  src="./af.png"
                  style="
                    width: 20px;
                    height: 20px;
                    border-radius: 5%;
                    margin-right: 6px;
                  "
                />
                {{ node.label }}
              </div>

              <el-button type="text" size="mini" @click="getMeberList(node)">
                查看人员
              </el-button>
            </div>
          </el-tree>
        </div>

        <div
          style="
            border-left: 1px solid rgba(211, 211, 211, 0.452);
            margin: 0 16px;
          "
        ></div>

        <div style="flex: 1; overflow: auto" v-loading="loadingcheckedData">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <span>已选择人员</span>
            <el-button type="text" @click="deleteAllTag">清除</el-button>
          </div>
          <!-- <div v-for="(xj, key) in chooseData" :key="key"> -->
          <!-- <div style="margin: 6px 0; font-weight: bold">{{ xj.name }}</div>  -->
          <el-tag
            style="margin: 4px"
            v-for="(tag, tagIndex) in chooseData"
            :key="tag.id"
            @close="deleteTag(tagIndex)"
            closable
            type="info"
          >
            {{ tag.name }}
          </el-tag>
          <!-- </div> -->
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureAdd()">确定添加</el-button>
        <el-button @click="chooseVb = false">取 消</el-button>
      </div>
    </el-dialog>

    <UserDeptDialog
      :showdialogUser.sync="showdialogUser"
      @filterChooseData="filterChooseData"
      ref="UserpopChildren"
    ></UserDeptDialog>
    <UserAuthDialog ref="userauthdialog"></UserAuthDialog>

  </div>
</template>
<script>
import {
  getRoleList,
  getRoleUserList,
  commonFileUploadApi,
  StaffDepartmentListApi,
  bacthSetEmployees,
  deleteRoleUser,
  batchImportRole,
  batchDeleteUser,
  downLoadRoleTp,
  UserDeptListApi,
} from "@/api/staffApi.js";
import UserDeptDialog from "./components/UserDeptDialog.vue";
import UserAuthDialog from "../AuthListV2/components/UserAuthDialog.vue";

import Detail from "./components/Detail.vue";

export default {
  data() {
    return {
      inputRoleVb: "",
      inputchooseVb: "",
      count: 1,
      chooseVb: false,
      roleOrMeberFlag: true /* 导入成员或角色 */,
      uploadloading: false,
      batchImportVb: false,
      batchDeleteVb: false,
      leftList: [],

      expandRow: [],
      tableData: [],
      multipleSelection: [], //全选列表
      tableColumn: [
        {
          prop: "userName",
          label: `姓名`,
          show: true,
        },
        {
          prop: "mobile",
          label: "手机号",
          align: "center",
          show: true,
        },

        {
          prop: "departName",
          label: `所在部门`,
          align: "center",
          show: true,
        },

        {
          prop: "occupationType",
          label: `职业类型`,
          align: "center",
          show: true,
        },
        // {
        //   prop: "totalMember",
        //   label: `应用权限`,
        //   width: "200",
        //   align: "center",
        //   show: true,
        // },
        {
          prop: "addRoleTime",
          label: `添加时间`,
          align: "center",
          show: true,
        },
      ],
      showdialog: false,
      showdialogImport: false,
      rowOne: {},

      isAllSelect: false, //是否全选,

      type: 0,
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 10,
        keyword: "",
        roleId: [],
      },
      roleMainListmultipleSelection: [],
      organizationId: localStorage.domainId,
      activeRole: {},

      dpTreeData: [],
      loadingcheckedData: false,
      chooseData: [],
      showdialogUser: false,
    };
  },
  components: {
    Detail,
    UserDeptDialog,
    UserAuthDialog
  },
  mounted() {
    this.search(); //表格列表
  },

  watch: {
    inputchooseVb(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    downloadTemp() {
      downLoadRoleTp(this.organizationId).then((response) => {
        const content = response;
        const blob = new Blob([content]);
        const fileName = `导入成员模板.xls`;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });

      //
    },
    filterChooseData(data = []) {
      let resArr = [];
      let resID = new Set(this.chooseData.map((item) => item.id));
      data.forEach((item) => {
        if (!resID.has(item.id)) {
          resArr.push(item);
        }
        resID.add(item.id);
      });
      if (resArr.length) {
        this.chooseData = this.chooseData.concat(resArr);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //排序
    sortRole() {
      if (this.leftList.length > 1) {
        if (this.leftList[0].seq >= this.leftList[1].seq) {
          this.$message.success("已按排序值升序排列");
          this.leftList.sort((a, b) => {
            return a.seq - b.seq;
          });
        } else {
          this.$message.success("已按排序值降序排列");
          this.leftList.sort((a, b) => {
            return b.seq - a.seq;
          });
        }
      }
    },
    setPt(list){

      this.$refs.userauthdialog.open(list, 'single',true);
    },
    sureAdd() {
      bacthSetEmployees(
        {
          employeeIdList: this.chooseData.map((e) => e.id),
          roleIdList: [this.activeRole.id],
        },
        this.organizationId
      ).then((response) => {
        if (response.status == 200) {
          this.$message.success("添加成功");
          this.chooseVb = false;
          this.getRoleUserList(this.activeRole);
        }
      });
    },
    deleteAllTag() {
      this.chooseData = [];
    },
    deleteTag(tagIndex) {
      this.chooseData.splice(this.chooseData.indexOf(tagIndex), 1);
    },

    getMeberList({ data }) {
      //点击部门成员数弹窗
      this.showdialogUser = true;
      this.$refs.UserpopChildren.getTableRow(data, 0);
    },
    sortTableData(arr) {
      //递归排序
      if (arr.length) {
        arr.forEach((item) => {
          item.displayOrderNumber = item.displayOrder;
          let allowedDepartsStr = [];
          if (item.allowedDeparts && item.allowedDeparts.length) {
            item.allowedDeparts.forEach((its) => {
              allowedDepartsStr.push(its.name);
            });
            item.allowedDepartsStr = allowedDepartsStr.join(",");
          }
          if (item.children.length) {
            this.sortTableData(item.children);
          }
        });
      }
    },

    async getDepartmentList() {
      this.chooseData = [];
      if (this.dpTreeData.length) return (this.chooseVb = true);
      const { data } = await StaffDepartmentListApi({
        domainId: localStorage.domainId,
      });

      this.sortTableData(data);
      this.dpTreeData = data;
      this.chooseVb = true;
    },

    batchRemoveMeber() {
      if (!this.multipleSelection.length) {
        return this.$message.error("请选择要删除的成员");
      }
      this.$confirm(
        `<div>
          <div style='color:red;font-weight:bold; font-size:18px;margin-bottom:8px;'>注意</div>
          <div >
          删除为不可逆操作，被移除的成员将会被移除对应权限。</div>

          
         </div>`,
        "提示",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          confirmButtonClass: "el-button--danger",
          type: "warning",
        }
      )
        .then(() => {
          batchDeleteUser(
            {
              employeeIdList: this.multipleSelection.map((e) => e.employeeId),
              roleId: this.activeRole.id,
            },
            this.organizationId
          ).then((response) => {
            if (response.status == 200) {
              this.getRoleUserList(this.activeRole); //表格列表
            }
          });
        })
        .catch(() => {
          // this.radio = ""; //清空选中
        });
    },
    batchImportVbAction(v) {
      this.roleOrMeberFlag = v;
      this.batchImportVb = true;
    },
    sureDelete() {
      this.batchDeleteVb = false;
    },
    beforeUpload(file) {
      if (file.size / 1024 / 1024 > 5) {
        return this.$message.error("上传文件不能超过5MB!");
      }
      return true;
    },
    uploadImg(e) {
      this.uploadloading = true;
      //文件上传
      if (__network__) {
        this.obsFile(e); //obs文件上传
        return;
      } else {
        this.InFileUpload(e); //内网文件上传
      }
    },
    finalUpload(path) {
      batchImportRole({ path }, this.organizationId, this.activeRole.id)
        .then((response) => {
          if (response) {
            const content = response;
            const blob = new Blob([content]);
            const fileName = `批量导入成员结果.xlsx`;
            if ("download" in document.createElement("a")) {
              // 非IE下载
              const elink = document.createElement("a");
              elink.download = fileName;
              elink.style.display = "none";
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              this.$message.info("导入结果，请查阅批量导入成员结果文件");
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName);
            }
            this.batchImportVb = false;
          }
        })
        .finally(() => {
          this.uploadloading = false;
          this.$refs.upload.clearFiles();
          this.getRoleUserList(this.activeRole);
        });
    },
    obsFile(e) {
      //obs文件上传
      console.log(e);
      var that = this;
      var domainId = this.$route.query.domainId || "default"; //保存本地企业id
      // var objectKey="uploads/"+domainId+"/"+new Date().getFullYear()+"/"+new Date().getTime()+e.file.name
      let now = new Date();
      let y = now.getFullYear();
      let m =
        now.getMonth() + 1 < 10
          ? "0" + (now.getMonth() + 1)
          : now.getMonth() + 1;
      let d = now.getDate() < 10 ? "0" + now.getDate() : now.getDate();
      let md = m + "-" + d;
      var objectKey = `uploads/${y}/${md}/${domainId}/${now.getTime()}/${
        e.file.name
      }`;

      var obs = new ObsClient({
        access_key_id: ak,
        secret_access_key: sk,
        server: urlserver,
        timeout: 60 * 5,
      });
      obs
        .putObject({
          Bucket: BucketName,
          Key: objectKey,
          SourceFile: e.file, //获取file文件
        })
        .then(function (result) {
          if (result.CommonMsg.Status < 300) {
            console.log("Create object:" + objectKey + " successfully!\n");
            var httpurl = `https://${BucketName}.${urlserver}/${objectKey}`;
            httpurl = convertCdnPath(httpurl);
            that.finalUpload(httpurl);

            // that.fileList=[{name:e.file.name,url:httpurl}]
          }
        });
    },
    InFileUpload(e) {
      this.uploadloading = true;
      let fd = new FormData();
      fd.append("file", e.file);

      commonFileUploadApi(fd).then((response) => {
        let blobReader = new Response(response).json();
        blobReader.then((res) => {
          if (res.data) {
            this.finalUpload(res.data);
          }
        });
      });
    },

    batchD() {
      /* 批量删除 */
    },
    batchI() {
      /* 批量导入 */
    },
    search() {
      this.activeRole = {};
      this.tableDatalist();
      //查询
    },
    tableDatalist() {
      //表格列表
      let obj = { employeeId: "", roleName: this.inputRoleVb };
      getRoleList(obj, this.organizationId).then((response) => {
        if (Array.isArray(response.data) && response.data[0]) {
          this.leftList = response.data;

          this.getRoleUserList(response.data[0]);
        }
      });
    },

    getRoleUserList(role) {
      if (role) {
        this.activeRole = role;
        this.params = { ...this.params, roleId: role.id };
        getRoleUserList(this.params, this.organizationId).then(({ data }) => {
          if (Array.isArray(data.data)) {
            this.tableData = data.data;
            this.params = { ...this.params, total: data.total };
          }
        });
      }
    },
    handleCurrentChange(val) {
      this.params.pageIndex = val;
      this.getRoleUserList(this.activeRole);
    },
    handleSizeChange(val) {
      //切换每页条数
      this.params.pageIndex = 1; //重置第一页
      this.params.pageSize = val;
      this.getRoleUserList(this.activeRole);
    },
    handleSelectionChange(val) {
      //选中全选
      console.log(val);
      this.multipleSelection = val;
    },
    handleSelectionAllChange(selection, first) {
      //全选
      if (!first) {
        this.isAllSelect = !this.isAllSelect;
      }
      selection.map((el) => {
        if (el.children) {
          el.children.map((j) => {
            this.toggleSelection(j, this.isAllSelect);
          });
          if (el.children.length > 0) {
            this.handleSelectionAllChange(el.children, true);
          }
        }
      });
    },

    roleMainListhandleSelectionChange(val) {
      //选中全选
      console.log(val);
      this.roleMainListmultipleSelection = val;
    },

    roleMainListhandleSelectionAllChange(val) {
      //选中全选
      console.log(val);
      this.roleMainListmultipleSelection = val;
    },
    toggleSelection(row, select) {
      //全选选中与取消选中
      if (select) {
        this.$refs.districtTable.toggleRowSelection(row, select); //全选选中
      } else {
        this.$refs.districtTable.clearSelection(); //取消选中
      }
    },
    patchDel() {},

    editDept(row, type) {
      this.type = type;
      //编辑
      this.rowOne = { ...row };
      this.showdialogImport = true;
    },
    delDept(row) {
      console.log(this.roleMainListmultipleSelection);
      //删除
      //删除选中表格数据
      //当有row的时候就是单条 没有的时候就是批量删除
      let rows = row ? [row] : this.roleMainListmultipleSelection;

      const idList = rows.map((e) => e.id);
      const nameList = rows.map((e) => e.roleName);

      if (Object.keys(rows).length) {
        const tips = row
          ? `<div>
          <div>确认删除【<span style='color:red'>${row.roleName}</span>】角色？</div>

删除前请确认该属于该角色的成员 <span style='color:red'>已全部移除。 </span>
          
         </div>`
          : `<div>
          <div>确认删除【<span style='color:red'>${nameList.join(
            ","
          )}</span>】角色？</div>

删除前请确认所选角色下的成员 <span style='color:red'>已全部移除。 </span>
          
         </div>`;
        this.$confirm(tips, "提示", {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          confirmButtonClass: "el-button--danger",
          type: "warning",
        })
          .then(() => {
            deleteRoleUser({ idList }, this.organizationId).then((response) => {
              if (response.status == 200) {
                this.$message.success("删除成功");
                this.batchDeleteVb = false;
                this.search(); //表格列表
              } else {
                this.$message.error(response.message || "操作失败");
              }
            });
          })
          .catch(() => {
            // this.radio = ""; //清空选中
          });
      }
    },
  },
};
</script>
<style lang="scss">
.item-f {
  display: flex;
  margin: 3px 0;
  padding: 0 10px;
  justify-content: space-between;
  border-radius: 6px;
  align-items: center;

  &:hover {
    background: #d7eafe;
  }
}
.actived {
  background: #d7eafe;
}
.ContainerBox {
  .el-table tr td.is-left {
    text-align: left !important;
  }

  .remarkBox {
    .remarkInfo {
      background: #fafafa;
      color: #666666;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      line-height: 30px;
      padding: 10px;
      display: flex;

      .el-icon-flag {
        margin-top: 9px;
        color: #ffc108;
        margin-right: 10px;
      }
    }
  }

  .primaryColor {
    color: #108ee9;
  }

  .dangerColor {
    color: red;
  }

  .bluelink {
    color: #409eff;
    cursor: pointer;
  }

  .TableSelectBox {
    display: flex;
    background: #e6f3fc;
    color: #666666;
    border: 1px solid #d4f0fc;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 0;

    span {
      padding: 0 5px;
      line-height: 20px;

      i {
        margin-left: 5px;
        margin-right: 5px;
        color: #2e8ad7;
      }
    }
  }
}

.displayOrderInput {
  display: flex;
  align-items: center;

  // .el-input{width: 80%;}
  i {
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
</style>
