platformFront/src/components/knowledgeExtra/AddDiagBase.vue

<template>
  <div style="min-height:100%" ref="viewBox">
    <crumbs :title="title" :param="$route.params" linkTo="ZskDiagBase"></crumbs>
    <div class="contents">
      <el-form
        :inline="true"
        ref="form"
        :label-position="labelPosition"
        class="add-new-form"
        label-width="100px"
        :model="form"
        :rules="rules"
      >
        <div class="content">
          <el-form-item label="疾病名称：" class="item" prop="conceptId" :rules="rules.conceptId">
            <el-select
              clearable
              remote
              filterable
              :remote-method="searchDiag"
              v-model.trim="form.conceptId"
            >
              <el-option
                v-for="item in conceptList"
                :key="item.conceptId"
                :label="item.conceptName"
                :value="item.conceptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="诊断依据描述：" prop="description" class="item">
            <el-input
              class="inps"
              maxlength="200"
              placeholder="请输入诊断依据描述"
              v-model.trim="form.description"
            ></el-input>
          </el-form-item>
        </div>
        <div class="content content-2">
          <div class="content-2-header">
            <p class="title1">
              <span class="star">*</span>诊断依据内容
            </p>
            <p class="title2">注：1、选择诊断依据类型后才能展示基础依据类型。2、医学内容可输入升高、降低、阴性、阳性等~</p>
          </div>
          <el-table
            size="mini"
            :span-method="dataSpanMethod"
            :data="form.klDiagnoseTypeVO"
            border
            ref="tableList"
            style="min-height: 200px"
            height="calc(100vh - 450px)"
            :header-cell-style="{background:'#E3EAF4'}"
          >
            <el-table-column label="依据" width="100" fixed>
              <template slot="header" slot-scope="scope">
                <span class="name">依据</span>
              </template>
              <template slot-scope="scope">
                <el-form-item>
                  <img
                    src="../../images/icon-copy.png"
                    height="18"
                    width="18"
                    class="icon"
                    @click="copyDiag(scope.row.depart_id)"
                  />
                  <img
                    src="../../images/icon-add.png"
                    height="18"
                    width="18"
                    class="icon"
                    @click="addDiag(scope.row.depart_id)"
                  />
                  <img
                    src="../../images/icon-delete.png"
                    height="18"
                    width="18"
                    class="icon"
                    @click="delDiag(scope.row.depart_id,scope.$index)"
                    v-show="dest.length>1"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="诊断依据类型" width="130">
              <template slot="header" slot-scope="scope">
                <span class="star">*</span>
                <span class="name">诊断依据类型</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  class="is-request"
                  :prop="'klDiagnoseTypeVO.'+scope.$index+'.conditionType'"
                  :rules="rules.conditionType"
                >
                  <el-select
                    ref="aa"
                    v-model="form.klDiagnoseTypeVO[scope.$index].conditionType"
                    @change="(val)=>basTypeChange(val,scope.$index)"
                  >
                    <el-option
                      v-for="item in baseTypes"
                      :key="item.ruleType"
                      :label="item.name"
                      :value="item.ruleType"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="组" width="130">
              <template slot="header" slot-scope="scope">
                <span class="star">*</span>
                <span class="name">组</span>
              </template>
              <template slot-scope="scope">
                <el-form-item>
                  <img
                    src="../../images/icon-add.png"
                    height="18"
                    width="18"
                    class="icon"
                    @click="addGroup(scope.$index)"
                  />
                  <img
                    src="../../images/icon-delete.png"
                    height="18"
                    width="18"
                    class="icon"
                    @click="delGroup(scope.row.depart_id,scope.$index)"
                    v-show="isMax(scope.row.depart_id)"
                  />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="符合条件数量" width="150">
              <template slot="header" slot-scope="scope">
                <span class="star">*</span>
                <span class="name">符合条件数量</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="'klDiagnoseTypeVO.'+scope.$index+'.groupVO.'+0+'.fitNo'"
                  :rules="rules.fitNo"
                >
                  <el-select v-model="scope.row.groupVO[0].fitNo">
                    <el-option
                      v-for="item in numArr[scope.$index].num[0]"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-for="(v,i) in columns" :width="v.width" :key="i">
              <template slot="header" slot-scope="scope">
                <span class="star" v-if="v.istar">*</span>
                <span class="name">{{v.title}}</span>
              </template>
              <template slot-scope="scope">
                <div v-for="(item,index) in scope.row.groupVO" :key="index">
                  <div v-for="(items,i) in item.klDiagnoseDetail" :key="i">
                    <div v-if="v.title == '基础依据'">
                      <el-form-item>
                        <img
                          src="../../images/icon-add.png"
                          height="18"
                          width="18"
                          class="icon"
                          @click="addRule(scope.row,scope.$index,index)"
                        />
                        <img
                          src="../../images/icon-delete.png"
                          height="18"
                          width="18"
                          class="icon"
                          @click="delRule(scope.row,scope.$index,index,i)"
                          v-show="item.klDiagnoseDetail.length>1"
                        />
                      </el-form-item>
                    </div>
                    <div class="box-2" v-if="v.title == '基础依据名称'">
                      <el-form-item
                        :prop="'klDiagnoseTypeVO.' +
                        scope.$index +
                        '.groupVO.' +
                        index +
                        '.klDiagnoseDetail.'+i+'.basDescription'"
                        :rules="rules.basDescription"
                      >
                        <el-input
                          class="inp-name"
                          placeholder="请输入基础依据名称"
                          maxlength="100"
                          v-model.trim="items.basDescription"
                        ></el-input>
                      </el-form-item>
                    </div>
                    <div class="box-2" v-if="v.title == '基础依据类型'">
                      <el-form-item
                        :prop="'klDiagnoseTypeVO.' +
                        scope.$index +
                        '.groupVO.' +
                        index +
                        '.klDiagnoseDetail.'+i+'.basType'"
                        :rules="rules.basType"
                      >
                        <el-select
                          v-model="items.basType"
                          @change="(val)=>baseTermTypeChange(val,scope.$index,index,i)"
                        >
                          <el-option
                            v-for="item in baseTermTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.type"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <el-form-item
                      :prop="'klDiagnoseTypeVO.' +
                      scope.$index +
                      '.groupVO.' +
                      index +
                      '.klDiagnoseDetail.'+i+'.basLibType'"
                      v-if="!items.basNameType && v.title == '基础依据术语类型'"
                      :rules="rules.basLibType"
                    >
                      <el-select
                        v-model="items.basLibType"
                        @change="(val)=>basLibTypeChange(val,scope.$index,index,i)"
                      >
                        <el-option
                          v-for="item in items.basLibTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="Number(item.code)"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="items.basNameType && v.title == '基础依据术语类型'">
                      <el-input disabled v-model="items.basTypeName"></el-input>
                    </el-form-item>

                    <div
                      v-if="v.title == '医学标准术语'"
                      class="box-2"
                      :class="items.basType===3 || items.basType===4? 'tmall' : 'taobao'"
                    >
                      <el-form-item
                        v-if="items.basType==1 || items.basType==2 || items.basType==''"
                        :prop="'klDiagnoseTypeVO.' +
                        scope.$index +
                        '.groupVO.' +
                        index +
                        '.klDiagnoseDetail.'+i+'.basConceptId'"
                        :rules="rules.subConceptId"
                      >
                        <el-select
                          class="searchselect"
                          v-model.trim="items.basConceptId"
                          multiple
                          filterable
                          remote
                          reserve-keyword
                          placeholder="请输入关键词"
                          :remote-method="(val)=>searchConcept(val,scope.$index,index,i)"
                          @change="(val)=>conceptChange(val,scope.$index,index,i)"
                        >
                          <el-option
                            v-for="item in items.conceptList"
                            :key="item.conceptId"
                            :label="item.conceptName"
                            :value="item.conceptId"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="last-box" v-if="v.title == '依据具体内容'">
                      <el-form-item
                        :prop="'klDiagnoseTypeVO.' +
                        scope.$index +
                        '.groupVO.' +
                        index +
                        '.klDiagnoseDetail.'+i+'.dataType'"
                        v-if="items.basType===2&&!items.onlyNumType&&!items.onlyTxtType"
                        :rules="rules.dataType"
                      >
                        <el-select
                          class="box-1"
                          :class="items.basType===2&&!items.onlyNumType&&!items.onlyTxtType? 'taobao' : 'tmall'"
                          v-model="items.dataType"
                          @change="(val)=>dataTypeChange(val,scope.$index,index,i)"
                          placeholder="请选择"
                          size="small"
                        >
                          <el-option
                            v-for="item in dataTypes"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        v-if="(!items.onlyNumType&&items.dataType==='1')||items.onlyNumType"
                        label="最大值："
                        label-width="60px"
                      >
                        <div class="last-box-1">
                          <el-form-item
                            :prop="'klDiagnoseTypeVO.' +
                            scope.$index +
                            '.groupVO.' +
                            index +
                            '.klDiagnoseDetail.'+i+'.maxOperator'"
                            :rules="[
                              {
                                validator: (rule, value, callback) => {
                                  maxOperator(items, rule, value, callback);
                                },
                                trigger: ['change']
                              }
                            ]"
                          >
                            <el-select
                              v-model="items.maxOperator"
                              placeholder="请选择"
                              size="small"
                              clearable
                            >
                              <el-option
                                v-for="item in operMaxList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              ></el-option>
                            </el-select>
                          </el-form-item>

                          <el-form-item
                            class="num"
                            :prop="'klDiagnoseTypeVO.' +
                            scope.$index +
                            '.groupVO.' +
                            index +
                            '.klDiagnoseDetail.'+i+'.maxVal'"
                            :rules="[
                              {
                                validator: (rule, value, callback) => {
                                  maxVal(items, rule, value, callback);
                                },
                                trigger: ['blur']
                              }
                            ]"
                          >
                            <el-input v-model="items.maxVal" placeholder="填写数值"></el-input>
                          </el-form-item>
                          <el-form-item prop="minUnit">
                            <el-input v-model.trim="items.maxUnit" placeholder="填写单位"></el-input>
                          </el-form-item>
                        </div>
                      </el-form-item>
                      <el-form-item
                        v-if="(!items.onlyNumType&&items.dataType==='1')||items.onlyNumType"
                        label="最小值："
                        label-width="60px"
                      >
                        <div class="last-box-1 last-box-s">
                          <el-form-item
                            :prop="'klDiagnoseTypeVO.' +
                            scope.$index +
                            '.groupVO.' +
                            index +
                            '.klDiagnoseDetail.'+i+'.minOperator'"
                            :rules="[
                              {
                                validator: (rule, value, callback) => {
                                  minOperator(items, rule, value, callback);
                                },
                                trigger: ['change']
                              }
                            ]"
                          >
                            <el-select
                              v-model="items.minOperator"
                              placeholder="请选择"
                              size="small"
                              clearable
                            >
                              <el-option
                                v-for="item in operMinList"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item
                            class="minnum"
                            :prop="'klDiagnoseTypeVO.' +
                            scope.$index +
                            '.groupVO.' +
                            index +
                            '.klDiagnoseDetail.'+i+'.minVal'"
                            :rules="[
                              {
                                validator: (rule, value, callback) => {
                                  minVal(items, rule, value, callback);
                                },
                                trigger: ['blur']
                              }
                            ]"
                          >
                            <el-input v-model="items.minVal" placeholder="填写数值"></el-input>
                          </el-form-item>
                          <el-form-item prop="minUnit">
                            <el-input v-model.trim="items.minUnit" placeholder="填写单位"></el-input>
                          </el-form-item>
                        </div>
                      </el-form-item>
                      <div>
                        <el-form-item
                          :prop="'klDiagnoseTypeVO.' +
                        scope.$index +
                        '.groupVO.' +
                        index +
                        '.klDiagnoseDetail.'+i+'.eqValue'"
                          v-if="items.basType===4 || items.basType===3"
                          maxlength="200"
                          label="正则表达式："
                          class="discDesc"
                          :rules="[
                          {
                            required: true,
                            message: '请输入正则表达式',
                            trigger: 'blur'
                          },

                        ]"
                        >
                          <el-input class="inp" placeholder="请输入正则表达式" v-model.trim="items.eqValue"></el-input>
                        </el-form-item>
                      </div>
                      <div>
                        <el-form-item
                          :prop="'klDiagnoseTypeVO.' +
                        scope.$index +
                        '.groupVO.' +
                        index +
                        '.klDiagnoseDetail.'+i+'.eqValue'"
                          maxlength="200"
                          v-if="(!items.onlyNumType&&!items.basNameType&&(items.basType===2 || items.basType===1)&&items.dataType==='2')||items.onlyTxtType"
                          label="医学内容："
                          class="discDesc"
                          :rules="[
                          {
                            required: true,
                            message: '请输入医学内容',
                            trigger: 'blur'
                          }
                          
                        ]"
                        >
                          <el-input v-model.trim="items.eqValue" class="inp" placeholder="请输入医学内容"></el-input>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <div class="Butn">
        <el-button class="disclButn" size="small" type="primary" @click="confirm">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import util from '../../api/utils.js';
import api from '@api/zskDiagBase.js';
import { tableRules } from './rules';
export default {
  name: 'AddZskDiagBase',
  data() {
    return {
      columns: [
        { title: '基础依据', width: 90, istar: true },
        { title: '基础依据名称', width: 160, istar: true },
        { title: '基础依据类型', width: 130, istar: true },
        { title: '基础依据术语类型', width: 160, istar: true },
        { title: '医学标准术语', width: 180, istar: true },
        { title: '依据具体内容', width: 850 }
      ],
      dicts: {},
      baseTypes: [], //诊断数据类型
      baseTermTypeList: [], //基础依据类型
      basLibTypeList: [], //基础术语依据类型
      numTypes: '', //只有数值类型的类型id
      labelPosition: 'left',
      isCopy: false,
      title: '诊断依据维护-添加诊断依据',
      conceptName: '',
      conceptList: [],
      form: {
        description: '',
        conceptId: '',
        klDiagnoseTypeVO: [
          {
            conditionType: '',
            depart_id: 0,
            groupVO: [
              {
                baseGroup: '',
                conditionGroup: '',
                fitNo: '',
                klDiagnoseDetail: [
                  {
                    dataType: '',
                    basNameType: false,
                    onlyNumType: false,
                    onlyTxtType: false,
                    basTypeName: '',
                    basConceptId: [],
                    basDescription: '',
                    basLename: '',
                    basLibName: '',
                    basLibType: null,
                    basType: '',
                    eqOperator: '',
                    eqUnit: '',
                    eqValue: '',
                    maxOperator: '',
                    maxUnit: '',
                    maxVal: '',
                    minOperator: '',
                    minUnit: '',
                    minVal: ''
                  }
                ]
              }
            ]
          }
        ]
      },
      id: null,
      rules: tableRules,
      dataTypes: [
        { id: '1', name: '数值类型' },
        { id: '2', name: '文本类型' }
      ],
      operMaxList: [
        { name: '<=', key: '<=' },
        { name: '<', key: '<' }
      ],
      operMinList: [
        { name: '>', key: '>' },
        { name: '>=', key: '>=' }
      ],
      basType: '',
      dataType: '',
      spanArr: [],
      list: [], //提交数据数组,
      i: 1,
      onshow: true
    };
  },
  created() {
    const param = this.$route.params;
    this.baseTypes = JSON.parse(localStorage.getItem('zskDiagList') || '[]');
    this.dicts = JSON.parse(localStorage.getItem('zskDiagDicts') || '{}');
    let info = param.data;
    if (info) {
      this.id = info.id;
      this.isCopy = param.copy;
      this.title =
        '诊断依据维护-' + (this.isCopy ? '复制' : '修改') + '诊断依据';
      this.conceptList = [
        { conceptId: info.conceptId, conceptName: info.conceptName }
      ];
      for (let i = 0; i < info.klDiagnoseTypeVO.length; i++) {
        info.klDiagnoseTypeVO[i].depart_id = i;
      }
      this.form = Object.assign({}, this.form, this.formatData(info));
      if (this.isCopy) {
        this.conceptList = [];
        delete this.form.conceptName;
        delete this.form.conceptId;
        delete this.form.description;
        delete this.form.id;
      }
      var index2 = this.baseTypes.findIndex(
        item => item.ruleType === this.form.klDiagnoseTypeVO[0].conditionType
      );
      this.baseTermTypeList = this.baseTypes[index2].subMenuList;
      const klDiagnoseTypeVO = this.form.klDiagnoseTypeVO,
        arr = [];
      let groupVOi, klDiagnoseDetailj;
      for (let i = 0; i < klDiagnoseTypeVO.length; i++) {
        groupVOi = klDiagnoseTypeVO[i].groupVO;
        for (let j = 0; j < groupVOi.length; j++) {
          klDiagnoseDetailj = groupVOi[j].klDiagnoseDetail;
          for (let k = 0; k < groupVOi[j].klDiagnoseDetail.length; k++) {
            var index2 = this.baseTermTypeList.findIndex(
              item => item.type === klDiagnoseDetailj[k].basType
            );
            klDiagnoseDetailj[k].basLibTypeList = this.baseTermTypeList[
              index2
            ].subMenuList;

            klDiagnoseDetailj[k].conceptList = this.formatData2(
              klDiagnoseDetailj[k].libNameList
            );
            klDiagnoseDetailj[k].libNameList.forEach(item => {
              arr.push(item.basConceptId);
            });
            this.$set(klDiagnoseDetailj[k],'basConceptId',arr )
            // klDiagnoseDetailj[k].basConceptId = arr;
            if (
              klDiagnoseDetailj[k].maxOperator ||
              klDiagnoseDetailj[k].minOperator
            ) {
              klDiagnoseDetailj[k].dataType = '1';
            } else if (klDiagnoseDetailj[k].eqValue) {
              klDiagnoseDetailj[k].dataType = '2';
            }
            if (
              klDiagnoseDetailj[k].basType == 3 ||
              klDiagnoseDetailj[k].basType == 4 ||
              klDiagnoseDetailj[k].basType == 5 ||
              klDiagnoseDetailj[k].basType == 6
            ) {
              klDiagnoseDetailj[k].basTypeName =
                klDiagnoseDetailj[k].basLibTypeList[0].name;
              klDiagnoseDetailj[k].basNameType = true;
            } else {
              klDiagnoseDetailj[k].basTypeName = '';
              klDiagnoseDetailj[k].basNameType = false;
            }
            const onlyNum = this.dicts['onlyNum'] || '&';
            const onlyTxt = this.dicts['onlyTxt'] || '&';
            const codes = onlyNum + ',';
            const code = onlyTxt + ',';
            let type = klDiagnoseDetailj[k].basLibType;
            let a = klDiagnoseDetailj[k].basLibType;
            klDiagnoseDetailj[k].onlyNumType =
              type && codes.indexOf(a + ',') > -1;
            klDiagnoseDetailj[k].onlyTxtType =
              type && code.indexOf(a + ',') > -1;
          }
        }
      }
      this.i = this.form.klDiagnoseTypeVO.slice(-1)[0].depart_id + 1;
    }
  },
  computed: {
    numArr() {
      let arr = [];
      let num = [];
      for (let i = 0; i < this.form.klDiagnoseTypeVO.length; i++) {
        arr.push({ num: [] });
        for (let j = 0; j < this.form.klDiagnoseTypeVO[i].groupVO.length; j++) {
          arr[i].num.push([]);
          for (
            let k = 0;
            k <
            this.form.klDiagnoseTypeVO[i].groupVO[j].klDiagnoseDetail.length;
            k++
          ) {
            arr[i].num[j].push({ id: k + 1, name: k + 1 });
          }
        }
      }
      return arr;
    },
    dest() {
      const formData = JSON.parse(JSON.stringify(this.form));
      let map = {},
        dest = [];
      for (let i = 0; i < formData.klDiagnoseTypeVO.length; i++) {
        let ai = formData.klDiagnoseTypeVO[i];
        if (!map[ai.depart_id]) {
          dest.push({
            depart_id: ai.depart_id,
            conditionType: ai.conditionType,
            groupVO: ai.groupVO
          });
          map[ai.depart_id] = ai;
        } else {
          for (let j = 0; j < dest.length; j++) {
            var dj = dest[j];
            if (dj.depart_id == ai.depart_id) {
              dj.groupVO = dj.groupVO.concat(ai.groupVO);
              break;
            }
          }
        }
      }
      return dest;
    }
  },
  methods: {
    // 最大值 选择rule
    maxOperator(items, rule, value, callback) {
      const { maxVal, minOperator, minVal } = items;
      const val = value + minOperator + minVal + maxVal;
      if (!val || (!value && maxVal !== '')) {
        callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
      } else {
        callback();
      }
    },
    // 最大值 数值rule
    maxVal(items, rule, value, callback) {
      const { maxOperator, minOperator, minVal } = items;
      const val = value + maxOperator + minOperator + minVal;
      const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
      if (!val || (value == '' && maxOperator)) {
        callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
      } else if (value !== '' && !isNum) {
        callback(new Error('只能输入数字'));
      } else {
        callback();
      }
    },
    // 最小值 选择rule
    minOperator(items, rule, value, callback) {
      const { maxVal, maxOperator, minVal } = items;
      const val = value + maxVal + maxOperator + minVal;
      if (!val || (!value && minVal !== '')) {
        callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
      } else {
        callback();
      }
    },
    // 最小值 数值rule
    minVal(items, rule, value, callback) {
      const { maxVal, minOperator, maxOperator } = items;
      const val = value + maxVal + minOperator + maxOperator;
      const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
      if (!val || (value == '' && minOperator)) {
        callback(new Error('最大值和最小值至少完整填写一个，单位不必填'));
      } else if (value !== '' && !isNum) {
        callback(new Error('只能输入数字'));
      } else {
        callback();
      }
    },
    isMax(id) {
      const typeNum = this.form.klDiagnoseTypeVO.filter(
        item => item.depart_id === id
      ).length;
      return typeNum > 1;
    },
    getData(data) {
      let arr = data;
      let str = [];
      let newArr = [];
      arr.filter((value, index, array) => {
        if (value.groupVO.length > 1 && value.groupVO.length != 0) {
          for (let j = 0; j < value.groupVO.length; j++) {
            var db = {
              conditionType: value.conditionType,
              depart_id: value.depart_id,
              groupVO: [value.groupVO[j]]
            };
            str.push(db);
          }
          value.groupVO = [];
          arr.splice(index, 1);
          arr.splice(index, 0, ...str);
          newArr = str;
        } else {
          newArr = arr;
        }
      });
      this.getSpanArr(newArr);
    },
    getSpanArr(data) {
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          if (data[i].depart_id === data[i - 1].depart_id) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    dataSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        //合并行的行为只在第一列进行
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    getInitData() {
      this.i++;
      return {
        conditionType: '',
        depart_id: this.i,
        groupVO: [
          {
            baseGroup: '',
            conditionGroup: '',
            fitNo: '',
            klDiagnoseDetail: [
              {
                dataType: '',
                basNameType: false,
                onlyNumType: false,
                onlyTxtType: false,
                basTypeName: '',
                basConceptId: [],
                basDescription: '',
                basLename: '',
                basLibName: '',
                basLibType: null,
                basType: '',
                eqOperator: '',
                eqUnit: '',
                eqValue: '',
                maxOperator: '',
                maxUnit: '',
                maxVal: '',
                minOperator: '',
                minUnit: '',
                minVal: ''
              }
            ]
          }
        ]
      };
    },
    //新增依据
    addDiag(id) {
      let temp = this.getInitData();
      var i = -1;
      this.form.klDiagnoseTypeVO.forEach((item, inx) => {
        if (item.depart_id == id) {
          i = inx;
        }
      });
      this.$nextTick(() => {
        this.$refs.tableList.bodyWrapper.scrollLeft = 0;
      });
      this.form.klDiagnoseTypeVO.splice(i + 1, 0, temp);
    },
    //复制依据
    copyDiag(id) {
      this.i++;
      const formData = JSON.parse(JSON.stringify(this.form));
      let i = -1;
      let arr = [];
      formData.klDiagnoseTypeVO.forEach((item, inx) => {
        if (item.depart_id == id) {
          arr.push(item);
          i = inx;
        }
      });
      arr.forEach((item, index) => {
        item.depart_id = this.i;
        this.form.klDiagnoseTypeVO.splice(i + index + 1, 0, item);
      });
    },
    //删除依据
    delDiag(id, inx) {
      this.form.klDiagnoseTypeVO = this.form.klDiagnoseTypeVO.filter(
        item => item.depart_id !== id
      );
      this.form.klDiagnoseTypeVO.forEach((item, index) => {
        if (item.depart_id > id) {
          item.depart_id = item.depart_id - 1;
        }
      });
    },
    //新增组
    addGroup(i) {
      const temp = {
        baseGroup: '',
        conditionGroup: '',
        fitNo: '',
        klDiagnoseDetail: [
          {
            dataType: '',
            basNameType: false,
            onlyNumType: false,
            onlyTxtType: false,
            basTypeName: '',
            basConceptId: [],
            basDescription: '',
            basLename: '',
            basLibName: '',
            basLibType: null,
            basType: '',
            eqOperator: '',
            eqUnit: '',
            eqValue: '',
            maxOperator: '',
            maxUnit: '',
            maxVal: '',
            minOperator: '',
            minUnit: '',
            minVal: ''
          }
        ]
      };
      this.form.klDiagnoseTypeVO[i].groupVO.splice(i + 1, 0, temp);
    },
    delGroup(id, i) {
      this.form.klDiagnoseTypeVO.splice(i, 1);
    },
    //新增基础依据
    addRule(row, index, inx, i) {
      let temp = {
        dataType: '',
        basNameType: false,
        basTypeName: '',
        basConceptId: [],
        basDescription: '',
        basLename: '',
        basLibName: '',
        basLibType: null,
        basType: '',
        eqOperator: '',
        eqUnit: '',
        eqValue: '',
        maxOperator: '',
        maxUnit: '',
        maxVal: '',
        minOperator: '',
        minUnit: '',
        minVal: ''
      };
      this.form.klDiagnoseTypeVO[index].groupVO[inx].klDiagnoseDetail.splice(
        i + 1,
        0,
        temp
      );
      this.form.klDiagnoseTypeVO = JSON.parse(
        JSON.stringify(this.form.klDiagnoseTypeVO)
      ); //8525更新对象触发滚动条更新
    },
    delRule(row, inx, index, i) {
      const klDiagnoseDetail = this.form.klDiagnoseTypeVO[inx].groupVO[index]
        .klDiagnoseDetail;
      if (klDiagnoseDetail.length === 1) {
        return;
      } else {
        klDiagnoseDetail.splice(i, 1);
        const numArr = this.numArr[inx].num[0];
        const fitNo = this.form.klDiagnoseTypeVO[inx].groupVO[0].fitNo;
        if (numArr[numArr.length - 1].name < fitNo) {
          this.form.klDiagnoseTypeVO[inx].groupVO[0].fitNo = '';
        }
      }
    },
    //诊断依据类型修改
    basTypeChange(val, inx) {
      if (!val) {
        this.baseTermTypeList = [];
        return;
      }
      var index2 = this.baseTypes.findIndex(item => item.ruleType === val);
      this.baseTermTypeList = this.baseTypes[index2].subMenuList;
    },
    //基础依据类型修改
    baseTermTypeChange(val, inx, index, i) {
      if (!val) {
        return;
      }
      this.basType = val;
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].basType = val;
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].basLibType = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].dataType = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].conceptList = [];
      this.clearConcept(val, inx, index, i); //清空医学标准术语
      this.clearNumText(val, inx, index, i); //清空数值、医学内容
      var index2 = this.baseTermTypeList.findIndex(item => item.type === val);
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].basLibTypeList = this.baseTermTypeList[index2].subMenuList;
      this.form.klDiagnoseTypeVO[inx].groupVO[
        index
      ].baseTermTypeList = this.baseTermTypeList;
      if (val == 3 || val == 4 || val == 5 || val == 6) {
        this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
          i
        ].basTypeName = this.form.klDiagnoseTypeVO[inx].groupVO[
          index
        ].klDiagnoseDetail[i].basLibTypeList[0].name;

        this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
          i
        ].basNameType = true;
        this.$refs['form'].clearValidate([
          'klDiagnoseTypeVO.' +
            inx +
            '.groupVO.' +
            index +
            '.klDiagnoseDetail.' +
            i +
            '.basLibType'
        ]);
      } else {
        this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
          i
        ].basTypeName = '';
        this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
          i
        ].basNameType = false;
      }
    },
    //基础依据术语类型修改
    basLibTypeChange(val, inx, index, i) {
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].basLibType = val;
      // this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
      //   i
      // ].dataType = '';

      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].basConceptId = [];
      if ((this.numTypes + ',').indexOf(val + ',') > -1) {
        this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
          i
        ].dataType = '1';
      } else {
        this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
          i
        ].dataType = '';
      }
      const onlyNum = this.dicts['onlyNum'] || '&';
      const onlyTxt = this.dicts['onlyTxt'] || '&';
      const codes = onlyNum + ',';
      const code = onlyTxt + ',';
      let type = this.form.klDiagnoseTypeVO[inx].groupVO[index]
        .klDiagnoseDetail[i].basLibType;
      let a = this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[i]
        .basLibType;
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].onlyNumType = type && codes.indexOf(a + ',') > -1;
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].onlyTxtType = type && code.indexOf(a + ',') > -1;
      this.clearConcept(val, inx, index, i);
      this.clearNumText2(val, inx, index, i);
    },
    //医学标准术语
    conceptChange(val, inx, index, i) {
      // this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
      //   i
      // ].basConceptId = val;
      this.$set(
        this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[i],
        'basConceptId',
        val
      );
      console.log(
        this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[i]
          .basConceptId
      );
      // if (val) {
      //   this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
      //     i
      //   ].basLibName = this.form.klDiagnoseTypeVO[inx].groupVO[
      //     index
      //   ].klDiagnoseDetail[i].conceptList.find(
      //     it => it.conceptId === val
      //   ).conceptName;
      // } else {
      //   this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
      //     i
      //   ].basLibName = '';
      // }
    },
    searchConcept(val, inx, index, i) {
      const formData = JSON.parse(JSON.stringify(this.form));
      const param = {
        excludedConceptIds: [
          formData.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[i]
            .basType
        ],
        libType:
          formData.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[i]
            .basLibType,
        name: val
      };
      api
        .searchConcept(param)
        .then(res => {
          if (res.data.code == '0') {
            const data = res.data.data;

            this.$nextTick(() => {
              // dom元素更新后执行，因此这里能正确打印更改之后的值
              formData.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
                i
              ].conceptList = data; // 改变了的值
            });
            this.form = formData;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    dataTypeChange(val, inx, index, i) {
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].dataType = val;

      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].eqOperator = val === '2' ? '=' : '';
    },
    clearConcept(val, inx, index, i) {
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].basConceptId = [];
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].basLibName = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].conceptList = [];
    },
    clearNumText2(val, inx, index, i) {
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].maxOperator = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].maxVal = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].maxUnit = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].minOperator = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].minVal = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].minUnit = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].eqValue = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].eqOperator = '';
    },
    clearNumText(val, inx, index, i) {
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].maxOperator = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].maxVal = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].maxUnit = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].minOperator = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].minVal = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].minUnit = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].eqValue = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].eqOperator = '';
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].onlyNumType = false;
      this.form.klDiagnoseTypeVO[inx].groupVO[index].klDiagnoseDetail[
        i
      ].onlyTxtType = false;
    },
    formatData(data) {
      //转换字段名
      let str = JSON.stringify(data)
        .replace(/byIdDTO/g, 'groupVO')
        .replace(/klDiagnoseByIdDTO/g, 'klDiagnoseDetail');
      //console.log(JSON.parse(str))
      return JSON.parse(str);
    },
    formatData2(data) {
      //转换字段名
      let str = JSON.stringify(data)
        .replace(/basLibName/g, 'conceptName')
        .replace(/basConceptId/g, 'conceptId');
      //console.log(JSON.parse(str))
      return JSON.parse(str);
    },
    searchDiag(val) {
      const param = {
        diseaseName: val
      };
      api
        .searchDiag(param)
        .then(res => {
          if (res.data.code == '0') {
            const data = res.data.data;
            this.conceptList = data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    setInitGroupData() {
      let temp = this.getInitData();
      this.form.klDiagnoseTypeVO = [temp];
    },
    setRules() {
      let that = this;
      let list = this.form.klDiagnoseTypeVO;
      if (list && list.length > 0) {
        list.forEach((item, i) => {
          let list1 = list[i].groupVO;
          list1.forEach((it, x) => {
            let list2 = list1[x].klDiagnoseDetail;
            list2.forEach((t, j) => {
              let grandeObj = this.form.klDiagnoseTypeVO[i].groupVO[x]
                .klDiagnoseDetail[j];
              if (grandeObj) {
                const keyTxt =
                  'klDiagnoseTypeVO.' +
                  i +
                  '.groupVO.' +
                  x +
                  '.klDiagnoseDetail.' +
                  j;
                that.rules[keyTxt + '.dataType'] = [
                  {
                    required: true,
                    message: '请选择类型',
                    trigger: ['change']
                  }
                ];
                that.rules[keyTxt + '.maxOperator'] = [
                  {
                    validator: (rule, value, callback) => {
                      const { maxVal, minOperator, minVal } = grandeObj;
                      const val = value + minOperator + minVal + maxVal;
                      if (!val || (!value && maxVal !== '')) {
                        callback(
                          new Error(
                            '最大值和最小值至少完整填写一个，单位不必填'
                          )
                        );
                      } else {
                        callback();
                      }
                    },
                    trigger: 'change'
                  }
                ];
                that.rules[keyTxt + '.minOperator'] = [
                  {
                    validator: (rule, value, callback) => {
                      const { maxVal, maxOperator, minVal } = grandeObj;
                      const val = value + maxOperator + minVal + maxVal;
                      if (!val || (!value && minVal !== '')) {
                        callback(
                          new Error(
                            '最大值和最小值至少完整填写一个，单位不必填'
                          )
                        );
                      } else {
                        callback();
                      }
                    },
                    trigger: 'change'
                  }
                ];
                that.rules[keyTxt + '.maxVal'] = [
                  {
                    validator: (rule, value, callback) => {
                      const { maxOperator, minOperator, minVal } = grandeObj;
                      const val = value + maxOperator + minVal + minOperator;
                      const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
                      if (!val || (value === '' && maxOperator)) {
                        callback(
                          new Error(
                            '最大值和最小值至少完整填写一个，单位不必填'
                          )
                        );
                      } else if (value !== '' && !isNum) {
                        callback(new Error('只能输入数字'));
                      } else {
                        callback();
                      }
                    },
                    trigger: 'blur'
                  }
                ];
                that.rules[keyTxt + '.minVal'] = [
                  {
                    validator: (rule, value, callback) => {
                      const { maxVal, minOperator, maxOperator } = grandeObj;
                      const val = value + maxOperator + maxVal + minOperator;
                      const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
                      if (!val || (value === '' && minOperator)) {
                        callback(
                          new Error(
                            '最大值和最小值至少完整填写一个，单位不必填'
                          )
                        );
                      } else if (value !== '' && !isNum) {
                        callback(new Error('只能输入数字'));
                      } else {
                        callback();
                      }
                    },
                    trigger: 'blur'
                  }
                ];
              }
            });
          });
        });
      }
    },
    saveDiagBase(params) {
      api.saveDiagBase(params).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.$router.push({
            name: 'ZskDiagBase',
            params: this.$route.params
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
    },
    validateForms(callBack) {
      this.$refs['form'].validate(valid => {
        if (valid) {
          callBack();
        } else {
          return false;
        }
      });
    },
    confirm() {
      const formData = JSON.parse(JSON.stringify(this.form));
      const _this = this;
      for (let i = 0; i < formData.klDiagnoseTypeVO.length; i++) {
        for (let j = 0; j < formData.klDiagnoseTypeVO[i].groupVO.length; j++) {
          delete formData.klDiagnoseTypeVO[i].groupVO[j].baseTermTypeList;
          for (
            let k = 0;
            k < formData.klDiagnoseTypeVO[i].groupVO[j].klDiagnoseDetail.length;
            k++
          ) {
            delete formData.klDiagnoseTypeVO[i].groupVO[j].klDiagnoseDetail[k]
              .basLibTypeList;
            delete formData.klDiagnoseTypeVO[i].groupVO[j].klDiagnoseDetail[k]
              .conceptList;
          }
        }
      }
      let map = {},
        dest = [];
      for (let i = 0; i < formData.klDiagnoseTypeVO.length; i++) {
        let ai = formData.klDiagnoseTypeVO[i];
        if (!map[ai.depart_id]) {
          dest.push({
            depart_id: ai.depart_id,
            conditionType: ai.conditionType,
            groupVO: ai.groupVO
          });
          map[ai.depart_id] = ai;
        } else {
          for (let j = 0; j < dest.length; j++) {
            var dj = dest[j];
            if (dj.depart_id == ai.depart_id) {
              dj.groupVO = dj.groupVO.concat(ai.groupVO);
              break;
            }
          }
        }
      }
      formData.klDiagnoseTypeVO = dest;
      this.validateForms(function() {
        let params = formData;
        _this.saveDiagBase(params);
      });
    }
  },
  watch: {
    form: {
      handler: function(newQuestion, oldQuestion) {
        this.getData(this.form.klDiagnoseTypeVO);
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style lang="less" scoped>
@import '../../less/admin.less';

/deep/ .searchselect {
  .el-input {
    height: 100% !important;
  }
}
.contents {
  height: 100%;
  .content {
    background: #fff;
    padding: 20px 20px;
    color: #545455;
    min-width: 980px;
    position: relative;
    .tip-text {
      color: #f56c6c;
      margin-left: 10px;
    }
    .conceptItem {
      padding: 0 10px;
      cursor: pointer;
      height: 32px;
      line-height: 32px;
      &:hover {
        background: #ebedf1;
      }
    }
    .el-table--scrollable-y .el-table__body-wrapper {
      height: calc(100vh - 370px);
    }
    /deep/ .el-input {
      height: 30px;
      line-height: 30px;
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
      }
    }
    /deep/ .el-select .el-input .el-icon-arrow-up {
      line-height: 25px;
    }
    .inps {
      width: 500px !important;
      font-size: 14px;
      /deep/ .el-input__inner {
        width: 500px !important;
        font-size: 14px;
      }
    }
    .item {
      /deep/.el-form-item__label {
        font-size: 14px;
      }
      /deep/.el-input__inner {
        font-size: 14px;
      }
    }
  }
  /deep/.is-error .el-form-item__error {
    top: 30px;
  }
  .content-2 {
    margin-top: 10px;
    padding: 20px 20px;
    height: calc(100vh - 370px);
    .cell {
      overflow: initial;
    }
    .content-2-header {
      padding: 20px 0;
      .title1 {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
      .title2 {
        font-size: 12px;
        font-weight: 400;
        color: #ff545b;
        line-height: 17px;
      }
    }
    .el-form-item {
      margin-bottom: 10px;
      margin-right: 0;
    }
    .discDesc {
      margin-bottom: 20px;
      /deep/ .el-form-item__error {
        top: 38px;
        left: 100px !important;
        white-space: nowrap;
      }
    }
    .el-popper[x-placement^='bottom'] {
      width: 100px !important;
    }
    .disclButn {
      position: absolute;
      right: calc(50% - 60px);
      bottom: 10px;
    }
    .el-table .cell.el-tooltip {
      position: relative;
    }
    .box-2 {
      position: relative;
      .tips {
        left: 3px;
      }
    }
    .box-3 {
      position: relative;
    }
    .tips {
      width: 12px;
      height: 12px;
      position: absolute;
      left: 15px;
      top: 15px;
    }
    .title {
      position: absolute;
      z-index: -1;
    }
    .last-box {
      display: flex;
      height: 50px;
      margin-bottom: 10px;
      position: relative;
      /deep/ .el-input,
      .el-input__inner {
        width: 85px;
        font-size: 12px;
        margin-right: 15px;
      }
      /deep/ .el-form-item__content {
        position: inherit !important;
      }
      .last-box-1 {
        display: flex;
        /deep/ .el-form-item__error {
          top: 38px;
          left: 10px;
          white-space: nowrap;
          width: 360px;
        }
      }
      .last-box-s {
        position: absolute;
        /deep/ .el-form-item__error {
          top: 38px;
          left: 0px;
          white-space: nowrap;
          width: 260px;
        }
      }
      /deep/ .el-form-item__error {
        top: 38px;
        left: 10px;
        white-space: nowrap;
      }
      /deep/ .inp {
        width: 600px !important;
        .el-input__inner {
          width: 600px !important;
        }
      }
      .el-form-item {
        margin: 0;
        overflow: hidden;
        display: flex;
      }
    }

    .tmall {
      visibility: hidden;
      height: 60px;
    }

    .medical {
      margin-right: 26px;
    }
    .group {
      border-bottom: 1px solid red;
      padding: 30px 0;
      .group-row {
        padding: 10px 0;
        border-bottom: 1px solid red;
      }
    }
    .group:last-child {
      border-bottom: none;
    }
    .icon {
      padding: 0 3px;
      cursor: pointer;
    }
    .star {
      color: #ff545b;
    }
  }
  .Butn {
    display: flex;
    justify-content: center;
    background: #fff;
    .el-button {
      margin: 15px 0;
    }
  }
  .name {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
  }
}
</style>