<!--
@ 作者: 秦东
@ 时间: 2025-05-26 14:59:22
@ 备注: 新版抄送节点
-->
<script lang="ts" setup>
import $func from "@/utils/workflow/index";
import { setTypes, selectModes, selectRanges } from "@/utils/workflow/const";
import { useStore } from "@/store/workflow/index";
import { matrixInfo } from "@/api/matrixapi/type";
import { govthree } from "@/api/opk/opk/api";
import {
  getAllParentNode,
  judgeOptionalNode,
  analysisForm,
  setFlowFormKeyPower,
} from "@/api/workflowapi/index";
import { formTableField } from "@/api/DesignForm/type";
import PositionDialog from "@/components/workflow/dialog/positionDialog.vue";
import FormWord from "@/components/workflow/dialog/formWord.vue";
import MatrixPage from "@/components/workflow/dialog/matrix.vue";
import MatrixPageIng from "@/components/workflow/dialog/matrixIng.vue";

let props = defineProps({
  nodeConfig: {
    type: Object,
    default: () => ({}),
  },
  isFormFlow: {
    type: Boolean,
    default: true,
  },
  directormaxlevel: {
    type: Number,
    default: 4,
  },
  customerFormKey: {
    type: String,
    default: "",
  },
  formVersion: {
    type: String,
    default: "",
  },
  formData: {
    type: Object,
    default() {
      return {};
    },
  },
});
const formData = computed({
  get() {
    return props.formData;
  },
  set(val: formStruct) {
    emits("update:formData", val);
  },
});

const nodeOptional = ref<any[]>(); //审批线已经存在得节点
const isExecutor = ref(false);
const ccSelfSelectFlag = ref([]);
const copyerConfig = ref({});
let store = useStore();
let { setCopyerConfig, setCopyer } = store;
let copyerDrawer = computed(() => store.copyerDrawer);
let copyerConfig1 = computed(() => store.copyerConfig1);
let checkedList = ref<any[]>([]); //选中得指定成员过度用
const orgListCopy = ref<any[]>(); //行政组织
const orgProps = {
  value: "id",
  label: "name",
  children: "child",
};
let visible = computed({
  get() {
    return copyerDrawer.value;
  },
  set() {
    closeDrawer();
  },
});
const matrixFieldList = ref<matrixInfo>();
const nodeSendSetUp = ref("first");
const matrixIsShow = ref(false);
const nodeTitle = ref<string>("审批人设置");
watch(
  copyerConfig1,
  (val: any) => {
    val.value.attribute = val.value.attribute * 1;
    console.log("directormaxlevel", val.value, val.value.type);
    matrixIsShow.value = false;
    copyerConfig.value = val.value;

    if (val.settype == 0) {
      copyerConfig.value.settype = 1;
    }
    copyerConfig.value = val.value;
    ccSelfSelectFlag.value =
      copyerConfig.value.ccSelfSelectFlag == 0
        ? []
        : [copyerConfig.value.ccSelfSelectFlag];

    if (val.value.type == 3) {
      if (val.value.nodeName != "") {
        nodeTitle.value = val.value.nodeName + "设置";
      } else {
        nodeTitle.value = "执行人设置";
      }
    } else {
      if (val.value.nodeName != "") {
        nodeTitle.value = val.value.nodeName + "设置";
      } else {
        nodeTitle.value = "审批人设置";
      }
    }
    isExecutor.value = false;
    // copyerConfig.attribute = copyerConfig.attribute*1
    if (visible.value) {
      judgeOptionalNode(props.nodeConfig).then((data: any) => {
        if (data.code == 0) {
          let sendData = {
            id: val.value.fromNode,
            allcont: data.data.allcont,
          };
          getAllParentNode(sendData).then((data: any) => {
            if (data.code == 0) {
              nodeOptional.value = data.data.allcont;
              if (data.data.allcont && data.data.allcont.length > 0) {
                data.data.allcont.forEach((item: any) => {
                  if (item.type == 3) {
                    isExecutor.value = true;
                    return;
                  }
                });
              }
            }
          });
        }
      });
    }
    if (val.value.settype == 9) {
      matrixIsShow.value = true;
      matrixFieldList.value = copyerConfig.value.matrix;
    }
  },
  {
    deep: true,
  }
);
onMounted(() => {
  console.log("预加载数据建军节--------》", copyerConfig1.value);
  if (copyerConfig1.settype == 0) {
    copyerConfig.value.settype = 1;
  }
});
//监听审批人设置选项
watch(
  () => copyerConfig.value.settype,
  (val: any) => {
    console.log("监听审批人设置选项", copyerConfig.value);
    switch (val) {
      case 10:
        let sendOrg = {
          id: 313,
          idstr: "313",
          level: 4,
          all: 1,
        };
        govthree(sendOrg).then(({ data }) => {
          // console.log("监听审批人设置选项",data)
          orgListCopy.value = data;
          nextTick(() => {
            setOrgTree(copyerConfig.value.orgList);
          });
        });
        break;
      case 0:
        copyerConfig.value.settype = 1;
        break;
      default:
        break;
    }
  },
  {
    deep: true,
  }
);
const powerUnitAry = ref<any>({
  nodeKey: "",
  recUnitAry: {
    masterUnitList: [],
    sunUnitList: [],
    unitAllKey: [],
    unitAllState: [],
  },
});
const apiSetup = reactive<any>({
  title: [],
  library: [],
});
/**
@ 作者: 秦东
@ 时间: 2025-05-26 15:23:01
@ 功能: 写入数据
*/
const saveCopyer = () => {
  copyerConfig.value.error = !$func.setApproverStr(copyerConfig.value);
  setCopyerConfig({
    value: copyerConfig.value,
    flag: true,
    id: copyerConfig1.value.id,
  });
  let powerAry = [];
  if (
    powerUnitAry.value.recUnitAry.masterUnitList &&
    powerUnitAry.value.recUnitAry.masterUnitList.length > 0
  ) {
    powerUnitAry.value.recUnitAry.masterUnitList.forEach((item: any) => {
      powerAry.push(item);
    });
  }
  if (
    powerUnitAry.value.recUnitAry.sunUnitList &&
    powerUnitAry.value.recUnitAry.sunUnitList.length > 0
  ) {
    powerUnitAry.value.recUnitAry.sunUnitList.forEach((item: any) => {
      if (item.masterUnitList && item.masterUnitList.length > 0) {
        item.masterUnitList.forEach((itemSun: any) => {
          // powerAry.push(item)
          if (!powerAry.includes(itemSun)) {
            powerAry.push(itemSun);
          }
        });
      }
    });
  }
  // console.log("正确",formData.value)

  let sendInfo: any = {
    formKey: props.customerFormKey.toString(),
    formVersion: props.formVersion.toString(),
    formData: JSON.stringify(formData.value),
    formPower: JSON.stringify(formData.value.purview),
  };
  // console.log("sendInfo",sendInfo)
  setFlowFormKeyPower(sendInfo);
  closeDrawer();
};
//关闭抽屉
const closeDrawer = () => {
  setCopyer(false);
  isExecutor.value = false;
};
/**
@ 作者: 秦东
@ 时间: 2025-05-26 16:23:35
@ 功能: 属性选择
*/
const changeType = (val: any) => {
  copyerConfig.value.nodeUserList = [];
  copyerConfig.value.examineMode = 1;
  copyerConfig.value.noHanderAction = 2;
  console.log("属性选择--->", val);
  switch (val) {
    case 2:
      copyerConfig.value.directorLevel = 1; //审批终点  最高层主管数
      break;
    case 7:
      copyerConfig.value.examineEndDirectorLevel = 1; //审批终点 第n层主管
      break;
    case 9:
      matrixFieldList.value = copyerConfig.value.matrix; //矩阵信息
      break;
    default:
  }
};
//判断审批设置是否显示
const isShowRatify = (id: number) => {
  if (id == 8) {
    return props.isFormFlow;
  } else if (id == 4) {
    return false;
  } else if (id == 7) {
    return false;
  } else {
    return true;
  }
};
/**
@ 作者: 秦东
@ 时间: 2025-05-27 14:19:31
@ 功能: 添加指定成员
*/
let approverVisibleCopy = ref(false);
const addApproverCopy = () => {
  approverVisibleCopy.value = true;
  checkedList.value = copyerConfig.value.nodeUserList;
};
/**
@ 作者: 秦东
@ 时间: 2025-05-27 15:25:07
@ 功能: 更新指定成员数据
*/
const sureApproverCopy = (data: any) => {
  copyerConfig.value.nodeUserList = data;
  approverVisibleCopy.value = false;
};
/**
@ 作者: 秦东
@ 时间: 2025-05-28 08:18:58
@ 功能: 选择行政组织
*/
const appPosistonVisibleCopy = ref(false);
const checkedPostListCopy = ref<any[]>([]); //岗位列表
const addApproverCopyPost = () => {
  appPosistonVisibleCopy.value = true;
  checkedPostListCopy.value = copyerConfig.value.nodeUserList;
};
/**
@ 作者: 秦东
@ 时间: 2025-05-28 08:21:24
@ 功能: 回填已选择的行政组织
*/
const surePostApproverCopy = (data: any) => {
  appPosistonVisibleCopy.value = false;
  copyerConfig.value.nodeUserList = data;
};
/**
@ 作者: 秦东
@ 时间: 2024-08-08 16:07:49
@ 功能: 设置选项
*/
const flowOrgTree = ref();
const setOrgTree = (val: any) => {
  console.log("设置选项", val);
  if (Array.isArray(val)) {
    flowOrgTree.value!.setCheckedKeys(val, true);
  } else {
    flowOrgTree.value!.setCheckedKeys([val], true);
  }
};
/**
@ 作者: 秦东
@ 时间: 2025-05-28 11:19:02
@ 功能: 表单字段
*/
const appFormTableVisibleCopy = ref(false);
const checkedFormListCpoy = ref<any[]>([]); //字段列表
const formTableField = () => {
  appFormTableVisibleCopy.value = true;
  checkedFormListCpoy.value = copyerConfig.value.nodeUserList;
};
const sureFormTableApproverCopy = (data: any) => {
  copyerConfig.value.nodeUserList = data;
  appFormTableVisibleCopy.value = false;
};
/**
@ 作者: 秦东
@ 时间: 2024-08-08 15:54:07
@ 功能: 选中的哪个行政组织
*/
const handleNodeClickOrg = (data: any, threePickAry: any) => {
  console.log("选中的哪个行政组织----data------->", data);
  console.log("选中的哪个行政组织----checked------->", threePickAry);
  console.log(
    "选中的哪个行政组织----halfCheckedKeys------->",
    threePickAry.halfCheckedKeys
  );
  console.log("选中的哪个行政组织----checkedKeys------->", threePickAry.checkedKeys);
  if (
    threePickAry.halfCheckedKeys &&
    Array.isArray(threePickAry.halfCheckedKeys) &&
    threePickAry.halfCheckedKeys.length > 0
  ) {
    if (
      threePickAry.checkedKeys &&
      Array.isArray(threePickAry.checkedKeys) &&
      threePickAry.checkedKeys.length > 0
    ) {
      copyerConfig.value.orgList = threePickAry.checkedKeys;
      console.log("选中的哪个行政组织----1------->", copyerConfig.value.orgList);
    } else {
      copyerConfig.value.orgList = [];
      console.log("选中的哪个行政组织----2------->", copyerConfig.value.orgList);
    }
  } else {
    if (
      threePickAry.checkedKeys &&
      Array.isArray(threePickAry.checkedKeys) &&
      threePickAry.checkedKeys.length > 0
    ) {
      if (data.level <= 3) {
        threePickAry.checkedKeys = threePickAry.checkedKeys.filter(
          (item) => item !== data.id
        );
      }
      copyerConfig.value.orgList = threePickAry.checkedKeys;
      console.log("选中的哪个行政组织----3------->", copyerConfig.value.orgList);
    } else {
      copyerConfig.value.orgList = [];
      console.log("选中的哪个行政组织----4------->", copyerConfig.value.orgList);
    }
  }
  // if(copyerConfig.value.orgList && Array.isArray(copyerConfig.value.orgList)){

  // 	if(threePickAry.halfCheckedKeys && Array.isArray(threePickAry.halfCheckedKeys) && threePickAry.halfCheckedKeys.length > 0){

  // 	}else{

  // 		if(threePickAry.checkedKeys && Array.isArray(threePickAry.checkedKeys) && threePickAry.checkedKeys.length > 0){
  // 			threePickAry.checkedKeys = threePickAry.checkedKeys.filter(item => item !== data.id);
  // 			copyerConfig.value.orgList=threePickAry.checkedKeys
  // 		}
  // 	}

  // 	if(checked){
  // 		if(!copyerConfig.value.orgList.includes(data.id)){
  // 			copyerConfig.value.orgList.push(data.id)
  // 		}
  // 	}else{
  // 		console.log("选中的哪个行政组织----1------->",Array.isArray(copyerConfig.value.orgList),copyerConfig.value.orgList.length > 0)
  // 		if(Array.isArray(copyerConfig.value.orgList) && copyerConfig.value.orgList.length > 0){
  // 			copyerConfig.value.orgList = copyerConfig.value.orgList.filter(item => item !== data.id);
  // 		}
  // 	}
  // }else{
  // 	if(threePickAry.halfCheckedKeys && Array.isArray(threePickAry.halfCheckedKeys) && threePickAry.halfCheckedKeys.length > 0){
  // 		copyerConfig.value.orgList=threePickAry.checkedKeys
  // 	}else{
  // 		if(threePickAry.checkedKeys && Array.isArray(threePickAry.checkedKeys) && threePickAry.checkedKeys.length > 0){
  // 			threePickAry.checkedKeys = threePickAry.checkedKeys.filter(item => item !== data.id);
  // 			copyerConfig.value.orgList=threePickAry.checkedKeys
  // 		}
  // 	}
  // }
  console.log(
    "选中的哪个行政组织----copyerConfig.value.orgList------->",
    copyerConfig.value.orgList
  );
};
</script>
<template>
  <el-drawer
    v-model="visible"
    :append-to-body="true"
    title="抄送人设置"
    class="set_promoter"
    :show-close="false"
    :size="550"
    :before-close="saveCopyer"
    >{{ visible }}
    <div class="demo-drawer__content">
      <div class="drawer_content drawer_content">
        {{ copyerConfig }}
        <el-tabs v-model="nodeSendSetUp" class="demo-tabs">
          <el-tab-pane name="first">
            <template #label>
              <span class="wordKeyCss">属性设置</span>
            </template>
            <div class="info_box">
              <div class="approver_content">
                <el-radio-group
                  v-model="copyerConfig.settype"
                  class="clear"
                  @change="changeType"
                >
                  <template v-for="{ value, label } in setTypes" :key="value">
                    <el-radio
                      v-if="isShowRatify(value)"
                      :label="value"
                      style="width: auto"
                      >{{ label }}</el-radio
                    >
                  </template>
                </el-radio-group>
              </div>

              <!--指定成员-->
              <el-divider v-if="copyerConfig.settype == 1" content-position="left"
                >指定成员</el-divider
              >

              <div v-if="copyerConfig.settype == 1" class="approver_manager">
                <el-button type="primary" @click="addApproverCopy"
                  >添加/修改成员</el-button
                >
                <p class="selected_list">
                  <el-tag
                    v-for="(item, index) in copyerConfig.nodeUserList"
                    :key="index"
                    closable
                    type="info"
                    effect="plain"
                    class="tag_us"
                    @close="$func.removeEle(copyerConfig.nodeUserList, item, 'targetId')"
                    >{{ item.name }}</el-tag
                  >
                  <el-tag
                    v-if="copyerConfig.nodeUserList.length != 0"
                    type="danger"
                    effect="dark"
                    @click="copyerConfig.nodeUserList = []"
                    >清除</el-tag
                  >
                </p>
              </div>

              <!--主管-->
              <el-divider v-if="copyerConfig.settype == 2" content-position="left"
                >主管</el-divider
              >
              <div v-if="copyerConfig.settype == 2" class="approver_manager">
                <p>
                  <el-row :gutter="10">
                    <el-col v-if="isExecutor" :span="6">
                      <select v-model="copyerConfig.attribute" style="width: 100%">
                        <option value="1">发起人</option>
                        <option value="2">执行人</option>
                      </select>
                    </el-col>
                    <el-col :span="18">
                      <select v-model="copyerConfig.directorLevel">
                        <option
                          v-for="item in props.directormaxlevel"
                          :key="item"
                          :value="item"
                        >
                          {{ item == 1 ? "直接" : "第" + item + "级" }}主管
                        </option>
                      </select>
                    </el-col>
                  </el-row>
                </p>
                <p class="tip">找不到主管时，由上级主管代审批</p>
              </div>

              <!--行政岗位-->
              <el-divider v-if="copyerConfig.settype == 3" content-position="left"
                >指定行政岗位</el-divider
              >
              <div v-if="copyerConfig.settype == 3" class="approver_manager">
                <el-row>
                  <el-col :span="18">
                    <el-button type="primary" @click="addApproverCopyPost"
                      >添加/修改行政岗位</el-button
                    >
                  </el-col>
                  <el-col :span="6">
                    <select
                      v-if="isExecutor"
                      v-model="copyerConfig.attribute"
                      style="width: 100%"
                    >
                      <option value="1">发起人</option>
                      <option value="2">执行人</option>
                    </select>
                  </el-col>
                </el-row>
                <p class="selected_list">
                  <el-tag
                    v-for="(item, index) in copyerConfig.nodeUserList"
                    :key="index"
                    closable
                    type="info"
                    effect="plain"
                    class="tag_us"
                    @close="$func.removeEle(copyerConfig.nodeUserList, item, 'targetId')"
                    >{{ item.name }}</el-tag
                  >
                  <el-tag
                    v-if="copyerConfig.nodeUserList.length != 0"
                    type="danger"
                    effect="dark"
                    @click="copyerConfig.nodeUserList = []"
                    >清除</el-tag
                  >
                </p>
              </div>
              <!--发起人自己-->
              <el-divider v-if="copyerConfig.settype == 5" content-position="left"
                >发起人自己</el-divider
              >
              <div v-if="copyerConfig.settype == 5" class="approver_self">
                <p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
              </div>

              <!--连续多级主管-->
              <el-divider v-if="copyerConfig.settype == 6" content-position="left"
                >连续多级主管</el-divider
              >
              <div v-if="copyerConfig.settype == 6" class="approver_manager">
                <p style="padding-bottom: 20px">
                  <el-row :gutter="10">
                    <el-col v-if="isExecutor" :span="6">
                      <select v-model="copyerConfig.attribute" style="width: 100%">
                        <option value="1">发起人</option>
                        <option value="2">执行人</option>
                      </select>
                    </el-col>
                    <el-col :span="10">
                      <select v-model="copyerConfig.examineEndDirectorLevel">
                        <option
                          v-for="item in props.directormaxlevel"
                          :key="item"
                          :value="item"
                        >
                          {{ item == 1 ? "直接" : "第" + item + "级" }}主管
                        </option>
                      </select>
                    </el-col>
                  </el-row>
                </p>
              </div>
              <!--指定部门负责人-->
              <el-divider v-if="copyerConfig.settype == 10" content-position="left"
                >指定部门负责人</el-divider
              >
              <div v-if="copyerConfig.settype == 10" class="approver_manager">
                <el-button type="primary" @click="setOrgTree(102)"
                  >设置行政组织</el-button
                >
                <el-tree-v2
                  ref="flowOrgTree"
                  style="border: 1px solid #ccc"
                  :data="orgListCopy"
                  :props="orgProps"
                  :height="300"
                  node-key="id"
                  show-checkbox
                  :check-strictly="false"
                  :highlight-current="true"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @check="handleNodeClickOrg"
                />
              </div>
              <!--指定审批节点为本节点设置审批人-->
              <el-divider v-if="copyerConfig.settype == 7" content-position="left"
                >可选节点列表</el-divider
              >
              <div v-if="copyerConfig.settype == 7" class="approver_manager">
                <p>可选节点列表</p>
                {{ nodeOptional }}
                <el-radio-group v-model="copyerConfig.customNode" class="clear">
                  <el-radio label="beginnode">发起人</el-radio>
                  <el-radio
                    v-for="item in nodeOptional"
                    :key="item.nodeNumber"
                    :label="item.nodeNumber"
                    class="nodeGroupRadio"
                    >{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio
                  >
                </el-radio-group>
              </div>
              <!--根据关联表单设置指定审批字段-->
              <el-divider v-if="copyerConfig.settype == 8" content-position="left"
                >指定审批字段</el-divider
              >
              <div v-if="copyerConfig.settype == 8" class="approver_manager">
                <el-button type="primary" @click="formTableField"
                  >添加/修改审批字段</el-button
                >
                <p class="selected_list">
                  <el-tag
                    v-for="(item, index) in copyerConfig.nodeUserList"
                    :key="index"
                    closable
                    type="info"
                    effect="plain"
                    class="tag_us"
                    @close="$func.removeEle(copyerConfig.nodeUserList, item, 'targetId')"
                    >{{ item.name }}</el-tag
                  >
                  <el-tag
                    v-if="copyerConfig.nodeUserList.length != 0"
                    type="danger"
                    effect="dark"
                    @click="copyerConfig.nodeUserList = []"
                    >清除</el-tag
                  >
                </p>
              </div>
              <!--权限矩阵-->
              <div v-if="copyerConfig.settype == 9" class="approver_manager">
                <select
                  v-if="isExecutor"
                  v-model="copyerConfig.attribute"
                  style="width: 100%"
                >
                  <option value="1">发起人</option>
                  <option value="2">执行人</option>
                </select>
                <MatrixPageIng v-model:data="copyerConfig" />
              </div>

              <el-checkbox-group v-model="ccSelfSelectFlag" class="clear">
                <el-checkbox :label="1">允许发起人自选抄送人</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-tab-pane>
          <el-tab-pane name="helpInstructions">
            <template #label>
              <span class="wordKeyCss">帮助说明</span>
            </template>
            <div class="info_box">
              <QuillEditor v-model="copyerConfig.helpTips" height="400px" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCopyer">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
    </div>

    <!--选择成员-->
    <employees-dialog
      v-model:visible="approverVisibleCopy"
      :data="checkedList"
      @change="sureApproverCopy"
    />
    <!--选择岗位-->
    <PositionDialog
      v-model:visible="appPosistonVisibleCopy"
      :data="checkedPostListCopy"
      @change="surePostApproverCopy"
    />
    <!--表单字段-->
    <FormWord
      v-model:visible="appFormTableVisibleCopy"
      :data="checkedFormListCpoy"
      :formid="props.customerFormKey"
      :formtype="1"
      @change="sureFormTableApproverCopy"
    />
  </el-drawer>
</template>
<style lang="scss" scoped>
.approver_some .el-radio-group {
  display: block;
}
.approver_manager .el-radio-group {
  display: block;
}

.approver_some .el-radio {
  display: block;
}
.set_promoter {
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    .el-radio {
      width: auto;
    }
  }
  .approver_manager,
  .approver_self_select,
  .approver_some,
  .approver_self {
    border-top: 0px solid #f2f2f2;
  }
  .approver_self_select,
  .approver_content {
    .el-button {
      margin-bottom: 20px;
    }
  }
  .approver_content,
  .approver_some,
  .approver_self_select {
    .el-radio-group {
      display: unset;
    }
    .el-radio {
      width: 27%;
      margin-bottom: 20px;
      height: 16px;
    }
  }
  .approver_manager p {
    line-height: 32px;
  }
  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }
  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }
  .approver_self {
    padding: 28px 20px;
  }
  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 20px 20px;
  }
  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }
  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
}
.selected_list {
  margin: 0;
  line-height: 0;
  .tag_us {
    margin-right: 10px;
  }
  span {
    margin-top: 10px;
  }
  a {
    margin-top: 15px;
  }
}
.info_box {
  padding: 0 20px;
}
.wordKeyCss {
  padding: 0 20px;
}
</style>
