<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="background-color: #fff; margin-top: 20px;">
      <el-col :xs="24" :sm="24">
        <el-row>
          <el-col :xs="12" :sm="6" style="display: flex;  height: 120px;">
            <div style=" text-align: center; margin-right: 20px;" class="hedse_radt">
              <div class="hedse_radtone">
                <p>当前单位</p>
                <p>{{panelChartDatas.dqdw}}</p>
              </div>
              <div class="hedse_radttwo">
                <div>
                  <p>乡镇</p>
                  <p>{{panelChartDatas.zhen}}</p>
                </div>
                <div>
                  <p>村</p>
                  <p>{{panelChartDatas.cun}}</p>
                </div>
              </div>
              <p class="p"></p>
            </div>
          </el-col>
          <el-col :xs="12" :sm="9" style="display: flex; align-items: center;position: relative; justify-content: space-between; height: 120px;">
            <div class="nav_raet" style="width: 30%;">
              <p >常住人口</p>
              <p style=" color: #F69F24;">{{panelChartDatas.czzrs}}</p>
            </div>
            <panel-groupfour :chart-data="panelChartDatas" />

            <div class="nav_raetone"  style="width: 50%;">
              <div class="nav_raetones" style="width: 60%;">
                <p style="text-align: center;">新增</p>
                <p style=" color: #46D871; text-align: center;">{{panelChartDatas.czxz}}</p>
              </div>
              <div class="nav_raetoness" style="width: 40%;">
                <p style="text-align: center;">减少</p>
                <p style=" color: #F52F2F; text-align: center;">{{panelChartDatas.czjs}}</p>
              </div>
            </div>
            <p class="p"></p>

          </el-col>
          <el-col :xs="12" :sm="9" style="display: flex; align-items: center;position: relative; justify-content: space-between; height: 120px;">
            <div class="nav_raet" style="width: 25%;">
              <p>户籍人口</p>
              <p style=" color: #9836C1;">{{panelChartDatas.hjzrs}}</p>
            </div>
            <panel-groupther :chart-data="panelChartDatas"  />
            <div class="nav_raetone"  style="width: 50%;">
              <div class="nav_raetones" style="width: 60%;">
                <p style="text-align: center;">新增</p>
                <p style=" color: #46D871; text-align: center; ">{{panelChartDatas.hjxz}}</p>
              </div>
              <div class="nav_raetoness" style="width: 40%;">
                <p style="text-align: center;">减少</p>
                <p style=" color: #F52F2F; text-align: center;">{{panelChartDatas.hjjs}}</p>
              </div>
            </div>

          </el-col>

        </el-row>
      </el-col>
    </el-row>

    <!-- 列表 -->

    <div class="tabsty" v-if="panelChartDatas.dqdw == '潜山市'">
      <div class="tabbuut">
        <p>各乡镇人口信息表</p>
        <!-- <el-button  size="small" @click="handleExport" type="primary">导出</el-button> -->
      </div>
      <el-table v-loading="loading" :data="panelChartDatas.townDatas"
        style="width: 100%;"  stripe border height="280" :show-overflow-tooltip="true">
        <el-table-column prop="zhen" label="乡镇"  align="center"/>
        <el-table-column prop="cun" label="村"  align="center" width="180"/>
        <el-table-column prop="zu" label="组"  align="center"/>
        <el-table-column prop="czzrs" label="常住人口"  align="center"/>
        <el-table-column prop="hjzrs" 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 style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"  v-if="nhye"/></el-row>

    <!-- <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 {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';
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 {
      lineChartData: {},
      dayList: 1, //判断天周月
      taye: 'newVisitis', //根据点击天周月变换，折线图数据变换
      panelChartData: {},
      panelChartDatas:{},
      panelChartDataleid:{},
      panelChartDatayuanh:[],
      tableData: [
      ], //表格数据
      // 总条数
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: false,
      deviceIpOptions:{},
      panelChartDatazhuzh:{},
      nhye:false
    };
  },
  mounted(){
   // this.yuanhaun(1)
   // this.tableList()



   // 折线
   this.zhexianList()


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

   //户籍列表
   this.lisdtwe()
  },
  methods: {
    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(){
      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.panelChartDatazhuzh = 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);
       })
   }

  }
};
</script>

<style lang="scss">
.tabsty {
  .el-table .el-table__header-wrapper th {
    background-color: #7bcbff;
    color: #fff;
    border:0 !important;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #e9f1f7;
  }
  .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;
}
.hedse_radt {
  height: 100%;
  padding-top: 24px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
  padding-left: 26px;
  padding-bottom: 24px;
  .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: 33.33%;
    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: 20px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #00a8ec;
    }

  }
  .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: 20px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #546fc6;
    }
  }
}
.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%;
    }
</style>
