<template>
  <div class="testdiv">
    <!-- 查询条件 -->
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label>{{$t('900921')}}</label>
        <Input class="searchInput" type="text" v-model="productname" />
      </div>
      <div class="filter">
        <label>{{$t('900939')}}</label>
        <Input class="searchInput" type="text" v-model="orderno" />
      </div>
      <div class="filter">
        <label>{{$t('99200041')}}：</label>
        <Input class="searchInput" type="text" v-model="produceno" />
      </div>
      <div class="filter">
        <label>{{$t('200002')}}：</label>
        <Select v-model="status" clearable class="searchSelect">
          <Option value>{{$t('1014')}}</Option>
          <Option value="0">{{$t('900938')}}</Option>
          <Option value="1">{{$t('900937')}}</Option>
          <Option value="2">{{$t('500096')}}</Option>
          <Option value="3">{{$t('900936')}}</Option>
          <Option value="4">{{$t('900935')}}</Option>
        </Select>
      </div>
      <!-- 次级搜索条件--隐藏 -->
      <div v-show="!morecondition">
        <div class="filter">
          <label>{{$t('900907')}}</label>
          <DatePicker
            type="daterange"
            :value="dateTime"
            placeholder
            class="searchInput middleWidth"
            @on-change="selectdate"
          ></DatePicker>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="search(1,10)"
        >{{$t('1001')}}</Button>
      </div>
      <!-- 更多条件 按钮组件 -->
      <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
    </div>
    <!-- 数据展示 -->
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData"
        :columns="tableColumns"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
    data () {
        return {
            morecondition: false, // 条件
            dateTime: '', // 时间范围
            starttime: '', // 开始时间
            endtime: '', // 结束时间
            productname: '',
            productdrawno: '',
            orderno: '',
            produceno: '',
            status: '',
            total: 0,
            page: 1,
            pagesize: 10,
            tableData: [],
            addmodal: false,
            productlist: [],
            obj: {},
            addobj: {},
            type: 0,
            tableColumns: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: '60px'
                },
                {
                    title: this.$t('900958'),
                    key: 'orderNumber',
                    width: '120px'
                },
                {
                    title: this.$t('900932'),
                    key: 'delivery_time',
                    width: '120px'
                },
                {
                    title: this.$t('100088'),
                    key: 'product_name',
                    width: '120px'
                },
                {
                    title: this.$t('100089'),
                    key: 'product_code',
                    width: '120px'
                },
                {
                    title: this.$t('900337'),
                    key: 'code'
                },
                {
                    title: this.$t('200054'),
                    key: 'status'
                },
                {
                    title: this.$t('800197'),
                    key: 'quantity'
                },
                {
                    title: this.$t('901009'),
                    key: 'producted_number'
                },
                {
                    title: this.$t('901010'),
                    key: 'difference'
                },

                {
                    title: this.$t('901011'),
                    key: 'routes'
                }
            ]
        };
    },
    created () {
        this.inittime();
        this.search();
        this.tableColumns = this.$time.initTableTitle(this.tableColumns);
    },
    methods: {
        inittime () {
            // 时间赋值
            var date = new Date();
            var start = this.$time.timestampToTime(
                date.getTime() - 3600 * 1000 * 24 * 6
            );
            var end = this.$time.timestampToTime(date.getTime());
            this.dateTime = [start, end];
        },
        selectdate (e) {
            this.dateTime = [e[0], e[1]];
        },
        initTableData (tablelist) {
            let data = [];
            tablelist.forEach((item) => {
                if (item) {
                    var status = '';
                    if (item.status === 0) {
                        status = '未排产';
                    } else if (item.status === 1) {
                        status = '已排产';
                    } else if (item.status === 2) {
                        status = '生产中';
                    } else if (item.status === 3) {
                        status = '已完工';
                    } else {
                        status = '已终止';
                    }

                    var result = '';
                    if (item.routes != '') {
                        var routeIds = item.route_ids;
                        var reportRouteId = item.report_routeId;
                        if (reportRouteId > 0 && routeIds.length > 0) {
                            var index = 0;
                            for (var i = 0; i < routeIds.length; i++) {
                                if (routeIds[i] == reportRouteId) {
                                    index = i;
                                }
                            }
                            var routenames = item.routes.split('-');
                            result = '<td>';
                            for (var i = 0; i < routenames.length; i++) {
                                if (i <= index) {
                                    result +=
                    "<span style='background-color:green;color:#fff;'>" +
                    routenames[i];
                                } else {
                                    result += '<span>' + routenames[i];
                                }
                                if (i != routenames.length - 1) {
                                    result += ' - ';
                                }
                                result += '</span>';
                            }
                            result += '</td>';
                        } else {
                            result = '<td>' + item.routes + '</td>';
                        }
                    }
                    data.push({
                        id: item.id,
                        orderNumber: item.orderNumber,
                        product_name: item.product_name,
                        product_code: item.product_code,
                        code: item.code,
                        quantity: item.quantity,
                        difference: item.difference,
                        result: result,
                        status: status,
                        producted_number: item.producted_number,
                        difference: item.difference,
                        routes: item.routes,
                        delivery_time: item.delivery_time != '' && item.delivery_time != null ? moment(item.delivery_time * 1000).format('yyyy-MM-DD') : ''
                    });
                }
            });
            this.tableData = data;
        },
        handdlesearch () {
            this.page = 1;
            this.search();
        },
        search () {
            var params = {
                page: this.page,
                pagesize: this.pagesize,
                productName: this.productname,
                code: this.orderno,
                orderNumber: this.produceno,
                status: this.status,
                startTime: this.dateTime[0],
                endTime: this.dateTime[1]
            };
            this.axios
                .request({
                    url: '/cnc/WorkOrder/GetWorkOrderList',
                    params,
                    methods: 'get'
                })
                .then((res) => {
                    this.total = res.data.total;
                    this.initTableData(res.data.data);
                });
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow;
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData = this.search();
        },
        changePage (value) {
            this.page = value;
            this.tableData = this.search();
        }
    }
};
</script>
