<!--
    引入
    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,                          //树状声明
            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-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.inputType&&!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-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-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 TabStrip">
                <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 }">
                    <img :class="{'levelImg':node.level==1}" v-if="node.expanded&&node.childNodes[0]"
                    src="~@/assets/images/icon_42.png" @click="clickTreeOne(node,data)">
                    <img :class="{'levelImg':node.level==1}" v-if="!node.expanded&&node.childNodes[0]"
                    src="~@/assets/images/icon_43.png" @click="clickTreeOne(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>
          <div class="button-box">
            <p class="cursor_pointer" @click="leftClick">返回</p>
            <p class="cursor_pointer" @click="rightClick">保存</p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import { avatar } from '@/api/userApi'
    export default {
      name: "newModify",//新增/编辑组件
      props:["newModifyData"],
      data () {
        return {
          //鼠标下拉
          mouType:false,
          mouColor:"",
          //数据
          newData:{},
        }
      },

      created(){
      },
      mounted() {
        this.initializeThe();
      },
      methods: {
        //初始化
        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){
              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)
        },
        //计数器
        handleChange(value) {
          this.$forceUpdate();
        },
        handleChangeOne(minItem){
          this.$forceUpdate();
        },
        //下拉菜单展开事件
        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;
          this.mouType="";
          this.mouColor = "";
          if(obj == "自定数据权限"){
            self.newData.list[2].treeType = true;
            setTimeout(function(){
              self.$refs.dataConfigTree[0].setCheckedNodes(self.newData.list[2].treeList);
            },50);
          } else {
            self.newData.list[2].treeType = false;
          }
        },
        //底部按钮事件
        leftClick(){
          this.$emit('newModifyLeftClick');
        },
        rightClick(){
          let self = this;
          for (let i=0;i<self.newData.list.length;i++){
            if(self.newData.list[i].treeType){
              self.newData.list[i].treeList = self.$refs.dataConfigTree[0].getCheckedNodes()
            }
          }
          this.$emit('newModifyRightClick',this.newData);
        },
        //结构树展开/关闭
        clickTreeOne(node,data){
          console.log("item",data)
          console.log(this.$refs.dataConfigTree[0].store);
          this.$refs.dataConfigTree[0].store.nodesMap[data.id].expanded = !this.$refs.dataConfigTree[0].store.nodesMap[data.id].expanded;
          data.unfold = !data.unfold;
        },
        //选择器
        handleItemChange (val){
          let self = this;
          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_14;
        .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_14;
        .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;
            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:224px;
                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;
          .max-tree-box
            z-index:1;
            .tree-box
              display flex
              img
                display block
                width:20px;
                height:20px;
              p
                margin-left:8px;
      .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:260px;
        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>
