<route lang="yaml">
  name: labelManagement
</route>

<script lang="ts" setup name="labelManagement">
import { commonPageConfig } from '@/components/PageNav/index';
import { TableColumnWidth } from '@/utils/enum';
import TableTools from "@/components/Tools/table_tools.vue";
import {
  getDataLabelList,
  updateLabelState,
  saveLabel,
  updateLabel,
  deleteLabel,
  getLabelDetail,
  getParamsList,
} from '@/api/modules/dataAnonymization';
import { useValidator } from '@/hooks/useValidator';
import { Delete, CirclePlus, Warning } from "@element-plus/icons-vue";

const { required, regexpRuleValidate } = useValidator();
const { proxy } = getCurrentInstance() as any;

/** 标签类型字典列表 */
const labelTypeList: any = ref([]);

/** 内置规则字典列表 */
const builtInRuleList: any = ref([]);

const searchItemList = ref([{
  type: "input",
  label: "",
  field: "labelName",
  default: "",
  placeholder: "标签名称",
  clearable: true,
}])

/** 分页及搜索传参信息配置。 */
const page = ref({
  ...commonPageConfig,
  labelName: '',
});

const currTableData: any = ref();

const tableInfo = ref({
  id: 'data-label-table',
  // multiple:true,
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "标签名称", field: "labelName", width: 140 },
    { label: "标签类型", field: "labelTypeName", width: 140 },
    { label: '状态', field: 'bizState', type: 'switch', activeText: '启用', inactiveText: '禁用', activeValue: 'Y', inactiveValue: 'N', switchWidth: 56, width: 100, align: 'center' },
    { label: "界面排序", field: "orderNum", width: 90, align: "center" },
    { label: "修改人", field: "updateUserName", width: TableColumnWidth.USERNAME },
    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 120,
    fixed: 'right',
    btns: (scope) => {
      let btnsArr: any = [];
      btnsArr.push({
        label: "编辑", value: "edit", click: (scope) => {
          currTableData.value = scope.row;
          getLabelDetail(scope.row.guid).then((res: any) => {
            if (res?.code == proxy.$passCode) {
              const detail = res.data || {};
              currTableData.value = Object.assign({}, currTableData.value, detail);
              newCreateLabelFormItems.value.forEach(item => {
                if (item.children?.length) {
                  item.children.forEach(child => child.default = detail[child.field]);
                } else {
                  item.default = detail[item.field];
                }
                item.default = detail[item.field];
              });
              let labelRuleField = detail.labelRuleField || {};
              matchChValue.value.value = labelRuleField.matchChValue;
              matchChValue.value.disabled = false;
              matchEnValue.value.value = labelRuleField.matchEnValue;
              matchEnValue.value.disabled = false;
              formRows.value = labelRuleField.vagueMatchRule || [{ matchValue: '', position: '', name: '', disabled: false }];
              tabsInfo.value.activeName = 'labelRuleField';
              let labelRuleContent = detail.labelRuleContent || {};

              ruleContentFormItems.value[1].visible = labelRuleContent.ruleType == 1;
              ruleContentFormItems.value[2].visible = labelRuleContent.ruleType == 2;
              ruleContentFormItems.value.forEach(item => {
                item.default = labelRuleContent[item.field];
                if (item.field == 'regularTestData') {
                  item.validateMsg = null;
                }
              });

              newCreateLabelDialogInfo.value.title = '编辑标签';
              newCreateLabelDialogInfo.value.visible = true;
              newCreateLabelDialogInfo.value.type = 'update';
              newCreateLabelDialogInfo.value.submitBtnLoading = false;
            } else {
              proxy.$ElMessage({
                type: 'error',
                message: res.msg,
              })
            }
          });
        }
      })
      btnsArr.push({
        label: "删除", value: "delete", disabled: scope.row.bizState == 'Y', click: (scope) => {
          proxy.$openMessageBox("此操作将永久删除, 是否继续?", () => {
            let guids = [scope.row.guid];
            deleteLabel(guids).then((res: any) => {
              if (res?.code == proxy.$passCode) {
                getTableData();
                proxy.$ElMessage({
                  type: "success",
                  message: "删除成功",
                });
              } else {
                proxy.$ElMessage({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          })
        }
      });
      return btnsArr
    },
  },
  loading: false
})

const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.labelName = '';
  } else {
    page.value.labelName = val.labelName;
  }
  getTableData();
};

const getTableData = () => {
  tableInfo.value.loading = true
  getDataLabelList({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    labelName: page.value.labelName
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      const data = res.data || {}
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      proxy.$ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
    tableInfo.value.loading = false
  })
};

const tableSwitchBeforeChange = (scope, field, callback) => {
  const msg = `确定【${scope.row[field] == 'Y' ? '禁用' : '启用'}】${scope.row.labelName}?`
  proxy.$openMessageBox(msg, () => {
    const state = scope.row[field] == 'Y' ? 'N' : 'Y'
    const result = tableSwitchChange(state, scope, field)
    callback(result)
  }, () => {
    callback(false)
  });
}

const tableSwitchChange = (val, scope, field) => {
  return new Promise((resolve, reject) => {
    let params = {
      guid: scope.row.guid,
      bizState: val
    }
    updateLabelState(params).then((res: any) => {
      if (res?.code == proxy.$passCode && res.data) {
        getTableData();
        proxy.$ElMessage({
          type: "success",
          message: `${scope.row.labelName}【${val == 'Y' ? '启用' : '禁用'}】成功`,
        });
        resolve(true)
      } else {
        proxy.$ElMessage({
          type: "error",
          message: res.msg,
        });
        reject(false)
      }
    }).catch(() => {
      reject(false)
    })
  })
}

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  getTableData();
};

const newCreateLabelFormItems = ref<any>([{
  label: '标签名称',
  type: 'input',
  placeholder: '请输入',
  field: 'labelName',
  default: '',
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
},
{
  label: ' ',
  type: 'select-group',
  placeholder: '请选择',
  field: 'labelgroup',
  children: [{
    label: '标签类型',
    type: 'select',
    placeholder: '请选择',
    field: 'labelTypeCode',
    default: '',
    options: labelTypeList.value,
    props: {
      label: "label",
      value: "value",
    },
    required: true,
    filterable: true,
    clearable: true,
    visible: true,
  }, {
    label: '界面排序',
    type: 'input',
    placeholder: '请输入',
    field: 'orderNum',
    maxlength: 6,
    regexp: /\D/g,
    required: false,
    clearable: true,
  }],
}, {
  type: 'radio-group',
  label: '规则配置',
  field: 'matchType',
  default: 1,
  required: false,
  block: true,
  options: [
    { label: '字段识别和内容识别满足其一即可', value: 1 },
    { label: '字段识别和内容识别需满足全部', value: 2 },
  ],
}]);

const newCreateLabelFormRules = ref({
  labelName: [required('请输入标签名称')],
  labelTypeCode: [required('请选择标签类型')]
});

const ruleContentFormRef = ref();

const newCreateLabelDialogInfo = ref({
  visible: false,
  size: 600,
  title: "添加标签",
  type: "",
  formInfo: {
    id: "label-form",
    items: newCreateLabelFormItems.value,
    rules: newCreateLabelFormRules.value,
  },
  submitBtnLoading: false,
  btns: {
    cancel: () => {
      newCreateLabelDialogInfo.value.visible = false;
      newCreateLabelDialogInfo.value.submitBtnLoading = false;
    },
    submit: (btn, info) => {
      // 需要验证两个
      let validateRuleField = (showMsg = true) => {
        if (!matchChValue.value.value && !matchEnValue.value.value && (!formRows.value.length || (formRows.value.length == 1 && !formRows.value[0].matchValue &&
          !formRows.value[0].position && !formRows.value[0].name))) {
          showMsg && proxy.$ElMessage.error('字段识别匹配规则不能为空');
          return false;
        }
        for (let i = 0; i < formRows.value.length; i++) {
          const row = formRows.value[i];
          // 如果某一条数据的 matchValue, position, name 都为空，则跳过，不校验
          if (!row.matchValue && !row.position && !row.name) {
            continue; // 如果全为空，跳过这一行的校验
          }
          if (!row.matchValue || !row.position || !row.name) {
           showMsg &&  proxy.$ElMessage.error('请填写完整的模糊匹配规则');
            return false;
          }
        }
        return true;
      }
      let submitLabel = () => {
        let params = Object.assign({}, info, {
          bizState: 'Y',
          orderNum: info.orderNum != null ? parseInt(info.orderNum) : null,
          labelRuleField: {
            matchChValue: matchChValue.value.value,
            matchEnValue: matchEnValue.value.value,
            vagueMatchRule: formRows.value?.filter(f => f.matchValue!= '' || f.position!= '' || f.name != '')
          },
          labelRuleContent: ruleContentFormRef.value.formInline
        });
        newCreateLabelDialogInfo.value.submitBtnLoading = true;
        if (newCreateLabelDialogInfo.value.type == 'add') {
          saveLabel(params).then((res: any) => {
            if (res?.code == proxy.$passCode) {
              proxy.$ElMessage.success('标签新建成功');
              newCreateLabelDialogInfo.value.visible = false;
              newCreateLabelDialogInfo.value.submitBtnLoading = false;
              page.value.curr = 1;
              getTableData();
            } else {
              newCreateLabelDialogInfo.value.submitBtnLoading = false;
              proxy.$ElMessage.error(res.msg);
            }
          }).catch(() => {
            newCreateLabelDialogInfo.value.submitBtnLoading = false;
          });
        } else {
          newCreateLabelDialogInfo.value.submitBtnLoading = true;
          params.guid = currTableData.value.guid;
          params.labelRuleContent.guid = currTableData.value.labelRuleContent?.guid;
          params.labelRuleField.guid = currTableData.value.labelRuleField?.guid;
          updateLabel(params).then((res: any) => {
            if (res?.code == proxy.$passCode) {
              proxy.$ElMessage.success('标签编辑成功');
              newCreateLabelDialogInfo.value.visible = false;
              newCreateLabelDialogInfo.value.submitBtnLoading = false;
              getTableData();
            } else {
              newCreateLabelDialogInfo.value.submitBtnLoading = false;
              proxy.$ElMessage.error(res.msg);
            }
          }).catch(() => {
            newCreateLabelDialogInfo.value.submitBtnLoading = false;
          });
        }
      }
      if (info.matchType == 2) {
        if (tabsInfo.value.activeName == 'labelRuleField') {
          if (!validateRuleField()) {
            return;
          }
          ruleContentFormRef.value?.ruleFormRef?.validate((valid, errorItem) => {
            if (valid) {
              submitLabel();
            } else {
              tabsInfo.value.activeName = 'labelRuleContent';
            }
          })
        } else {
          ruleContentFormRef.value?.ruleFormRef?.validate((valid, errorItem) => {
            if (valid) {
              if (!validateRuleField()) {
                tabsInfo.value.activeName = 'labelRuleField';
                return;
              }
              submitLabel();
            }
          })
        }
      } else { //只需匹配一项即可。
        if (tabsInfo.value.activeName == 'labelRuleField') { //先验证字段识别
          if (!matchChValue.value.value && !matchEnValue.value.value && (!formRows.value.length || (formRows.value.length == 1 && (!formRows.value[0].matchValue &&
            !formRows.value[0].position && !formRows.value[0].name)))) {  // 没有配置字段识别内容
            ruleContentFormRef.value?.ruleFormRef?.validate((valid, errorItem) => {
              if (valid) {
                submitLabel();
              } else {
                proxy.$ElMessage.error('字段识别和内容识别不能同时为空');
                return;
              }
            })
          } else {
            ruleContentFormRef.value?.ruleFormRef?.validate((valid, errorItem) => {
              if (valid) {
                submitLabel(); //只需要满足一个即可。
              } else {
                ruleContentFormRef.value?.ruleFormRef?.clearValidate(['builtInRuleCode', 'regularExpression', 'hitRate']);// 先清除验证
                // 去 验证 字段识别
                if (!validateRuleField(true)) {
                  return;
                }
                submitLabel();
              }
            })
          }
        } else {
          ruleContentFormRef.value?.ruleFormRef?.validate((valid, errorItem) => {
            if (valid) {
              submitLabel(); //只需要满足一个即可。
            } else {
              if (!validateRuleField(false)) {
                return;
              }
              submitLabel();
            }
          })
        }
      }
    }
  }
});

const formRows = ref([
  { matchValue: '', position: '', name: '', disabled: false }, // 初始行
]);

// 位置选项
const positionOptions = [
  { label: '前面', value: 'B' },
  { label: '后面', value: 'A' },
  { label: '任意位置', value: 'C' },
];
// 语言options
const languageOptions = [
  { label: '中文名', value: 'chName' },
  { label: '英文名', value: 'enName' },
];

// 新增行
const addRow = () => {
  formRows.value.push({ matchValue: '', position: '', name: '', disabled: false });
};

// 删除行
const deleteRow = (index: number) => {
  formRows.value.splice(index, 1);
};
const matchChValue = ref({
  value: '',
  disabled: false
})
const matchEnValue = ref({
  value: '',
  disabled: false
})

const tabsInfo = ref({
  activeName: 'labelRuleField',
  tabs: [
    { label: '字段识别', name: 'labelRuleField' },
    { label: '内容识别', name: 'labelRuleContent' },
  ]
});

const tabChange = (val) => {
  tabsInfo.value.activeName = val;
}

const handleCreate = () => {
  newCreateLabelFormItems.value.forEach(item => {
    if (item.children?.length) {
      item.children[0].default = ''
      item.children[1].default = ''
    } else {
      if (item.field == 'matchType') {
        item.default = 1;
      } else {
        item.default = '';
      }
    }
  });
  matchChValue.value.value = '';
  matchChValue.value.disabled = false;
  matchEnValue.value.value = '';
  matchEnValue.value.disabled = false;
  formRows.value = [{ matchValue: '', position: '', name: '', disabled: false }];

  tabsInfo.value.activeName = 'labelRuleField';

  ruleContentFormItems.value[1].visible = true;
  ruleContentFormItems.value[2].visible = false;
  ruleContentFormItems.value.forEach(item => {
    item.default = item.field == 'ruleType' ? 1 : '';
    if (item.field == 'regularTestData') {
      item.validateMsg = null;
    }
  });

  newCreateLabelDialogInfo.value.title = '添加标签';
  newCreateLabelDialogInfo.value.visible = true;
  newCreateLabelDialogInfo.value.type = 'add';
  newCreateLabelDialogInfo.value.submitBtnLoading = false;
}

/** 规则配置的内容识别内容表单配置 */
const ruleContentFormItems = ref([{
  label: '规则类型',
  type: 'select',
  placeholder: '请选择',
  field: 'ruleType',
  default: 1,
  options: [{
    value: 1,
    label: '内置规则'
  }, {
    value: 2,
    label: '自定义规则'
  }],
  props: {
    label: "label",
    value: "value",
  },
  required: true,
  filterable: true,
  clearable: false,
  block: true,
  visible: true,
}, {
  label: '内置规则',
  type: 'select',
  placeholder: '请选择',
  field: 'builtInRuleCode',
  default: '',
  options: builtInRuleList.value,
  props: {
    label: "label",
    value: "value",
  },
  required: true,
  filterable: true,
  clearable: true,
  block: true,
  visible: true,
}, {
  label: '规则表达式',
  type: 'input',
  placeholder: '请输入正则表达式',
  field: 'regularExpression',
  default: '',
  required: true,
  filterable: true,
  clearable: true,
  block: true,
  visible: false,
}, {
  label: '测试验证',
  type: 'input',
  placeholder: '请输入测试数据',
  field: 'regularTestData',
  default: '',
  required: false,
  clearable: true,
  col: 'mb8',
  block: true,
  visible: true,
  validateBtn: {
    value: 'validate',
    label: '验证',
    click: () => {
      let info = ruleContentFormRef.value.formInline;
      if (info.ruleType == 1 && !info.builtInRuleCode) {
        proxy.$ElMessage.error('请先选择内置规则');
        return;
      }
      if (info.ruleType == 2 && !info.regularExpression) {
        proxy.$ElMessage.error('请先输入规则表达式');
        return;
      }
      if (!info.regularTestData) {
        proxy.$ElMessage.error('请先输入测试数据');
        return;
      }
      let exp = info.ruleType == 1 ? builtInRuleList.value.find(b => b.value == info.builtInRuleCode)?.remarks : info.regularExpression;
      let result = exp && new RegExp(exp).test(info.regularTestData);
      ruleContentFormItems.value.forEach(item => {
        item.default = info[item.field];
        if (item.field == 'regularTestData') {
          item.validateMsg = result ? {
            status: 'success',
            msg: '符合识别规则'
          } : {
            status: 'error',
            msg: '不符合识别规则'
          }
        }
      });
    }
  },
  validateMsg: <any>null
}, {
  label: '命中率设置(%)',
  type: 'input',
  placeholder: '请输入1~100',
  field: 'hitRate',
  min: 1,
  max: 100,
  inputType: 'integerNumber',
  default: null,
  required: true,
  block: true,
  clearable: true,
  visible: true,
  width: '100px',
  beforeMsg: '一列数据中的非空数据，大于等于',
  afterMsg: ' %的数据符合以上识别条件，则认为命中该识别规则。'
}]);

/** 规则配置的内容识别内容表单规则配置 */
const ruleContentFormRules = ref({
  builtInRuleCode: [required('请选择内置规则')],
  regularExpression: [required('请输入正则表达式'), regexpRuleValidate()],
  hitRate: [required(' ')]
});

const handleRuleContentSelectChange = (val, row, info) => {
  if (row.field == 'ruleType') {
    ruleContentFormItems.value[1].visible = val == 1;
    ruleContentFormItems.value[2].visible = val == 2;
    ruleContentFormItems.value.forEach(item => {
      item.default = info[item.field];
    })
  }
}

const handleRuleContentInputChange = (val, row) => {
  if (row.field == 'regularTestData') {
    let item = ruleContentFormItems.value.at(-2);
    item && (item.validateMsg = null);
  }
}

onBeforeMount(() => {
  toSearch({});
  getParamsList({
    dictType: "标签类型",
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      labelTypeList.value = res.data || [];
      let item = newCreateLabelFormItems.value.find(item => item.field == 'labelgroup');
      item && (item.children[0].options = labelTypeList.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
  getParamsList({
    dictType: "内置规则",
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      builtInRuleList.value = res.data || [];
      ruleContentFormItems.value[1].options = builtInRuleList.value;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
})

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <!-- 头部搜索 -->
      <TableTools :searchItems="searchItemList" :searchId="'data-label-search'" @search="toSearch" :init="false" />
      <div class="tools_btns">
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </div>
    </div>
    <div class="table_panel_wrap">
      <!-- 右侧标签管理表格 -->
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange"
        @tableSwitchBeforeChange="tableSwitchBeforeChange" />
    </div>
    <!-- 新建编辑标签对话框 -->
    <Dialog_form ref="dialogLabelFormRef" :dialogConfigInfo="newCreateLabelDialogInfo" class="v-dialog-form">
      <template v-slot:default>
        <Tabs :tabs-info="tabsInfo" @tab-change="tabChange" style="margin-top: -20px;" />
        <div v-show="tabsInfo.activeName == 'labelRuleField'">
          <div>
            <div class="dim-label">
              <span class="front">精确匹配</span>
              <el-icon>
                <Warning />
              </el-icon>
              <span class="tip">
                精确匹配使用英文","分隔每个规则
              </span>
            </div>
            <div class="v-match">
              <el-input v-model="matchChValue.value" maxlength="200" style="width: 272px;height:94px;" show-word-limit
                type="textarea" class="no-resize" placeholder="请输入字段中文" />
              <el-input v-model="matchEnValue.value" maxlength="200" style="width: 272px;height:94px;" show-word-limit
                type="textarea" class="no-resize" placeholder="请输入字段英文" />
            </div>
          </div>
          <div class="dim-label" style="margin-top: 16px;">
            <span class="front">模糊匹配</span>
            <el-icon>
              <Warning />
            </el-icon>
            <span class="tip">
              模糊匹配是或的关系，可配置多个模糊匹配规则
            </span>
          </div>
          <!-- 渲染行 -->
          <div v-for="(row, index) in formRows" :key="index" class="match-content-wrapper">
            <div class="match-content">
              <!-- 位置映射下拉框 -->
              <el-select v-model="row.name" placeholder="请选择" class="v-select">
                <el-option v-for="option in languageOptions" :key="option.value" :label="option.label"
                  :value="option.value" />
              </el-select>
              <el-select v-model="row.position" placeholder="请选择位置" class="v-select">
                <el-option v-for="option in positionOptions" :key="option.value" :label="option.label"
                  :value="option.value" />
              </el-select>
              <el-input v-model="row.matchValue" class="v-input" placeholder="请输入匹配值" />

              <!-- 删除按钮 -->
              <el-button class="extra-icon" :icon="Delete" @click="deleteRow(index)" circle style="margin-left: 8px;" />
            </div>
          </div>

          <!-- 新增按钮 -->
          <div class="add-Icon" @click="addRow">
            <el-icon class="icon-add" color="#4fa1a4" :size="30">
              <CirclePlus />
            </el-icon>
            <span class="word-des">模糊匹配规则</span>
          </div>
        </div>
        <div v-show="tabsInfo.activeName == 'labelRuleContent'">
          <Form ref="ruleContentFormRef" :itemList="ruleContentFormItems" formId="rule-content-form"
            :rules="ruleContentFormRules" @select-change="handleRuleContentSelectChange"
            @inputChange="handleRuleContentInputChange" />
        </div>
      </template>
    </Dialog_form>
  </div>
</template>

<style scoped lang="scss">
.table_tool_wrap {
  width: 100%;
  height: 84px !important;
  padding: 0 8px;

  .tools_btns {
    padding: 0px 0 0;
  }
}

.table_panel_wrap {
  width: 100%;
  height: calc(100% - 84px);
  padding: 0px 8px 0;
}

:deep(.v-dialog-form) {
  .title-label {
    font-size: 16px;
    color: #212121;
    line-height: 24px;
    font-weight: 600;
  }

  .el-dialog__body {
    height: 480px;
    overflow: auto;
  }

  .dim-label {
    height: 10px;
    display: flex;
    align-items: center;
    margin-top: 6px;

    .el-icon svg {
      height: 16px;
      width: 16px;
      color: #999999;
    }

    .front {
      margin-right: 16px;
    }

    .tip {
      margin-left: 4px;
      font-size: 12px;
      color: #999999;
    }
  }

  .match-content-wrapper {
    width: 100%;

    .match-content {
      display: flex;
      align-items: center;
      margin-top: 8px;

      .v-select {
        margin-right: 8px;
        width: 33%;
      }

      .v-input {
        width: calc(33% - 50px);
      }

      .extra-icon {
        transition: opacity 1s;
        display: none;
      }

      &:hover {
        .extra-icon {
          display: flex;
        }
      }
    }
  }

  .add-Icon {
    display: flex;
    align-items: center;
    margin-top: 4px;
    width: 50%;
    margin-left: -4px;

    .el-icon svg {
      height: 19px;
      width: 19px;
    }

    .word-des {
      color: #4fa1a4
    }
  }

  .v-match {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .no-resize {
    height: 94px;

    .el-textarea__inner {
      min-height: 94px !important;
      resize: none;
    }
  }
}
</style>