<template>
  <div class="max-big-box">
    <div class="big-max-box" v-if="newModifyPageType">
      <!--操作按钮-->
      <div class="top-box">
        <div class="input-box">
          <div class="dropdown-box" 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>
          <p class="top-text-p">备注：储备水平低于30%标注为红色,储备水平低于50%标注为黄色</p>
        </div>
        <!--<p class="del-button cursor_pointer" @click="allDel">批量删除</p>-->
        <!--<p class="text-p">已选择{{tableNum}}条</p>-->
      </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="70">-->
          <!--</el-table-column>-->
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="70">
          </el-table-column>
          <el-table-column
            prop="medicalTreatmentName"
            label="医疗队所名称"
            width="230">
          </el-table-column>
          <el-table-column
            prop="organizationName"
            label="对应仓库"
            width="160">
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="单位名称"
            width="160">
          </el-table-column>
          <el-table-column
            label="车辆信息">
            <el-table-column
              label="标准车辆数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.carNum}}辆
              </template>
            </el-table-column>
            <el-table-column
              label="当前车辆数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.currentCarNumber}}辆
              </template>
            </el-table-column>
            <el-table-column
              label="储备水平"
              width="120">
              <template slot-scope="scope">
              {{scope.row.carPercent}}%
              </template>
            </el-table-column>
            <el-table-column
              label="待补充数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.needCarNumber}}辆
              </template>
            </el-table-column>
            <el-table-column
              label="可用数量-标准数量比"
              width="160">
              <template slot-scope="scope">
                {{scope.row.carResultfulPercent}}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="器材信息">
            <el-table-column
              label="标准器材数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.equipmentNum}}个
              </template>
            </el-table-column>
            <el-table-column
              label="当前器材数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.currentEquipNumber}}个
              </template>
            </el-table-column>
            <el-table-column
              label="储备水平"
              width="120">
              <template slot-scope="scope">
              {{scope.row.equipmentPercent}}%
              </template>
            </el-table-column>
            <el-table-column
              label="待补充数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.needEquipmentNumber}}个
              </template>
            </el-table-column>
            <el-table-column
              label="可用数量-标准数量比"
              width="160">
              <template slot-scope="scope">
                {{scope.row.equipmentResultfulPercent}}%
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="耗材信息">
            <el-table-column
              label="标准耗材数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.materialNum}}个
              </template>
            </el-table-column>
            <el-table-column
              label="当前耗材数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.currentMaterialNumber}}个
              </template>
            </el-table-column>
            <el-table-column
              label="储备水平"
              width="120">
              <template slot-scope="scope">
              {{scope.row.materialPercent}}%
              </template>
            </el-table-column>
            <el-table-column
              label="待补充数量"
              width="170">
              <template slot-scope="scope">
              {{scope.row.needMaterialNumber}}个
              </template>
            </el-table-column>
          </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-else
      :newModifyData="newModifyData"
      @newModifyLeftClick="newModifyLeftClick"
      @newModifyRightClick="newModifyRightClick"
    ></new-modify>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { medicalCorpsListData,materialsManagement } from '@/api/userApi'
  export default {
    name: "listInfo",//列表信息
    components:{
      newModify: resolve => {require(['@/components/newModify'], resolve)},//新建-修改组件
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    data () {
      return {
        //下拉框
        downList:[
          {
            name:"请选择医疗队所",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[]
          },
        ],
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //选中数据
        multipleSelection:[],
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        //勾选数量
        tableNum:0,
        // 新增-修改页面状态
        newModifyPageType:true,
        //新增-修改页面数据
        newModifyData:{}
      }
    },

    created(){

    },
    mounted() {
      this.medicalCorpsListData();
    },
    methods: {
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.getListData();
      },
      //数据列表
      async getListData (){
        let self = this;
        let obj={
          medicalTreatmentId:"",
        };
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.medicalTreatmentId = self.downList[0].idType[i];
          }
        }
        const { data } = await materialsManagement(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.tableNum = 0;
          this.$forceUpdate();
        }
      },
      //医疗队所
      async medicalCorpsListData () {
        let self = this;
        const { data } = await medicalCorpsListData();
        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].medical_corps);
            idType.push(data.data[i].id);
          }
          self.downList[0].list = list;
          self.downList[0].idType = idType;
          self.getListData();
        }
      },
      //下拉菜单进入悬浮状态
      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;
      },
      // 批量删除
      allDel(){
        if(this.multipleSelection[0]){
          this.windowData = {
            type:"1",
            title:"提示",
            text:"确定要批量删除这些信息吗?",
            leftButton:"取消",
            rightButton:"确定",
          };
          this.windowType = !this.windowType;
        }else{
          this.windowData = {
            type:"3",
            title:"提示",
            text:"您没有勾选任何数据!",
            leftButton:"取消",
            rightButton:"确定",
          };
          this.windowType = !this.windowType;
        }
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
      },
      //编辑
      handleEdit(index, row) {
        let newData = {
          title:"编辑",
          list:[
            {
              name:"医疗队所名称",
              value:row.name,
            },
            {
              name:"对应仓库",
              value:row.warehouse,
              list:["一级","二级","三级"]
            },
            {
              name:"单位名称",
              value:row.warehouse,
            },
            {
              name:"标准人员数量",
              value:row.num1,
              elNumber:true,
            },
            {
              name:"当前人员数量",
              value:row.num1,
              elNumber:true,
            },
            {
              name:"标准车辆数量",
              value:row.num3,
              elNumber:true,
            },
            {
              name:"当前车辆数量",
              value:row.num3,
              elNumber:true,
            },
            {
              name:"标准器材数量",
              value:row.num5,
              elNumber:true,
            },
            {
              name:"当前器材数量",
              value:row.num5,
              elNumber:true,
            },
            {
              name:"标准耗材数量",
              value:row.num7,
              elNumber:true,
            },
            {
              name:"当前耗材数量",
              value:row.num7,
              elNumber:true,
            }
          ]
        };
        this.newModifyData = {...newData};
        this.newModifyPageType = !this.newModifyPageType;
      },
      // 删除
      handleDelete(index, row) {
        this.windowData = {
          type:"1",
          title:"提示",
          text:"确定要删除这条信息吗?",
          leftButton:"取消",
          rightButton:"确定",
        };
        this.windowType = !this.windowType;
      },
      //勾选
      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.newModifyPageType = !this.newModifyPageType;
      },
      //新增-修改组件内左侧按钮事件
      newModifyRightClick(data){
        this.newModifyPageType = !this.newModifyPageType;
        console.log("右键传值",data);
        this.windowData = {
          type:"2",
          title:"提示",
          text:"操作成功",
          leftButton:"取消",
          rightButton:"确定",
        };
        this.windowType = !this.windowType;
      },
    }
  }
</script>

<style scoped lang="stylus">
.max-big-box
  display flex
  flex:1;
  .big-max-box
    display flex
    flex-direction column
    flex:1;
    //搜索与操作按钮
    .top-box
      height:30px;
      display flex
      margin-top:20px;
      .input-box
        width:1370px;
        display flex
        margin-left:105px;
        .top-text-p
          color:$theme3;
          font-size:$font_14;
          line-height 30px
          margin-left:30px;
        .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;
      .del-button
        margin-left:30px;
        width:110px;
        height:30px;
        background:url("~@/assets/images/button_05_1.png");
        background-size:100% 100%;
        line-height:30px
        color:$color_ff;
        font-size:$font_12;
        padding-left:41px;
        text-align left
      .text-p
        width:90px;
        color:$color_ff;
        line-height:30px
        font-size:$font_12;
    //表格
    .table-box
      width:1710px !important;
      margin:20px 105px;
      text-align center !important
      .colorA
        color:$theme3;
      .colorB
        color:$theme2;
      .colorC
        color:$theme1;
      .table-min-button
        width:140px;
        margin:0 auto;
        display flex
        div:nth-child(1)
          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;
        div:nth-child(2)
          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--border
  .el-table--group
  .el-table--border  /deep/ th
  .el-table--border /deep/ td
  .el-table--border /deep/ tr
    border:0;
  .el-table--border::after
  .el-table--group::after
    width: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>
