<template>
  <div class="max-big-box">
    <div class="big-max-box" v-if="pageType==1">
      <!--返回按钮-->
      <div class="max-button-box">
        <div class="out-page-button cursor_pointer" @click="outButton">
          <img src="~@/assets/images/icon_25.png">
          <p>返回</p>
        </div>
        <p class="null"></p>
        <div class="out-page-button-right cursor_pointer" @click="newDataClick">
          <p>生成临时使用申请单</p>
        </div>
      </div>
      <!--表格-->
      <div class="table-box">
        <el-table
          ref="multipleTable"
          :row-key="getRowKey"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @select-all="handleSelectionChange"
          @select="handleSelectionChange">
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="物资名称"
            width="181">
          </el-table-column>
          <el-table-column
            prop="class"
            label="类型(大类)"
            width="214">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型(小类)"
            width="214">
          </el-table-column>
          <el-table-column
            prop="text"
            label="单位"
            width="116">
          </el-table-column>
          <el-table-column
            prop="unitName"
            label="当前库存数量"
            width="235">
          </el-table-column>
          <el-table-column
            prop="medicalName"
            label="备注"
            width="298">
          </el-table-column>
          <el-table-column
            prop="materialNumber"
            label="统计时间"
            width="322">
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pagesize"
        :total="total">
      </el-pagination>
    </div>
    <new-modify
      v-if="pageType==2"
      :newModifyData="newModifyData"
      @newModifyLeftClick="newModifyLeftClick"
      @newModifyRightClick="newModifyRightClick"
    ></new-modify>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  export default {
    name: "goodsInfo",//物资信息
    components:{
      newModify: resolve => {require(['@/components/newModify'], resolve)},//新建-修改组件
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    data () {
      return {
        pageType:1,
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[
          {
            id:"1",
            name:"绷带",
            class:"大类型A",
            type:"小类型A",
            text:"卷",
            unitName:"200",
            medicalName:"备注信息备注信息备注信息备注信息",
            materialNumber:"2021-2-23 18:49:52",
          },
          {
            id:"2",
            name:"绷带",
            class:"大类型A",
            type:"小类型A",
            text:"卷",
            unitName:"200",
            medicalName:"备注信息备注信息备注信息备注信息",
            materialNumber:"2021-2-23 18:49:52",
          },
          {
            id:"3",
            name:"绷带",
            class:"大类型A",
            type:"小类型A",
            text:"卷",
            unitName:"200",
            medicalName:"备注信息备注信息备注信息备注信息",
            materialNumber:"2021-2-23 18:49:52",
          },
          {
            id:"4",
            name:"绷带",
            class:"大类型A",
            type:"小类型A",
            text:"卷",
            unitName:"200",
            medicalName:"备注信息备注信息备注信息备注信息",
            materialNumber:"2021-2-23 18:49:52",
          },
        ],
        //选中数据
        multipleSelection:[],
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        //新增-修改页面数据
        newModifyData:{},
      }
    },

    created(){

    },
    mounted() {

    },
    methods: {
      goPage(){
        this.pageType==2;
      },
      newDataClick(){
        let newData = {
          title:"创建临时使用申请单",
          list:[
            {
              name:"名称",
              value:"",
            },
            {
              name:"物资发出单位",
              value:"请选择",
              list:["西南医院","金陵医院","新桥医院"]
            },
            {
              name:"物资接收单位",
              value:"请选择",
              list:["西南医院","金陵医院","新桥医院"]
            },
            {
              name:"物资详情",
              value:"请选择",
              tableList:["纱布","酒精","消毒水"],
            },
            {
              name:"备注",
              value:"",
              textArea:true,
            },
          ]
        };
        this.newModifyData = {...newData};
        this.pageType = 2;
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
      },
      //勾选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.tableNum = this.multipleSelection.length
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(){
        this.windowType = false;
        console.log("点击确定")
        let self = this;
        setTimeout(function(){
          self.windowText();
        },500);
      },
      //成功提示
      windowText(){
        this.windowData = {
          type:"2",
          title:"提示",
          text:"删除成功",
        };
        this.windowType = true;
      },
      //新增-修改组件内左侧按钮事件
      newModifyLeftClick(){
        this.pageType = 1;
      },
      //新增-修改组件内左侧按钮事件
      newModifyRightClick(data){
        this.pageType = 1;
        console.log("右键传值",data);
        this.windowData = {
          type:"2",
          title:"提示",
          text:"操作成功",
          leftButton:"取消",
          rightButton:"确定",
        };
        this.windowType = !this.windowType;
      },
      //供子组件调用方法
      outPage(){
        this.pageType = 0;
      },
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex-direction column
    flex:1;
    .big-max-box
      display flex
      flex-direction column
      flex:1;
      .max-button-box
        display flex
        //返回按钮
        .out-page-button
          height:30px;
          width:93px;
          margin-left:106px;
          background:url("~@/assets/images/button_02.png");
          background-size 100% 100%
          display flex
          img
            display block
            height:12px;
            width:7px;
            margin:9px 10px 0 22px;
          p
            line-height:30px;
            font-size:$font_12;
            color:$color_ff;
            text-align left
        .null
          flex:1;
        .out-page-button-right
          height:30px;
          width:157px;
          margin-right:106px;
          background:url("~@/assets/images/button_07_1.png");
          background-size 100% 100%
          display flex
          p
            line-height:30px;
            font-size:$font_12;
            color:$color_ff;
            text-align left
            margin-left:39px;
      //表格
      .table-box
        width:1710px !important;
        margin:20px 105px;
        text-align center !important
        .type-box
          display flex
          width:150px;
          margin:0 auto;
          p:nth-child(1)
            width:90px;
          p:nth-child(2)
            width:60px;
            color:#333;
            font-size:$font_12;
            background url("~@/assets/images/button_14.png")
            background-size 100% 100%
            border-radius:4px;
        .colorA
          color:$theme3;
        .colorB
          color:$theme;
        .table-min-button
          width:145px;
          margin:0 auto;
          display flex
          .info-box
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          .add-box
            height:20px;
            width:60px;
            font-size:$font_14;
            color:$theme;
            display flex
            margin-right:11px;
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
          .del-box
            height:20px;
            width:70px;
            font-size:$font_14;
            color:$theme3;
            display flex
            img
              display block
              height:20px;
              width:20px;
              margin-right:4px;
    //修改table表格样式
    .el-table
      background rgba(6,177,240,0.2)
    .el-table /deep/ .el-table__empty-text
      width: 100%;
      text-align left
      margin-left:825px;
    .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>
