<template>
  <div class="dashboard-container">
    <el-card style="margin-bottom: 5px">
      <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 :gutter="5" style="margin-bottom: 5px">
      <el-col :span="12">
        <el-card>
          <div style="display: flex">
            <div style="height: 35px; line-height:35px;font-size: 24px;font-weight: bold;vertical-align: middle">任务排期</div>
            <el-date-picker
              v-model="date"
              type="month"
              placeholder="查询日期"
              range-separator="至"
              format="yyyy 年 MM 月"
              value-format="yyyy-MM"
            >
            </el-date-picker>
            <div style="display: flex;border: 1px solid #aaaaaa;border-radius: 6px;height: 35px; line-height:35px;">
              <div style=" cursor: pointer;width: 60px;text-align:center;border-right: 1px solid #aaaaaa;">周</div>
              <div style="width: 60px;text-align:center;border-right: 1px solid #aaaaaa;">月</div>
              <div style="width: 60px;text-align:center;">三个月</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 style="display: flex">
            <div style="height: 35px; line-height:35px;font-size: 24px;font-weight: bold;vertical-align: middle">成品率</div>
            <el-date-picker
              v-model="date"
              type="month"
              placeholder="查询日期"
              range-separator="至"
              format="yyyy 年 MM 月"
              value-format="yyyy-MM"
            >
            </el-date-picker>
            <div style="display: flex;border: 1px solid #aaaaaa;border-radius: 6px;height: 35px; line-height:35px;">
              <div style=" cursor: pointer;width: 60px;text-align:center;border-right: 1px solid #aaaaaa;">周</div>
              <div style="width: 60px;text-align:center;border-right: 1px solid #aaaaaa;">月</div>
              <div style="width: 60px;text-align:center;">三个月</div>
            </div>
          </div>
          <div id="chartColumn" style="width:100%; height:300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="5" style="margin-bottom: 5px">
      <el-col :span="12">
        <el-card>
          <div style="display: flex">
            <div style="height: 35px; line-height:35px;font-size: 24px;font-weight: bold;vertical-align: middle">库存列表</div>
            <div class="block">
              <el-pagination
                :current-page.sync="currentPage"
                :page-size="100"
                layout="prev, pager, next, jumper"
                :total="1000">
              </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 style="display: flex">
            <div style="height: 35px; line-height:35px;font-size: 24px;font-weight: bold;vertical-align: middle">提醒</div>
            <div class="block">
              <el-pagination
                :current-page.sync="currentPage"
                :page-size="100"
                layout="prev, pager, next, jumper"
                :total="1000">
              </el-pagination>
            </div>
          </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,
      currentPage:1,
      total_count:1,
      date:'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'}
      ],
    }
  },
  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: '成品率' },
        /*tooltip: {
          trigger:'axis',
          aXisPointer:{
            type:'cross'
          },
          formatter(params){
            for(let x in params){
              return params[x].name +":"+params[x].data+"%";
            }
          },
        },*/
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
           var color = params.color;//图例颜色
           // var color = "red";//图例颜色
            var 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: {
          data: ["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框", "成品"]
        },
        yAxis: {},
        series: [{
          name: '成品率',
          type: 'bar',
          barWidth: 40,
          data: [80,60,60, 70, 76, 80, 90, 70],
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            formatter: '{c}%',//显示百分号
            textStyle: { //数值样式
              color: 'black',//字体颜色
              fontSize: 10//字体大小
            }
          },
          itemStyle: {
            normal: {
              color: function(params) {
                var colorList = [
                  '#5e7e54','#e44f2f','#81b6b2','#eba422',
                  '#1bcde4','#b61b08','#84eb84','#d8d417'
                ];
                return colorList[params.dataIndex]
              },

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

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 5px 6px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.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);
}
</style>
