<template>
  <div class="execution">
    <basic-container>
      <el-card shadow="hover" style="margin: 10px">
        <!-- 今日统计 -->
        <avue-data-tabs :option="FN1()" v-if="JSON.stringify(this.HeadStatData) !== '{}'"></avue-data-tabs>
      </el-card>
      <el-card shadow="hover" style="margin: 10px">
        <!-- Echarts 商品折线图、交易额柱状图 -->
        <el-row :span="24">
          <el-col :span="12">
            <el-card id="echart01" shadow="hover" style="margin-right: 10px">
              <div class="datePicker">
                年
                <el-date-picker v-model="saleDate" value-format="yyyy" type="year" placeholder="选择年" @change="saleDateChange"/>
              </div>
              <v-chart id="myChart01" style="width: 100%; height: 370px;" :options="FN2()" />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card id="echart01" shadow="hover" style="margin-right: 10px; margin-left: 10px;">
              <ul class="inventory">
                <li class="li-th">
                  <div class="flex1">排名</div>
                  <div class="flex5">客户姓名</div>
                  <div class="flex1">销售数量</div>
                  <div class="flex2">销售金额</div>
                </li>
                <li v-for="item in CustRankData" :key="item.rankNo">
                  <div class="flex1">{{ item.rankNo}}</div>
                  <div class="flex5" :title="item.custName">{{ item.custName }}</div>
                  <div class="flex1">{{ item.exWarehouseQyt }}</div>
                  <div class="flex2">{{ item.totalAmount }}</div>
                </li>
              </ul>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

      <el-card shadow="hover" style="margin: 10px">
        <el-row :span="24">
          <el-col :span="12">
            <el-card id="echart02" shadow="hover" style="margin-right: 10px">
              <v-chart id="myChart03" style="width: 100%; height: 400px" :options="FN3()" />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card id="echart01" shadow="hover" style="margin-right: 10px; margin-left: 10px;">
              <div slot="header" class="clearfix">
                <span class="new_tip">消息通知</span>
                <!-- <el-button class="new_tip" style="float: right; padding: 3px 0" type="text">更多>></el-button> -->
              </div>
              <div class="news">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity) in MessageData"
                    :key="activity.id"
                    :timestamp="activity.msgTime">
                    {{activity.hander + ':&nbsp;&nbsp;&nbsp;&nbsp;'}}{{activity.msgContent}}
                  </el-timeline-item>
                </el-timeline>
                <avue-empty desc="暂无消息" v-show="MessageData.length === 0"/>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </basic-container>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'
import {
  getHeadStatAPI,
  getCustRankAPI,
  getSaleStatAPI,
  getMessageAPI
} from '@/api/firstpage/firstpage'
export default {
  components: {
    'v-chart': ECharts,
  },
  data: () => ({
    activities: [
      {
        content: '活动按期开始',
        timestamp: '2018-04-15'
      },
      {
        content: '活动按期开始',
        timestamp: '2018-04-15'
      },
      {
        content: '出库了300件',
        timestamp: '2018-04-13'
      },
      {
        content: '通过审核',
        timestamp: '2018-04-13'
      },
      {
        content: '通过审核',
        timestamp: '2018-04-13'
      },
      {
        content: '通过审核',
        timestamp: '2018-04-13'
      },
      {
        content: '通过审核',
        timestamp: '2018-04-13'
      },
      {
        content: '创建成功',
        timestamp: '2018-04-11'
      }
    ],
    saleDate: new Date().getFullYear().toString(),
    HeadStatData: {},
    CustRankData: '',
    MessageData: '',
    Ex: [],
    Ware: [],
  }),
  created() {
    this.getHeadStat()
    this.getCustRank()
    this.getSaleStat()
    this.getMessage()
  },
  mounted() {
    setTimeout(() => {
      this.getHeadStat()
    },2000)
  },
  methods: {
    async getHeadStat() {
      const res = await getHeadStatAPI()
      const { data } = res
      this.HeadStatData = data.data
    },
    async getCustRank() {
      const res = await getCustRankAPI()
      const { data } = res
      this.CustRankData = data.data
    },
    async getSaleStat() {
      const res = await getSaleStatAPI(this.saleDate)
      const { data } = res
      let SaleStatData = data.data
      this.Ex = []
      this.Ware = []
      for (let i = 0; i < SaleStatData.length; i++) {
        this.Ex.push(SaleStatData[i].monExWarehouseQyt)
        this.Ware.push(SaleStatData[i].monWarehousingQyt)
      }
    },
    async getMessage() {
      const res = await getMessageAPI()
      const { data } = res
      
      this.MessageData = data.data
      console.log(this.MessageData)
    },
    FN1() {
      return {
        span: 6,
        data: [
          {
            title: '出库数量',
            subtitle: '今日',
            count: this.HeadStatData.todayExWarehouseQyt,
            allcount: this.HeadStatData.allExWarehouseQyt,
            text: '总计',
            color: '#ed8719',
            key: '管'
          },
          {
            title: '入库数量',
            subtitle: '今日',
            count: this.HeadStatData.todayWarehousingQyt,
            allcount: this.HeadStatData.allWarehousingQyt,
            text: '总计',
            color: 'rgb(230, 71, 88)',
            key: '理'
          },
          {
            title: '销售额',
            subtitle: '今日',
            count: this.HeadStatData.todayExWarehouseAmount,
            allcount: this.HeadStatData.allExWarehouseAmount,
            text: '总计',
            color: 'rgb(27, 201, 142)',
            key: '系'
          },
          {
            title: '库存总数',
            subtitle: '今日',
            count: this.HeadStatData.allInvtoryQyt,
            allcount: this.HeadStatData.allInvtoryQyt,
            text: '总计',
            color: '#08afc2',
            key: '统'
          },
        ]
      }
    },
    FN2() {
      return {
        width: '95%',
        title: {
          text: `{a|销售统计} {b|单位：片}`,
          subtextStyle: {  //小标题样式
            color: '#ff4536'
          },
          textStyle: {
            rich: {
              a: {
                fontSize:18,
                color: '#0d95e1',
                fontWeight:900,
              },
              b: {
                fontSize:14,
                fontFamily: 'SimHei',
                color: 'black',
              }
            }
          }  
        },
        tooltip: {
          trigger: 'axis'
        },
        // 图例组件
        legend: {
          bottom: '0',
          right: '0',
          data: ['入库数', '出库数']
        },
        grid: {
          left: '3%',
          right: '2%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '入库数',
            type: 'bar',
            stack: '单元式本月销售量',
            data: this.Ware
          },
          {
            name: '出库数',
            type: 'bar',
            stack: '公寓式本月销售量',
            data: this.Ex
          },
        ]
      }
    },
    FN3() {
      let num1 = (this.HeadStatData.allWarehousingAmount / 10000) .toFixed(2)
      let num2 = (this.HeadStatData.allExWarehouseAmount / 10000) .toFixed(2)
      return {
        color: ['#0d95e1'],
        width: '95%',
        title: {
          text: `{a|收支统计} {b|单位：万元}`,
          subtextStyle: {  //小标题样式
            color: '#ff4536'
          },
          textStyle: {
            rich: {
              a: {
                fontSize:18,
                color: '#0d95e1',
                fontWeight:900,
              },
              b: {
                fontSize:14,
                fontFamily: 'SimHei',
                color: 'black',
                paddingBottom: 0,
              }
            }
          },
        },
        tooltip: {
          trigger: 'item', // 在图形上才会触发提示
          formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示的文字显示的格式
          // a: 系列名
          // b: 数据名
          // c: 数值
          // d: 百分比 (只有饼状图生效)
        },
        color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'], // 系列颜色
        legend: { // 图例组件
          bottom: 10,
          left: 'center',
          data: ['支出', '收入'] // 每个部分对应的数据名(要和series里name对应)
        },
        series: [
          {
            name: '收支统计',
            type: 'pie',
            radius: '70%',
            center: ['50%', '45%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              formatter: '{a} \n{b} : {c} ({d}%)',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              lineHeight: 22,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                b: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
              }
            },
            data: [
              { value: num1, name: '支出' },
              { value: num2, name: '收入' }
            ]
          }
        ]
      }
    },
    async saleDateChange(v) {
      this.saleDate = v
      this.getSaleStat()
    }
  }
}
</script>

<style scoped>
.spannel_list {
  margin-top: 20px;
}

.spannelIcon {
  width: 20%;
  height: 100px;
  background-color: red;
}

.spannel {
  height: 100px;
  overflow: hidden;
  text-align: center;
  position: relative;
  background-color: #fff;
  border: 1px solid #e7e7e9;
  margin-bottom: 20px;
}

.spannel em {
  font-style: normal;
  font-size: 50px;
  line-height: 50px;
  display: inline-block;
  margin: 10px 0 0 20px;
  font-family: "Arial";
  color: #83a2ed;
}

.spannel span {
  font-size: 14px;
  display: inline-block;
  color: #83a2ed;
  margin-left: 10px;
}

.spannel b {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 24px;
  background: #e5e5e5;
  color: #333;
  font-size: 14px;
  font-weight: normal;
}

.scolor01 em,
.scolor01 span {
  color: #6ac6e2;
}

.scolor02 em,
.scolor02 span {
  color: #5fd9de;
}

.scolor03 em,
.scolor03 span {
  color: #58d88e;
}

.gragh_pannel {
  height: 350px;
  border: 1px solid #e7e7e9;
  background-color: #fff !important;
  margin-bottom: 20px;
}

.inventory {
  margin: 0;
  padding: 0;
  height: 400px;
  list-style: none;
}

.new_tip {
  color: rgb(83, 159, 255);
  font-weight: bold;
}

.news {
  height: 340px;
  overflow: auto;
}

.news::-webkit-scrollbar {
  width: 5px;
  background-color: #12d8d8;
}

.news::-webkit-scrollbar-thumb {
  width: 5px;
  background-color: #008c8c;
}

.inventory li.li-th {
  background-color: #008c8c;
  color: #fff;
}
.inventory li {
  display: flex;
  height: 34px;
  line-height: 34px;
  background-color: rgb(248, 248, 248);
  border-radius: 20px;
  margin-bottom: 4px;
  text-align: center;
  /* color: #fff; */
}

/* .inventory li div:nth-child(2){
  color: red;
  width: 150px;
  overflow: hiddden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */

.flex1 {
  flex: 1;
}

.flex5 {
  flex: 5;
}

.flex2 {
  flex: 2;
}

.datePicker {
  height: 33px;
  text-align: right;
}
</style>