<!--属性-->
<template>
  <div class="table-max-box iotClassification-attributePage">
    <div class="table-title-box">
      <el-form :model="queryParams" class="form-box" ref="queryForm"
               :inline="true" style="width:100%;">
        <el-form-item label="" prop="searchValue " label-width="90px">
          <el-input
            maxLength="30"
            v-model="queryParams.searchValue"
            placeholder="请输入名称/标识"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="" prop="state ">
          <el-select v-model="queryParams.state " clearable placeholder="请选择状态" style="width: 200px">
            <el-option
              v-for="dict in options"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <p class="page-inquire-common-style-button" @click="handleQuery" style="margin-right:10px;">查询</p>
        <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        <el-form-item label="" prop="title" style="float: right">
          <el-col :span="1.5" style="margin-right:10px;">
            <p class="page-submit-common-style-button"
               @click="dialogOpen"
            >新增</p>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content-box">
      <el-table class="table-box" v-loading="loading" border :data="dataList">
        <el-table-column label="名称" align="left" prop="name" show-overflow-tooltip/>
        <el-table-column label="标识" align="left" prop="code" width="150" show-overflow-tooltip/>
        <el-table-column label="小图标" align="left" prop="icon" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <img v-if="scope.row.icon" style="height:24px;width:24px;" :src="fileBrowseEnvironment+scope.row.icon">
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="大图标" align="left" prop="exceptionIcon" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <img v-if="scope.row.exceptionIcon" style="height:24px;width:24px;" :src="fileBrowseEnvironment+scope.row.exceptionIcon">
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="属性" align="left" prop="attrName" show-overflow-tooltip/>
        <el-table-column label="单位" align="left" prop="unit" width="100" show-overflow-tooltip/>
        <el-table-column label="排序" align="left" prop="sort" width="80" show-overflow-tooltip/>
        <el-table-column label="波动范围" align="left" prop="fluctuationRange" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.isFluctuation?scope.row.fluctuationRange:''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="left" prop="remark" width="150" show-overflow-tooltip/>
        <el-table-column label="状态" align="left" prop="state" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch
              @click.native="tableButton(3,scope.row)"
              class="switch captcha-img"
              :active-value="true"
              :inactive-value="false"
              active-color="#0183FA"
              inactive-color="#999"
              v-model="scope.row.state"
              active-text="启用"
              inactive-text="停用"
              disabled
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="left" prop="createTime" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <div class="table-button-box">
              <p class="table-button-null"></p>
              <p class="table-button-p"
                 @click="tableButton(1,scope.row)"
              >编辑</p>
              <p class="table-button-p"
                 @click="tableButton(2,scope.row)"
              >删除</p>
              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                           v-hasPermiRouter="['demo:demo:move']">
                <p class="table-button-p">更多>></p>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">上移</el-dropdown-item>
                  <el-dropdown-item command="2">下移</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <p class="table-button-null"></p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
                  v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.page"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
      />
    </div>
    <!--新增弹窗-->
    <el-dialog class="iotClassification-dialog" :title='dialogTitle' width="1100px" append-to-body
               :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="scrollbar-box" style="height:600px;">
        <el-form :model="dialogForm" ref="dialogForm" :inline="true" :rules="dialogRules"
                 class="addCheckPage-min" label-width="110px">
          <div class="iotClassification-dialog-form-box">
            <div class="iotClassification-dialog-form-left-box">
              <el-form-item label="名称：" prop="name">
                <el-input v-model="dialogForm.name" placeholder="请输入名称" maxLength="10" style="width:320px;"/>
              </el-form-item>
              <el-form-item label="标识：" prop="code" v-if="dialogAttrType">
                <el-select v-model="dialogForm.code" clearable placeholder="请选择" style="width: 320px">
                  <el-option
                    v-for="dict in attrTypeOptions"
                    :key="dict.code"
                    :label="dict.name"
                    :value="dict.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="标识：" prop="code" v-if="!dialogAttrType">
                <el-input v-model="dialogForm.code" placeholder="请输入标识" maxLength="20" style="width:320px;"/>
              </el-form-item>
              <el-form-item label="属性：" prop="attrName">
                <el-input v-model="dialogForm.attrName" placeholder="请输入属性" maxLength="20" style="width:320px;"/>
              </el-form-item>
              <el-form-item label="单位：" prop="unit">
                <el-input v-model="dialogForm.unit" placeholder="请输入单位" maxLength="20" style="width:320px;"/>
              </el-form-item>
              <el-form-item label="排序：" prop="sort">
                <el-input-number v-model="dialogForm.sort" controls-position="right" :min="1" :max="9999" style="width:320px;"></el-input-number>
              </el-form-item>
              <el-form-item label="备注：" prop="remark">
                <el-input placeholder="请输入备注" maxLength='100' type="textarea" style="width:320px;"
                          resize="none" v-model="dialogForm.remark" show-word-limit :autosize="{ minRows: 2, maxRows: 2}"></el-input>
              </el-form-item>
              <div>
                <el-form-item label="小图标：" prop="icon">
                  <el-upload
                    style="width:100px;"
                    class="iotClassification-dialog-upload"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    :on-success="(res)=>handleAvatarSuccess(res,'icon')"
                    :headers="headers"
                    :before-upload="(file)=>beforeAvatarUpload(file)">
                    <div class="center-img" style="margin-left:20px;">
                      <img v-if="dialogForm.icon" :src="fileBrowseEnvironment+dialogForm.icon" style="max-width:40px;max-height:40px;">
                      <p v-if="!dialogForm.icon" class="el-icon-upload" style="text-align: center;line-height:40px;font-size:30px;color:#0183FA;"></p>
                    </div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="大图标：" prop="exceptionIcon">
                  <el-upload
                    style="width:100px;"
                    class="iotClassification-dialog-upload"
                    :action="uploadImgUrl"
                    :show-file-list="false"
                    :on-success="(res)=>handleAvatarSuccess(res,'exceptionIcon')"
                    :headers="headers"
                    :before-upload="(file)=>beforeAvatarUpload(file)">
                    <div class="center-img" style="margin-left:20px;">
                      <img v-if="dialogForm.exceptionIcon" :src="fileBrowseEnvironment+dialogForm.exceptionIcon" style="max-width:40px;max-height:40px;">
                      <p v-if="!dialogForm.exceptionIcon" class="el-icon-upload" style="text-align: center;line-height:40px;font-size:30px;color:#E65D6E;"></p>
                    </div>
                  </el-upload>
                </el-form-item>
              </div>
            </div>
            <div class="iotClassification-dialog-form-right-box">
              <!--关联硬件-->
              <div class="for-argument-disposition-max-box">
                <p class="for-argument-disposition-title-p">关联硬件：</p>
                <div class="for-argument-disposition-big-box">
                  <div class="for-argument-disposition-box" v-for="(item,index) in dialogForm.relateField" :key="index">
                    <el-form-item label="" :prop="'relateField.'+index+'.relateFieldName'" :rules="item.state?dialogRules.relateFieldName:dialogRulesNo">
                      <el-input v-model="item.relateFieldName" :disabled="!item.state"
                                placeholder="请输入字段名称" maxLength="10" style="width:320px;">
                        <template slot="append">
                          <el-checkbox v-model="item.state">启用</el-checkbox>
                        </template>
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <el-form-item label="网络组件：" prop="networkId">
                <el-select v-model="dialogForm.networkId"
                           placeholder="请选择网络组件"
                           clearable style="width:320px;">
                  <el-option
                    v-for="dict in networkOptions"
                    :key="dict.id"
                    :label="dict.moduleName"
                    :value="dict.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="阈值：" prop="threshhold">
                <el-input-number v-model="dialogForm.threshhold" controls-position="right" :precision="2" :step="0.1" :min="-9999999" :max="9999999" style="width:320px;"></el-input-number>
              </el-form-item>
              <el-form-item label="是否波动：" prop="isFluctuation">
                <el-radio-group v-model="dialogForm.isFluctuation">
                  <el-radio :label="true">启用</el-radio>
                  <el-radio :label="false">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="波动方向：" prop="fluctuationDirection" v-if="dialogForm.isFluctuation">
                <el-radio-group v-model="dialogForm.fluctuationDirection">
                  <el-radio :label="-1">负向</el-radio>
                  <el-radio :label="0">正负双向</el-radio>
                  <el-radio :label="1">正向</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="波动范围：" prop="fluctuationRange" v-if="dialogForm.isFluctuation">
                <el-input v-model="dialogForm.fluctuationRange" placeholder="请输入波动范围" maxLength="4" style="width:320px;"/>
              </el-form-item>
              <div class="for-params-max-box">
                <p class="for-params-title-p">自定义参数：</p>
                <div class="for-params-big-box">
                  <div class='for-params-box' v-for="(item,index) in dialogForm.params">
                    <el-form-item label="" :prop="'params.'+index+'.key'" :rules="dialogRules.key">
                      <el-input
                        v-model="item.key"
                        maxLength="30"
                        placeholder="请输入键"
                        style="width:155px;"
                      />
                    </el-form-item>
                    <el-form-item label="" :prop="'params.'+index+'.value'" :rules="dialogRules.value">
                      <el-input
                        v-model="item.value"
                        maxLength="30"
                        placeholder="请输入值"
                        style="width:155px;"
                      />
                    </el-form-item>
                    <span class="el-icon-remove del-span" @click="delItem(index)"></span>
                  </div>
                </div>
                <span class="null-span" v-if="!dialogForm.params[0]">未配置</span>
                <span class="el-icon-circle-plus add-span" @click="addItem" v-if="!dialogForm.params[4]"></span>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { iotAttributeList,iotAttributeAdd,iotNetworkInfo,
    iotAttributeUpdate,iotAttributeDelete,iotAttributeDetail,
    iotAttributeMoveUp,iotAttributeMoveDown,iotAttributeAttrType  } from "@/api/iotDevice/index";
  export default {
    name: 'attributePage',
    data(){
      const doubleCheck = (rule, value, callback) => {
        let self = this;
        let num = 0;
        for(let i=0;i<self.dialogForm.params.length;i++){
          if(value == self.dialogForm.params[i].key){
            num++
          }
        }
        if(num > 1){
          return callback(new Error('参数重复'));
        }else{
          callback();
        }
      };
      return{
        //上传相关
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization:getToken(),
        },
        loading:false,
        options:[{label:'启用',value:true},{label:'停用',value:false}],
        networkOptions:[],
        //子标识列表
        attrTypeOptions:[],
        //原始数据
        attrTypeOptionsList:[],
        queryParams:{
          typeId:this.$parent.propsData.typeId,
          page:1,
          pageSize:20,
          searchValue:"",
          state :null,
        },
        dataList:[],
        total:0,
        //弹层
        dialogTitle:null,
        dialogType:false,
        //标识状态(列表或者输入)
        dialogAttrType:true,
        dialogForm:{},
        dialogRules:{
          name: [
            { required: true, message: "请输入名称", trigger: "blur" },
            { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          code: [
            { required: true, message: "请输入标识", trigger: "blur" },
            { required: true, message: "请输入标识", validator: this.spaceJudgment, trigger: "blur" }
          ],
          attrName: [
            { required: true, message: "请输入属性", trigger: "blur" },
            { required: true, message: "请输入属性", validator: this.spaceJudgment, trigger: "blur" }
          ],
          unit: [
            { required: true, message: "请输入单位", trigger: "blur" },
            { required: true, message: "请输入单位", validator: this.spaceJudgment, trigger: "blur" }
          ],
          sort: [
            { required: true, message: "请输入排序", trigger: "blur" },
            { required: true, message: "请输入排序", validator: this.spaceJudgment, trigger: "blur" }
          ],
          key: [
            { required: true, message: "请输入键", trigger: "blur" },
            { required: true, message: "请输入键", validator: this.spaceJudgment, trigger: "blur" },
            { required: true, message: "参数重复", validator: doubleCheck, trigger: "blur" }
          ],
          value: [
            { required: true, message: "请输入值", trigger: "blur" },
            { required: true, message: "请输入值", validator: this.spaceJudgment, trigger: "blur" }
          ],
          relateFieldName: [
            { required: true, message: "请输入字段名称", trigger: "blur" },
            { required: true, message: "请输入字段名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        dialogRulesNo:{},
        // 文件服务地址
        fileBrowseEnvironment:localStorage.getItem('fileBrowseEnvironment'),
      }
    },
    created(){

    },
    mounted(){
      this.getList();
      this.iotNetworkInfo();
      this.iotAttributeAttrType();
    },
    methods:{
      //添加自定义项
      addItem(){
        this.dialogForm.params.push({key:'',value:''})
      },
      //删除自定义项
      delItem(index){
        this.dialogForm.params.splice(index,1);
      },
      //获取网络组件列表
      iotNetworkInfo(){
        iotNetworkInfo({isList:true}).then(response => {
          this.$set(this,'networkOptions',response.data);
        });
      },
      iotAttributeAttrType(){
        iotAttributeAttrType({typeKey:this.$parent.propsData.typeKey}).then(response => {
          this.$set(this,'attrTypeOptionsList',response.data);
        });
      },
      //属性
      getList(){
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        iotAttributeList(obj).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      handleQuery(){
        this.$set(this.queryParams,'page',1);
        this.getList();
      },
      resetQuery(){
        this.$set(this,'queryParams',{
          typeId:this.$parent.propsData.typeId,
          page:1,
          pageSize:20,
          searchValue:"",
          state :null,
        });
        this.getList();
      },

      /***************属性列表**************/
      //弹层关闭
      dialogOff(){
        this.$set(this,'dialogType',false);
      },
      //弹层开启
      dialogOpen(){
        this.dialogFormReset();
        if(this.attrTypeOptionsList[0]){
          this.$set(this,'attrTypeOptions',JSON.parse(JSON.stringify(this.attrTypeOptionsList)));
        }else{
          this.$set(this,'dialogAttrType',false);
        }
        this.$set(this,'dialogTitle','新增');
        this.$set(this,'dialogType',true);
      },
      dialogFormReset(){
        this.$set(this,'dialogForm',{
          name:"",
          code:"",
          attrName:"",
          unit:"",
          icon:"",
          exceptionIcon:"",
          sort:1,
          networkId:'',
          state:true,
          params:[],
          relateField:[
            {relateFieldName:'',state:false},
            {relateFieldName:'',state:false},
            {relateFieldName:'',state:false},
          ],
        });
      },
      //dialog提交按钮
      dialogSubmit(){
        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
            let obj = {
              typeId:this.$parent.propsData.typeId,
              typeKey:this.$parent.propsData.typeKey,
              name:this.dialogForm.name,
              code:this.dialogForm.code,
              attrName:this.dialogForm.attrName,
              unit:this.dialogForm.unit,
              sort:this.dialogForm.sort,
              networkId:this.dialogForm.networkId,
              threshhold:this.dialogForm.threshhold?this.dialogForm.threshhold:0,
              isFluctuation:this.dialogForm.isFluctuation?this.dialogForm.isFluctuation:false,
              fluctuationDirection:this.dialogForm.fluctuationDirection,
              fluctuationRange:this.dialogForm.fluctuationRange?this.dialogForm.fluctuationRange:0,
              remark:this.dialogForm.remark,
              icon:this.dialogForm.icon,
              exceptionIcon:this.dialogForm.exceptionIcon,
              relateField:JSON.stringify(this.dialogForm.relateField)
            }
            //自定义参数
            let minObj = {};
            for(let i=0;i<this.dialogForm.params.length;i++){
              minObj[this.dialogForm.params[i].key] = this.dialogForm.params[i].value
            }
            obj.params = this.dialogForm.params[0]?JSON.stringify(minObj):'';

            if(this.dialogForm.id){
              obj.id = this.dialogForm.id;
              iotAttributeUpdate(obj).then(response => {
                this.msgSuccess(response.message)
                this.dialogOff();
                this.getList();
              });
            }else{
              iotAttributeAdd(obj).then(response => {
                this.msgSuccess(response.message)
                this.dialogOff();
                this.getList();
              });
            }
          }
        })
      },
      //按钮
      tableButton(type,row){
        let self = this;
        if(type == 1){
          //编辑
          let obj = {
            id:row.id,
            name:row.name,
            code:row.code,
            attrName:row.attrName,
            unit:row.unit,
            sort:row.sort,
            networkId:row.networkId,
            threshhold:row.threshhold?row.threshhold:0,
            isFluctuation:row.isFluctuation?row.isFluctuation:false,
            fluctuationDirection:Number(row.fluctuationDirection?row.fluctuationDirection:null),
            fluctuationRange:row.fluctuationRange?row.fluctuationRange:0,
            remark:row.remark,
            icon:row.icon,
            exceptionIcon:row.exceptionIcon,
            state:row.state,
            relateField:row.relateField?JSON.parse(row.relateField):[{relateFieldName:'',state:false},{relateFieldName:'',state:false},{relateFieldName:'',state:false}],
          }
          //子标识判定
          if(this.attrTypeOptionsList[0]){
            if(obj.code[0]){
              let num = 0;
              for(let i=0;i<self.attrTypeOptionsList.length;i++){
                if(obj.code == self.attrTypeOptionsList[i].code){
                  num++
                }
              }
              if(num == 0){
                obj.code = '';
              }
              this.$set(this,'dialogAttrType',true);
              this.$set(this,'attrTypeOptions',JSON.parse(JSON.stringify(this.attrTypeOptionsList)));
            }else{
              this.$set(this,'dialogAttrType',true);
              this.$set(this,'attrTypeOptions',JSON.parse(JSON.stringify(this.attrTypeOptionsList)));
            }
          }else{
            this.$set(this,'dialogAttrType',false);
            this.$set(this,'attrTypeOptions',[]);
          }
          //自定义参数
          if(row.params){
            let minObj = row.params?JSON.parse(row.params):{};
            let list = [];
            Object.keys(minObj).forEach((key) => {
              const value = minObj[key];
              list.push({
                key:key,
                value:value
              })
            });
            obj.params = list[0]?list:[];
          }else{
            obj.params = [];
          }
          this.$set(this,'dialogForm',obj);
          this.$set(this,'dialogTitle','编辑');
          this.$set(this,'dialogType',true);
        }else if(type == 2){
          //删除
          this.$confirm('是否确认删除?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            iotAttributeDelete({id:row.id}).then(response => {
              self.msgSuccess(response.message)
              self.getList();
            });
          }).catch(() => {});
        }else if(type == 3){
          let text = row.state  ? "停用" : "启用";
          this.$confirm('是否确认' + text + '?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            let obj = {
              typeId:this.$parent.propsData.typeId,
              typeKey:this.$parent.propsData.typeKey,
              id:row.id,
              name:row.name,
              code:row.code,
              attrName:row.attrName,
              unit:row.unit,
              sort:row.sort,
              networkId:row.networkId,
              icon:row.icon,
              exceptionIcon:row.exceptionIcon,
              state:!row.state,
            }
            iotAttributeUpdate(obj).then(response => {
              self.msgSuccess(response.message)
              self.getList();
            });
          }).catch(() => {});
        }
      },
      //更多按钮
      handleCommand(val,row){
        if(val == 1){
          //部门上移动
          iotAttributeMoveUp({id:row.id}).then(response => {
            this.msgSuccess(response.message)
            this.getList();
          });
        }else if(val == 2){
          //部门下移动
          iotAttributeMoveDown({id:row.id}).then(response => {
            this.msgSuccess(response.message)
            this.getList();
          });
        }
      },
      //图片上传相关
      handleAvatarSuccess(res,type) {
        if(type == 'icon'){
          this.$set(this.dialogForm,'icon',res.data.url);
        }else if(type == 'exceptionIcon'){
          this.$set(this.dialogForm,'exceptionIcon',res.data.url);
        }
      },
      beforeAvatarUpload(file) {
        return new Promise((resolve, reject) => {
          if (file.type == 'image/svg+xml') {
            resolve()
          }else{
            this.msgError('只能上传svg格式图片')
            reject();
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotClassification-attributePage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .table-title-box{
      margin-top:20px;
      margin-left:20px;
    }
    .table-content-box{
      flex:1;
      margin:0 20px 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }
</style>
<style lang="scss">
  .iotClassification-dialog{
    .iotClassification-dialog-form-box{
      display: flex;
      .iotClassification-dialog-form-left-box{
        flex: 1;
      }
      .iotClassification-dialog-form-right-box{
        flex: 1;
      }
    }
    .for-argument-disposition-max-box{
      display: flex;
      .for-argument-disposition-title-p{
        line-height:40px;
        text-align: right;
        font-size:14px;
        color:#333;
        width:98px;
        margin:0 12px 20px 0;
      }
      .for-argument-disposition-big-box{
        .for-argument-disposition-box{

        }
      }
    }
    .for-params-max-box{
      display: flex;
      .for-params-title-p{
        line-height:40px;
        text-align: right;
        font-size:14px;
        color:#333;
        width:98px;
        margin:0 12px 20px 0;
      }
      .for-params-big-box{
        .for-params-box{
          .del-span{
            font-size:18px;
            color:#FF6666;
            line-height:40px;
            width:30px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
      .add-span{
        font-size:18px;
        color:#0183FA;
        line-height:40px;
        height:40px;
        width:30px;
        text-align: center;
        cursor: pointer;
      }
      .null-span{
        font-size:14px;
        line-height:40px;
        height:40px;
      }
    }
  }
</style>
