<template>
  <div class="max-big-box">
    <div class="list-data-max-big-box" v-show="pageType == 0">
      <!--按钮条-->
      <div class="top-button-box">
        <input class="search-input" type="text" v-model="searchValue" placeholder="请输入物资关键字进行查询">
        <div class="dropdown-box" v-if="index!=2" v-for="(item,index) in downList" :key="index">
          <p class="dropdown-left-title">{{item.name}}：</p>
          <div class="dropdown-right-box cursor_pointer"
               @mouseenter="dropdownClickOpen(index,'1')" @mouseleave="dropdownClickOpen(index,'2')">
            <p class="dropdown-text">{{downList[index].downText}}</p>
            <div class="dropdown-for-max" v-if="downList[index].downType">
              <p v-for="(item,indexTwo) in downList[index].list" :key="indexTwo"
                 :class="{'color-A':downList[index].mouseColor == item}"
                 @mouseenter="colorTypeEnter(index,item)" @mouseleave="colorTypeLeave(index)"
                 @click="dropdownClick(index,item)">{{item}}</p>
            </div>
          </div>
        </div>
        <div class="button-box cursor_pointer" @click="clickQuery">
          <img src="~@/assets/images/icon_27.png">
          <p class="cursor_pointer">查询</p>
        </div>
      </div>
      <!--表格-->
      <div class="bottom-table-box">
        <div class="table-box left-table-box">
          <p class="table-title-p">待选择物资</p>
          <el-table
            ref="multipleTable"
            :data="tableData"
            height="663"
            tooltip-effect="dark">
            <el-table-column
              label="物资名称"
              width="200">
              <template slot-scope="scope">
                <div class="img-name-box">
                  <img :src="scope.row.materialImg">
                  <p>{{scope.row.materialName}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="materialModel"
              label="物资型号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="materialNum"
              label="库存数量"
              width="100">
            </el-table-column>
            <el-table-column
              prop="materialUnit"
              label="单位"
              width="100">
            </el-table-column>
            <el-table-column
              prop="bigTypeName"
              label="类型（大类）"
              width="120">
            </el-table-column>
            <el-table-column
              prop="smallTypeName"
              label="类型（小类）"
              width="120">
            </el-table-column>
            <el-table-column
              label="操作"
              width="61">
              <template slot-scope="scope">
                <p class="add-button-p colorA" @click="addItem(scope.$index,scope.row)">添加</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="table-box">
          <p class="table-title-p">已选择物资</p>
          <el-table
            ref="multipleTable"
            :data="rightData"
            height="663"
            tooltip-effect="dark">
            <el-table-column
              label="物资名称"
              width="200">
              <template slot-scope="scope">
                <div class="img-name-box">
                  <img :src="scope.row.materialImg">
                  <p>{{scope.row.materialName}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="materialModel"
              label="物资型号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="materialNum"
              label="库存数量"
              width="100">
            </el-table-column>
            <el-table-column
              prop="materialUnit"
              label="单位"
              width="100">
            </el-table-column>
            <el-table-column
              prop="bigTypeName"
              label="类型（大类）"
              width="120">
            </el-table-column>
            <el-table-column
              prop="smallTypeName"
              label="类型（小类）"
              width="120">
            </el-table-column>
            <el-table-column
              label="操作"
              width="61">
              <template slot-scope="scope">
                <p class="add-button-p colorB" @click="delItem(scope.$index,scope.row)">移除</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--底部按钮-->
      <div class="bottom-button-box">
        <p @click="outButton">返回</p>
        <p @click="clickPage('1')">下一步</p>
      </div>
    </div>
    <div class="up-data-max-big-box" v-show="pageType == 1">
      <div class="up-data-input-box">
        <p>需求计划名称：</p>
        <input type="text" v-model="planName">
      </div>
      <div class="up-data-input-box">
        <p>备注：</p>
        <input type="text" v-model="remark">
      </div>
      <div class="table-max-big-box">
        <p class="table-max-big-title">已选择物资：</p>
        <el-table
          ref="multipleTable"
          :data="rightData"
          height="500"
          tooltip-effect="dark">
          <el-table-column
            prop="materialName"
            label="物资名称"
            width="200">
          </el-table-column>
          <el-table-column
            prop="materialNum"
            label="数量"
            width="100">
          </el-table-column>
          <el-table-column
            prop="materialUnit"
            label="单位"
            width="100">
          </el-table-column>
          <el-table-column
            prop="bigTypeName"
            label="类型（大类）"
            width="125">
          </el-table-column>
          <el-table-column
            prop="smallTypeName"
            label="类型（小类）"
            width="125">
          </el-table-column>
        </el-table>
      </div>
      <!--底部按钮-->
      <div class="bottom-button-box">
        <p @click="clickPage('0')">返回</p>
        <p @click="clickPage('2')">提交</p>
      </div>
    </div>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { httpList,deptListOrg,materialNeedAdd,materialNeedEditor,materialApplicationEditor,typeBig,typeSmall } from '@/api/userApi'
  export default {
    name: "theNewPlan",//分配计划
    components:{interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    props:["theNewPlanData"],
    data () {
      return {
        pageType:0,
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        //搜索内容
        searchValue:"",
        //下拉框
        downList:[
          {
            name:"类型(大类)",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[]
          },
          {
            name:"类型(小类)",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[]
          },
        ],
        //表数据
        tableData:[],
        rightData:[],
        planName:"",
        remark:"",
        newData:{},
      }
    },

    created(){

    },
    mounted() {
      if(!this.theNewPlanData.type){
        console.log(this.theNewPlanData.data.materialNeedWzList)
        this.newData = this.theNewPlanData;
        this.rightData = this.theNewPlanData.data.materialNeedWzList;
        this.planName =this.theNewPlanData.data.needName;
        this.remark =this.theNewPlanData.data.remark;
        this.type=2;
      }else{
        this.type=1;
      }
      this.getListData();
      this.typeBig();
      this.typeSmall();
    },
    methods: {
      async typeBig () {
        let self = this;
        const { data } = await typeBig();
        if(data.code==200){
          let list = [];
          let idType = [];
          list.push("全部");
          idType.push("");
          for(let i=0;i<data.data.length;i++){
            list.push(data.data[i].bigTypeName);
            idType.push(data.data[i].id);
          }
          self.downList[0].list = list;
          self.downList[0].idType = idType;
        }
      },
      async typeSmall () {
        let self = this;
        const { data } = await typeSmall();
        if(data.code==200){
          let list = [];
          let idType = [];
          list.push("全部");
          idType.push("");
          for(let i=0;i<data.data.length;i++){
            list.push(data.data[i].smallTypeName);
            idType.push(data.data[i].id);
          }
          self.downList[1].list = list;
          self.downList[1].idType = idType;
        }
      },
      //物资需求审批-重新提交
      async materialNeedEditor(){
        let self = this;
        let obj = {
          id:self.newData.data.id,
          needName:self.planName,
          remark:self.remark,
          materialNeedWzList:self.rightData,
        };
        const { data } = await materialNeedEditor(obj);
        if(data.code==200){
          this.newData = {};
          this.rightData=[];
          this.planName="";
          this.remark="";
          this.$parent.outPage('3');
        }
      },
      //新建接口
      async materialNeedAdd(){
        let self = this;
        let obj = {
          needName:self.planName,
          remark:self.remark,
          materialNeedWzList:self.rightData,
        };
        const { data } = await materialNeedAdd(obj);
        if(data.code==200){
          this.newData = {};
          this.rightData=[];
          this.planName="";
          this.remark="";
          this.$parent.outPage('2');
        }
      },
      //添加
      addItem(index,row){
        let self = this;
        let num = 0;
        for(let i=0;i<self.rightData.length;i++){
          if(self.tableData[index].materialName ==self.rightData[i].materialName){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"该物资已在选择列表"
            };
            this.windowType = !this.windowType;
            num++;
            return
          }
        }
        self.rightData.push(self.tableData[index]);
      },
      //移除
      delItem(index,row){
        this.rightData.splice(index,1);
      },
      //点击查询
      clickQuery(){
        this.getListData();
      },
      //数据列表
      async getListData () {
        let self = this;
        let obj={
          searchValue:self.searchValue,
          bigType:"",
          smallType:"",
          "params[beginTime]":self.playTime=="请选择时间"?"":self.playTime,
          "params[endTime]":self.endTime=="请选择时间"?"":self.endTime,
        };
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.bigType = self.downList[0].idType[i];
          }
        }
        for(let i=0;i<self.downList[1].list.length;i++){
          if(self.downList[1].downText==self.downList[1].list[i]){
            obj.smallType = self.downList[1].idType[i];
          }
        }
        const { data } = await httpList(obj);
        if(data.code==200){
          let newList = data.data;
          // for(let i=0;i<newList.length;i++){
          //   newList[i].id = i;
          // }
          this.tableData = JSON.parse(JSON.stringify(newList));
          this.$forceUpdate();
        }
      },
      //下拉菜单进入悬浮状态
      colorTypeEnter(type,item){
        this.downList[type].mouseColor=item;
      },
      //下拉菜单离开悬浮状态
      colorTypeLeave(type){
        this.downList[type].mouseColor = "";
      },
      // 下拉菜单选项悬浮事件
      dropdownClickOpen(type,state){
        if(state==1){
          this.downList[type].downType = true
        }else if(state==2){
          this.downList[type].downType = false
        }
      },
      // 下拉菜单点击事件
      dropdownClick(type,item){
        this.downList[type].downText = item;
        this.downList[type].downType = false;
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        this.windowType = false;
        if(data.cType==1){
          this.distributionPlanDel();
        }else if(data.cType==2){
          this.distributionPlanDelTwo(data.newId);
        }
      },
      //返回页面
      outButton(){
        this.newData = {};
        this.rightData=[];
        this.planName="";
        this.remark="";
        this.$parent.outPage('1');
      },
      clickPage(type){
        if(type == 0){
          this.pageType = 0;
        }else if (type == 1){
          if(!this.rightData[0]){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请选择物资"
            };
            this.windowType = !this.windowType;
            return
          }
          this.pageType = 1;
        }else if(type == 2){
          if(!this.planName){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请输入分配计划名称"
            };
            this.windowType = !this.windowType;
            return
          }
          if(!this.remark){
            this.windowData = {
              type:"3",
              title:"提示",
              text:"请输入备注"
            };
            this.windowType = !this.windowType;
            return
          }
          if(this.newData.type==false){
            this.materialNeedEditor();
          }else{
            this.materialNeedAdd();
          }
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    /*flex:1;*/
    height:890px;
    .list-data-max-big-box
      display flex
      flex-direction column
      /*flex:1;*/
      height:890px;
      //搜索与操作按钮
      .top-button-box
        width:1670px;
        height:30px;
        display flex
        margin-left:105px;
        .search-input
          height:28px;
          width:330px;
          border:1px solid $theme;
          padding-left:10px;
        .dropdown-box
          display flex
          color:$color_ff;
          z-index:1;
          margin-left:30px;
          .dropdown-left-title
            line-height:30px;
            font-size:$font_14;
          .dropdown-right-box
            font-size:$font_12;
            .dropdown-text
              width:160px;
              height:30px;
              line-height:30px;
              background:url("~@/assets/images/button_15.png");
              background-size:100% 100%;
            .dropdown-for-max
              background:$backColor1;
              border-bottom-right-radius 4px
              border-bottom-left-radius 4px
              p
                width:160px;
                height:30px;
                line-height:30px;
              .color-A
                /*
                background:$backColor2 !important;
                color:$color_ff !important;
                */
                color:$theme !important;
                border-bottom-right-radius 4px
                border-bottom-left-radius 4px
        .button-box
          margin-left:32px;
          display flex
          height:30px;
          width:80px;
          background:url("~@/assets/images/button_03.png");
          background-size:100% 100%;
          img
            display block
            height:20px;
            width:20px;
            margin:5px 6px 0 13px;
          p
            line-height:30px;
            font-size:$font_12;
            color:$color_ff;
      .bottom-table-box
        display flex
        /*flex:1;*/
        width:1710px !important;
        margin:20px 105px 0;
        .left-table-box
          margin-right:27px;
        .table-box
          display flex
          flex-direction: column;
          /*flex:1;*/
          text-align center !important
          .table-title-p
            color:$color_ff;
            text-align left
            line-height:40px;
          .img-name-box
            display flex
            img
              height:40px;
              width:40px;
            p
              margin-left:10px;
              line-height:40px;
          .add-button-p
            width:40px;
            margin:0 auto;
            cursor:pointer
          .colorA
            color:$border_2;
          .colorB
            color:$theme3
      .bottom-button-box
        height:30px;
        margin:30px 0 40px;
        display flex
        p
          height:30px;
          line-height:30px;
          width:92px;
          color:$color_ff;
          font-size:$font_14;
          cursor:pointer
        p:nth-child(1)
          background:url("~@/assets/images/button_10.png")
          margin-left:1500px;
        p:nth-child(2)
          margin-left:50px;
          background:url("~@/assets/images/button_09.png")

    .up-data-max-big-box
      width:800px;
      margin:0 auto;
      .up-data-input-box
        display flex
        margin-bottom:10px;
        p
          color:$color_ff
          line-height:30px;
          font-size:16px;
          width:120px;
          text-align left;
          margin-right:30px;
        input
          height:28px;
          width:430px;
          border:1px solid $theme;
          padding-left:10px;
          color:$color_ff;
      .table-max-big-box
        display flex
        width:800px;
        margin:0 auto;
        .table-max-big-title
          color:$color_ff
          width:120px;
          text-align left;
          margin-right:30px;
      .dropdown-box
        height:30px;
        display flex
        z-index:1;
        margin-bottom:10px;
        .dropdown-left-title
          line-height:30px;
          width:120px;
          text-align left;
          margin-right:30px;
          font-size:$font_16;
          color:$color_ff
        .dropdown-right-box
          color:$color_ff;
          font-size:$font_12;
          z-index:1;
          .dropdown-text
            width:160px;
            height:30px;
            line-height:30px;
            background:url("~@/assets/images/button_15.png");
            background-size:100% 100%;
          .dropdown-for-max
            background:$backColor1;
            border-bottom-right-radius 4px
            border-bottom-left-radius 4px
            p
              width:160px;
              height:30px;
              line-height:30px;
            .color-A
              /*
              background:$backColor2 !important;
              color:$color_ff !important;
              */
              color:$theme !important;
              border-bottom-right-radius 4px
              border-bottom-left-radius 4px
      .bottom-button-box
        width:234px;
        height:30px;
        margin:70px auto 150px;
        display flex
        p
          height:30px;
          line-height:30px;
          width:92px;
          color:$color_ff;
          font-size:$font_14;
          cursor:pointer
        p:nth-child(1)
          background:url("~@/assets/images/button_10.png")
        p:nth-child(2)
          margin-left:50px;
          background:url("~@/assets/images/button_09.png")
    //修改table表格样式
    .el-table
      background rgba(6,177,240,0.2)
    .el-table /deep/ .el-table__empty-text
      width: 100%;
      text-align center
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px $theme;
      background: $theme;
    .el-table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track
      -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
      border-radius: 0;
      background: rgba(255,255,255,0);
    .el-table /deep/ tr
    .el-table /deep/ th
      background rgba(6,177,240,0)
    .el-table::before
      height:0;
    .el-table /deep/ .cell
      max-height:46px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    .el-table /deep/ td
    .el-table /deep/ th.is-leaf
      border-bottom:0!important;
    .el-table /deep/ .el-checkbox__inner
      //background rgba(6,177,240,0.2)
      border 1px solid #216f93 !important
    .el-table /deep/ thead
      color:$color_ff;
    .el-table
      color:$color_a1
    .el-table /deep/ th
      text-align-last: center;
    .el-table /deep/ td
      text-align-last: center;
    .el-table /deep/ tbody tr:hover > td
      background rgba(6,177,240,0.2)
      color:$theme;
    .el-table /deep/ .el-checkbox
      width:14px;
      margin:0 auto;
      display block
    //修改动作条样式
    .el-pagination.is-background /deep/ .btn-next
    .el-pagination.is-background /deep/ .btn-prev
    .el-pagination.is-background /deep/ .el-pager li
      background:url("~@/assets/images/button_13.png");
      color:$color_ff;
    .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
      background:url("~@/assets/images/button_14.png");
      color:$color_ff;
    .colorA
      color :$theme;
    ::-webkit-input-placeholder
      color: $border_1;
    ::-moz-placeholder
      color: $border_1;
    ::-ms-input-placeholder
      color: $border_1;

</style>
