<template>
  <div class="testdiv">
    <!-- 查询条件 -->
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{$t('300038')}}：</label>
        <Input class="searchInput" type="text" v-model="orderNo" />
      </div>
      <div class="filter">
        <label>{{$t('100088')}}：</label>
        <Input class="searchInput" type="text" v-model="productName" />
      </div>
      <div class="filter">
        <label>{{$t('900908')}}：</label>
        <DatePicker
          type="daterange"
          :value="dateTime"
          placeholder
          class="searchInput middleWidth"
          @on-change="selectDate"
        ></DatePicker>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
      </div>
    </div>
    <!-- 数据展示 -->
    <div class="divborder orderList">
      <div class="orderItem" v-for="(item,index) in orderList" :key="index">
        <div class="top">
          <p>
            <span>订单号:</span>
            <span>{{ item.ordernumber }}</span>
          </p>
        </div>
        <div class="bot">
          <div class="bot_left">
            <i-table :columns="columns" :data="item.progresses"></i-table>
          </div>
          <div class="bot_right">
            <div class="echart" :id="'chart_'+item.ordernumber"></div>
          </div>
        </div>
        <p class="more" @click="more(item.progresses)">查看更多</p>
      </div>
    </div>
    <!-- 弹窗 -->
    <Modal v-model="showModel" @on-ok="confirm" width="720">
      <!-- 弹框上面的数据 -->
      <i-table :columns="columns_modal" :data="progresses_modal"></i-table>
    </Modal>
  </div>
</template>
<script>
import echarts from 'echarts';

export default {
    data () {
        return {
            showModel: false,
            dateTime: [], // 搜索条件时间范围
            columns_modal: [
                {
                    title: '产品名称',
                    key: 'product_name'
                },
                {
                    title: '工单号',
                    key: 'code'
                },
                {
                    title: '计划开始时间',
                    key: 'start'
                },
                {
                    title: '计划结束时间',
                    key: 'end'
                },
                {
                    title: '计划数量',
                    key: 'quantity'
                },
                {
                    title: '已完成',
                    key: 'finished'
                }
            ],
            orderNo: '',
            productName: '',
            columns: [
                {
                    title: '产品名称',
                    key: 'product_name'
                },
                {
                    title: '计划数量',
                    key: 'quantity'
                },
                {
                    title: '已完成',
                    key: 'finished'
                }
            ],
            orderList: [],
            progresses_modal: []
        };
    },
    mounted () {
        this.initSearchTime();
        this.search()
    },
    methods: {
        initSearchTime () {
            // 初始化搜索条件时间范围
            let date = new Date();
            let start = this.$time.timestampToTime(
                date.getTime() - 3600 * 1000 * 24 * 6
            );
            let end = this.$time.timestampToTime(date.getTime());
            this.dateTime = [start, end];
        },
        selectDate (dateArr) {
            this.dateTime = [dateArr[0], dateArr[1]];
        },
        more (progresses) {
            this.showModel = true;
            this.progresses_modal = progresses;
        },
        confirm () {
            this.showModel = false;
            this.progresses_modal = [];
        },
        search () {
            let _this = this;
            const dateTime = _this.dateTime;
            let dateTimeStr = `${dateTime[0]} - ${dateTime[1]}`;
            let params = {
                productname: _this.productName,
                ordernumber: _this.orderNo,
                dateTime: dateTimeStr
            };
            _this.axios
                .request({
                    url: '/cnc/WorkOrder/GetWorkOrderProgress',
                    params,
                    methods: 'get'
                })
                .then((res) => {
                    let result = res.data;
                    if (result.ret == 1) {
                        let data = result.data;
                        _this.orderList = data;
                        _this.$nextTick(() => {
                            _this.drawCharts(data);
                        });
                    } else {
                        this.$Message.error(_this.$t('' + result.msg));
                    }
                });
        },
        drawCharts (orderList) {
            orderList.forEach(function (item, index) {
                let option = {
                    color: ['#03B915', '#80FFFF'],
                    title: {
                        text: '工单进度',
                        subtext: item.total_progress + '%',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: 'black',
                            fontSize: 18
                        },
                        subtextStyle: {
                            color: 'black',
                            fontSize: 14
                        }
                    },

                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['90%', '60%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false, // 移动放大
                            clockwise: true, // 逆时针
                            startAngle: 270,
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            // itemStyle : labelFromatter,
                            data: [{
                                value: item.total_progress,
                                name: ''
                            },
                            {
                                value: (100 - item.total_progress),
                                name: 'other',
                                itemStyle: {
                                    normal: {
                                        color: '#ddd'
                                    }
                                }
                            }

                            ]
                        }
                    ]
                };
                let eleId = `chart_${item.ordernumber}`;
                echarts.init(document.getElementById(eleId)).setOption(option);
            });
        }
    }
};
</script>
<style lang="less" scoped>
.orderList {
  display: flex;
  flex-wrap: wrap;

  .orderItem {
    width: 30%;
    margin: 0 24px 24px;
    .top {
      height: 40px;
      border: 1px solid black;
      p {
        line-height: 40px;
        color: black;
        margin-left: 20px;
      }
    }

    .bot {
      border: 1px solid black;
      height: 150px;
      border-top: none;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      border-bottom: none;
      .bot_left {
        width: 60%;
        padding-left: 14px;
      }
      .bot_right {
        width: 40%;
        height: 150px;
      }
    }

    .more {
      height: 40px;
      border: 1px solid black;
      border-top: none;
      text-align: center;
      line-height: 40px;
      color: #347ab8;
    }
  }
}

.echart {
  height: 150px;
}
</style>
