<template>
  <div class="consulting-agency-container">
    <el-form :model="comProjectDetailInfo" :rules="rules" :show-message="false" class="basic-engineering-information-inner"
      ref="comProjectDetailForm">
      <!-- 基础信息 -->
      <div class="project-basic-information project-detault-module">
        <div class="info-module-title"><span>基础信息</span></div>
        <table>
          <!-- <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup> -->
          <tr>
            <td class="table-key">咨询机构名称</td>
            <td :class="[comIsModify ? 'td-none-padding' : '']">
              <div class="normal-value" v-if="!comIsModify">
                {{comProjectDetailInfo.advisoryBody && comProjectDetailInfo.advisoryBody.advisoryBodyName ? comProjectDetailInfo.advisoryBody.advisoryBodyName : "-"}}
              </div>
              <el-form-item label="" v-if="comIsModify" prop="advisoryBody.advisoryBodyName">
                <el-input v-model="comProjectDetailInfo.advisoryBody.advisoryBodyName" clearable v-focus placeholder="请输入完整咨询机构名称"
                  @input="searchConsulting"></el-input>
              </el-form-item>
            </td>
            <td class="table-key">法人代表</td>
            <td>
              {{comProjectDetailInfo.corporatePerson ? comProjectDetailInfo.corporatePerson : "-"}}
            </td>
          </tr>
          <tr>
            <!-- <td class="table-key">法人联系电话</td>
            <td>
              {{comProjectDetailInfo.corporatePerson ? comProjectDetailInfo.corporatePerson : "-"}}
            </td> -->
            <td class="table-key">注册地址</td>
            <td colspan="3">
              {{comProjectDetailInfo.regAddress ? comProjectDetailInfo.regAddress : "-"}}
            </td>
          </tr>
        </table>
      </div>
      <!-- 项目联系人 -->
      <div class="project-contact project-detault-module">
        <div class="info-module-title"><span>项目联系人</span></div>
        <table>
          <!-- <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup> -->
          <tr>
            <td class="table-key">项目负责人</td>
            <td :class="[comIsModify ? 'td-none-padding' : '']">
              <div class="normal-value" v-if="!comIsModify">
                {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.projectLeader ? comProjectDetailInfo.advisoryBodyProject.projectLeader : "-"}}
              </div>
              <el-form-item label="" v-if="comIsModify" prop="advisoryBodyProject.projectLeader">
                <el-input v-model="comProjectDetailInfo.advisoryBodyProject.projectLeader" clearable placeholder="请输入项目负责人"></el-input>
              </el-form-item>
            </td>
            <td class="table-key">项目负责人专业</td>
            <td :class="[comIsModify ? 'td-none-padding' : '']">
              <div class="normal-value" v-if="!comIsModify">
                {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.projectLeaderMajor ? comProjectDetailInfo.advisoryBodyProject.projectLeaderMajor : "-"}}
              </div>
              <el-form-item label="" v-if="comIsModify" prop="advisoryBodyProject.projectLeaderMajor">
                <el-input v-model="comProjectDetailInfo.advisoryBodyProject.projectLeaderMajor" clearable placeholder="请输入项目负责人专业"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="table-key">联系电话</td>
            <td colspan="3" :class="[comIsModify ? 'td-none-padding' : '']">
              <div class="normal-value" v-if="!comIsModify">
                {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.projectLeaderPhone ? comProjectDetailInfo.advisoryBodyProject.projectLeaderPhone : "-"}}
              </div>
              <el-form-item label="" v-if="comIsModify" prop="advisoryBodyProject.projectLeaderPhone">
                <el-input v-model="comProjectDetailInfo.advisoryBodyProject.projectLeaderPhone" clearable placeholder="请输入项目负责人联系电话"></el-input>
              </el-form-item>
            </td>
          </tr>
        </table>
      </div>
      <!-- 项目结算信息 -->
      <div class="project-settlement-information project-detault-module">
        <div class="info-module-title"><span>项目结算信息</span></div>
        <table>
          <!-- <colgroup>
            <col>
            <col :style="{width : tableKeyWidth}">
            <col>
            <col :style="{width : tableKeyWidth}">
          </colgroup> -->
          <tr>
            <td class="table-key">结算开始时间</td>
            <td :class="[comIsModify ? 'td-none-padding' : '']">
              <div class="normal-value" v-if="!comIsModify">
                {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.settleStartTime ? comProjectDetailInfo.advisoryBodyProject.settleStartTime : "-"}}
              </div>
              <el-form-item label="" v-if="comIsModify" prop="advisoryBodyProject.settleStartTime">
                <el-date-picker v-model="comProjectDetailInfo.advisoryBodyProject.settleStartTime" type="datetime" placeholder="选择结算开始时间"
                  :value-format="'yyyy-MM-dd HH:mm:ss'">
                </el-date-picker>
              </el-form-item>
            </td>
            <td class="table-key">结算完成时间</td>
            <td :class="[comIsModify ? 'td-none-padding' : '']">
              <div class="normal-value" v-if="!comIsModify">
                {{comProjectDetailInfo.advisoryBodyProject && comProjectDetailInfo.advisoryBodyProject.settleFinishTime ? comProjectDetailInfo.advisoryBodyProject.settleFinishTime : "-"}}
              </div>
              <el-form-item label="" v-if="comIsModify" prop="advisoryBodyProject.settleFinishTime">
                <el-date-picker v-model="comProjectDetailInfo.advisoryBodyProject.settleFinishTime" type="datetime" placeholder="选择结算完成时间"
                  :value-format="'yyyy-MM-dd HH:mm:ss'">
                </el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="table-key">是否为终审单位</td>
            <td colspan="3">
              <div class="normal-value" v-if="!comIsModify">
                {{comProjectDetailInfo.advisoryBodyProject && statusCheck(comProjectDetailInfo.advisoryBodyProject.isFinalJudgeUnit) ? statusCheck(comProjectDetailInfo.advisoryBodyProject.isFinalJudgeUnit) : "-"}}
              </div>
              <el-form-item label="" v-if="comIsModify" prop="advisoryBodyProject.isFinalJudgeUnit">
                <el-radio-group v-model="comProjectDetailInfo.advisoryBodyProject.isFinalJudgeUnit">
                  <el-radio :label="'0'">是</el-radio>
                  <el-radio :label="'1'">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </td>
          </tr>
        </table>
      </div>

      <!-- 自定义表单部分 -->
      <el-form :model="form" class="custom-design-form-template" ref="customDesignFormTemplate" v-if="form.subfieldModuleList.length">
        <div class="custom-design-form-module" v-for="(item,index) of form.subfieldModuleList" :key="item.uid">
          <div class="info-module-title"><span>{{item.subfieldModuleName}}</span></div>
          <div class="custom-module-content">
            <!-- 生成行 -->
            <div class="custom-module-row" v-for="(row,rowIndex) of item.childrentGroup" :key="rowIndex">
              <div class="custom-module-item" v-for="(column,columnIndex) of row" :key="column.uid" :style="itemStyles(column,rowIndex,columnIndex)">
                <div class="custom-item-key">
                  <div class="custom-item-key-inner" :class="{'is-required-key' : column.formAttribute.required}">
                    {{column.formAttribute.label}}
                  </div>
                </div>
                <!-- 组件容器 -->
                <div class="custom-item-com-box">
                  <dsk-custom-item-render :custom-item="column" :custom-module-index="index" :custom-row-index="rowIndex"
                    :custom-item-index="columnIndex" :isModify="comIsModify"></dsk-custom-item-render>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>

    </el-form>
  </div>
</template>
<script>
import { searchConsultingApi, getCustomFormDetailApi, getCustomFormDataByProjectKeyApi } from "@/api/consultingOrgManagement";
import { elementMessageSingleton, jsonStrToObject, groupArray } from "@/utils";
import { cloneDeep } from "lodash-es";
import DskTextOverFlowTip from "@/components/DskTextOverFlowTip";
import DskCustomItemRender from "@/components/DskCustomItemRender";
export default {
  name: "consultingAgency",
  components: {
    DskCustomItemRender,
    DskTextOverFlowTip
  },
  props: {
    projectDetailInfo: Object,
    isModify: {
      type: Boolean,
      default: false
    },
    projectKey: {
      type: String,
      default: ""
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.querySelector(".el-input__inner").focus();
      }
    }
  },
  watch: {
    projectDetailInfo: {
      handler(newValue, oldValue) {
        this.setInitData(this.comProjectDetailInfo, JSON.parse(JSON.stringify(newValue)), "comProjectDetailInfo");
        this.setInitData(this.oldComProjectDetailInfo, JSON.parse(JSON.stringify(oldValue)), "oldComProjectDetailInfo");
      },
      deep: true
    },
    isModify: {
      handler(newValue) {
        this.comIsModify = newValue;
      }
    }
  },
  data() {
    const phoneValidator = (rule, value, callback) => {
      const phoneReg = /^1[3-9]\d{9}$/;
      // if (!value && !value?.toString()?.trim()) {
      //   return callback(new Error(`请输入项目负责人联系电话`));
      // }
      if (value && !phoneReg.test(value)) {
        return callback(new Error(`请输入正确的联系电话`));
      }
      return callback();
    };
    return {
      comIsModify: this.isModify,
      comProjectDetailInfo: {},
      oldComProjectDetailInfo: {},
      rules: {
        "advisoryBody.advisoryBodyName": [{ required: true, trigger: ["blur", "change"], message: "咨询机构名称不能为空" }],
        "advisoryBodyProject.projectLeaderPhone": [{ required: true, trigger: ["blur", "change"], validator: phoneValidator }],
      },
      tableKeyWidth: 0,
      searchTimer: null,
      loading: false,
      formTemplate: {},
      formTemplateData: {},
      form: {
        subfieldModuleList: []
      },
      oldSubfieldModuleList: []
    };
  },
  //可访问data属性
  created() {
    this.setInitData(this.comProjectDetailInfo, JSON.parse(JSON.stringify(this.projectDetailInfo)), "comProjectDetailInfo");
    this.setInitData(this.oldComProjectDetailInfo, JSON.parse(JSON.stringify(this.projectDetailInfo)), "oldComProjectDetailInfo");
    this.setTableKeyWidth();
    this.formTemplateInit();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    itemStyles(item, index, selfIndex) {
      const styles = {
        width: `${item.formAttribute.width}%`
      };
      if (index > 0) {
        styles["border-top"] = "unset";
      }
      if (selfIndex > 0) {
        styles["border-left"] = "unset";
      }
      return styles;
    },
    setInitData(originData, mergeData, mergeKey) {
      if (!mergeData.advisoryBody) mergeData.advisoryBody = {};
      if (!mergeData.advisoryBodyProject) mergeData.advisoryBodyProject = {};
      // 响应更新
      this.$set(this, mergeKey, { ...this[mergeKey], ...mergeData });
    },
    statusCheck(status) {
      if (status == "0") {
        return "是";
      }
      if (status == "1") {
        return "否";
      }
      return "";
    },
    async formTemplateInit() {
      try {
        this.loading = true;
        this.$emit("searchLoadingChange", this.loading);
        const _formTemplate = await this.getCustomFormDetail();
        this.formTemplate = cloneDeep(_formTemplate);
        let _formTemplateData = await this.getCustomFormDataByProjectKey(this.projectKey);
        _formTemplateData ? this.formTemplateData = cloneDeep(_formTemplateData) : null;
        await this.customFormRender(_formTemplate, _formTemplateData);
      } catch (error) {

      } finally {
        this.loading = false;
        this.$emit("searchLoadingChange", this.loading);
      }
    },
    async customFormRender(formTemplate, formData) {
      try {
        // 缺失模板不渲染
        if (!formTemplate || !formTemplate.jsonData) return;
        const template = jsonStrToObject(formTemplate.jsonData);
        const templateFormData = formData && formData.jsonData ? JSON.parse(formData.jsonData) : null;
        if (template) {
          // 模板
          let subfieldModuleListTemplate = template.subfieldModuleList;
          // 有表单数据先处理数据
          if (templateFormData) {
            subfieldModuleListTemplate = this.hasCustomFormDataHandle(subfieldModuleListTemplate, templateFormData);
          }
          // 渲染模板
          this.renderTemplate(subfieldModuleListTemplate);
        }
      } catch (error) {
        this.$message.error(`解析模板失败,${error.message}`);
        console.log(error);
      }
    },
    hasCustomFormDataHandle(formTemplate, formData) {
      // console.log(formTemplate);
      // console.log(formData);
      formData.forEach(item => {
        this.interComTemplateParent(formTemplate, item);
      });
      return cloneDeep(formTemplate);
    },
    interComTemplateParent(formTemplate, comItem) {
      const module = formTemplate.find(item => item.uid === comItem.pid);
      if (module) {
        const index = module.children.findIndex(child => child.uid === comItem.uid);
        // 找到模板 插入数据
        if (index > -1) {
          module.children[index].componentAttribute.value = comItem.componentAttribute.value;
        }
      }
    },
    renderTemplate(template) {
      const table = this.createTemplateTable(template);
      this.oldSubfieldModuleList = cloneDeep(table);
      this.$set(this.form, "subfieldModuleList", table);
    },
    // 创建渲染table展示格式
    createTemplateTable(list) {
      /** 
       * @type {Array<any>}
      */
      const tableList = list;
      for (const iterator of tableList) {
        const len = iterator?.children?.length;
        if (len) {
          const _childrentGroup = groupArray(iterator?.children, 100, "formAttribute.width");
          // 分组过后的值
          iterator["childrentGroup"] = cloneDeep(_childrentGroup);
        }
      }
      return tableList;
    },
    async getCustomFormDataByProjectKey(projectKey) {
      try {
        const result = await getCustomFormDataByProjectKeyApi(projectKey);
        if (result.code == 200 && result.data) {
          return result.data;
        }
        return null;
      } catch (error) {

      }
    },
    async getCustomFormDetail() {
      try {
        const result = await getCustomFormDetailApi();
        if (result.code == 200) {
          return result.data ? result.data : {};
        }
      } catch (error) {

      }
    },
    async setTableKeyWidth() {
      try {
        await this.$nextTick();
        /** 
         * @type {HTMLDivElement}
        */
        // const inner = this.$el.querySelector(".basic-engineering-information-inner");
        // if (inner) {
        //   const td = parseInt((inner.offsetWidth - 140 * 2) / 2);
        //   this.tableKeyWidth = `${parseInt(parseFloat(td / inner.offsetWidth) * 100)}%`;
        // }
        this.tableKeyWidth = "180px";
      } catch (error) {

      }
    },

    cancelModify() {
      this.comProjectDetailInfo = JSON.parse(JSON.stringify(this.oldComProjectDetailInfo));
      this.$set(this.form, "subfieldModuleList", cloneDeep(this.oldSubfieldModuleList));
    },
    async searchConsulting(keywords) {
      try {
        if ((keywords || keywords == "0") && keywords?.toString()?.trim() && keywords?.toString()?.trim()?.length >= 1) {
          this.clearSearchTimer();
          this.loading = true;
          this.$emit("searchLoadingChange", this.loading);
          await new Promise((resolve, reject) => {
            this.searchTimer = setTimeout(async () => {
              try {
                const result = await this.searchConsultingHandle(keywords.toString().trim());
                if (result) {
                  this.updateTemplate(result);
                }
                resolve();
              } catch (error) {
                reject(error);
              }
            }, 1000);
          });
        }
      } catch (error) {
        console.log(error);
      } finally {
        this.loading = false;
        this.$emit("searchLoadingChange", this.loading);
      }
    },
    async searchConsultingHandle(keywords) {
      try {
        const searchResult = await searchConsultingApi(keywords);
        if (searchResult.code == 200 && searchResult.data) {
          return searchResult.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    updateTemplate(data) {
      const updateMap = new Map([
        ["advisoryBody.advisoryBodyName", "advisoryBodyName"],
        ["advisoryBody.advisoryBodyCid", "advisoryBodyCid"],
        ["advisoryBody.businessScope", "businessScope"],
        ["isNewAdvisoryBody", "isNewAdvisoryBody"],
        ["corporatePerson", "corporatePerson"],
        ["regAddress", "regAddress"],
      ]);
      this.setTemplateData(updateMap, data);
      console.log(this.comProjectDetailInfo);
    },
    setTemplateData(mapData, data) {
      /** 
       * @type {Map<string,string>}
      */
      const _mapTemp = mapData;
      // 寻找对应的赋值对象
      for (const [key, value] of _mapTemp) {
        const keys = key.split(".");
        const len = keys.length;
        if (len == 1) {
          this.$set(this.comProjectDetailInfo, key, data[value]);
          continue;
        }
        const currentObjectKey = keys[len - 2];
        const currentKey = keys[len - 1];
        const currentObject = this.findCurrent(this.comProjectDetailInfo, currentObjectKey);
        this.$set(currentObject, currentKey, data[value]);
      }
    },
    findCurrent(originData, key) {
      for (const _key in originData) {
        if (_key == key) {
          return originData[_key];
        }
        if (Object.prototype.toString.call(originData[_key]) == "[object Object]") {
          return this.findCurrent(originData[_key], key);
        }
      }
    },
    clearSearchTimer() {
      clearTimeout(this.searchTimer);
      this.searchTimer = null;
    },
    async updateConsultingDetail() {
      try {
        const flag = await this.$refs["comProjectDetailForm"].validate();
        const customFormFlag = await this.$refs["customDesignFormTemplate"].validate();
        if (flag && customFormFlag) {
          // 通过验证校验咨询机构是否存在
          const result = await this.searchConsultingHandle(this.comProjectDetailInfo.advisoryBody.advisoryBodyName);
          if (result.advisoryBodyCid) {
            const _temp = JSON.parse(JSON.stringify(this.comProjectDetailInfo));
            const paramsData = {
              isNewAdvisoryBody: _temp.isNewAdvisoryBody ? _temp.isNewAdvisoryBody : result.isNewAdvisoryBody,
              projectKey: this.projectKey,
              advisoryBodyCid: _temp.advisoryBody.advisoryBodyCid,
              advisoryBodyName: _temp.advisoryBody.advisoryBodyName ?? "",
              businessScope: _temp.advisoryBody.businessScope ?? "",
              projectLeader: _temp.advisoryBodyProject.projectLeader ?? "",
              projectLeaderMajor: _temp.advisoryBodyProject.projectLeaderMajor ?? "",
              projectLeaderPhone: _temp.advisoryBodyProject.projectLeaderPhone ?? "",
              projectLeaderPhone: _temp.advisoryBodyProject.projectLeaderPhone ?? "",
              settleStartTime: _temp.advisoryBodyProject.settleStartTime ?? "",
              settleFinishTime: _temp.advisoryBodyProject.settleFinishTime ?? "",
              isFinalJudgeUnit: _temp.advisoryBodyProject.isFinalJudgeUnit ?? "",
            };
            const customFormData = this.saveCutomFormData();
            const customFormParamsData = {
              projectKey: this.projectKey,
              templateId: this.formTemplate.templateId,
              jsonData: JSON.stringify(customFormData)
            };
            // 处理自定义表单数据
            this.$emit("editComProjectDetailSuccess", paramsData, customFormParamsData);
          }
        }
      } catch (error) {
        if (error) {
          for (const key in error) {
            const _temp = error[key];
            _temp instanceof Array ? elementMessageSingleton("error", `${_temp[0].message}`) : null;
            break;
          }
        }
      }
    },
    saveCutomFormData() {
      /** 
       * @type {Array<any>}
      */
      let _array = cloneDeep(this.form.subfieldModuleList);

      function flatCustomForm(arr) {
        const _temp = [];

        function flagArray(array) {
          array.forEach(item => {
            if (item?.length) {
              flagArray(item);
            } else {
              _temp.push(item);
            }
          });
        }

        arr.forEach(item => {
          flagArray(item.childrentGroup);
        });

        return _temp;
      }

      const _result = flatCustomForm(_array);

      return _result;
    }
  },
}
</script>
<style lang="scss" scoped>
.consulting-agency-container {
  width: 100%;
  height: 100%;
  background: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
  overflow: auto;

  ::v-deep .basic-engineering-information-inner {
    width: 100%;
    .project-detault-module,
    .custom-design-form-module {
      .info-module-title {
        line-height: 24px;
        color: #232323;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        & > span {
          display: inline-block;
          position: relative;
          padding-left: 8px;
          box-sizing: border-box;
          &::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(35, 35, 35, 0.8);
            width: 2px;
            height: 14px;
          }
        }
      }
      .el-form-item {
        position: relative;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        margin-bottom: 0px;
        z-index: 9;

        &.is-error {
          .el-form-item__content {
            .el-input {
              .el-input__inner {
                border-color: #ff4949;
              }
            }
          }
        }

        .el-form-item__content {
          height: 100%;
          font-size: 12px;
          line-height: unset;

          .el-input {
            height: 100%;
            font-size: 12px;
          }

          .el-input__inner {
            height: 40px;
            line-height: 40px;
            border-radius: unset;
            border-color: transparent;
            color: #232323;
            font-size: 12px;
            font-weight: 400;
            padding-left: 12px;
            outline: unset;
            box-sizing: border-box;

            &:focus {
              border: 1px solid #0081ff;
            }
          }

          .el-date-editor {
            width: 100%;

            .el-input__prefix {
              display: none;
            }
          }

          .el-radio-group {
            display: flex;
            height: 100%;
            align-items: center;
            padding-left: 12px;
            box-sizing: border-box;

            .el-radio__input.is-checked .el-radio__inner {
              border-color: #0081ff;
              background: #0081ff;
            }

            .el-radio__input.is-checked + .el-radio__label {
              color: #0081ff;
            }

            .el-radio__inner:hover {
              border-color: #0081ff;
            }
          }

          .el-textarea {
            .el-textarea__inner {
              resize: unset;
              padding-left: 12px;
              min-height: 76px !important;
              border-radius: unset;
              border-color: transparent;
              color: #232323;

              &:focus {
                border: 1px solid #0081ff;
              }
              &::placeholder {
                font-family: Arial, Helvetica, sans-serif !important;
                font-size: 12px;
              }
            }
          }

          .el-select {
            width: 100%;
          }
        }
      }
      table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
        table-layout: fixed;
        &,
        th,
        td {
          border: 1px solid #e6eaf1;
          box-sizing: border-box;
        }

        td {
          padding: 9px 12px;
          line-height: 22px;
          color: #232323;
          font-size: 12px;
          position: relative;

          .normal-value {
            vertical-align: middle;
            line-height: 22px;
          }
        }

        .table-key {
          background: #f0f3fa;
          color: rgba(35, 35, 35, 0.8);
          width: 180px;
          &.lot {
            height: 62px;
          }
        }

        .td-none-padding {
          padding: 0px;
        }

        .data-td {
          width: calc(100% - 180px);
        }
      }
    }

    .project-contact,
    .project-settlement-information {
      margin-top: 24px;
    }

    .custom-design-form-template {
      width: 100%;
      .custom-design-form-module {
        margin-top: 24px;

        .custom-module-content {
          display: flex;
          flex-direction: column;
          width: 100%;
          /* border: 1px solid #e6eaf1; */
          box-sizing: border-box;

          .custom-module-row {
            display: flex;
            align-items: center;
          }

          .custom-module-item {
            display: flex;
            border: 1px solid #e6eaf1;
            box-sizing: border-box;
            .custom-item-key {
              width: 180px;
              min-height: 40px;
              font-size: 12px;
              background: #f0f3fa;
              color: rgba(35, 35, 35, 0.8);
              padding: 9px 12px;
              border-right: 1px solid #e6eaf1;
              box-sizing: border-box;
              display: flex;
              align-items: center;

              .custom-item-key-inner {
                width: 100%;
                // white-space: nowrap;
                // overflow: hidden;
                // text-overflow: ellipsis;
                &.is-required-key {
                  &::before {
                    content: "*";
                    color: #f56c6c;
                    margin-right: 4px;
                  }
                }
              }
            }
            .custom-item-com-box {
              width: calc(100% - 180px);
              min-height: 40px;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>
