<template>
  <div class="max-big-box">
    <div class="big-max-box" v-if="detailsType==0">
      <!--操作按钮-->
      <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="time-box">
            <p>消耗时间：</p>
            <p class="cursor_pointer" @click="openTimeBox('1')">{{playTime}}</p>
            <p>-</p>
            <p class="cursor_pointer" @click="openTimeBox('2')">{{endTime}}</p>
          </div>
          <div class="button-box cursor_pointer" @click="clickQuery">
            <img src="~@/assets/images/icon_27.png">
            <p class="cursor_pointer">查询</p>
          </div>
        </div>
      </div>
      <div class="page-one-box">
        <!--表格-->
        <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="85">
            </el-table-column>
            <el-table-column
              prop="organizationName"
              label="单位名称"
              width="192">
            </el-table-column>
            <el-table-column
              prop="medical_corps_name"
              label="医疗队名称"
              width="207">
            </el-table-column>
            <el-table-column
              prop="unit_name"
              label="基数单位"
              width="193">
            </el-table-column>
            <el-table-column
              prop="unit_content"
              label="基数详情"
              width="474">
            </el-table-column>
            <el-table-column
              prop="unit_num"
              label="消耗数量"
              width="169">
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="消耗时间"
              width="231">
            </el-table-column>
            <!--<el-table-column-->
              <!--label="图形展示"-->
              <!--width="200">-->
              <!--<div class="page-button-box cursor_pointer" @click="pageTypeClick">-->
                <!--<img src="~@/assets/images/icon_63.png">-->
                <!--<p class="cursor_pointer">切换图形展示</p>-->
              <!--</div>-->
            <!--</el-table-column>-->
            <el-table-column
              label="操作"
              width="159">
              <template slot-scope="scope">
                <div class="table-min-button" :class="{'table-min-button-1':scope.row.type==1,'table-min-button-2':scope.row.type==8,'table-min-button-3':scope.row.type!=1&&scope.row.type!=8}">
                  <div class="table-min-button-box-one cursor_pointer" @click="handleInfo(scope.$index, scope.row)">
                    <img src="~@/assets/images/icon_36.png">
                    <p>详情</p>
                  </div>
                </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 class="time-max-big-box" v-if="timeType!=0">
          <div class="time-big-box">
            <el-calendar class="time-min-box" v-model="timeValue">
            </el-calendar>
            <div class="button-box">
              <p class="cursor_pointer" @click="openTimeBox('0')">返回</p>
              <p class="cursor_pointer" @click="clearTimeData">清除</p>
              <p class="cursor_pointer" @click="setTimeData">确定</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <details-page
      v-if="detailsType==1"
      :dataInfo="dataInfo">
    </details-page>
    <e-charts-page
      :eChartsData="eChartsData"
      v-if="detailsType==2">
    </e-charts-page>
  </div>
</template>

<script>
  import { medicalCorpsListData,baseUnitDownList,statisticsAnalysisList } from '@/api/userApi'
  export default {
    name: "consumptionStatistics",//消耗统计
    components:{
      detailsPage: resolve => {require(['@/components/detailsPage'], resolve)},//详情组件
      eChartsPage: resolve => {require(['@/components/directorateDecisionSupport/statisticalAnalysisView/eChartsPage'], resolve)},//图表组件
    },
    data () {
      return {
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        /*数据*/
        tableData:[],
        //下拉框
        downList:[
          {
            name:"医疗队名称",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[],
          },
          {
            name:"基数单位",
            downType:false,
            downText:"全部",
            mouseColor:"",
            list:[],
            idType:[],
          },
        ],
        //搜索时间
        playTime:"请选择时间",
        endTime:"请选择时间",
        //日历时间
        timeValue: new Date(),
        timeType:0,
        //详情页相关
        detailsType:0,
        dataInfo:{},
        //图表数据
        eChartsData:{}
      }
    },

    created(){

    },
    mounted() {
      this.medicalCorpsListData();
    },
    methods: {
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.getListData();
      },
      //医疗队列表
      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 = JSON.parse(JSON.stringify(list));
          self.downList[0].idType = JSON.parse(JSON.stringify(idType));
          self.baseUnitDownList();
        }
      },
      //基数列表
      async baseUnitDownList () {
        let self = this;
        const { data } = await baseUnitDownList();
        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].unitName);
            idType.push(data.data[i].id);
          }
          self.downList[1].list = JSON.parse(JSON.stringify(list));
          self.downList[1].idType = JSON.parse(JSON.stringify(idType));
          self.getListData();
        }
      },
      //获取列表
      async getListData () {
        let self = this;
        let obj={
          medicalCorpsId:"",
          id:"",
          pageSize:self.pagesize,
          pageNum:self.currentPage,
          "params[beginTime]":self.playTime=="请选择时间"?"":self.playTime,
          "params[endTime]":self.endTime=="请选择时间"?"":self.endTime,
        };
        //医疗队id
        for(let i=0;i<self.downList[0].list.length;i++){
          if(self.downList[0].downText==self.downList[0].list[i]){
            obj.medicalCorpsId = self.downList[0].idType[i];
          }
        }
        //基数id
        for(let i=0;i<self.downList[1].list.length;i++){
          if(self.downList[1].downText==self.downList[1].list[i]){
            obj.id = self.downList[1].idType[i];
          }
        }
        const { data } = await statisticsAnalysisList(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.$forceUpdate();
        }
      },
      //详情
      handleInfo(index, row){
        this.dataInfo =[
          {
            name:"单位名称",
            value:row.organizationName,
          },
          {
            name:"医疗队名称",
            value:row.medical_corps_name,
          },
          {
            name:"基数单位",
            value:row.unit_name,
          },
          {
            name:"基数详情",
            value:row.unit_content,
          },
          {
            name:"消耗数量",
            value:row.unit_num,
          },
          {
            name:"消耗时间",
            value:row.create_time,
          }
        ]
        this.detailsType = 1;
      },
      //页面状态切换
      pageTypeClick(){
        this.detailsType = 2
      },
      //下拉菜单进入悬浮状态
      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;
      },
      //时间选择事件
      openTimeBox(type){
        this.timeType=type
      },
      setTimeData(){
        let year = this.timeValue.getFullYear();
        let month = this.timeValue.getMonth()+1;
        let day = this.timeValue.getDate();
        if(this.timeType==1){
          this.playTime = year+'-'+month+'-'+day;
        }else if(this.timeType==2){
          this.endTime = year+'-'+month+'-'+day;
        }
        this.timeType = 0;
      },
      clearTimeData(){
        if(this.timeType==1){
          this.playTime = "请选择时间";
        }else if(this.timeType==2){
          this.endTime = "请选择时间";
        }
        this.timeType = 0;
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
        this.getListData();
      },
      //供子组件调用方法
      outPage(){
        this.detailsType = 0;
      },
    }
  }
</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;
      //搜索与操作按钮
      .top-box
        height:30px;
        margin-top:20px;
        .input-box
          width:1710px;
          height:30px;
          display flex
          margin-left:105px;
          .search-input
            height:28px;
            width:290px;
            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;
        .time-box
          width:380px;
          display flex
          margin-left:20px;
          p
            color:$color_ff;
          p:nth-child(1)
            width:100px;
            line-height:30px;
            font-size:$font_14;
          p:nth-child(2)
            width:120px;
            height:30px;
            background url("~@/assets/images/button_08.png")
            background-size 100% 100%
            font-size:$font_12;
            line-height:30px;
          p:nth-child(3)
            width:27px;
            line-height:30px;
          p:nth-child(4)
            width:120px;
            height:30px;
            background url("~@/assets/images/button_08.png")
            background-size 100% 100%
            line-height:30px;
            font-size:$font_12;
      .page-one-box
        display flex
        flex-direction column
        flex:1;
        //表格
        .table-box
          width:1710px !important;
          margin:20px 105px;
          text-align center !important
          .page-button-box
            display flex
            height:30px;
            width:120px;
            margin:0 auto;
            background:$theme2;
            border-radius:4px;
            img
              display block
              height:20px;
              width:20px;
              margin:5px 7px 0 9px;
            p
              line-height:30px;
              font-size:$font_12;
              color:$color_ff;
              text-align left
          .colorA
            color:$theme3;
        //时间日历
        .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:390px;
              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%
      .page-two-box
        display flex
    //修改日期选择样式
    /*
    .el-calendar
      background $color_ff
    */
    //修改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>
