<template>
  <div ref="featureList" class="summary-archive-content">
<!--    <div class="summary-archive-content-card" :style="{ height: chartHeight }">-->
    <a-card>
      <div class="featureList-from">
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('summary-Archive.feature-list.structure')">
              <!-- 勾选模式选择 -->
              <span class="radio-group-class">
                <a-radio-group @change="radioChange" :default-value="1" size="small">
                  <a-radio :value="2" class="level-radio">
                    <a-tooltip>
                      <template slot="title">
                        {{ $t('summary-archive.fmea-table.same-level-check') }}
                      </template>
                      {{ $t('summary-archive.fmea-table.same-level-check') }}
                    </a-tooltip>
                  </a-radio>
                  <a-radio :value="3" class="level-radio">
                    <a-tooltip>
                      <template slot="title">
                        {{ $t('summary-archive.fmea-table.check-with-same-superior') }}
                      </template>
                      {{ $t('summary-archive.fmea-table.check-with-same-superior') }}
                    </a-tooltip>
                  </a-radio>
                  <a-radio :value="1" class="level-radio">
                    <a-tooltip>
                      <template slot="title">
                        {{ $t('summary-archive.fmea-table.unlimited') }}
                      </template>
                      {{ $t('summary-archive.fmea-table.unlimited') }}
                    </a-tooltip>
                  </a-radio>
                </a-radio-group>
              </span>
              <a-tree-select ref="leftTree" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :placeholder="$t('summary-Archive.feature-list.please-select-a-structure')
                " allow-clear show-search v-model="searchParams.struId" treeCheckable treeCheckStrictly
                :showArrow="true" tree-default-expand-all :replaceFields="replaceFields"
                :filterTreeNode="filterTreeNode" :tree-data="treeData" @select="selectBtn" @change="treeSelectChange">
                <template #title="{ value: val, title }">
                  <template>{{ title }}</template>
                </template>
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('summary-Archive.feature-list.feature-classification')">
              <a-select
                mode="multiple"
                :showArrow="true"
                :placeholder="$t('summary-Archive.feature-list.please-select-feature-category')"
                allow-clear
                @change="featureClassifyChange"
                showSearch
                :filterOption='fpid'>
                <a-select-option v-if="item.lname && item.lname.trim()" v-for="(item, index) in featureClassifyDict" :key="index" :value="item.detailId">
                  {{ item.lname }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
            <a-form-item :label="$t('summary-Archive.fmea-table.second-language')">
              <a-select v-model="searchParams.twoLanguages" :placeholder="$t(
                'summary-Archive.fmea-table.pleae-select-second-language'
              )
                " :loading="secondLanguageLoading">
                <a-select-option v-for="(item, index) in secondLanguages" :key="index" :value="item.lkey">
                  {{ $t("global-dict.select-nls." + item.lkey) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl='4' :lg='8' :md='24' :sm='24' :xs='24'>
            <a-form-item class='tr' :label="'\xa0'">
              <a-button type="primary"  @click="search">
                {{ $t("global-btn.search") }}
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      </div>
    </a-card>
          <a-card style="border-radius:10px 10px 0px 0px">
            <template slot="extra">
              <a-row class='tr'>
                <a-button type="primary" @click="excelExport">
                  {{ $t("global-btn.export") }}
                </a-button>
              </a-row>
            </template>
            <div :style="{ height: chartHeight }">
            <a-table ref='tableRef' :components='components' :data-source="tableData" :columns="tableColumns"
              :rowKey="(row, index) => { return index; }" bordered size="small" :loading="tableLoading"
              :scroll="{ x: tableWidth, y: tableHeightValue }" @change="tableChange" :pagination="pagination">
              <template slot="index" slot-scope="text, record, index">
                <span>{{
                  (pagination.current - 1) * pagination.pageSize + index + 1
                  }}</span>
              </template>
              <template slot="parameter" slot-scope="text, record">
                <span :title="getFeatureParameter(record) + getGeometricName(record, true)">
                  {{ getFeatureParameter(record) }}
                  <!--形位公差符号-->
                  <span v-if="record.geometric">
                    <span class="geometric-border" v-for="(arr, index) in getGeometricName(record, false)" :key="index">
                      <span>{{ "\xa0" }}</span>
                      <span v-for="(item, index) in arr" :key="index">
                        <span v-if="$store.getters.geometricObj[item]" style="font-family: Verisurf;"
                          :class="$store.getters.geometricObj[item]" />
                        <span v-else>
                          {{ item }}
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </template>
              <template slot="classifyType" slot-scope="text, record">
                <span v-if="record.classifyType === '2'">{{
                  record.explainName
                  }}</span>
                <img width="25" height="25" v-else :src="$api.baseUrl + '/DFMEA/file/' + record.fileName" />
              </template>
              <span slot="productName" slot-scope="text">
                <template v-for="(item, index) in text">
                  <div :key="index" v-html="item"></div>
                </template>
              </span>
            </a-table>
            </div>
            <span slot="productFeatureName" slot-scope="text">
              <template v-for="(item, index) in text">
                <div :key="index" v-html="item"></div>
              </template>
            </span>
          </a-card>
      </div>
<!--    </div>-->
<!--  </div>-->
</template>

<script>
import { arrayToTree, handleGeometricToArray, handleGeometricToStr } from "@/utils/tree";
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
  name: "FeatureList",
  components: {
    VueDraggableResizable
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props;
          // 此处的this.tableColumns 是定义的table的表头属性变量
          const col = this.tableColumns.find((col) => {
            const k = col.dataIndex || col.key;
            return k === key;
          });
          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children]);
          }
          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 100);
              }
            }
          };
          const drag = h('vue-draggable-resizable', { ...dragProps });
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]);
        }
      }
    };
    return {
      deepCurrent: '', // 当前选中的层级
      checkIdShow: false, // 同级勾选是否启动
      sameSuperCheckFlag: false, // 同父级勾选是否启动
      checkedEvet: false, // 判断是勾选还是删除
      currentChecked: [], // 完全受控数据
      struNodeList: [], // 节点下拉选原始数据
      // 表格总宽度
      tableWidth: 0,
      //表格各列宽度总和
      columnsWidth: 0,
      /** 表格数据 */
      tableData: [],
      /** 表格列头 */
      tableColumns: [
        {
          title: () => this.$t("summary-Archive.feature-list.serial-number"),
          width: 100,
          align: "center",
          dataIndex: "index",
          scopedSlots: { customRender: "index" },
          ellipsis: true
        },
        {
          title: () => this.$t("summary-Archive.feature-list.product-name"),
          width: 350,
          align: "center",
          dataIndex: "productName",
          ellipsis: true,
          scopedSlots: { customRender: 'productName' },
          customRender: (text, record) => {
            if (record.productLanguagesName == null || record.productLanguagesName === record.productName) {
              record.productLanguagesName = "";
            }
            let child = this.$createElement('div', {
              domProps: {
                innerHTML: record.productName + '<br>' + record.productLanguagesName
              }
            })
            return {
              children: child
            }
          }
        },
        {
          title: () =>
            this.$t(
              "summary-Archive.feature-list.product-special-feature-description"
            ),
          align: "center",
          dataIndex: "describe",
          children: [
            {
              title: () =>
                this.$t(
                  "summary-Archive.feature-list.product-special-feature-name"
                ),
              width: 350,
              align: "center",
              dataIndex: "productFeatureName",
              ellipsis: true,
              scopedSlots: { customRender: 'productFeatureName' },
              customRender: (text, record) => {
                // 若第二语言名称为空或两名称相同则赋空
                if (record.productFeatureLanguagesName == null || record.productFeatureLanguagesName === record.productFeatureName) {
                  record.productFeatureLanguagesName = "";
                }
                let child = this.$createElement('div', {
                  domProps: {
                    innerHTML: record.productFeatureName + '<br>' + record.productFeatureLanguagesName
                  }
                })
                return {
                  children: child
                }
              }
            },
            {
              title: () =>
                this.$t(
                  "summary-Archive.feature-list.product-special-feature-parameters"
                ),
              width: 350,
              align: "center",
              dataIndex: "parameter",
              scopedSlots: { customRender: "parameter" },
              ellipsis: true
            }
          ],
          ellipsis: true
        },
        {
          title: () =>
            this.$t("summary-Archive.feature-list.special-feature-mark"),
          width: 350,
          align: "center",
          dataIndex: "classifyType",
          scopedSlots: { customRender: "classifyType" },
          ellipsis: true
        },
        {
          title: () =>
            this.$t(
              "summary-Archive.feature-list.source-special-characteristics"
            ),
          width: 350,
          align: "center",
          dataIndex: "productSource",
          ellipsis: true
        }
      ],
      /** 表格分页 */
      pagination: {
        current: 1, // 当前页数
        pageSize: 10, // 每页条数
        showTotal: total =>
          this.$t("global-constant.table.show-total", [total]), // 用于显示数据总量和当前数据顺序
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ["10", "20", "50", "100", "200"], // 指定每页可以显示多少条
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize), // pageSize 变化的回调
        total: 0 // 总条数
      },
      /** 表格Loading */
      tableLoading: false,
      /** 树数据 */
      treeData: [],
      /** 替换 treeNode 中 title,key,children,value 字段为 treeData 中对应的字段 */
      replaceFields: {
        children: "children",
        label: "name",
        key: "id",
        value: "id"
      },
      /** 检索条件 */
      searchParams: {
        /** FMEA标识 */
        fmeaId: this.$store.getters.rfmeaId,
        /** 特性分类 */
        classifyIds: undefined,
        /** 第二语言 */
        twoLanguages: undefined,
        /** 分页 */
        pageCurrent: 1,
        pageSize: 10
      },
      /** 第二语言 */
      secondLanguages: [],
      /** 第二语言Loading */
      secondLanguageLoading: false,
      /** 特性分类标识 */
      pductClassifyId: "",
      /** 特性分类字典 */
      featureClassifyDict: [],
      /** 表格高度 */
      tableHeightValue: window.innerHeight - 420,
      chartHeight: window.innerHeight - 125 + 'px'
    };
  },

  mounted() {
    this.getTreeSelect();
    this.list();
    this.getLanguageList();
    this.getFeatureClassification();
    window.onresize = () => {
      this.chartHeight = window.innerHeight - 125 + 'px';
      this.tableHeightValue = window.innerHeight - 420;
    };
  },
  watch: {
    tableColumns: {
      handler() {
        this.$nextTick(() => {
          // 获取表格的总宽度
          this.handleResize();
          // 计算 width 属性的总和
          this.getColumnWidthTotal();
          // 动态修改fixe属性
          this.changeFixed();
        });
      },
      deep: true,
      immediate: true
    },
    tableWidth: {
      handler() {
        this.$nextTick(() => {
          // 获取表格的总宽度
          this.handleResize();
          // 计算 width 属性的总和
          this.getColumnWidthTotal();
          // 动态修改fixe属性
          this.changeFixed();
        });
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 获取表格的总宽度
    handleResize() {
      this.tableWidth = this.$refs.tableRef.$el.offsetWidth;
    },
    // 计算表格各列宽度总和
    getColumnWidthTotal() {
      this.columnsWidth = this.tableColumns.reduce((sum, column) => sum + column.width, 0);
    },
    // 动态修改fixe的属性以便表格样式不出现空白列,并平和各列与表格的总宽度
    changeFixed() {
      if (this.columnsWidth <= this.tableWidth) {
        // 遍历 columns 数组，将有 fixed 属性的元素的 fixed 值设置为 false（当有固定列时，列宽总和小于表格总宽度时会串行）
        this.tableColumns.forEach((column) => {
          if (column.fixed) {
            column.fixed = false;
          }
        });
        // 获取除最后一列以外其他列的宽度总和
        let otherColumnsWidth = this.tableColumns.slice(0, -1).reduce((total, column) => {
          return total + column.width;
        }, 0);
        // 将最后一列的宽度设置为剩余宽度，避免页面表头与内容显示串行
        this.tableColumns[this.tableColumns.length - 1].width = this.tableWidth - otherColumnsWidth;
      } else {
        // 恢复固定列原始定位属性
        // this.tableColumns[this.tableColumns.length - 1].fixed='right';
        // // 恢复最后一列原始宽度
        // this.tableColumns[this.tableColumns.length - 1].width = 120;
      }
    },
    /**
     * 取得行位公差名称
     * @param node 节点
     * @param titleFlag
     */
    getGeometricName(node, titleFlag) {
      if (titleFlag) {
        return handleGeometricToStr(node.geometric);
      } else {
        return handleGeometricToArray(node.geometric);
      }
    },
    /**
     * 获取第二语言
     */
    getLanguageList() {
      let _that = this;
      _that.secondLanguages = true;
      let data = {};
      Object.assign(data, { fmeaId: _that.$store.getters.rfmeaId });
      data.mfmeaFmeaTableDisplayCtrl = {
        effectDisplayOption: _that.effectDisplayOption
          ? _that.effectDisplayOption
          : "3",
        causeDisplayOption: _that.causeDisplayOption
          ? _that.causeDisplayOption
          : "1"
      };
      _that.$api
        .getFmeaTable(data)
        .then(res => {
          if (res.flag) {
            _that.searchParams.twoLanguages = res.data.display_nls;
            _that.secondLanguages = res.data.rfmcurrentNls || [];
          } else {
            _that.$message.error(res.message, 1);
          }
        })
        .catch(error => {
          _that.$message.error(error.response.data.message, 1);
        })
        .finally(() => {
          _that.secondLanguageLoading = false;
        });
    },
    /**
     * 获取特性参数
     * @param row
     */
    getFeatureParameter(row) {
      return (
        (row.featureLogic || "") +
        (row.featureValue || "") +
        (row.unit || "") +
        (row.tolerance || "")
      );
    },
    /**
     * 输入项筛选
     * @param inputValue
     * @param treeNode
     */
    filterTreeNode(inputValue, treeNode) {
      return treeNode.data.props.name.includes(inputValue);
    },
    // 特性分类 模糊查询
    fpid(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    /**
     * 搜索
     */
    search() {
      this.pagination.current = 1;
      this.list(false);
    },
    /**
     * 获取Tree下拉
     */
    getTreeSelect() {
      let _that = this;
      _that.$api
        .getLeftTree({
          fmeaId: _that.$store.getters.rfmeaId
        })
        .then(res => {
          if (res.flag) {
            _that.struNodeList = res.data.mfmeaStruTreeModels;
            let targetNode = res.data.mfmeaStruTreeModels.filter(item => {
              return item.pid === "00000000000000000000000000000000";
            })[0];
            // 数组转Tree
            _that.treeData = arrayToTree(
              targetNode,
              res.data.mfmeaStruTreeModels
            );
          } else {
            _that.$message.error(res.message, 1);
          }
        })
        .catch(error => {
          _that.$message.error(error.response.data.message, 1);
        });
    },
    /**
     * 获取特性分类
     */
    getFeatureClassification() {
      let _that = this;
      _that.$api
        .getFeatureClassification({
          fmeaId: _that.$store.getters.rfmeaId,
          fmeaType: 'DFMEA'
        })
        .then(res => {
          if (res.flag) {
            _that.featureClassifyDict = res.data.rfmPductClassifyDetailModels;
          } else {
            _that.$message.error(res.message, 1);
          }
        })
        .catch(error => {
          _that.$message.error(error.response.data.message, 1);
        });
    },
    /**
     * Excel导出
     */
    excelExport() {
      let struIds = [];
      if (this.searchParams.struId && this.searchParams.struId.length > 0) {
        this.searchParams.struId.forEach(item => {
          struIds.push(item.value);
        })
      }
      let exportFrom = this.$com.getCookie("from");
      let rfmeaId = this.$store.getters.rfmeaId;
      let struId = struIds || "";
      let classifyIds = this.searchParams.classifyIds || "";
      let twoLanguages = this.searchParams.twoLanguages;
      let url =
        this.$api.baseUrl +
        "/DFMEA/rdfmFeatureList/Rb04261I1/export?fmeaId=" +
        rfmeaId +
        "&struIds=" +
        struId +
        "&classifyIds=" +
        classifyIds +
        "&twoLanguages=" +
        twoLanguages +
        "&exportFrom=" +
        exportFrom;
      window.open(url);
    },
    /**
     * 列表
     */
    list(initFeatureFlag = true) {
      let _that = this;
      _that.tableLoading = true;
      let struIds = [];
      if (this.searchParams.struId && this.searchParams.struId.length > 0) {
        this.searchParams.struId.forEach(item => {
          struIds.push(item.value);
        })
      }
      let data = {
        fmeaId: this.$store.getters.rfmeaId,
        struIds: struIds || undefined,
        classifyIds: _that.searchParams.classifyIds,
        twoLanguages: _that.searchParams.twoLanguages,
        pageCurrent: _that.pagination.current,
        pageSize: _that.pagination.pageSize
      }
      _that.$api
        .getFeatureList(data)
        .then(res => {
          if (res.flag) {
            _that.tableData = res.data.featureVoList || [];
            let pagination = res.inputData.pagination;
            _that.pagination.current = pagination.pageCurrent;
            _that.pagination.pageSize = pagination.pageSize;
            _that.pagination.total = pagination.rowTotal;
            _that.pductClassifyId = res.data.pductClassifyId;
          } else {
            _that.$message.error(res.message, 1);
          }
        })
        .catch(error => {
          _that.$message.error(error.response.data.message, 1);
        })
        .finally(() => {
          _that.tableLoading = false;
        });
    },
    /**
     * 单选框改变事件
     */
    radioChange(e) {
      let redioFlag = e.target.value;
      if (redioFlag === 1) {
        this.checkIdShow = false;
        this.sameSuperCheckFlag = false;
      } else if (redioFlag === 2) {
        this.checkIdShow = true;
        this.sameSuperCheckFlag = false;
      } else if (redioFlag === 3) {
        this.checkIdShow = false;
        this.sameSuperCheckFlag = true;
      }
    },
    /**
     * tree 完全受控  选中
     * @param even
     * @param evenT
     * @param evenTR
     */
    selectBtn(even, evenT, evenTR) {
      this.checkedEvet = true; //判断是勾选添加还是删除
      this.currentChecked = evenTR.checkedNodes;
      let i = evenTR.checkedNodes.length - 1;
      this.deepCurrent = evenTR.checkedNodes[i].data.props.deep; // 设置当前选择节点的深度
      this.currentPid = evenTR.checkedNodes[i].data.props.pid; // 设置当前选择节点的父级ID
    },
    /**
     * Tree下拉选择事件时
     * @param value
     * @param option
     */
    treeSelectChange(value, option) {
      this.searchParams.struId = value;
      let checkList = [];
      let checkIds = [];
      if (this.sameSuperCheckFlag == true) {
        //当同级勾选按钮打开，并且是勾选添加时
        if (this.checkedEvet == true) {
          this.struNodeList.forEach(item => {
            if (item.deep == this.deepCurrent && item.pid == this.currentPid) checkList.push(item);
          });
          checkList.forEach(item => {
            let ids = {
              lable: item.name,
              value: item.id,
            }
            checkIds.push(ids);
          });
          let result = checkIds.concat(this.searchParams.struId);
          let arrayResult = result.filter((currentValue, currentIndex, selfArr) => {
            return selfArr.findIndex(item => item.value === currentValue.value) === currentIndex;
          });
          this.searchParams.struId = arrayResult;
          // 暂存选中数据，取消勾选时使用
          this.currentChecked = arrayResult;
        } else {
          //当同级勾选按钮打开，并且是勾选取消时
          // 对比数组，找到当前勾选的层级
          let arr1 = this.currentChecked.filter(item => {
            return !this.searchParams.struId.find(prop => {
              return prop.value == item.value
            })
          });
          let currentUnCheckedNode = this.struNodeList.filter(item => {
            return item.id === arr1[0].value;
          })
          this.deepCurrent = currentUnCheckedNode[0] ? currentUnCheckedNode[0].deep : undefined;
          this.currentPid = currentUnCheckedNode[0] ? (currentUnCheckedNode[0].pid ? currentUnCheckedNode[0].pid : undefined) : undefined;
          //根据当前勾选的层级，找到所有相同的层级
          this.struNodeList.forEach(item => {
            if (item.deep == this.deepCurrent && item.pid == this.currentPid) checkList.push(item);
          });
          checkList.forEach(item => {
            let ids = {
              lable: item.name,
              value: item.id,
            }
            checkIds.push(ids);
          });
          //把找到相同数据的层级从勾选的数据中删除
          const result = this.searchParams.struId.filter((itemA) => {
            return !checkIds.some((itemB) => itemA.value == itemB.value);
          })
          this.searchParams.struId = result;
          this.currentChecked = result;
        }
      } else if (this.checkIdShow == true) {
        //当同级勾选按钮打开，并且是勾选添加时
        if (this.checkedEvet == true) {
          this.struNodeList.forEach(item => {
            if (item.deep == this.deepCurrent) checkList.push(item);
          });
          checkList.forEach(item => {
            let ids = {
              lable: item.name,
              value: item.id,
            }
            checkIds.push(ids);
          });
          let result = checkIds.concat(this.searchParams.struId);
          let arrayResult = result.filter((currentValue, currentIndex, selfArr) => {
            return selfArr.findIndex(item => item.value === currentValue.value) === currentIndex;
          });
          this.searchParams.struId = arrayResult;
          // 暂存选中数据，取消勾选时使用
          this.currentChecked = arrayResult;
        } else {
          //当同级勾选按钮打开，并且是勾选取消时
          // 对比数组，找到当前勾选的层级
          let arr1 = this.currentChecked.filter(item => {
            return !this.searchParams.struId.find(prop => {
              return prop.value == item.value
            })
          });
          let currentUnCheckedNode = this.struNodeList.filter(item => {
            return item.id === arr1[0].value;
          })
          this.deepCurrent = currentUnCheckedNode[0] ? currentUnCheckedNode[0].deep : undefined;
          //根据当前勾选的层级，找到所有相同的层级
          this.struNodeList.forEach(item => {
            if (item.deep == this.deepCurrent) checkList.push(item);
          });
          checkList.forEach(item => {
            let ids = {
              lable: item.name,
              value: item.id,
            }
            checkIds.push(ids);
          });
          //把找到相同数据的层级从勾选的数据中删除
          const result = this.searchParams.struId.filter((itemA) => {
            return !checkIds.some((itemB) => itemA.value == itemB.value);
          })
          this.searchParams.struId = result;
          this.currentChecked = result;
        }
      } else {
        this.searchParams.struId = value;
      }
      this.checkedEvet = false;
    },
    /**
     * 特性分类下拉选择事件时
     * @param val
     */
    featureClassifyChange(val) {
      this.searchParams.classifyIds = val.toString() || undefined;
    },
    /**
     * 表格点击分页中数字触发的方法
     * @param pagination
     */
    tableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.searchParams.pageCurrent = pagination.current;
      this.searchParams.pageSize = pagination.pageSize;
      this.list();
    }
  }
};
</script>

<style lang="less" scoped>
/** 表格头部自动换行 */
/deep/ .ant-table-thead {
  .ant-table-row-cell-ellipsis .ant-table-column-title {
    white-space: normal;
  }
}

/deep/ .ant-table-tbody {
  .ant-table-row-cell-ellipsis:nth-of-type(2) {
    text-align: left !important;
  }

  .ant-table-row-cell-ellipsis:nth-of-type(3) {
    text-align: left !important;
  }

  .ant-table-row-cell-ellipsis:nth-of-type(4) {
    text-align: left !important;
  }

  .ant-table-row-cell-ellipsis:nth-of-type(6) {
    text-align: left !important;
  }
}

.page {
  height: calc(80vh);
  overflow: auto;
}

/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
  overflow: hidden !important;
  margin-bottom: 0 !important;
  padding-right: 10px;
  background: rgb(250, 250, 250);
}

/deep/ .radio-group-class {
  float: right;
  margin-top: -30px;
}
/*/deep/ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
  overflow-y: auto !important;
}*/
</style>
