<template>
  <div class="app-container home">
    <div>
      <div class="mt10 grid-container grid-container1">


        <el-card class="grid-item" body-style="padding:0px;height:100%"  >

          <el-row >
            <el-form v-if="queryList && queryList.length > 0" :model="filterQuery" class="query-form"
                     size="mini" label-width="100px"
            >
              <el-row >
                <el-col :span="8">
                  <el-form-item label="时间统计:">
                    <el-date-picker

                      :picker-options="pickerOptions"
                      v-model="actDateRange"
                      type="daterange"
                      format="yyyy 年 MM 月 dd 日"
                      style="width: 90%"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>

                  </el-form-item>

                </el-col>
                <el-form-item >

                  <el-button-group>
                    <el-button
                      type="primary"
                      icon="el-icon-refresh"
                      @click="onReset"
                    >重置
                    </el-button>
                    <el-button type="primary" icon="el-icon-search" @click="onSubmit(this)"
                    >查询
                    </el-button
                    >
                  </el-button-group>

                </el-form-item>
              </el-row>
            </el-form>
          </el-row>
        </el-card>

      </div>
      <div class="mt10 grid-container grid-container3">


        <el-card class="grid-item" body-style="padding:0px;height:100%"  >

          <el-row >
            <div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=2')">
              <el-image style="border-radius: 4%;width: 90%;height: 90%"
                        :src="alreadyUploadingSvg"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            <div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=2')">
              <span class="header d-block">
                已上传医保
              </span>
              <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
                {{ stats.alreadyUploadingCount }}
              </span>
            </div>
          </el-row>
        </el-card>

        <el-card class="grid-item" body-style="padding:0px;height:100%">
          <el-row>
            <div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=1')">
              <el-image style="border-radius: 4%;width: 90%;height: 90%"
                        :src="notUploadingSvg"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            <div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=1')">
              <span class="header d-block">
               未上传医保
              </span>
              <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">

                {{ stats.notUploadingCount }}
              </span>
            </div>
          </el-row>
        </el-card>
        <el-card class="grid-item" body-style="padding:0px;height:100%">
          <el-row>
            <div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=3')">
              <el-image style="border-radius: 4%;width: 90%;height: 90%"
                        :src="uploadingFailSvg"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            <div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=3')">
              <span class="header d-block">
                上传失败医保
              </span>
              <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
                {{ stats.uploadingFailCount }}
              </span>
            </div>
          </el-row>
        </el-card>
      </div>
      <div class="mt10 grid-container grid-container3" style="height: 500px">


        <el-card class="grid-item" body-style="padding:0px;height:100%"  >

          <el-row >
            <div style="width: 100%; height: 100%;
        justify-content: center;
        align-items: center;">

<!--              <ItemWrap-->
<!--                title="医保上传统计">-->
                <Echart
                  :options="statsChart1"
                ></Echart>
<!--              </ItemWrap>-->
            </div>

          </el-row>
        </el-card>

        <el-card class="grid-item" body-style="padding:0px;height:100%"  >

          <el-row >
            <div style="width: 100%; height:100%;
        justify-content: center;
        align-items: center;">

              <Echart
                :options="statsChart2"
              ></Echart>
            </div>

          </el-row>
        </el-card>
        <el-card class="grid-item" body-style="padding:0px;height:100%"  >

          <el-row >
            <div style="width: 100%; height:100%;
        justify-content: center;
        align-items: center;">


              <Echart
                :options="statsChart3"
              ></Echart>
            </div>

          </el-row>
        </el-card>
      </div>
    </div>
    <!-- 分割线 -->
    <!--    <div class="m0 grid-container grid-container1" style="height: 100%; display: flex; flex-wrap: wrap;">-->
    <!--      <el-card-->
    <!--        @click.native="handleClick(index)"-->
    <!--        v-for="(card, index) in stationList"-->
    <!--        :key="index"-->
    <!--        class="grid-itemCard"-->
    <!--        :body-style="{ padding: '0px', height: '100px', width: '100px', display: 'flex', justifyContent: 'center', alignItems: 'center' }"-->
    <!--      >-->
    <!--        {{ card.workplaceName }}-->
    <!--      </el-card>-->

    <!--    </div>-->
<!--    <div class="container">-->
<!--      <div class="left">-->
<!--        <Echart-->
<!--          :options="statsChart1"-->
<!--        ></Echart>-->
<!--      </div>-->
<!--      <div class="middle">-->
<!--        <Echart-->
<!--          :options="statsChart1"-->
<!--        ></Echart>-->
<!--      </div>-->
<!--      <div class="right">-->
<!--        <Echart-->
<!--          :options="statsChart1"-->
<!--        ></Echart>-->
<!--      </div>-->
<!--    </div>-->





  </div>


</template>

<script>
import alreadyUploadingSvg from '@/assets/svg/已上传.svg'
import notUploadingSvg from '@/assets/svg/未上传.svg'
import uploadingFailSvg from '@/assets/svg/上传失败.svg'
import { executeFuc, getHead } from '@/utils/customConfig'
import { convertDate } from '@/utils/date'
import { uploadCount } from '@/api/collect/collectOrder'
import * as echarts from 'echarts';

// import {getOrderList} from "../api/inout/order";
// import {sysMsgTodoPage} from "../api/system/sysMsgTodoApi";
// import productSvg from "@/assets/svg/已对照产品.svg"
// import invSvg from "@/assets/svg/库存预警.svg"
// import certSvg from "@/assets/svg/资质预警.svg"
// import {getInvRemindMsgList} from "../api/system/invRemindMsg";
// import {getUdiInfos} from "../api/basic/udiRelevance";
// // import {listPage} from "@/api/basic/sysWorkplaceManage.js";
// import {getSupCertgetCount, getSupCertRemindMsgList} from "../api/purchase/supCertRedmindMsg";

export default {
  name: 'Index',
  data() {
    return {
      chart:null,
      alreadyUploadingSvg: alreadyUploadingSvg,
      notUploadingSvg: notUploadingSvg,
      uploadingFailSvg: uploadingFailSvg,
      stats:{
        alreadyUploadingCount: 0,
        notUploadingCount: 0,
        uploadingFailCount: 0,
        buyerCentage: 0,
        salesCentage: 0,
        codeCount: 0,
        buyerScanCount: 0,
        salesScanCount: 0,
        fifoSplitOneCount:0,
        fifoSplitTwoCount:0,

      },

      // 待办==================================================
      msgLoading: false,
      todoCount: 0,
      msgList: [],
      // =======================================================================
      // 单据==================================================
      orderLoading: false,
      orderTotal: 0,
      orderList: [],
      // =======================================================================
      //界面配置相关
      //患者处方
      tableHeader: [],
      queryList: [],
      tableObj: [],
      fromList: [],
      //处方明细
      tableHeader1: [],
      queryList1: [],
      tableObj1: [],
      fromList1: [],

      convertDateFun: convertDate,
      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])
            }
          }
        ]
      },
      actDateRange: [],
      //界面配置-------------end
      filterQuery: {
        startTime:null,
        endTime:null
      },
      statsChart1: {},
      statsChart2:{},
      statsChart3:{},
    }
  },
  methods: {
    //界面配置相关------------
    executeFuc(row, type, clickFuc, value) {
      return executeFuc(this, row, type, clickFuc, value)
    },
    executeEval(row, expression, defaultRet) {
      if (expression) {
        return eval(expression)
      }
      return defaultRet
    },
    onReset() {
      this.filterQuery = {
        startTime:null,
        endTime:null

      }
      this.actDateRange = []

      this.getList()
    },
    onSubmit(_this) {
      if (_this == null) {
        _this = this
      }
      _this.getList()
    },

    getList() {
      // this.loading = true
      if (this.actDateRange !== null) {
        this.filterQuery.startTime = this.actDateRange[0]
        this.filterQuery.endTime = this.actDateRange[1]
      } else {
        this.filterQuery.startTime = null
        this.filterQuery.endTime = null
      }
      uploadCount(this.filterQuery).then(res => {
        console.log('res111',res)

        if (res.code === 20000) {
          // this.loading = false
          // this.list = res.data || []
          // console.log('res.data',res.data)
          this.stats = {
            notUploadingCount:res.data.notUploadingCount,
            alreadyUploadingCount:res.data.alreadyUploadingCount,
            uploadingFailCount:res.data.uploadingFailCount,
            buyerCentage:res.data.buyerCentage,
            salesCentage:res.data.salesCentage,
            codeCount:res.data.codeCount,
            buyerScanCount: res.data.buyerScanCount,
            salesScanCount: res.data.salesScanCount,
            fifoSplitOneCount:res.data.fifoSplitOneCount,
            fifoSplitTwoCount:res.data.fifoSplitTwoCount,

          }

          this.initStatsChart1();
          this.initStatsChart2();
          this.initStatsChart3();
        }else {
          // this.loading = false
          this.$message.error(res.message);

        }


        // this.total = res.data.total || 0
        // this.panelALive = false
      }).catch(() => {
        // this.loading = false
        // this.list = []
        // this.total = 0
      })
    },
    linkPage(path) {
      console.log(path)
      this.$router.push(path)
    },
    initStatsChart1(){
      const dataArr = [
        this.stats.buyerScanCount,this.stats.salesScanCount
      ];
      console.log('dataArr',dataArr);
      this.statsChart1 = {
        color: ['#01c6fd'],
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a}<br/>{b}<br/>{c}"
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['医保采购上传码数', '医保销售上传码数'],
            axisLine: {
              lineStyle: {
                color: '#01c6fd'
              },
            },
            axisLabel: {
              interval: 0,
              rotate: 0,
              textStyle: {
                color: '#000000'
              }
            }
          }
        ],
        yAxis: [
          {
            axisTick: {
              show: false
            },
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#01c6fd'
              },
            },
            splitLine: {
              "show": false
            },
            axisLabel: {
              textStyle: {
                color: '#000000'
              },
              formatter: function (value) {
                // 这里修改 y 轴的数值显示，可以通过乘以一个倍数来增大显示的值
                return (value * 10) + "";
              },
            },
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 60,
            data: dataArr,
            label: {
              normal: {
                show: true, // 开启显示
                position: 'top', // 柱形上方
                textStyle: { // 数值样式
                  color: '#000000'
                }
              }
            }
          }
        ]
      };
    },
    initStatsChart2(){
      let colors = ["#d30101","#ffca29", "#01c6fd"];
      let piedata = {
        name: "医保上传率",
        type: "pie",
        radius: ["40%", "65%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 2,
        },

        color: colors,
        data: [
          {
            value: this.stats.codeCount -(this.stats.salesScanCount+this.stats.buyerScanCount)  ,
            name: "医保未上传码数",
            label: {
              shadowColor: colors[0],
            },
          },
          {
            value: this.stats.buyerScanCount,
            name: "医保采购上传码数",
            label: {
              shadowColor: colors[1],
            },
          },
          {
            value: this.stats.salesScanCount,
            name: "医保销售上传码数",
            label: {
              shadowColor: colors[2],
            },
          },
        ],
      };
      this.statsChart2 = {
        title: {
          // zlevel: 0,
          text: '医保上传率',
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#000000",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#000000",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#000000",
          },
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: {show: true},
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}",
              //   position: "outside",
              rich: {
                b: {
                  color: "#000000",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#2b91c2",
                  fontSize: 14,
                },
                per: {
                  color: "#2b91c2",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 10, // 第一段线 长度
              length2: 18, // 第二段线 长度
              show: true,

            },
            emphasis: {
              show: true,
            },
          },
          {
            ...piedata,
            tooltip: {show: true},
            itemStyle: {},
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [2.5, -2.5, 2.5, -2.5],
              normal: {
                show: true,
                position: 'inner',
                formatter: "{d}%",
                color: "#fff",
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false,
            },
          },
        ],
      };
    },
    initStatsChart3(){
      let colors = ["#d30101", "#01c6fd"];
      let piedata = {
        name: "赋码方式",
        type: "pie",
        radius: ["42%", "65%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 2,
        },
        color: colors,
        data: [
          {
            value: this.stats.fifoSplitOneCount  ,
            name: "拆零赋码数",
            label: {
              shadowColor: colors[0],
            },
          },
          {
            value: this.stats.fifoSplitTwoCount,
            name: "整取赋码数",
            label: {
              shadowColor: colors[1],
            },
          },

        ],
      };
      this.statsChart3 = {

        title: {
          // zlevel: 0,
          text: '赋码类型比率',
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#000000",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#000000",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#000000",
          },
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: {show: true},
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}",
              //   position: "outside",
              rich: {
                b: {
                  color: "#000000",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#2b91c2",
                  fontSize: 14,
                },
                per: {
                  color: "#2b91c2",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: true,

            },
            emphasis: {
              show: true,
            },
          },
          {
            ...piedata,
            tooltip: {show: true},
            itemStyle: {},
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [2.5, -2.5, 2.5, -2.5],
              normal: {
                show: true,
                position: 'inner',
                formatter: "{d}%",
                color: "#fff",
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false,
            },
          },
        ],
      };
    },
  },
  mounted() {

    getHead('collectOrderStats', '1').then((re) => {
      // 处理返回的数据
      this.tableObj = re.data
      this.tableHeader = re.data.tableList
      this.queryList = re.data.queryList
      this.fromList = re.data.fromList
      this.getList()

    })
  }
}
</script>

<style scoped lang="scss">
.center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.el-row .el-card {
  margin: 0;

  .el-card__body {
    padding: 0 !important;
  }
}

.el-card {
  /* margin-right: 15px; */
  /* margin-left: 15px; */
  margin-top: 15px;
  /* transition: all .5s; */
}

.grid-itemCard {
  /* 确保卡片是正方形，并且有一定的间距 */
  margin: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.grid-item {
  height: 100%;
  padding: 15px;

  .el-row, .el-col {
    height: 100%;
  }

  .header {
    color: #676a6c;
    font-size: 20px;
    font-weight: bolder;
  }

  .el-table {
    margin-top: 10px;
    width: 100%;
  }
}

.grid-container {
  height: inherit;
  display: grid;
  grid-gap: 10px;

  .el-card {
    margin: 0;
  }
}

.grid-container1 {
  grid-template-columns: repeat(1, 1fr);
}


.grid-container2 {
  grid-template-columns: repeat(2, 1fr);

}

.grid-container3 {
  grid-template-columns: repeat(3, 1fr);

}

.grid-container4 {
  grid-template-columns: repeat(4, 1fr);

}

.home {

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  height: calc(100%);
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    color: #000610;
    font-weight: bolder;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

}
.container {
  overflow: hidden; /* 清除浮动 */
}
.left {
  float: left;
  width: 25%;
}
.middle {
  float: left;
  width: 37.5%;
}
.right {
  float: left;
  width: 37.5%;
}
//左右两侧 三个块
.contetn_lr-item {
  height: 282px;
  margin-top: 10px;
}

</style>

