<template>
  <div>
    <div class="bigBox">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">风险单元分类</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox">
          <!-- <PcflTree width="100%" clearable filterable @getdeptData="getdeptData" /> -->
          <riskUnitTypeTree width="100%" @change="getdeptData" />

        </div>
      </div>
      <div class="center">
        <div class="gyfx-container-box">
          <MOSTY.Assort title="固有风险">
            <template #btn>
              <el-button type="primary" size="small" @click="riskAndLevAdd()"
                :disabled="leftData.isHadChild || !leftData.dm">新增</el-button>
            </template>
          </MOSTY.Assort>
          <div class="gyfx-item" v-for="(item, index) in solidArr" :class="{ active: activeTab == index }"
            @click="handleTab(index)">
            <div class="gyfx-item-title">{{ item.description }}</div>
            <el-tag v-if="item.risklevel == 1" class="tab-box1 tab-box-blue">{{ '低风险(蓝区)' }}</el-tag>
            <el-tag v-else-if="item.risklevel == 2" class="tab-box1 tab-box-yellow">{{ '一般风险(黄区)' }}</el-tag>
            <el-tag v-else-if="item.risklevel == 3" class="tab-box1" type="warning">{{ '较大风险(橙区)' }}</el-tag>
            <el-tag v-else-if="item.risklevel == 4" class="tab-box1 tab-box-red">{{ '重大风险(红区)' }}</el-tag>
            <el-tag v-else-if="item.risklevel == 5" class="tab-box1 tab-box-red">{{ '特别重大风险(深红区)' }}</el-tag>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handleDel(index)">
              <template #reference>
                <span @click.stop class="operdel" size="small">删除</span>
              </template>
            </el-popconfirm>
            <!-- <span style="color:#ff5a5a;" @click.stop="handleDel(index)">删除</span> -->
            <!-- <span>风险等级：{{ riskLevObj[item.risklevel] && riskLevObj[item.risklevel].title || '' }}</span> -->
          </div>

        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div>
          <MOSTY.Assort title="固有风险">
            <template #btn>
              <span v-if="solidObj.id" class="operedit" @click="riskAndLevEdit()">
                <span>编辑固有风险</span>
                <el-icon title="固有风险,等级编辑">
                  <EditPen />
                </el-icon>
              </span>
            </template>
          </MOSTY.Assort>
        </div>
        <!-- </div> -->
        <div class="title">
          <el-descriptions :column="2"
            style="position: relative;margin-top: 25px; width:100%;max-height:120px;overflow-y: auto;" title="" border>
            <!-- <el-descriptions-item label="所属风险单元">{{ checkName }}</el-descriptions-item> -->
            <el-descriptions-item label="风险描述">
              <span :title="solidObj.description"
                style="display: inline-block;max-width: 280px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                {{ solidObj.description }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="可能产生的后果" style="width: 40%;">
              <div v-if="solidObj.consequense && solidObj.consequense.length" style="display: flex;flex-wrap: wrap;">
                <span v-for="it in solidObj.consequense" :key="it" style="margin: 0 2px;display: flex;">
                  <dict-tag :options="D_BZ_KNFXHGLX" :value="it" :tag="false" style="display: flex;" />
                </span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="S风险严重程度">
              <el-tag v-if="solidObj.risklevel == 1" class="tab-box tab-box-blue">{{ '1' }}</el-tag>
              <el-tag v-else-if="solidObj.risklevel == 2" class="tab-box tab-box-yellow">{{ '2' }}</el-tag>
              <el-tag v-else-if="solidObj.risklevel == 3" class="tab-box" type="warning">{{ '3' }}</el-tag>
              <el-tag v-else-if="solidObj.risklevel == 4" class="tab-box tab-box-red">{{ '4' }}</el-tag>
              <el-tag v-else-if="solidObj.risklevel == 5" class="tab-box tab-box-red">{{ '5' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="风险等级">
              <el-tag v-if="solidObj.risklevel == 1" class="tab-box tab-box-blue">{{ '低风险(蓝区)' }}</el-tag>
              <el-tag v-else-if="solidObj.risklevel == 2" class="tab-box tab-box-yellow">{{ '一般风险(黄区)' }}</el-tag>
              <el-tag v-else-if="solidObj.risklevel == 3" class="tab-box" type="warning">{{ '较大风险(橙区)' }}</el-tag>
              <el-tag v-else-if="solidObj.risklevel == 4" class="tab-box tab-box-red">{{ '重大风险(红区)' }}</el-tag>
              <el-tag v-else-if="solidObj.risklevel == 5" class="tab-box tab-box-red">{{ '特别重大风险(深红区)' }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-divider style="position: relative;top:27px;" />
        <MOSTY.Assort title="现状风险" style="margin-top:30px" />
        <MOSTY.Search ref="searchRef" :searchArr="searchArr" @submit="onSearch" />
        <div v-if="leftData && (!leftData.itemList || leftData.itemList.length == 0 || leftData.dm == '200201010000')">
          <el-divider />
          <div class="operate-btn-box">

            <el-button :title="!solidObj.id ? '有固有风险才能新增' : ''" type="primary" :disabled="!solidObj.id"
              @click="handleAdd">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <section
          :class="leftData && (!leftData.itemList || leftData.itemList.length == 0) ? 'table-height-1' : 'table-height-2'">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false" actionsW="280">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_FXLX" :value="row.type" :tag="false" />
            </template>
            <template #risklevel="{ row }">
              <el-tag v-if="row.risklevel == 1" class="tab-box tab-box-blue">低风险(蓝区)</el-tag>
              <el-tag v-else-if="row.risklevel == 2" class="tab-box tab-box-yellow">一般风险(黄区)</el-tag>
              <el-tag v-else-if="row.risklevel == 3" class="tab-box" type="warning">较大风险(橙区)</el-tag>
              <el-tag v-else-if="row.risklevel == 4" class="tab-box tab-box-red">重大风险(红区)</el-tag>
              <el-tag v-else-if="row.risklevel == 5" class="tab-box tab-box-red">特别重大风险(深红区)</el-tag>
            </template>

            <template #consequense="{ row }">
              <span class="dix-cell">
                <span v-for="(it, idx) in row.consequense" :key="it" style="margin: 0 2px; display: flex">
                  <dict-tag :options="D_BZ_KNFXHGLX" :value="it" :tag="false" />
                  <span v-if="row.consequense && idx != (row.consequense.length - 1)">,</span>
                </span>
              </span>
            </template>
            <template #state="{ row }">
              <span v-if="row.state == '2'" style="color: green;">已入库</span>
              <span v-else style="color: red;">未入库</span>
            </template>
            <template #actions="{ row }">
              <span class="operedit" @click="handleChange(row)"><el-icon>
                  <EditPen />
                </el-icon>编辑</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="deldete(row)">
                <template #reference>
                  <span class="operdel" size="small"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>
              <span class="operesee" @click="handleSee(row)">
                <el-icon>
                  <View />
                </el-icon>详情</span>
              <!-- <span class="operesee" @click="handleMeasureDetail(row)">
                <el-icon>
                  <View />
                </el-icon>
                措施详情
              </span> -->
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </div>
      <!-- 现状风险-新增 -->
      <div v-if="addDiaShow" class="dialog-box">
        <Fxbskinfo v-if="addDiaShow" @close="closeAdd" :editObj="formData" />
      </div>

      <!-- 管控措施 详情 -->
      <div v-if="isShowMeasureDetail" class="dialog-box">
        <MeasureDetail v-if="isShowMeasureDetail" @close="isShowMeasureDetail = false" :obj="measureObj" />
      </div>

      <!-- 固有风险-编辑 -->
      <HeaderEdit ref="headerEditRef" @ok="headerEditOk" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import PcflTree from "../component/pcflTree.vue";
//   import PcflTree from "../";
const { proxy } = getCurrentInstance();
import * as MOSTY from "@/components/MyComponents/index";
import Fxbskinfo from "./fxbskinfo.vue";
import MeasureDetail from "./measureDetail.vue";
import HeaderEdit from './headerEdit.vue';
import riskUnitTypeTree from "@/views/fxgk/aqfxfjgk/component/riskUnitTypeTree.vue";

const { D_BZ_KNFXHGLX, D_BZ_FXLX, } = proxy.$dict("D_BZ_KNFXHGLX", "D_BZ_FXLX",);
const tableloading = ref(false);
const tableData = ref([]);
const formData = ref({});
const searchRef = ref(null);
/** 风险等级 */
const fxLev = ref('1');
/** 固有信息 */
const solidObj = ref({})
/** 固有信息数组 */
const solidArr = ref([]);
const activeTab = ref(0);
/** 显示管控详情 */
const isShowMeasureDetail = ref(false)
const searchArr = reactive([
  {
    showType: "input",
    prop: "description",
    width: '250px',
    placeholder: '请输入危险源描述进行查询',
  },
]);
const tableColumns = reactive([
  // {
  //   title: "可能产生的后果",
  //   prop: "description"
  // },
  {
    title: "现有控制措施",
    prop: "existingMeasures"
  },
  {
    title: "可能存在的风险隐患",
    prop: "description",
  },
  {
    title: "风险评价",
    // prop: "type",
    suntab: [
      { title: "L(可能性)", prop: "lscore", width: 100 },
      { title: "S(严重程度)", prop: "sscore", width: 100 },
      { title: "R(风险值)", prop: "rScore", width: 100 }
    ],
  },
  {
    title: "现有风险等级",
    prop: "risklevel",
    slot: true
  },

  {
    title: "是否入库",
    prop: "state",
    slot: true
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});
const addDiaShow = ref(false);
const saveshow = ref(true);
const measureObj = ref({});
/** 风险描述 */
const riskDescription = ref('布局缺陷')
let riskLevObj = ref({
  1: {
    value: 1,
    title: "低度风险",
    color: "blue",
  },
  2: {
    value: 2,
    title: "中度风险",
    color: "yellow"
  },
  3: {
    value: 3,
    title: "高度风险",
    color: "orange"
  },
  4: {
    value: 4,
    title: "严重风险",
    color: "red"
  }
})
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px - 310px)");
/** 获取子组件实例 */
const headerEditRef = ref(null);
/** 选择的排查分类 */
const checkName = ref('')
// 控制新增与检查配置修改的标题
const title = ref("");
// 左侧树形数据
const leftData = ref({});
/** 当前固定风险数据ojb */
const riskResObj = ref({});
// 初始化
onMounted(() => {

});

const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px - 310px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
/** 根据左边数,获取需要的风险单位类型 ,改为祖节点
 * @param { String } dm 左边数的dm
 */
const getNeedSiteType = (dm = '') => {
  return leftData.value?.lev1?.label
}
const riskAndLevAdd = () => {
  headerEditRef.value.openDialog({
    // ...solidObj.value,
    parttype: leftData.value.dm,
    sitetype: getNeedSiteType(leftData.value.dm),
    activityfacility: leftData.value.zdmc,

    // checklibId: leftData.value.dm,
    // checklibName: leftData.value.zdmc,
  }, 'add')
}
function str2Arr (str) {
  if (!str || typeof str !== 'string') return []
  return str.split(',')
}
const handleTab = (index) => {
  activeTab.value = index;
  solidObj.value = solidArr.value[index]
  solidObj.value.consequense = str2Arr(solidObj.value.consequense)
  clearSearch()
  if (solidObj.value.id) {
    getTableData()
    getriskPlaceInfo(true, index)
  }
}
const handleDel = (index) => {
  const row = solidArr.value[index]
  deleteApi({}, `/mosty-jcgl/danger2Baseinfo/del/${row.id}`).then(() => {
    ElMessage.success("删除成功");
    // getTableData();
    getriskPlaceInfo(true,)
  });
}
const riskAndLevEdit = () => {
  if (!headerEditRef.value) return
  headerEditRef.value.openDialog({
    ...solidObj.value,
    parttype: leftData.value.dm,
    sitetype: getNeedSiteType(leftData.value.dm),
    activityfacility: leftData.value.zdmc,

    // checklibId: leftData.value.dm,
    // checklibName: leftData.value.zdmc,
  }, 'edit')
}
// 获取风险等级 1-7: 低度风险 8-12: 中度风险 13-16: 高度风险 17-25: 严重风险
const getRiskLev = (riskNum) => {
  // let riskLevObj = {
  //   1: {
  //     value: 1,
  //     title: "低度风险",
  //     color: "blue",
  //   },
  //   2: {
  //     value: 2,
  //     title: "中度风险",
  //     color: "yellow"
  //   },
  //   3: {
  //     value: 3,
  //     title: "高度风险",
  //     color: "orange"
  //   },
  //   4: {
  //     value: 4,
  //     title: "严重风险",
  //     color: "red"
  //   }
  // }
  if (riskNum >= 1 && riskNum <= 7) {
    return riskLevObj.value[1]
  } else if (riskNum >= 8 && riskNum <= 12) {
    return riskLevObj.value[2]
  } else if (riskNum >= 13 && riskNum <= 16) {
    return riskLevObj.value[3]
  } else if (riskNum >= 17 && riskNum <= 25) {
    return riskLevObj.value[4]
  } else {
    return { title: '', color: '' }

  }
}
/** 获取场所的固有信息
 * @param { Boolean } isRefressTable 是否刷新表格数据
 * @param { Number } index 需要选中的tab
 */
const getriskPlaceInfo = (isRefressTable, index = 0) => {
  postApi({ parttype: listQuery.value.parttype }, '/mosty-jcgl/danger2Baseinfo/queryInherentInfo').then(res => {
    //
    // riskResObj.value = res || {}
    solidArr.value = Array.isArray(res) ? res : []
    activeTab.value = index
    solidObj.value = solidArr.value[index] || {}
    solidObj.value.consequense = str2Arr(solidObj.value.consequense)
    if (isRefressTable) getTableData()
  })
}
const clearSearch = () => {
  listQuery.value.description = ''
  searchRef.value?.reset_form()
}
//获取部门数据
const getdeptData = (id, val, lev1) => {
  const leftObj = {
    ...val,
    dm: val.id,
    zdmc: val.name,
    isHadChild: val.children?.length > 0,
    lev1: { id: lev1.id, label: lev1.name }
  }
  checkName.value = leftObj.zdmc
  // /** 是否灭火器 */
  // const isFireExtinguisher = val.dm == "200201010000"
  // if (val.itemList && val.itemList.length > 0 && !isFireExtinguisher) {
  //   return
  // }
  leftData.value = leftObj
  listQuery.value.parttype = leftObj.id;
  // listQuery.value.type = val.type == "GYFX" ? "1" : "2";
  listQuery.value.pageCurrent = 1;
  // getTableData();
  clearSearch()
  getriskPlaceInfo(true)
};
// 获取表格数据
const getTableData = () => {
  const parentId = solidObj.value.id
  tableData.value = []
  if (!parentId) return
  tableloading.value = true;
  const params = {
    ...listQuery.value,
    parentId,
  }
  getApi(params, "/mosty-jcgl/danger2Baseinfo/getPageList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      tableData.value.forEach((item) => {
        // if (item.controls) {
        //   item.controls = item.controls.split(",");
        // }
        if (item.consequense) {
          item.consequense = item.consequense.split(",");
        }
        if (item.lscore && item.sscore) item.rScore = Number(item.lscore) * Number(item.sscore);
      });

      listQuery.value.total = res.total;
    }
  })
};

//查询
function onSearch (obj) {
  listQuery.value.description = obj.description;
  listQuery.value.pageCurrent = 1;
  getTableData();
}

// 新增弹出框
const handleAdd = () => {
  formData.value.parttype = leftData.value.dm;
  formData.value.sitetype = getNeedSiteType();
  formData.value.activityfacility = leftData.value.zdmc;
  formData.value.checklibId = leftData.value.dm
  formData.value.checklibName = leftData.value.zdmc
  formData.value.sscore = solidObj.value.sscore
  formData.value.title = "危险源基础库新增";
  formData.value.id = null;
  formData.value.parentId = solidObj.value.id;
  formData.value.saveshow = true;
  formData.value.showrkbtn = true;
  addDiaShow.value = true;
};
//详情
const handleSee = (row) => {
  formData.value.title = "危险源基础库详情";
  formData.value.checklibId = leftData.value.dm
  formData.value.checklibName = leftData.value.zdmc
  formData.value.id = row.id;
  formData.value.saveshow = false;
  formData.value.showrkbtn = false;
  addDiaShow.value = true;
};
const headerEditOk = (data) => {
  const isAdd = !data.id
  if (isAdd) {
    getriskPlaceInfo(true, 0)
  } else {
    getriskPlaceInfo(true, activeTab.value)
  }
}
// 措施详情
const handleMeasureDetail = (row) => {
  measureObj.value = {
    existingMeasure: `1.对山体、边坡、排水设施等定期巡查监测；2.采取防止山 洪、泥石流等自然灾害危害的加固措施；3.开展选址安全性论证，确需搬离的，重新选址`,
    strengtheningMeasures: '严格执行现有措施'
  }
  isShowMeasureDetail.value = true
};
// 修改
const handleChange = (row) => {
  formData.value.title = "危险源基础库修改";
  formData.value.checklibId = leftData.value.dm
  formData.value.checklibName = leftData.value.zdmc
  formData.value.id = row.id;
  formData.value.saveshow = true;
  formData.value.showrkbtn = row.state != '2' ? true : false
  addDiaShow.value = true;

};

function closeAdd () {
  addDiaShow.value = false;
  getTableData();
}
//删除
const deldete = (row) => {
  deleteApi({}, `/mosty-jcgl/danger2Baseinfo/del/${row.id}`).then(() => {
    ElMessage.success("删除成功");
    getTableData();
  });
};

//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
</script>

<style lang="scss" scoped>
.operate {
  color: yellowgreen !important;
}

.disab {
  margin: 0 5px;
  cursor: pointer;
  color: #807e7e66 !important;
}

.table-height-1,
.table-height-2 {
  height: calc(100vh - 520px);
  // height: 300px;
}

.bigBox {
  display: flex;

  .title {
    height: 39px;
    line-height: 39px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }


  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
      height: 90%;
    }
  }

  .center {
    width: 290px;
    background-color: #fff;
    color: #000;
    margin-left: 8px;
  }

  .right {
    padding: 0 10px;
    margin: 0px 0 0 10px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .operate-btn-box {
      color: #000;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 12px;
    }

  }
}

.gyfx-container-box {
  // padding-top: 10px;

  .gyfx-item {
    display: flex;
    justify-content: space-between;
    width: 290px;
    max-height: 80px;
    align-items: center;
    // line-height: 40px;
    padding: 8px 15px;
    border: 1px solid #e8e8e8;
    background-color: #f9f9f9;
    color: #000;
    margin-bottom: 3px;
    z-index: 1;

    .gyfx-item-title {
      width: 80px;
      max-height: 80px;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      // /* 多行文本省略号 */
      // display: -webkit-box;
      // -webkit-line-clamp: 3;
      // /* 显示3行 */
      // -webkit-box-orient: vertical;
      // line-height: 1.2;
      /* 调整行高 */
    }

    &:hover {
      // background-color: #268ae8;
      transform: scale(1.05);
      transition: 0.1s;
    }

    &.active {
      color: #f1f1f1;
      background-color: var(--el-color-primary);
    }
  }
}

.tab-box {
  font-size: 15px;
}

.tab-box1 {
  font-size: 11px;

  .tab-box-blue {
    --el-tag-bg-color: #7f99e7;
    --el-tag-border-color: #268ae8;
    --el-tag-text-color: #1f6eb4;
    --el-tag-hover-color: #1551b2;
  }

  .tab-box-yellow {
    --el-tag-bg-color: #e7e57f;
    --el-tag-border-color: #e8e526;
    --el-tag-text-color: #dec90d;
    --el-tag-hover-color: #e7d10e;
  }

  .tab-box-orange {
    --el-tag-bg-color: #e7a97f;
    --el-tag-border-color: #e87726;
    --el-tag-text-color: #c54404;
    --el-tag-hover-color: #cd580a;
  }

  .tab-box-red {
    --el-tag-bg-color: #e78b7f;
    --el-tag-border-color: #e84026;
    --el-tag-text-color: #cf220f;
    --el-tag-hover-color: #d21f0b;
  }

}

.tab-box-blue {
  --el-tag-bg-color: #7f99e7;
  --el-tag-border-color: #268ae8;
  --el-tag-text-color: #1f6eb4;
  --el-tag-hover-color: #1551b2;
}

.tab-box-yellow {
  --el-tag-bg-color: #e7e57f;
  --el-tag-border-color: #e8e526;
  --el-tag-text-color: #dec90d;
  --el-tag-hover-color: #e7d10e;
}

.tab-box-orange {
  --el-tag-bg-color: #e7a97f;
  --el-tag-border-color: #e87726;
  --el-tag-text-color: #c54404;
  --el-tag-hover-color: #cd580a;
}

.tab-box-red {
  --el-tag-bg-color: #e78b7f;
  --el-tag-border-color: #e84026;
  --el-tag-text-color: #cf220f;
  --el-tag-hover-color: #d21f0b;
}


.dix-cell {
  display: flex;
}

.gyfx-item-title {}
</style>
