<template>
  <div class="dashboard-container">
    <el-card class="dashboardTopCard">
      <div class="cards">
        <div class="cardFirstText">本月：2</div>
        <div class="cardSecondText">20</div>
        <div>合同总数</div>
      </div>
      <div class="cards">
        <div class="cardFirstText">本月：20</div>
        <div class="cardSecondText">20</div>
        <div>生产订单总数</div>
      </div>
      <div class="cards">
        <div class="cardFirstText">在制：10</div>
        <div class="cardSecondText">20</div>
        <div>已排产生产任务</div>
      </div>
      <div class="cards">
        <div class="cardFirstText">本月：4</div>
        <div class="cardSecondText">2</div>
        <div>累计交付产品数</div>
      </div>
      <div class="cards">
        <div class="cardFirstText">本月：2</div>
        <div class="cardSecondText">2</div>
        <div>累计不合格产品数</div>
      </div>
    </el-card>
    <el-row class="dashboardSubRow" :gutter="5">
      <el-col :span="12">
        <el-card>
          <div class="dashboardCardHand">
            <div class="dashboardCardTitle">任务排期</div>
            <div class="dashboardCardFilter">
              <el-date-picker
                v-model="tableDate"
                type="month"
                placeholder="查询日期"
                range-separator="至"
                format="yyyy 年 MM 月"
                value-format="yyyy-MM"
                @change="searchTimeChange('1')"
              >
              </el-date-picker>
              <div class="convenientWrap">
                <div class="convenientBtn" :class="{activeIndex:tableIndex==='1'}" @click="convenientClick('1','week')">本周</div>
                <div class="convenientBtn" :class="{activeIndex:tableIndex==='2'}" @click="convenientClick('1','month')">本月</div>
                <div class="convenientBtn" :class="{activeIndex:tableIndex==='3'}" @click="convenientClick('1','quarter')">三个月</div>
              </div>
            </div>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            border fit stripe
            height="300"
           >
            <el-table-column type="index" width="50" />
            <el-table-column label="任务编号">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="产品名称">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="产品型号">
              <template slot-scope="scope">{{ scope.row.card }}</template>
            </el-table-column>
            <el-table-column label="生产数量">
              <template slot-scope="scope">{{ scope.row.sco }}</template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="dashboardCardHand">
            <div class="dashboardCardTitle">成品率</div>
            <div class="dashboardCardFilter">
              <el-date-picker
                v-model="chartDate"
                type="month"
                placeholder="查询日期"
                range-separator="至"
                format="yyyy 年 MM 月"
                value-format="yyyy-MM"
                @change="searchTimeChange('2')"
              >
              </el-date-picker>
              <div class="convenientWrap">
                <div class="convenientBtn" :class="{activeIndex:chartIndex==='1'}" @click="convenientClick('2','week')">本周</div>
                <div class="convenientBtn" :class="{activeIndex:chartIndex==='2'}" @click="convenientClick('2','month')">本月</div>
                <div class="convenientBtn" :class="{activeIndex:chartIndex==='3'}" @click="convenientClick('2','quarter')">三个月</div>
              </div>
            </div>
          </div>
          <div id="chartColumn" style="width:100%; height:300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="dashboardSubRow" :gutter="5">
      <el-col :span="12">
        <el-card>
          <div class="dashboardCardHand">
            <div class="dashboardCardTitle">库存列表</div>
            <div class="block">
              <el-pagination
                :current-page.sync="stockPage"
                :page-size="stockPageSize"
                layout="prev, pager, next, jumper"
                :total="stockTotal"
                pager-count="3"
                :page-sizes="[10, 20, 30, 40]"
                @size-change="handleStockSizeChange"
                @current-change="handleStockCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            border fit stripe
            height="300"
          >
            <el-table-column label="物料编号">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="物料名称">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="规格型号">
              <template slot-scope="scope">{{ scope.row.card }}</template>
            </el-table-column>
            <el-table-column label="物料类型">
              <template slot-scope="scope">{{ scope.row.sco }}</template>
            </el-table-column>
            <el-table-column label="单位">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="库存">
              <template slot-scope="scope">{{ scope.row.card }}</template>
            </el-table-column>
            <el-table-column label="仓库">
              <template slot-scope="scope">{{ scope.row.sco }}</template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 350px">
          <div class="dashboardCardHand">
            <div class="dashboardCardTitle">提醒</div>
            <div class="block">
              <el-pagination
                :current-page.sync="remindPage"
                :page-size="remindPageSize"
                layout="prev, pager, next, jumper"
                :total="remindTotal"
                @size-change="handleRemindSizeChange"
                @current-change="handleRemindCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
          <div class="lists">
            <ul style="padding-right: 40px">
              <li style="height: 50px;line-height: 50px;font-size: 20px">
                <div style="display: flex;justify-content: space-between">
                  <span>玻璃低于安全库存</span><span>2021-12-30</span>
                </div>
              </li>
              <li style="height: 50px;line-height: 50px;font-size: 20px">
                <div style="display: flex;justify-content: space-between">
                  <span>某某批货临近交货日期</span><span>2021-12-20</span>
                </div>
              </li>
              <li style="height: 50px;line-height: 50px;font-size: 20px">
                <div style="display: flex;justify-content: space-between">
                  <span>玻璃低于安全库存</span><span>2021-11-30</span>
                </div>
              </li>
              <li style="height: 50px;line-height: 50px;font-size: 20px">
                <div style="display: flex;justify-content: space-between">
                  <span>某某批货临近交货日期</span><span>2021-11-20</span>
                </div>
              </li>
            </ul>
          </div>
          <!--<el-badge :value="count.total_count" class="item" @click.native="gotoTicketPage">
            <el-icon class="el-icon-s-management" style="font-size: 70px;color: #d29898"></el-icon>
          </el-badge>
          <div></div>
          <div class="dashboard-text">name: {{ name }}</div>
          <div class="dashboard-text">perms:
            <span v-for="perm in perms" :key="perm">{{ perm }}</span>
          </div>-->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
import { mapGetters } from 'vuex';
export default {
  name: 'Dashboard',
  data() {
    return {
      chartColumn: null,
      stockPage:1,
      stockPageSize:10,
      stockTotal:100,
      remindPage:2,
      remindPageSize:20,
      remindTotal:100,
      tableIndex:null,
      chartIndex:null,
      tableDate:'2021-12',
      chartDate:'2021-12',

      list:[
        {id:1,name:'HIehd9',card:'3337',sco:'REF-32'},
        {id:1,name:'HIehd9',card:'3337',sco:'REF-32'},
        {id:1,name:'HIehd9',card:'3337',sco:'REF-32'}
      ],
      seriesData:[80,60,60, 70, 76, 80, 90, 70],
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'perms',
      'count'
    ])
  },
  methods:{
    gotoTicketPage(){
      let path = this.$route.path;
      if(path==='/workflow/ticket'){
        this.$message.success("已在当前页面");
      }else{
        this.$router.push({name:'ticket',params:{}})
      }
    },
    //图标渲染
    drawChart() {
      this.chartColumn = echarts.init(document.getElementById('chartColumn'));
      this.chartColumn.setOption({
        // title: { text: '成品率' },
        grid: {
          top: '10%',
          left: '3%',
          right: '5%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          /* formatter(params){
            for(let x in params){
              return params[x].name +":"+params[x].data+"%";
            }
          }*/
          formatter: function (params) {
            let color = params.color;//图例颜色
            let htmlStr ='<div>';
            htmlStr += params.name + '<br/>';
            htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:'+color+';"></span>';
            htmlStr += params.seriesName + '：'+params.value + '%';
            htmlStr += '</div>';
            return htmlStr;
          }
        },
        xAxis: {
          name:'工序',
          axisTick: {
            show: false
          },
          splitLine: {
            show: false, //去掉X轴分割线
          },
          data: ["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框", "成品"]
        },
        yAxis: {
          axisLine:{
            show:true,//y轴线
          },
          axisTick: {
            show: false//Y轴刻度线
          },
          axisLabel:{
            color:'#333333'//Y轴文本颜色
          },
          splitLine: {
            show: true, //Y轴分割线
            lineStyle:{
              color:'#dddddd'//Y轴分割线颜色
            }
          },
        },
        series: [{
          name: '成品率',
          type: 'bar',
          barWidth: 40,
          data: this.seriesData,
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            formatter: '{c}%',//显示百分号
            textStyle: { //数值样式
              color: 'black',//字体颜色
              fontSize: 10//字体大小
            }
          },
          itemStyle: {
            normal: {
              color: function(params) {
                let colorList = [
                  '#5e7e54','#e44f2f','#81b6b2','#eba422',
                  '#1bcde4','#b61b08','#84eb84','#d8d417'
                ];
                return colorList[params.dataIndex]
              },
            }
          },
        }]
      });
    },
    //便捷查询按钮
    convenientClick(index,type){
      let startTime = '',endTime = '',url='',activeIndex = '1',obj = new Object();
      let dat = new Date();
      let currentTime = dat.getTime();
      let currentYear = dat.getFullYear();
      let currentMonth =  dat.getMonth() + 1;
      let currentDay =  dat.getDate();
      endTime = currentYear+'-'+currentMonth+''+currentDay;
      if(type==='week'){
        activeIndex = '1';
        let time = currentTime-6*24*60*60*1000;
        let start = new Date(time);
        startTime = start.getFullYear()+'-'+(start.getMonth()+1)+'-'+start.getDate();
      }else if(type==='month'){
        activeIndex = '2';
        let time = currentTime-30*24*60*60*1000;
        let start = new Date(time);
        startTime = start.getFullYear()+'-'+(start.getMonth()+1)+'-'+start.getDate();
      }else if(type==='quarter'){
        activeIndex = '3';
        let time = currentTime-120*24*60*60*1000;
        let start = new Date(time);
        startTime = start.getFullYear()+'-'+(start.getMonth()+1)+'-'+start.getDate();
      }
      obj.startTime = startTime;
      obj.endTime = endTime;
      if(index==='1'){
        this.tableDate = null;
        this.tableIndex = activeIndex;
      }else{
        this.chartDate = null;
        this.chartIndex = activeIndex;
      }
      //根据时间和类型获取数据
    },
    //选择月份
    searchTimeChange(index){
      if(index==='1'){
        this.tableIndex = null;
      }else{
        this.chartIndex = null;
      }
    },
    handleStockSizeChange(val){
      this.stockPageSize = val;
      this.stockPage = 1;
    },
    handleStockCurrentChange(val){
      console.log(`当前页: ${val}`);
    },
    handleRemindSizeChange(val){
      this.remindPageSize = val;
      this.remindPage = 1;
    },
    handleRemindCurrentChange(val){
      console.log(`当前页: ${val}`);
    },
  },

  mounted () {
    this.drawChart()
  },
  updated () {
    this.drawChart()
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 5px 6px;
}
.dashboard-text {
  font-size: 30px;
  line-height: 46px;
}
.dashboardTopCard{
  margin-bottom: 5px;
  .cards{
    width: 240px;
    color: #ffffff;
    background: #abccec;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
    line-height: 30px;
    float: left;
    margin: 15px;
    .cardFirstText{
      text-align: left;
      padding-left: 20px;
    }
    .cardSecondText{
      font-size: 30px;
    }
  }
}
.cards:hover{
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.dashboardSubRow{
  margin-bottom: 5px;
  .dashboardCardHand{
    display: flex;
    justify-content: space-between;
    .dashboardCardTitle{
      height: 35px;
      line-height:35px;
      font-size: 24px;
      font-weight: bold;
      vertical-align: middle;
    }
    .dashboardCardFilter{
      display: flex;
      .convenientWrap{
        display: flex;
        border: 1px solid #DCDFE6;
        border-radius: 6px;
        height: 35px;
        line-height:35px;
        margin-left: 10px;
        .convenientBtn{
          cursor: pointer;
          width: 60px;
          text-align:center;
          border-right: 1px solid #DCDFE6;
        }
        .convenientBtn:last-child{
          border-right: 0;
          border-radius: 0 6px 6px 0;
        }
        .convenientBtn:first-child{
          border-radius: 6px 0 0 6px;
        }
        .activeIndex{
          color: #ffffff;
          background: #409EFF;
        }
      }
    }

  }

}
</style>
