<template>
  <div class="dashboard-editor-container">
    <!-- <div class="header">
      <p @click="day(1)" :class="[dayList == 1 ? 'heade_cod' : '']">天</p>
      <p>{{ '\xa0\xa0' }}|{{ '\xa0\xa0' }}</p>
      <p @click="day(2)" :class="[dayList == 2 ? 'heade_cod' : '']">周</p>
      <p>{{ '\xa0\xa0' }}|{{ '\xa0\xa0' }}</p>
      <p @click="day(3)" :class="[dayList == 3 ? 'heade_cod' : '']">月</p>
    </div> -->
    <el-row style=" margin-top: 20px;" :gutter="30">
     <!-- <el-col :xs="24" :sm="24">
        <el-row> -->
          <!-- <div class="njues"> -->
            <el-col :xs="24" :sm="14" >
              <el-row type="flex" justify="space-between" :gutter="30">
                <el-col>
                  <div class="nchead ncheadl" @click="nlshe">
                    <div class="ncheadtit">本月核酸总人数</div>
                    <div class="ncheadtxt">{{deviceIpOptions.indexDataMonth == null? '暂无数据' : deviceIpOptions.indexDataMonth}}</div>
                  </div>
                  </el-col>
                  <el-col>
                  <div class="nchead ncheadc"  @click="nlshefr">
                    <div class="ncheadtit">本周核酸总人数</div>
                    <div class="ncheadtxt">{{deviceIpOptions.indexDataWeek == null? '暂无数据' : deviceIpOptions.indexDataWeek}}</div>
                  </div>
                </el-col>
              </el-row>

            </el-col>
            <!-- 饼图 -->
            <el-col :xs="24" :sm="10">
              <div class="ncheadr">
                <div class="chart_tit">
                  <div style="padding-left: 30px;">
                    <div class="chart_titl">较上周核酸人数比率</div>
                  </div>
                </div>
                <div class="nche_chart">
                  <div class="nche_chartl">
                    <pie-chart :chart-data="deviceIpOptions" />
                  </div>
                  <div class="nche_chartr">
                    <div class="nche_chartrr">
                      <div class="nche_chartra coca">本周核酸人数</div>
                      <div class="nche_chartrb">{{deviceIpOptions.indexDataWeek == null? '暂无数据' : deviceIpOptions.indexDataWeek}}</div>
                      <div class="nche_chartra">占比</div>
                      <div class="nche_chartrb coa" style="margin-bottom: 0; font-size: 28px;">{{deviceIpOptions.resultWeek == null? '暂无数据' : deviceIpOptions.resultWeek}}</div>
                    </div>
                    <div class="nche_chartrr">
                      <div class="nche_chartra cocb">上周核酸人数</div>
                      <div class="nche_chartrb">{{deviceIpOptions.indexDataLastWeek == null? '暂无数据' : deviceIpOptions.indexDataLastWeek}}</div>
                      <div class="nche_chartra" >占比</div>
                      <div class="nche_chartrb cob" style="margin-bottom: 0; font-size: 28px;">{{deviceIpOptions.resultLastWeek == null? '暂无数据' : deviceIpOptions.resultLastWeek}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>

          <!-- </div> -->
       <!-- </el-row>
      </el-col> -->
    </el-row>
    <!-- 新的 -->
    <!-- 折线图数据 -->
    <!-- <el-row :gutter="30"  style="margin-left: 0; margin-right: 0;">
      <el-col  style="padding-left: 0;padding-right: 0;">
        <div class="chart-wrapper dp_zhud" style="  padding: 30px; ">
          <div class="chart_tit">
            <div class="chart_titl">本周职业类别核酸情况统计</div>
            <div class="chart_titr">单位：人</div>
          </div>
          <line-chart :chart-data="newlineChartData" />
        </div>
      </el-col>

    </el-row> -->
    <!-- 柱状图数据 -->
    <el-row :gutter="30"  style="margin-left: 0; margin-right: 0;">
      <el-col  style="padding-left: 0;padding-right: 0;">
        <div class="chart-wrapper dp_zhud" style="  padding: 30px; ">
         <div class="chart_tit">
           <div class="chart_titl">本周职业类别核酸情况统计</div>
           <div class="chart_titr">单位：人</div>
         </div>
          <bar-chart :chart-data="newlChartDatazhuzh" />
        </div>
      </el-col>

    </el-row>

<!-- <el-row :gutter="30"  style="margin-left: 0; margin-right: 0;">
     <el-col :xs="24" :sm="14" style="padding-left: 0;">
       <div class="chart-wrapper dp_zhud" style="  padding: 30px; ">
         <p class="dp_zhudtitle">人员类型统计柱状图 </p>
         <bar-chart :chart-data="panelChartDatazhuzh" />
       </div>
     </el-col>
     <el-col   :xs="24" :sm="10" style="padding-right: 0;" >
       <div class="chart-wrapper dp_zhud"  style=" padding: 30px; ">
          <p class="dp_zhudtitle">人员类型比率 </p>
         <pie-chart :chart-data="panelChartDatayuanh" />
       </div>
     </el-col>
   </el-row> -->
   <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
     <line-chart :chart-data="lineChartData"  v-if="nhye"/></el-row> -->

    <!-- 列表 -->

<!-- v-if="panelChartDatas.dqdw == '潜山市'" -->
    <div class="tabsty" >
     <div class="chart_tit">
       <div class="chart_titl">本周重点人群核酸详情</div>
       <!-- <div class="chart_titra">查看更多 >></div> -->
     </div>
     <div class="chart_titrb">当前时间:{{gettime}}</div>
      <!-- panelChartDatas.townDatas -->
      <!-- tableData -->
      <el-table v-loading="loading" :data="tableData"
        style="width: 100%;"  stripe  height="320" :show-overflow-tooltip="true">
        <el-table-column prop="name" label="姓名"  align="center"/>
        <el-table-column prop="idCard" label="身份证号"  align="center" width="180"/>
        <!-- <el-table-column prop="zu" label="组"  align="center"/> -->
        <el-table-column prop="phoneNum" label="联系电话"  align="center" width="160"/>
        <el-table-column label="重点人群分类" align="center" prop="focusCrowdStyle" width="130"/>
        <el-table-column label="核酸采集时间" align="center" prop="nucleicCollectTime" width="157">
          <template slot-scope="scope">
            <span>{{ scope.row.nucleicCollectTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="核酸结果时间" align="center" prop="nucleicResultsTime" width="157">
          <template slot-scope="scope">
            <span>{{ scope.row.nucleicResultsTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="collectPlace" label="采集地点"  align="center"/>


      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->





    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper"><raddar-chart :chart-data="panelChartDataleid"/></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper"><pie-chart :chart-data="panelChartDatayuanh" /></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper" ><bar-chart :chart-data="panelChartDatazhuzh" /></div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import {listInfo,treeselect,listDevice, exportPost,listzhex,listleida,listdbyh, listzhuzh,listTsde} from "@/api/index";
import PanelGroup from './dashboard/PanelGroup';
import PanelGroups from './dashboard/PanelGroups';
import PanelGroupone from './dashboard/PanelGroupone';
import PanelGrouptwo from './dashboard/PanelGrouptwo';
import PanelGroupther from './dashboard/PanelGroupther';
import PanelGroupfour from './dashboard/PanelGroupfour';
// import LineChart from './dashboard/LineChart';
import RaddarChart from './dashboard/RaddarChart';
// import PieChart from './dashboard/PieChart';
// import BarChart from './dashboard/BarChart';


// 新版
import BarChart from './dashboard/chart/BarChart';
import LineChart from './dashboard/chart/LineChart';
import PieChart from './dashboard/chart/PieChart';
// 新版
const lineChartData = {
  newVisitis: {
    expectedData: [80, 120, 111, 104, 105, 100, 105],
    actualData: [120, 140, 130, 110, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
};

export default {
  name: 'Index',
  components: {
    PanelGroup,
    PanelGroups,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    PanelGroupone,
    PanelGrouptwo,
    PanelGroupther,
    PanelGroupfour
  },
  data() {
    return {
      newlineChartData:{},
      newlChartDatazhuzh:{},
      lineChartData: {},
      dayList: 1, //判断天周月
      taye: 'newVisitis', //根据点击天周月变换，折线图数据变换
      panelChartData: {},
      panelChartDatas:{},
      panelChartDataleid:{},
      panelChartDatayuanh:[],
      tableData: [], //表格数据
      // 总条数
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: false,
      deviceIpOptions:{},
      panelChartDatazhuzh:{},
      nhye:false,
      yuhse:[],
      infoList:[],
      gettime:''
    };
  },
  computed: {
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'tagsView',
          value: val
        })
      }
    },

  },
  mounted(){
   // this.yuanhaun(1)
   // this.tableList()


   // 折线
   // this.zhexianList()

   // 雷达
   // this.leidaList()
   // 底部圆环
   // this.dbyhList()
   // 柱状图
   this.zhuzhList()

   //户籍列表
   this.lisdtwe()
   this.getList()
   // 获取当前时间
   this.getCurrentTime()
  },
  methods: {
    getList() {
      // this.loading = true;
      listInfo(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    // 月 周 天 点击
    day(index) {
      this.dayList = index;
      this.yuanhaun(index)
      if (index == 1) {
        // 天
        this.taye = 'newVisitis';
        this.lineChartData = lineChartData[this.taye];
      } else if (index == 2) {
        // 周
        this.taye = 'messages';
        this.lineChartData = lineChartData[this.taye];
      } else {
        // 月
        this.taye = 'purchases';
        this.lineChartData = lineChartData[this.taye];
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // this.ids = selection.map(item => item.id)
      // this.single = selection.length !== 1
      // this.multiple = !selection.length
    },
    // 表格点击事件
    tabclick(val){
      console.log(val)
      this.$router.push({
        path:'./school/temperatures',
        query:{
          val:val,
        }
      })
      },
    // 圆环数据
    yuanhaun(val){
      treeselect(val).then(response => {
        // this.deviceIpOptions = response.data;
        this.panelChartDatas = this.deviceIpOptions
      });
    },
    // 列表数据
   tableList(){
     listDevice().then(response => {
       this.tableData = response.data;
       // this.panelChartDatas = this.deviceIpOptions

     });
   },
   // 户籍列表
   lisdtwe(){
     this.yuhse = []
      listTsde().then(response => {
        this.deviceIpOptions = response.data;
        // this.panelChartDatas = this.deviceIpOptions
      });
   },
   // 折线图数据
   zhexianList(){
     listzhex().then(response => {
       this.lineChartData = response.data;
       this.nhye = true
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 雷达图
   leidaList(){
     listleida().then(response => {
       this.panelChartDataleid = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 底部圆环数据
   dbyhList(){
     listdbyh().then(response => {
       this.panelChartDatayuanh = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },
   // 柱状图数据
   zhuzhList(){
     listzhuzh().then(response => {
       this.newlChartDatazhuzh = response.data;
       // this.panelChartDatas = this.deviceIpOptions
     });
   },

   /** 导出按钮操作 */
   handleExport() {
     const queryParams = this.queryParams;
     this.$confirm('是否确认导出?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(function() {
         return exportPost();
       }).then(response => {
         this.download(response.msg);
       })
   },
   // 五保户点击
   wbhde(){
     this.$router.push({path: "/business/contraindication"});
     // console.log(this.$store.state.tagsView.visitedViews[0])
     // console.log(  this.$store.state.settings.tagsView,4  )
   },
   dbhde(){
     this.$router.push({path: "/business/vaccinationSite"});
   },
   pkde(){
     this.$router.push({path: "/business/vaccineName"});
   },
   dyde(){
     this.$router.push({path: "/business/keyIndustry"});
   },
   twjrde(){
     this.$router.push({path: "/business/ucleic"});
   },
   nlshe(){
     // this.$router.push({path: "/user/yue"});
   },
   nlshefr(){
     // this.$router.push({path: "/user/yue"});
   },
    getCurrentTime() {
           //获取当前时间并打印
           var _this = this;
           console.log(3)
       　　let yy = new Date().getFullYear();
       　　let mm = new Date().getMonth()+1;
       　　let dd = new Date().getDate();
       　　let hh = new Date().getHours();
       　　let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
       　　let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
       　　_this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
       　　console.log(_this.gettime)
       }

  }
};
</script>

<style lang="scss">
.tabsty {
  .el-table .el-table__header-wrapper th {
    background-color: #EEF5F8;
    color: #343434;
    border:0 !important;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f9f9f9;
  }
  .el-table--group,
  .el-table--border {
    // border-color: #0CA0FF;
    border: 1px solid #0CA0FF;
  }
}
</style>

<style lang="scss" scoped>

.header {
  display: flex;
  text-align: left;
  justify-content: flex-end;
  margin-bottom: 12px;
  p {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 700;
    color: #666666;
    cursor: pointer;
  }
  p:nth-child(1)::before {
    width: 1px;
    background-color: #666;
  }
  .heade_cod {
    color: #00a8ec;
  }
  .el-table--border {
    border: 1px solid #0ca0ff !important;
  }
}
p {
  margin: 0;
}
.njues{
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.hedse_radt {
  height: 130px;
  padding-top: 4px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 19%;
  padding-left: 26px;
  padding-bottom: 36px;
  background:url("../assets/images/opic_rylb_wb.png") no-repeat ;
  background-size: 100%, 100%;
  .p {
    position: absolute;
    right: -28px;
    width: 1px;
    height: 70px;
    background-color: #c7cbd7;
    top: 22%;
  }
  .hedse_radtone {
    // margin-bottom: 30px;
    // padding:  0 26px;
    // text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    p:nth-child(1) {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      text-align: left;
      color: #fff;
    }
    p:nth-child(2) {

     font-size: 28px;
     font-family: PingFang SC;
     font-weight: bold;
     color: #fff;
      text-align: right;
      padding-right: 13px;
      // width: 100%;
      span{
        font-size: 20px !important;
        font-weight: 400;
      }
    }

  }
  .hedse_radttwo {
    display: flex;
    // padding: 0 26px;
    // justify-content: space-between;
    justify-content: space-around;
    flex: 1;
    div{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    p:nth-child(1) {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
    }
    p:nth-child(2) {
      font-size: 48px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fff;
    }
  }
}
.hedse_radts{
    background:url("../assets/images/opic_rylb_db.png") no-repeat ;
    background-size: 100%, 100%;
  }
  .hedse_radtss{
    background:url("../assets/images/opic_rylb_pk.png") no-repeat ;
    background-size: 100%, 100%;
  }
  .hedse_radtsss{
    background:url("../assets/images/opic_rylb_dy.png") no-repeat ;
    background-size: 100%, 100%;
  }
  .hedse_radtssss{
    background:url("../assets/images/opic_rylb_tw.png") no-repeat ;
    background-size: 100%, 100%;
  }
.nav_raet {
  // padding-top: 24px;
  margin-left: 60px;
  p:nth-child(1) {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
  }
  p:nth-child(2) {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #50bd04;
  }
}
.dashboard-editor-container {
  padding: 32px;
  padding-top: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

// 表格央视
.tabsty {
  background-color: #fff;
  width: 100%;
  margin-top: 16px;
  padding: 0 30px;
  padding-top: 23px;
  padding-bottom: 40px;
  margin-bottom: 36px;
}
.tabbuut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  p:nth-child(1) {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
  }
}
.nav_raetone{
  // flex: 1;
  display: flex ;
  // flex-direction: column;
  justify-content: space-between;
  align-content: center;
  // height: 100%;
  text-align: right;
  // padding-top: 18px;
  margin-right: 30px;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box;
  padding-left: 20px;

  p:nth-child(1) {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
  }
  p:nth-child(2) {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #50bd04;
  }
}

.p {
      position: absolute;
      right: -18px;
      width: 1px;
      height: 70px;
      background-color: #c7cbd7;
      top: 22%;
    }

    .dp_zhud{

      .dp_zhudtitle{
        margin-bottom: 10px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }


    }



    // 新布局
    .nchead{
      width:100%;
      height: 270px;
      padding: 50px 39px;
      box-sizing: border-box;
      margin-bottom: 26px;
      box-shadow: 0px 3px 10px 0px rgba(46,46,46,0.0600);
      &.ncheadl{
        background:url("../assets/images/ncbgl.png") no-repeat ;
        background-size: 100%  100%;
      }
      &.ncheadc{
        background:url("../assets/images/ncbgc.png") no-repeat ;
        background-size: 100% 100%;
      }
      .ncheadtit{font-size: 16px;
      font-weight: 500;
      color: #FFFFFF;
      margin-bottom: 20px;
      }
      .ncheadtxt{font-size: 44px;color: #FFFFFF;font-weight: bold;}
    }
    .ncheadr{height: 270px;background: #ffffff;box-shadow: 0px 3px 10px 0px rgba(46,46,46,0.0600);border-radius: 6px;padding: 28px 20px 0px 0px;box-sizing: border-box;margin-bottom:26px ;
    .nche_chart{
      display: flex;align-items: center;
      .nche_chartl{flex:1;max-width: 200px;}
      .nche_chartr{flex: 1;display: flex;min-width: 90px;
        .nche_chartrr{
          width: 50%;
          padding-left: 30px;box-sizing: border-box;
          .nche_chartra{font-size: 14px;font-weight: bold;
color: #343434;margin-bottom: 10px;
          position:relative;
          line-height: 20px;
          &.coca::before{
            width: 14px;
            height: 14px;
            position: absolute;left:-24px; content: '';top: 3px;
            background: #02DB80;
          }
          &.cocb::before{
           width: 14px;
           height: 14px;
           position: absolute;left:-24px; content: '';top: 3px;
            background: #18A6E2;
          }
}
          .nche_chartrb{font-weight: bold;
color: #343434;font-size: 30px;margin-bottom: 20px;
        &.coa{color: #01DB80;}
        &.cob{color: #18A6E2;}

}
        }

      }

    }
    }
    .chart_tit{
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      align-items: center;
      .chart_titl{
        font-size: 16px;
        font-weight: bold;
        color: #343434;
        position: relative;
        &::after{
          width: 30px;
          height: 3px;
          background: #00B385;
          position: absolute;
          bottom: -12px;
          left: 0;
          content: '';
        }
      }
      .chart_titr{
        font-size: 15px;
        color: #343434;
      }
      .chart_titra{
        font-size: 15px;
        color: #9BA2B0;
        cursor: pointer;
      }
    }
    .chart_titrb{font-size: 14px;color: #9BA2B0;margin-bottom: 26px;}
</style>
