<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{$t(900910)}}</label>
        <Select
          v-model="quickDate"
          label-in-value
          clearable
          @on-change="quickDateChange"
          class="searchSelect"
        >
          <Option :value="1" id="今天">{{$t("900911")}}</Option>
          <Option :value="2" id="昨天">{{$t("900390")}}</Option>
          <Option :value="3" id="本周">{{$t("900912")}}</Option>
          <Option :value="4" id="上周">{{$t("900913")}}</Option>
          <Option :value="5" id="本月">{{$t("900914")}}</Option>
          <Option :value="6" id="上月">{{$t("900915")}}</Option>
          <Option :value="7" id="本年">{{$t("900916")}}</Option>
          <Option :value="8" id="上年">{{$t("900917")}}</Option>
        </Select>
      </div>
      <div class="filter">
        <label>{{$t('900908')}}：</label>
        <DatePicker
          type="daterange"
          :value="dateTime"
          placeholder
          class="searchInput middleWidth"
          @on-change="selectDate"
        ></DatePicker>
      </div>
      <div class="filter">
        <label>{{$t('900921')}}</label>
        <Select v-model="productId" clearable @on-change="selectProduct" class="searchSelect">
          <Option v-for="(item,index) in productList" :key="index" :value="item.id">{{ item.name }}</Option>
        </Select>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
        <Button
          type="primary"
          class="fourWord"
          icon=" ivu-icon-md-close-circle"
          @click="clear()"
        >{{$t('1039')}}</Button>
        <Button
          type="primary"
          class="fourWord"
          icon="ios-cloud-download"
          @click="download()"
        >{{$t('1007')}}</Button>
      </div>
    </div>
    <div class="divborder">
      <div style="display:flex;">
        <div class="circle">
          <p>计划生产数量</p>
          <p>{{ summary[0] }}件</p>
        </div>
        <div class="circle">
          <p>实际完工数量</p>
          <p>{{ summary[1] }}件</p>
        </div>
        <div class="circle">
          <p>计划工单数量</p>
          <p>{{ summary[2] }}件</p>
        </div>
        <div id="chart_1" style="width:200px; height:200px; margin-left:20px"></div>
        <div id="chart_2" style="width:200px; height:200px"></div>
        <div id="chart_3" style="width:200px; height:200px"></div>
      </div>
      <Table class="echartsTable" highlight-row :data="tableData" :columns="tableColumns"></Table>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import moment from 'moment';
import config from '@/config';

export default {
    data () {
        return {
            dateTime: [],
            quickDate: 1,
            productList: [],
            productId: '',
            page: 1,
            pagesize: 10,
            toexcel: 0,
            summary: [0, 0, 0, 0, 0, 0],
            tableColumns: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    width: 60
                },
                {
                    title: this.$t('900337'),
                    key: 'code'
                },
                {
                    title: this.$t('100088'),
                    key: 'product_name'
                },
                {
                    title: this.$t('900922'),
                    key: 'quantity'
                },
                {
                    title: this.$t('900923'),
                    key: 'producted_number'
                },
                {
                    title: this.$t('900924'),
                    key: 'delivery_time'
                },
                {
                    title: this.$t('900925'),
                    key: 'difference'
                },
                {
                    title: this.$t('600588'),
                    key: 'ok_number'
                },
                {
                    title: this.$t('600589'),
                    key: 'nok_number'
                },
                {
                    title: this.$t('500123'),
                    key: 'rate'
                }
            ],
            tableData: []
        };
    },
    created () {
        this.initSearchDate();
        this.getProductList();
        this.search()
    },
    methods: {
        initSearchDate () {
            // 初始化搜索日期条件
            let date = new Date();
            let start = this.$time.timestampToTime(date.getTime());
            let end = this.$time.timestampToTime(date.getTime());
            this.dateTime = [start, end];
        },
        clear () {
            this.initSearchDate();
            this.productId = ''
            this.page = 1
            this.pagesize = 10
            this.toexcel = 0
            this.search()
        },
        quickDateChange () {
            let time = this.$time.changetime(this.quickDate).split(' - ');
            this.dateTime = [time[0], time[1]];
        },
        selectDate (dateArr) {
            this.dateTime = [dateArr[0], dateArr[1]];
        },
        getProductList () {
            let _this = this;
            this.axios
                .request({
                    url: '/cnc/Product/GetProducetname',
                    params: {},
                    methods: 'get'
                })
                .then((res) => {
                    let result = res.data;
                    if (result.ret == 1) {
                        _this.productList = result.data;
                    } else {
                        this.$Message.error(_this.$t('' + result.msg));
                    }
                });
        },
        selectProduct () {
            console.log(this.productId);
        },
        search (toexcel) {
            let _this = this;
            const dateTime = _this.dateTime;
            let dateTimeStr = `${dateTime[0]} - ${dateTime[1]}`;
            let params = {
                dateTime: dateTimeStr,
                productName: _this.productId,
                page: _this.page,
                pagesize: _this.pagesize,
                toexcel: toexcel || _this.toexcel
            };
            this.axios
                .request({
                    url: '/cnc/WorkOrder/GetPlanExecute',
                    params,
                    methods: 'get'
                })
                .then((res) => {
                    let result = res.data;
                    if (result.ret == 1) {
                        if (toexcel) {
                            document.location.href = _this.host + '' + result.data;
                        } else {
                            let summary = result.summary;
                            _this.summary = summary;
                            _this.drawCharts(summary[3], summary[4], summary[5]);
                            // _this.drawCharts(90, 55, 60);
                            let data = result.data;
                            data.forEach(function (item, index) {
                                item.delivery_time = _this.toTimestr(item.delivery_time);
                            });
                            console.log(data);
                            _this.tableData = data;
                        }
                    } else {
                        this.$Message.error(_this.$t('' + result.msg));
                    }
                });
        },
        drawCharts (v1, v2, v3) {
            let option1 = {
                color: ['#FF6600', '#ccc'],
                title: {
                    text: '产量达成率',
                    subtext: v1 + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: 'black',
                        fontSize: 18
                    },
                    subtextStyle: {
                        color: 'black',
                        fontSize: 14
                    }
                },
                animation: true,
                tooltip: {
                    show: false
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['80%', '60%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false, // 移动放大
                        clockwise: true, // 逆时针
                        startAngle: 270,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {
                                value: v1,
                                name: ''
                            },
                            {
                                value: 100 - v1,
                                name: 'other',
                                itemStyle: {
                                    normal: {
                                        color: '#ddd'
                                    }
                                }
                            }
                        ]
                    }
                ]
            };
            let option2 = {
                color: ['#FF6600', '#ccc'],
                title: {
                    text: '计划达成率',
                    subtext: v2 + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: 'black',
                        fontSize: 18
                    },
                    subtextStyle: {
                        color: 'black',
                        fontSize: 14
                    }
                },
                animation: true,
                tooltip: {
                    show: false
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['80%', '60%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false, // 移动放大
                        clockwise: true, // 逆时针
                        startAngle: 270,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {
                                value: v2,
                                name: ''
                            },
                            {
                                value: 100 - v2,
                                name: 'other',
                                itemStyle: {
                                    normal: {
                                        color: '#ddd'
                                    }
                                }
                            }
                        ]
                    }
                ]
            };
            let option3 = {
                color: ['#FF6600', '#ccc'],
                title: {
                    text: '质量合格率',
                    subtext: v3 + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: 'black',
                        fontSize: 18
                    },
                    subtextStyle: {
                        color: 'black',
                        fontSize: 14
                    }
                },
                animation: true,
                tooltip: {
                    show: false
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['80%', '60%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false, // 移动放大
                        clockwise: true, // 逆时针
                        startAngle: 270,
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {
                                value: v3,
                                name: ''
                            },
                            {
                                value: 100 - v3,
                                name: 'other',
                                itemStyle: {
                                    normal: {
                                        color: '#ddd'
                                    }
                                }
                            }
                        ]
                    }
                ]
            };
            echarts.init(document.getElementById('chart_1')).setOption(option1);
            echarts.init(document.getElementById('chart_2')).setOption(option2);
            echarts.init(document.getElementById('chart_3')).setOption(option3);
        },
        download () {
            this.search(1);
        },
        toTimestr (time_stamp) {
            const time = new Date(time_stamp * 1000);
            const Y = time.getFullYear();
            const M = (time.getMonth() + 1).toString().padStart(2, '0');
            const D = time.getDate().toString().padStart(2, '0');
            const h = time.getHours().toString().padStart(2, '0');
            const m = time.getMinutes().toString().padStart(2, '0');
            const s = time.getSeconds().toString().padStart(2, '0');
            return `${Y}-${M}-${D} ${h}:${m}:${s}`;
        }
    }
};
</script>

<style lang="less" scoped>
.circle {
  margin-left: 30px;
  margin-top: 20px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  background: #ffaa71;

  p:nth-child(1) {
    text-align: center;
    font-size: 20px;
    padding-top: 50px;
    color:#fff;
  }
  p:nth-child(2) {
    text-align: center;
    font-size: 20px;
    color:rgb(0, 0, 255);
  }
}
</style>
