<template>
  <div class="max-big-box">
    <div v-if="pageType" class="max-page-box">
      <!--操作按钮-->
      <div class="top-box">
        <div class="top-left-text-p">
          <p v-if="textData.name&&textData.title&&textData.num">{{textData.name}}属于{{textData.title}},该基数数量为{{textData.num}},具体信息如下：</p>
          <p v-else>请选择基础分类后查询</p>
        </div>
        <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.id}"
                 @mouseenter="colorTypeEnter(index,item.id)" @mouseleave="colorTypeLeave(index)"
                 @click="dropdownClick(index,item.value)">{{item.value}}</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="table-box">
        <el-table
          ref="multipleTable"
          :row-key="getRowKey"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="96">
          </el-table-column>
          <el-table-column
            prop="materialName"
            label="物资名称"
            width="170">
          </el-table-column>
          <el-table-column
            prop="bigTypeName"
            label="类型(大类)"
            width="204">
          </el-table-column>
          <el-table-column
            prop="smallTypeName"
            label="类型(小类)"
            width="204">
          </el-table-column>
          <el-table-column
            prop="materialNum"
            label="数量"
            width="128">
          </el-table-column>
          <el-table-column
            prop="materiaUnit"
            label="单位"
            width="139">
          </el-table-column>
          <el-table-column
            prop="organizationName"
            label="仓库名称"
            width="226">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="329">
          </el-table-column>
          <el-table-column
            label="操作"
            width="213">
            <template slot-scope="scope">
              <div class="table-min-button cursor_pointer" @click="handleEdit(scope.$index, scope.row)">
                <img src="~@/assets/images/icon_36.png">
                <p>详情</p>
              </div>
            </template>
          </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>
    <material-details v-if="!pageType" :materialData="materialData"></material-details>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { baseUnitDownList,materialUnitName,materialUnitList } from '@/api/userApi'
  export default {
    name: "queryByCardinalityUnit",//按基数单位查询
    components:{
      materialDetails: resolve => {require(['@/components/equipmentSituation/equipmentMaterialStrengthInformationView/materialDetails'], resolve)},//物资详情信息
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    data () {
      return {
        //页面切换状态
        pageType:true,
        textData:{
          name:"",
          title:"",
          num:"",
        },
        //下拉框
        downList:[
          {
            name:"基础分类",
            downType:false,
            downText:"请选择",
            mouseColor:"",
            list:[],
          },
        ],
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        /*传参数据*/
        materialData:{},
      }
    },

    created(){

    },
    mounted() {
      this.baseUnitDownList();
    },
    methods: {
      //点击查询
      clickQuery(){
        if(!this.downList[0].mouseColor){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择基础分类",
          };
          this.windowType = !this.windowType;
        }
        this.currentPage = 1;
        this.materialUnitName();
      },
      //基数单位信息
      async materialUnitName (){
        let self = this;
        let param = new FormData();
        param.append('id ',self.downList[0].mouseColor);
        const { data } = await materialUnitName(param);
        if(data.code==200){
          self.textData.title = data.data.medicalTreatmentName;
          self.textData.name = data.data.unitName;
          self.textData.num = data.data.currentNum;
          this.materialUnitList();
        }
      },
      //数据列表
      async materialUnitList (){
        let self = this;
        let param = new FormData();
        param.append('id ',self.downList[0].mouseColor);
        const { data } = await materialUnitList(param);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.$forceUpdate();
        }
      },
      //获取医疗队下拉菜单
      async baseUnitDownList () {
        let self = this;
        const { data } = await baseUnitDownList();
        if(data.code==200){
          let list = [];
          for(let i=0;i<data.data.length;i++){
            let obj = {
              value:data.data[i].unitName,
              id:data.data[i].id,
            };
            list.push(obj);
          }
          self.downList[0].list = list;
        }
      },
      outPage(){
        this.pageType = !this.pageType;
      },
      handleEdit(index,row){
        this.materialData = {
          id:row.id,
          materialName:row.materialName,
          organizationName:row.organizationName,
        };
        this.pageType = !this.pageType;
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //下拉菜单进入悬浮状态
      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;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        console.log(data)
      },
    }
  }
</script>

<style scoped lang="stylus">
.max-big-box
  display flex
  flex-direction column
  flex:1;
  .max-page-box
    display flex
    flex-direction column
    flex:1;
    .top-box
      height:30px;
      display flex
      margin-left:105px;
      .top-left-text-p
        color:$theme3;
        font-size:$font_14;
        line-height:30px;
        margin-right:30px;
        width:500px;
      .dropdown-box
        display flex
        color:$color_ff;
        z-index:1;
        margin-right: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
        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;
    //表格
    .table-box
      width:1710px !important;
      margin:20px 105px;
      text-align center !important
      /*点击详情*/
      .table-info-p-one
        display inline-block
      .table-info-p-two
        display inline-block
        width:60px;
        height:20px;
        color:$color_33;
        font-size:$font_12;
        background url("~@/assets/images/button_14.png")
        background-size 100% 100%
        border-radius:4px;
      .colorA
        color:$theme3;
      .colorB
        color:$theme2;
      .colorC
        color:$theme1;
      .table-min-button
        height:20px;
        width:60px;
        font-size:$font_14;
        color:$theme;
        display flex
        margin:0 auto;
        img
          display block
          height:20px;
          width:20px;
          margin-right:4px;
  //修改table表格样式
  .el-table
    background rgba(6,177,240,0.2)
  .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>
