<!--
    引入
    components:{
      newModify: resolve => {require(['@/components/newModify'], resolve)},//新建-修改组件
    },

    代码块
    <new-modify v-else
      :newModifyData="newModifyData"
      @newModifyLeftClick="newModifyLeftClick"
      @newModifyRightClick="newModifyRightClick"
    ></new-modify>

    必要参数
    // 新增-修改页面状态
    newModifyPageType:true,
    //新增-修改页面数据
    newModifyData:{},

    必要方法
    //新增-修改组件内左侧按钮事件
    newModifyLeftClick(){

    },
    //新增-修改组件内左侧按钮事件
    newModifyRightClick(data){
      console.log("右键传值",data);
    },

    调用示例
    demo() {
      let newData = {
        title:"新增",
        list:[
          {
            name:"名称",
            value:row.name,
          },
          {
            name:"级别",
            value:row.lv,
            list:["一级","二级","三级"]//如果有数组就是下拉菜单
          },
          {
            name:"备注",
            value:"我是备注",
            textArea:true //textArea为true时 是文本域
            maxlength:20 //如果有maxlength则按照maxlength限制如果没有限制50位
          }
        ]
      };
      this.newModifyData = {...newData};
      this.newModifyPageType = !this.newModifyPageType;
    },

    数据类型
          {
            name:"名称",              //名称
            value:row.name,           //数值
            list:["类型A","类型B"],   //下拉菜单(如果有此字段)
            textArea:true,            //文本域声明
            elNumber:true,            //计数器声明 value必须为数字
            min:1,                    //计数器最小值
            max:2,                    //计数器最大值
            textType:true,            //展示文本声明,不可编辑
            switch:true,              //开关状态声明  value必须为true或false
            timeType:true,            //时间状态声明
            doubleTimeType:true,      //双时间状态声明
            valueOne:row.taskTime,    //开始时间    双时间必须参数
            valueTwo:row.taskTime,    //结束时间    双时间必须参数
            tableList:["纱布","酒精"],             //添加项声明
            treeType:true,                          //树状声明
            singleType:true,                        //单选声明
            treeData:[],                           //树状数据
            treeList:[],                           //树状勾选数据
            uploadType:true,                         //上传图片声明
            uploadImg:true,                          //大小 true大 false 或空为小
            radioType:true,                          //单选声明
            modelLabel:"0",
            radioList:[
              {
                name:"全部归还",
                label:"1",
              },
              {
                name:"部分归还",
                label:"2",
              },
            ]
          },
-->

<template>
  <div class="max-big-box">
      <div class="newModify-box">
        <div class="newModify-box-min TabStrip">
          <!--标题-->
          <div class="info-title">
            <img src="~@/assets/images/xian_1.png">
            <p>{{newData.title}}</p>
            <img src="~@/assets/images/xian_2.png">
          </div>
          <!--循环项-->
          <div v-for="(item,index) in newData.list" :key="index">
            <!--下拉框-->
            <div class="newModify-min-box" v-if="item.list&&!item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p class="newModify-min-title">{{item.name}}：</p>
              <div class="newModify-drop-down-box"
                   @mouseenter="intoOutMou(item.name)" @mouseleave="intoOutMou('2')">
                <div class="newModify-drop-down-title"
                     :class="{'mou-border-A':mouType==item.name,'mou-border-B':mouType!=item.name,}">
                  <p>{{item.value}}</p>
                  <img src="~@/assets/images/icon_28.png">
                </div>
                <div class="newModify-drop-down-list TabStrip" v-if="mouType==item.name">
                  <p v-for="(obj,index) in item.list" :key="index"
                     :class="{'color-A':mouColor == obj}"
                     @mouseenter="intoOutMouMin(obj)" @mouseleave="intoOutMouMin"
                     @click="intoOutMouMinClick(item,obj)">{{obj}}</p>
                </div>
              </div>
            </div>
            <!--展示文本-->
            <div class="newModify-text-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p>{{item.name}}：</p>
              <p>{{item.value}}</p>
            </div>
            <!--开关状态-->
            <div class="newModify-text-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&!item.textType&&item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p>{{item.name}}：</p>
              <el-switch
                style="margin-top:10px;"
                v-model="item.value"
                active-color="#06b1f0"
                inactive-color="#7e7e7e">
              </el-switch>
            </div>
            <!--文本域-->
            <div class="newModify-textArea-box" v-if="!item.list&&item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p>{{item.name}}：</p>
              <textarea rows="4" cols="20" class="TabStrip" maxlength="100" v-model="item.value"  placeholder="请输入"></textarea>
            </div>
            <!--input输入-->
            <div class="newModify-input-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p>{{item.name}}：</p>
              <input type="text" v-model="item.value" placeholder="请输入" :maxlength="item.maxlength?item.maxlength:'50'">
            </div>
            <!--时间-->
            <div class="newModify-time-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p class="left-p">{{item.name}}：</p>
              <div @click="openTimeBox('0',item)">
                <p>{{item.value}}</p>
                <img src="~@/assets/images/icon_28.png">
              </div>
            </div>
            <!--双时间选择器-->
            <div class="newModify-doubleTime-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p class="left-p">{{item.name}}：</p>
              <div class="right-box">
                <div @click="openTimeBox('1',item)">
                  <p>{{item.valueOne}}</p>
                  <img src="~@/assets/images/icon_28.png">
                </div>
                <p class="center-p">至</p>
                <div @click="openTimeBox('2',item)">
                  <p>{{item.valueTwo}}</p>
                  <img src="~@/assets/images/icon_28.png">
                </div>
              </div>
            </div>
            <!--计数器-->
            <div class="newModify-input-box" v-if="!item.list&&!item.textArea&&item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p>{{item.name}}：</p>
              <el-input-number
                v-model="item.value"
                @change="handleChange(item)"
                :min="item.min?item.min:0"
                :max="item.max?item.max:1000000"
                label="描述文字"></el-input-number>
            </div>
            <!--添加项-->
            <div class="newModify-obj-list-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&item.tableList&&!item.treeType&&!item.uploadType&&!item.radioType">
              <p class="left-title">{{item.name}}：</p>
              <div class="right-max-big-box">
                <div class="right-for-box" v-for="(minItem,minIndex) in item.newList" :key="minIndex">
                  <div class="table-right-box"
                       @mouseenter="intoOutTable(minIndex)" @mouseleave="intoOutTable('off')">
                    <div class="table-text-box">
                      <p>{{minItem.value}}</p>
                      <img src="~@/assets/images/icon_28.png">
                    </div>
                    <div class="table-min-box" v-if="tableType===minIndex">
                      <p v-for="(tableItem,tableIndex) in item.tableList" :key="tableIndex"
                         :class="{'color-A':tableColor == tableItem}"
                         @mouseenter="intoOutTableMin(tableItem)" @mouseleave="intoOutTableMin"
                         @click="intoOutTableMinClick(minItem,tableItem)">{{tableItem}}</p>
                    </div>
                  </div>
                  <el-input-number
                    v-model="minItem.num"
                    @change="handleChangeOne(minItem)"
                    :min="item.min?item.min:1"
                    :max="item.max?item.max:1000000"
                    label="描述文字">
                  </el-input-number>
                  <!--<input type="number" v-model="minItem.num" maxlength="2" placeholder="请输入数量" oninput="if(value.length>7)value=value.slice(0,7)" />-->
                  <img class="del-img" @click="delList(minIndex)" src="~@/assets/images/icon_61.png">
                </div>
                <img class="add-img" @click="addList" src="~@/assets/images/icon_62.png">
              </div>
            </div>
            <!--树状结构-->
            <div class="newModify-tree-list-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&item.treeType&&!item.uploadType&&!item.radioType">
              <p class="left-title">{{item.name}}：</p>
              <div class="right-max-big-box-one TabStrip" v-if="item.singleType">
                <el-cascader
                  ref="cascaderRef"
                  :options="item.treeData"
                  v-model="item.treeList"
                  :props="{ checkStrictly: true }"
                  @change="handleItemChange"
                  clearable>
                  <template slot-scope="{ node, data }">
                    <span>{{ data.label }}</span>
                  </template>
                </el-cascader>
              </div>
              <div class="right-max-big-box TabStrip" v-if="!item.singleType">
                <el-tree class="max-tree-box" :indent="0"
                         ref="dataConfigTree"
                         default-expand-all
                         show-checkbox
                         :expand-on-click-node="false"
                         node-key="id" :highlight-current="false"
                         :data="item.treeData" icon-class="none">
                  <div class="tree-box" slot-scope="{ node, data }">
                    <p class="label-p"
                       :class="{'level1':node.level==1,'level2':node.level==2,'level3':node.level==3,'levelColorA':node.checked||node.indeterminate,'levelColorB':!node.checked&&!node.indeterminate}"
                    >{{ node.label }}</p>
                  </div>
                </el-tree>
              </div>
            </div>
            <!--上传图片-->
            <div class="newModify-upload-list-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&item.uploadType&&!item.radioType">
              <p class="left-title">{{item.name}}：</p>
              <div class="right-max-big-box" :class="{'right-max-big-box-min':!item.uploadImg}">
                <img v-if="item.value" :class="{'imgBig':item.uploadImg,'imgMin':!item.uploadImg}" :src="item.value" alt="">
                <label class="cursor_pointer label-box" for="submit">
                  <img src="~@/assets/images/icon_56.png">
                  <p>上传</p>
                  <input type="file"
                         name="img[]"
                         ref="clearFile"
                         @change="fileImage($event,item)"
                         id="submit"
                         accept="image/*"/>
                </label>
              </div>
            </div>
            <div class="newModify-radio-list-box" v-if="!item.list&&!item.textArea&&!item.elNumber&&!item.textType&&!item.switch&&!item.timeType&&!item.doubleTimeType&&!item.tableList&&!item.treeType&&!item.uploadType&&item.radioType">
              <p class="left-title">{{item.name}}：</p>
              <div class="right-max-big-box">
                <template>
                  <el-radio v-model="item.modelLabel" :label="radioMin.label" v-for="(radioMin,index) in item.radioList" :key="index">{{radioMin.name}}</el-radio>
                </template>
              </div>
            </div>
          </div>
          <div class="button-box">
            <p class="cursor_pointer" @click="leftClick">返回</p>
            <p class="cursor_pointer" @click="rightClick">保存</p>
          </div>
        </div>
      </div>
    <!--时间日历-->
    <div class="time-max-big-box" v-if="timePageType">
      <div class="time-big-box">
        <el-calendar class="time-min-box" v-model="timeValue">
        </el-calendar>
        <div class="button-box">
          <p class="cursor_pointer" @click="offTimeBox">返回</p>
          <p class="cursor_pointer" @click="clearTimeData">清除</p>
          <p class="cursor_pointer" @click="setTimeData">确定</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { avatar,downListByMedicalId } from '@/api/userApi'
    export default {
      name: "newModify",//新增/编辑组件
      props:["newModifyData"],
      data () {
        return {
          //鼠标下拉
          mouType:false,
          mouColor:"",
          //数据
          newData:{},
          //日历时间
          timeValue: new Date(),
          timePageType:false,
          timeData:{},
          //添加项悬浮
          tableType:"",
          tableColor:"",
        //  仓库人员
          userName:[],
        }
      },

      created(){
      },
      mounted() {
        this.initializeThe();
      },
      methods: {
        //获取人员列表
        async downListByMedicalId (id) {
          let self = this;
          let obj = {
            medicalId:id,
          };
          const { data } = await downListByMedicalId(id);
          if(data.code==200){
            self.userName = data.data;
            let list = [];
            if(data.data[0]){
              for(let i=0;i<data.data.length;i++){
                list.push(data.data[i].unitName);
              }
              self.newData.list[5].tableList = list;
              // self.newData.list[5].newList[0].value = "请选择基数";
              self.newData.list[5].newList = [{
                num:1,
                value:"请选择基数"
              }];
            }else{
              self.newData.list[5].newList = [{
                num:1,
                value:"无可选择基数"
              }];
            }
          }
        },
        async baseUnitDownListOne (id) {
          let self = this;
          let obj = {
            medicalId:id,
          };
          let param = new FormData();
          param.append('id ',id);
          const { data } = await downListByMedicalId(id);
          if(data.code==200){
            self.userName = data.data;
            let list = [];
            if(data.data[0]){
              for(let i=0;i<data.data.length;i++){
                list.push(data.data[i].userName);
              }
              self.newData.list[5].tableList = list;
            }else{
              self.newData.list[5].newList = [{
                num:1,
                value:"无可选择基数"
              }];
            }
          }
        },
        //初始化
        initializeThe(){
          let self = this;
          self.newData = JSON.parse(JSON.stringify(this.newModifyData));
          for (let i=0;i<self.newData.list.length;i++){
            if(self.newData.list[i].tableList&&!self.newData.list[i].newList){
              let newList = [];
              let obj = {
                value:"请选择医疗队",
                num:"",
              };
              newList.push(obj);
              self.newData.list[i].newList = [...newList];
            }
            if(self.newData.list[i].treeType&&!self.newData.list[i].singleType){
              console.log(self.newData.list[i].treeList)
              setTimeout(function(){
                self.$refs.dataConfigTree[0].setCheckedNodes(self.newData.list[i].treeList);
              },50);
            }
          }
          console.log("self.newData",self.newData)
          if(self.newData.type == "2"){
            let id = "";
            for(let i=0;i<self.newData.deptList.length;i++){
              if(self.newData.list[0].value==self.newData.deptList[i].deptName){
                id = self.newData.deptList[i].deptId;
                self.baseUnitDownListOne(id);
              }
            }
          }
        },
        //时间选择事件
        openTimeBox(type,item){
          this.timePageType=true;
          this.timeType = type;
          this.timeData = item;
        },
        //时间界面返回
        offTimeBox(){
          this.timePageType = false;
        },
        setTimeData(){
          let self = this;
          let year = this.timeValue.getFullYear();
          let month = this.timeValue.getMonth()+1;
          let day = this.timeValue.getDate();
          for(let i=0;i<self.newData.list.length;i++){
            if(self.newData.list[i].name == self.timeData.name){
              if(self.timeType== '0'){
                self.newData.list[i].value = year+'-'+month+'-'+day;
                self.newData.list[i].timeCode = self.timeValue.getTime();
              }else if(self.timeType== '1'){
                self.newData.list[i].valueOne = year+'-'+month+'-'+day;
                self.newData.list[i].timeCodeOne = self.timeValue.getTime();
              }else if(self.timeType== '2'){
                self.newData.list[i].valueTwo = year+'-'+month+'-'+day;
                self.newData.list[i].timeCodeTwo = self.timeValue.getTime();
              }
            }
          }
          this.timePageType = false;
        },
        clearTimeData(){
          let self = this;
          for(let i=0;i<self.newData.list.length;i++){
            if(self.newData.list[i].name == self.timeData.name){
              if(self.timeType== '0'){
                self.newData.list[i].value = "请选择时间";
                self.newData.list[i].timeCode = "请选择时间";
              }else if(self.timeType== '1'){
                self.newData.list[i].valueOne = "请选择时间";
                self.newData.list[i].timeCodeOne = "请选择时间";
              }else if(self.timeType== '2'){
                self.newData.list[i].valueTwo = "请选择时间";
                self.newData.list[i].timeCodeTwo = "请选择时间";
              }
            }
          }
          this.timePageType = false;
        },
        //计数器
        handleChange(value) {
          this.$forceUpdate();
        },
        handleChangeOne(minItem){
          this.$forceUpdate();
        },
        //添加项添加事件
        addList(){
          let self = this;
          for (let i=0;i<self.newData.list.length;i++){
            if(self.newData.list[i].tableList){
              let obj = {
                value:"请选择基数",
                num:"",
              };
              self.newData.list[i].newList.push(obj);
            }
          }
          self.$forceUpdate();
        },
        //添加项删除事件
        delList(index){
          let self = this;
          for (let i=0;i<self.newData.list.length;i++){
            if(self.newData.list[i].tableList){
              if(self.newData.list[i].newList.length<2){
                return
              }
              self.newData.list[i].newList.splice(index,1);
            }
          }
          self.$forceUpdate();
        },
        //添加项展开浮事件
        intoOutTable(type){
          if(type=="off"){
            this.tableType="";
          }else{
            this.tableType = type;
          }
        },
        //添加项下拉菜单悬浮状态
        intoOutTableMin(obj){
          this.tableColor = obj;
        },
        //添加项下拉菜单点击事件
        intoOutTableMinClick(item,obj){
          item.value = obj;
          this.tableType="";
          this.tableColor = "";
        },
        //下拉菜单展开事件
        intoOutMou(type){
          if(type==2){
            this.mouType="";
          }else{
            this.mouType = type;
          }
        },
        //下拉菜单悬浮状态
        intoOutMouMin(obj){
          this.mouColor = obj;
        },
        //下拉菜单点击事件
        intoOutMouMinClick(item,obj){
          let self = this;
          item.value = obj;
          console.log("item",item)
          console.log("obj",obj)
          if(item.name == "医疗队名称"){
            let id = "";
            for(let i=0;i<self.newData.deptList.length;i++){
              if(obj==self.newData.deptList[i].medical_corps){
                id = self.newData.deptList[i].id;
                self.downListByMedicalId(id);
              }
            }
            console.log("item",item)
            console.log("obj",obj)
          }
          this.mouType="";
          this.mouColor = "";
        },
        //底部按钮事件
        leftClick(){
          this.$emit('newModifyLeftClick');
        },
        rightClick(){
          let self = this;
          let newList = JSON.parse(JSON.stringify(self.newData));
          for (let i=0;i<newList.list.length;i++){
            if(newList.list[i].treeType&&!newList.list[i].singleType){
              newList.list[i].treeList = self.$refs.dataConfigTree[0].getCheckedNodes()
            }
          }
          this.$emit('newModifyRightClick',newList);
        },
        //上传图片
        async fileImage(e,item) {
          let self = this;
          if(!e.target.files[0]){
            self.$refs.clearFile.value = '';
            self.$forceUpdate();
            return
          }
          let param = new FormData();
          param.append('avatarFile ',e.target.files[0]);
          const { data } = await avatar(param);
          if(data.code==200){
            item.value = data.msg;
          }
        },
        //数结构点击事件
        clickTree(data,node){
          this.$refs.dataConfigTree[0].setCheckedKeys([node.data.id]);
        },
        //选择器
        handleItemChange (val){
          let self = this;
          // let newVal = JSON.parse(JSON.stringify(val));
          // for(let i=0;i<self.newData.list.length;i++){
          //   if(self.newData.list[i].singleType){
          //     self.newData.list[i].treeList = JSON.parse(JSON.stringify(val));
          //   }
          // }
          this.$forceUpdate();
          // this.options = JSON.parse(JSON.stringify(val));
          // this.$forceUpdate();
        },
      }
    }
</script>

<style scoped lang="stylus">
.max-big-box
  height:100%;
  width:100%;
  .newModify-box
    height:670px;
    width:1000px;
    margin:90px 456px 44px;
    background:url("~@/assets/images/min_back_04.png");
    background-size 100% 100%
    overflow: hidden;
    .newModify-box-min
      height:650px;
      width:980px;
      margin: 10px;
      overflow-x:hidden;
      overflow-y:scroll;
      white-space: nowrap;
      position relative
      .info-title
        display flex
        height:74px;
        img
          display block
          height:1px;
          width:76px;
          margin-top:38px;
        img:nth-child(1)
          margin-left:auto;
        img:nth-child(3)
          margin-right:auto;
        p
          padding:0 20px;
          line-height 74px
          font-size $font_20
          color:$theme;
      .button-box
        display flex
        width:202px;
        margin: 60px 399px;
        p
          width:92px;
          height:31px;
          line-height:31px;
          font-size:$font_12;
        p:nth-child(1)
          color:$theme;
          background:url("~@/assets/images/button_01.png");
          background-size 100% 100%
          margin-right:18px;
        p:nth-child(2)
          color:$color_ff;
          background:url("~@/assets/images/button_02.png");
          background-size 100% 100%
      .newModify-min-box
        margin:0 0 10px 260px;
        height:40px;
        display flex
        .newModify-min-title
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        .newModify-drop-down-box
          width:354px;
          position relative
          .mou-border-A
            border-top-left-radius 4px
            border-top-right-radius 4px
          .mou-border-B
            border-radius:4px;
          .newModify-drop-down-title
            display flex
            z-index 50
            padding:0 20px;
            box-shadow:0 0 20px 1px #06b1f0 inset
            background:rgba(6,177,240,0.2);
            cursor:pointer
            p
              display flex
              height:40px;
              line-height:40px;
              width:354px;
              color:$color_ff;
              font-size:$font_14;
              text-align left
            img
              display block
              height:8px;
              width:12px;
              margin: 16px 0 0;
          .newModify-drop-down-list
            max-height:200px;
            overflow-x hidden
            overflow-y scroll
            width:354px;
            position absolute
            left:0;
            z-index 100
            background $backColor1
            color $color_ff
            border-bottom-left-radius 4px
            border-bottom-right-radius 4px
            border 2px solid $theme
            p
              line-height 40px
              font-size:$font_14;
              cursor:pointer
            .color-A
              /*
              background:$backColor2 !important;
              color:$color_ff !important;
              */
              color:$theme !important;
              border-bottom-right-radius 4px
              border-bottom-left-radius 4px
      .newModify-input-box
        margin:0 0 10px 260px;
        height:40px;
        display flex
        p:nth-child(1)
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        input:nth-child(2)
          height:40px;
          line-height:40px;
          width:314px;
          box-shadow:0 0 20px 1px #06b1f0 inset
          background:rgba(6,177,240,0.2);
          border-radius:4px;
          padding:0 20px;
          color:$color_ff;
        ::-webkit-input-placeholder
          color: $border_1;
        ::-moz-placeholder
          color: $border_1;
        ::-ms-input-placeholder
          color: $border_1;
      .newModify-time-box
        margin:0 0 10px 260px;
        height:40px;
        display flex
        font-size:$font_16;
        .left-p
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        div
          cursor:pointer
          height:40px;
          width:354px;
          padding:0 20px;
          box-shadow:0 0 20px 1px #06b1f0 inset
          background:rgba(6,177,240,0.2);
          border-radius:4px;
          display flex
          p
            width:342px;
            line-height:40px;
            color:$color_ff;
          img
            display block
            height:8px;
            width:12px;
            margin: 16px 0 0;
      .newModify-doubleTime-box
        margin:0 0 10px 260px;
        height:40px;
        display flex
        font-size:$font_16;
        .left-p
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        .right-box
          cursor:pointer
          height:40px;
          width:354px;
          display flex
          div
            box-shadow:0 0 20px 1px #06b1f0 inset
            background:rgba(6,177,240,0.2);
            border-radius:4px;
            padding:0 10px;
            display flex
            p
              width:135px;
              line-height:40px;
              color:$color_ff;
              font-size:$font_14;
            img
              display block
              height:8px;
              width:12px;
              margin: 16px 0 0;
          .center-p
            width:32px;
            line-height:40px;
            color:$theme;
      .newModify-text-box
        margin:0 0 10px 260px;
        display flex
        p:nth-child(1)
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        p:nth-child(2)
          height:40px;
          line-height:40px;
          width:354px;
          color:$color_ff;
          border-radius:4px;
          padding:0 20px;
          text-align:left;
        ::-webkit-input-placeholder
          color: $border_1;
        ::-moz-placeholder
          color: $border_1;
        ::-ms-input-placeholder
          color: $border_1;
      .newModify-textArea-box
        margin:0 0 10px 260px;
        display flex
        p:nth-child(1)
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        textarea:nth-child(2)
          height:82px;
          line-height:24px;
          width:354px;
          color:$color_ff;
          box-shadow:0 0 20px 1px #06b1f0 inset
          background:rgba(6,177,240,0.2);
          border-radius:4px;
          padding:4px 20px;
        ::-webkit-input-placeholder
          color: $border_1;
        ::-moz-placeholder
          color: $border_1;
        ::-ms-input-placeholder
          color: $border_1;
      .newModify-obj-list-box
        margin:0 0 10px 260px;
        display flex
        .left-title
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        .right-max-big-box
          width:394px;
          .right-for-box
            display flex
            margin-bottom:10px;
            .mou-border-A
              border-top-left-radius 4px
              border-top-right-radius 4px
            .mou-border-B
              border-radius:4px;
            .table-right-box
              position relative
              .table-text-box
                display flex
                height:40px;
                width:200px;
                margin-right:10px;
                box-shadow:0 0 20px 1px #06b1f0 inset
                background:rgba(6,177,240,0.2);
                border-radius:4px;
                padding:0 10px 0 20px;
                cursor:pointer
                p
                  width:192px;
                  line-height:40px;
                  color:$color_ff;
                  font-size:$font_14;
                  text-align left
                img
                  display block
                  height:8px;
                  width:12px;
                  margin: 16px 0 0;
              .table-min-box
                width:200px;
                position absolute
                left:0;
                z-index 100
                background $backColor1
                color $color_ff
                border-bottom-left-radius 4px
                border-bottom-right-radius 4px
                border 2px solid $theme
                p
                  line-height 40px
                  font-size:$font_14;
                  cursor:pointer
                .color-A
                  /*
                  background:$backColor2 !important;
                  color:$color_ff !important;
                  */
                  color:$theme !important;
                  border-bottom-right-radius 4px
                  border-bottom-left-radius 4px
            input
              display flex
              margin-left:10px;
              width:100px;
              height:40px;
              box-shadow:0 0 20px 1px #06b1f0 inset
              background:rgba(6,177,240,0.2);
              border-radius:4px;
              color:$color_ff;
              padding:0 10px;
            input::-webkit-outer-spin-button
            input::-webkit-inner-spin-button
              -webkit-appearance: none;
            input[type="number"]
              -moz-appearance: textfield;
            .del-img
              width:30px;
              height:30px;
              margin:5px 0 0 10px;
              cursor:pointer
          .add-img
            display block
            width:30px;
            height:30px;
            margin:20px;
            cursor:pointer
      .newModify-tree-list-box
        margin:0 0 10px 260px;
        display flex
        .left-title
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        .right-max-big-box-one
          width:364px;
          height:100px;
          overflow-x:hidden;
          overflow-y:scroll;
          white-space: nowrap;
        .right-max-big-box
          width:364px;
          height:280px;
          padding-top:10px;
          overflow-x:hidden;
          overflow-y:scroll;
          white-space: nowrap;
      .newModify-upload-list-box
        margin:0 0 10px 260px;
        display flex
        .left-title
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        .right-max-big-box-min
          display flex
        .right-max-big-box
          text-align left
          width:354px;
          .imgBig
            height:200px;
            width:200px;
          .imgMin
            height:100px;
            width:100px;
            margin-right:20px;
          img
            border-radius:4px;
          .label-box
            margin-top:5px;
            width:80px;
            height:30px;
            border-radius:5px;
            border:1px solid $theme;
            display flex
            img
              height:20px;
              width:20px;
              margin:5px 5px 0 10px;
            p
              color:$theme !important;
              font-size:$font_14;
              line-height:30px;
              text-align left
            input
              display: none;
      .newModify-radio-list-box
        margin:0 0 10px 260px;
        display flex
        .left-title
          line-height:40px;
          width:149px;
          color:$theme;
          text-align left
        .right-max-big-box
          color:#fff;
          padding:10px 150px 0 0;
          width:354px;
  //时间日历
  .time-max-big-box
    z-index 6
    height:100%;
    width:100%;
    position: absolute
    top:0;
    left:0;
    background:rgba(0,0,0,0.3);
    .time-big-box
      z-index 6
      height:750px;
      width:660px;
      position: absolute
      top:50%;
      left:50%;
      transform :translate3d(-50%,-50%,0)
      margin:auto;
      background $color_ff
      border-radius:8px;
      border:4px solid $theme;
      .button-box
        display flex
        color:$color_ff;
        width:390px;
        margin:20px auto;
        p:nth-child(1)
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_10.png");
          background-size 100% 100%
        p:nth-child(2)
          margin-left:20px;
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_05.png");
          background-size 100% 100%
        p:nth-child(3)
          margin-left:20px;
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_02.png");
          background-size 100% 100%
.el-input-number
  width:354px !important;
.el-input-number /deep/ .el-input__inner
  border:none;
  background none;
  color: $color_ff;
  box-shadow:0 0 20px 1px #06b1f0 inset
  background:rgba(6,177,240,0.2);
  border-radius:4px;
.el-input-number /deep/ .el-input-number__decrease
.el-input-number /deep/ .el-input-number__increase
  border:none;
  background none;
  color: $color_ff;
  box-shadow:0 0 20px 1px #06b1f0 inset
  background:rgba(6,177,240,0.2);
.el-input-number /deep/ .el-input-number__decrease
  border-bottom-left-radius:4px;
  border-top-left-radius:4px;
.el-input-number /deep/ .el-input-number__increase
  border-bottom-right-radius:4px;
  border-top-right-radius:4px;
.el-tree
  background rgba(0,0,0,0) !important

/*多层级样式*/
.levelImg{
  margin-top: 7px;
}
.level1{
  font-size:$font_17!important;
  color:$theme !important;
  height:34px!important;
  line-height 34px!important
}
.level2{
  font-size:$font_14!important;
  height:22px!important;
  line-height 22px!important
}
.level3{
  font-size:$font_12!important;
  height:20px!important;
  line-height 20px!important
}
.levelColorA{
  color:$color_ff;
}
.levelColorB{
  color:$color_91;
}
/*层级指引线*/
.tree-container /deep/ .el-tree > .el-tree-node :after {
  border-top: none;
}
.el-tree /deep/ .el-tree-node .el-tree-node {
  position: relative;
  padding-left: 16px !important;
}
.el-tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.el-tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.el-tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.el-tree /deep/ .el-tree-node .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.el-tree /deep/ .el-tree-node .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.el-tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #4386c6;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.el-tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #4386c6;
  height: 20px;
  top: 12px;
  width: 24px;
}

.tree-container { //树的parent，样式自定
}
.el-tree /deep/ .el-tree-node__content .el-tree-node__expand-icon{
  padding:1px !important
}
//修改悬浮样式
.el-tree /deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: rgba(0,0,0,0) !important;
}
.el-tree /deep/ .el-tree-node__content:hover {    background-color: rgba(0,0,0,0);
}
.el-tree /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: rgba(0,0,0,0);
}
.el-radio
  color: #ffffff
  //多级单选
.el-cascader
  width:354px;
.el-cascader /deep/ .el-input__inner
  border:none;
  background none;
  color: $color_ff;
  box-shadow:0 0 20px 1px #06b1f0 inset
  background:rgba(6,177,240,0.2);
  border-radius:4px;
</style>
