<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\nmpa.vue
-->
<template>
  <div class="con left">
    <div style="margin-top: 1px;margin-bottom: -15px">
      <el-button type="warning" icon="search" @click="yearClick" style="text-align:right;margin-left: 15px">
        按年度统计
      </el-button>
      <el-button type="warning" icon="search" @click="quarterClick" style="text-align:right">按季度统计</el-button>
      <el-button type="warning" icon="search" @click="monthClick" style="text-align:right">按月份统计</el-button>
      <span class="demonstration" style="margin-left: 20px;color: yellow"></span>

      <el-date-picker
          v-model="value2"
          type="monthrange"
          align="right"
          style="margin-left: 20px;color: yellow;margin-left: 15px;font-weight: bold"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions">
      </el-date-picker>

      <el-button type="warning" icon="search" @click="customClick" style="margin-left: 15px">自定义统计</el-button>
    </div>
    <div class="contents">
      <div class="contetn_left">
        <ItemWrap style="height: 440px;margin-top: 1px" title="入网企业填报情况">
          <centerTop></centerTop>
          <Echart
              :options="corpOptions1"
              style="width: 33%;display: inline-block;height: 200px;margin-top: 5px;"
          ></Echart>
          <Echart
              :options="corpOptions2"
              style="width: 33%;display: inline-block;height: 200px;margin-top: 5px;"
          ></Echart>
          <Echart
              :options="corpOptions3"
              style="width: 33%;display: inline-block;height: 200px;margin-top: 5px;"
          ></Echart>

        </ItemWrap>
        <!--        <item-wrap style="height: 220px;margin-top: 1px" title="单位类型">-->
        <!--         -->
        <!--        </item-wrap>-->
        <ItemWrap
            class="contetn_lr-item"
            style="height: 375px;margin-top: 5px"
            title="未上报企业目录"
        >
          <el-table v-loading="loading" :data="unList"
                    style="width: 100%"
                    :cell-style="{ color: '#fff' }"
                    :header-cell-style="{ color: '#fff' }"
                    highlight-current-row

                    :row-class-name="tableRowClassName">
            <el-table-column label="序号" type="index" width="55"></el-table-column>
            <el-table-column label="单位名称" prop="corpName" width="280" show-overflow-tooltip></el-table-column>
            <el-table-column label="上次上报时间" prop="lastUploadTime" width="180" show-overflow-tooltip></el-table-column>
          </el-table>
          <el-pagination
              style="float: right;margin-top: 15px"
              :page-size="unLimit"
              @current-change="handleChange"
              layout="prev, pager, next"
              :total="unTotal"
              :current-page="unPage"
          ></el-pagination>
        </ItemWrap>
      </div>
      <div class="contetn_right" style="margin-left: 15px">
        <ItemWrap
            class="contetn_lr-item"
            style="width: 97%;
            height: 440px"
            title="企业品种上报列表"
        >
          <el-table v-loading="loading" :data="list"
                    style="width: 100%"
                    :cell-style="{ color: '#fff' }"
                    :header-cell-style="{ color: '#fff' }"
                    highlight-current-row
                    @row-click="intentDetail"
                    :row-class-name="tableRowClassName">
            <el-table-column label="序号" type="index" width="55"></el-table-column>
            <el-table-column label="库存区间" prop="invDate" width="200" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ dateRange }}
              </template>
            </el-table-column>
            <el-table-column label="单位名称" prop="corpName" width="250" show-overflow-tooltip></el-table-column>
            <el-table-column label="单位类型" prop="bussinessName" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="品种数量" prop="statCount" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="器械数量" prop="qiXieCount" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="试剂数量" prop="shiJiCount" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="进口数量" prop="importCount" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column label="非进口数量" prop="unImportCount" width="100" show-overflow-tooltip></el-table-column>
            <!--            <el-table-column label="单位品种数量" prop="statCount" width="140" show-overflow-tooltip></el-table-column>-->
          </el-table>
          <el-pagination
              style="float: right;margin-top: 15px"
              :page-size="limit"
              @current-change="handleChange"
              layout="prev, pager, next"
              :total="total"
              :current-page="page"
          ></el-pagination>
        </ItemWrap>

        <div style="float: left;display: flex;margin-top: 15px">
          <ItemWrap
              class="contetn_lr-item"
              style="width: 97%;height: 375px"
              title="产品上报汇总">
            <div class="contetn_lr-item2"
                 style="height: 280px; display: flex;justify-content: flex-start;border: 1px solid #034c6a;border-radius: 18px;">
              <RightTop/>
              <RightTop1/>
              <RightTop2/>
              <RightTop3/>
              <RightTop4/>
            </div>
          </ItemWrap>
        </div>

      </div>
    </div>


    <el-dialog
        title="上报品种明细"
        :visible.sync="addDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="addDialogVisible"
        append-to-body
        width="75%"
    >
      <dialogCorpInfo
          :editQuery="curCorp"
      ></dialogCorpInfo>
    </el-dialog>
  </div>
</template>

<script>
import CenterBottom from "./center-bottom.vue";
import centerTop from "./center-top.vue";
import leftTop from "./left-top.vue";
import LeftBottom from "./left-bottom.vue";
import RightBottom from "./right-bottom.vue";
import RightFull from "./right-full.vue";
import RightTop from "./right-top.vue";
import RightTop1 from "./right-top1.vue";
import RightTop2 from "./right-top2.vue";
import RightTop3 from "./right-top3.vue";
import RightTop4 from "./right-top4.vue";
// import {currentGET} from "@/api";
import dialogCorpInfo from "./dialogInoutInfo.vue";
import {formatDate} from "@/utils/date";

export default {
  components: {
    LeftBottom,
    leftTop,
    centerTop,
    CenterBottom,
    RightBottom, RightFull, RightTop1,
    RightTop2,
    RightTop3,
    RightTop4,
    RightTop, dialogCorpInfo
  },
  data() {
    return {
      ioOptions: {},
      corpOptions1: {},
      corpOptions2: {},
      corpOptions3: {},
      curCorp: {},
      addDialogVisible: false,
      value2: new Date().getTime() - 3600 * 1000 * 24 * 30,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      list: [],
      page: 1,
      limit: 6,
      total: 0,

      unList: [],
      unPage: 1,
      unLimit: 4,
      unTotal: 0,

      dateRange: "2023-12"
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {

    this.init();
    this.getCorpInvData();
    this.getUnCorpInvData();
  },

  mounted() {
  },
  methods: {

    init() {
      this.ioOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['期初数量', '入库数量', '出库数量'],
          textStyle: {
            color: "#fff"
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        splitLine: {
          "show": false
        },
        xAxis: [
          {
            type: 'value',
            splitLine: {
              "show": false
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              },
            },

          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              },
            },

            data: ['器械类', '诊断试剂类', '一类医疗器械', '二类医疗器械', '三类医疗器械']
          }
        ],
        series: [
          {
            name: '期初数量',
            type: 'bar',
            label: {
              show: true,
              position: 'inside'
            },
            itemStyle: {
              normal: {
                color: '#F3DB5C'
              },
            },
            emphasis: {
              focus: 'series'
            },
            data: [200, 170, 240, 244, 200, 220, 210]
          },
          {
            name: '入库数量',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: '#4ADEFE'
              },
            },

            data: [320, 302, 341, 374, 390, 450, 420]
          },
          {
            name: '出库数量',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'left'
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: '#d56e6e',
              },
            },
            data: [-120, -132, -101, -134, -190, -230, -210]
          }
        ]
      };

      this.corpOptions1 = {
        title: {
          subtext: '生产企业',
          color: "#fff",
          left: 'center',
          textStyle: {},
          subtextStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '生产企业',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 0, name: '已上报'},
              {value: 2, name: '未上报'},
            ],


            rich: {
              b: {
                color: "#fff",
                fontSize: 12,
                lineHeight: 26,
              },
              c: {
                color: "#31ABE3",
                fontSize: 14,
              },
              per: {
                color: "#31ABE3",
                fontSize: 14,
              },
            },
            label: {

              normal: {
                show: true,
                position: 'inner',
                formatter: "{b}/{c}  ",
                color: "#fff",


              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.corpOptions2 = {
        title: {
          subtext: '经营企业',
          color: "#fff",
          left: 'center',
          textStyle: {},
          subtextStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '经营企业',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 1, name: '已上报'},
              {value: 0, name: '未上报'},
            ],


            rich: {
              b: {
                color: "#fff",
                fontSize: 12,
                lineHeight: 26,
              },
              c: {
                color: "#31ABE3",
                fontSize: 14,
              },
              per: {
                color: "#31ABE3",
                fontSize: 14,
              },
            },
            label: {

              normal: {
                show: true,
                position: 'inner',
                formatter: "{b}/{c}  ",
                color: "#fff",


              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.corpOptions3 = {
        title: {
          subtext: '医疗机构',
          color: "#fff",
          left: 'center',
          textStyle: {},
          subtextStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '医疗机构',
            type: 'pie',
            radius: '50%',
            data: [
              {value: 0, name: '已上报'},
              {value: 5, name: '未上报'},
            ],


            rich: {
              b: {
                color: "#fff",
                fontSize: 12,
                lineHeight: 26,
              },
              c: {
                color: "#31ABE3",
                fontSize: 14,
              },
              per: {
                color: "#31ABE3",
                fontSize: 14,
              },
            },
            label: {

              normal: {
                show: true,
                position: 'inner',
                formatter: "{b}/{c}  ",
                color: "#fff",


              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

    },
    getCorpInvData() {
      currentGET('corpInvList', {page: this.page, limit: this.limit, uploadFlag: 1}).then(res => {
        if (res.code == 20000) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$Message({
            text: res.msg,
            type: 'warning'
          })
        }
      })
    },
    getUnCorpInvData() {
      currentGET('corpInvList', {page: this.page, limit: this.limit, uploadFlag: 0}).then(res => {
        if (res.code == 20000) {
          this.unList = res.data.list
          this.unTotal = res.data.total
        } else {
          this.$Message({
            text: res.msg,
            type: 'warning'
          })
        }
      })
    },
    intentDetail(row) {
      this.curCorp = row;
      this.addDialogVisible = true;
    },
    yearClick() {
      this.dateRange = "2023";
    },
    quarterClick() {
      this.dateRange = "2023.10-2023.12"
    },
    monthClick() {
      this.dateRange = "2023.12"
    },
    customClick() {
      this.dateRange = formatDate(this.value2[0], "yyyy.MM") + "-" + formatDate(this.value2[1], "yyyy.MM");
    },


  },
};
</script>
<style lang="scss" scoped>
// 内容
.contents {
  .contetn_left {
    width: 35%;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_right {
    width: 65%;
    display: flex;

  }

  //左右两侧 三个块
  .contetn_lr-item {
    height: 380px;
  }


  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    //justify-content: space-around;
  }

  .contetn_center-bottom {
    height: 380px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    //justify-content: space-around;
    position: relative;


  }


}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;

  .warning-row {
    background: #e79b0c;
  }

  .success-row {
    background: #549032;
  }

}

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
}


::v-deep .el-table th {
  background-color: #2f70be !important;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}


@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
