<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label id="产品名称">{{$t('100088')}}：</label>
          <Select
            v-model="productId"
            label-in-value
            clearable
            class="searchSelect"
          >
            <Option
              v-for="item in productlist"
              :value="item.code"
              :key="item.code"
            >{{item.code}}-{{ item.name }}</Option>
          </Select>
        </div>

        <div class="filter">
        <label>{{$t('900879')}}：</label>
        <Select
          v-model="lineid"
          label-in-value
          clearable
          class="searchSelect"
          @on-change="lingchange"
        >
          <Option v-for="item in lines" :value="item.id" :key="item.id">{{ item.title }}</Option>
        </Select>
      </div>

        <div class="filter">
          <label id="结果">{{this.$t(800195)}}：</label>
          <Select v-model="resultdesc" clearable class="searchSelect">
            <Option value="OK" >OK</Option>
            <Option value="NG" >NG</Option>
          </Select>
        </div>
        <div class="filter">
            <label>{{$t('800008')}}：</label>
            <Input v-model="qrcode" class="searchInput"  type="text" placeholder="箱号/成品、半成品、配件二维码" />
         </div>
      </div>

         <div v-show="!morecondition">
          <div class="filter">
            <label>{{$t('1035')}}</label>
            <DatePicker
              id="日期"
              type="datetimerange"
              v-model="daterange"
              confirm
              placeholder=""
              class="searchInput MaxWidth"
              format="yyyy-MM-dd HH:mm:ss"
              @on-change="selectdate"
            ></DatePicker>
          </div>

            <div class="filter">
                <label>{{$t('5500221')}}：</label>
                <Select v-model="type1" clearable multiple class="searchSelect">
                    <Option v-for="(item,key) in typelist" :value="item" :key="key">{{item}}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>展示形式:</label>
                <RadioGroup v-model="type2">
                    <Radio label="竖向展开"></Radio>
                    <Radio label="横向展开"></Radio>
                </RadioGroup>
            </div>
         </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search(excel=0)">{{$t('1001')}}</Button>
         <Button type="primary" class="fourWord" icon="md-download" @click="downexport()">{{$t('1007')}}</Button>
      </div>
     <!-- 更多条件 按钮组件 -->
		<MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>
    </div>
    <!-- 列表1 包装箱基本信息 start-->
    <div class="divborder newTableDiv" v-show="tableshow1">
        <Table
        class="tableClass"
        @on-current-change="handleRowChange1"
        highlight-row
        :data="tableData1"
        :columns="tableColumns1"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total1"
            :current="page1"
            @on-change="changePage1"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize1"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>
    <!-- 列表1 包装箱基本信息 end-->

    <!-- 列表2 包装详情 start-->
    <div class="divborder newTableDiv" v-show="tableshow2">
        <Table
        class="tableClass"
        highlight-row
        :data="tableData2"
        :columns="tableColumns2"
        :max-height="300"
      ></Table>
    </div>
    <!-- 列表2 包装详情 end-->

    <!-- 列表3 装配关系 start-->
    <div class="divborder newTableDiv" v-show="tableshow3">
        <Table
        class="tableClass"
        highlight-row
        :data="tableData3"
        :columns="tableColumns3"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total3"
            :current="page3"
            @on-change="changePage3"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize3"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
       </div>
    </div>
    <!-- 列表3 装配关系 end-->

     <!-- 列表4 生产关系 start-->
    <div class="divborder newTableDiv" v-show="tableshow4" >
        <Table
        class="tableClass"
        @on-current-change="handleRowChange4"
        highlight-row
        :data="tableData4"
        :columns="tableColumns4"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total4"
            :current="page4"
            @on-change="changePage4"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize4"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>
    <!-- 列表4 生产关系 end-->

    <!-- 列表5 生产详情 start-->
    <div class="divborder newTableDiv" v-show="tableshow5">
        <Table
        class="tableClass"
        highlight-row
        :data="tableData5"
        :columns="tableColumns5"
        :max-height="300"
      ></Table>
    </div>
    <!-- 列表5 生产详情 end-->

    <!--列表六 横向展开 start -->
    <div class="divborder newTableDiv" v-show="tableshow6" >
        <Table
        class="tableClass"
        highlight-row
        border
        :data="tableData6"
        :columns="tableColumns6"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total6"
            :current="page6"
            @on-change="changePage6"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize6"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
       </div>
    </div>
    <!--横向展开 end  -->

  </div>
</template>
<script>
import echarts from 'echarts'
import axios from '@/libs/api.request'
import moment from 'moment'
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
    name: 'Businessmanagement', // 组件不刷新
    data () {
        return {
            morecondition: false, // 条件
            obj: {},
            productId: 0,
            daterange: '',
            productlist: [],
            lineid: 0,
            lines: [],
            type1: [], // 参数属性
            type2: '竖向展开', // 展示形式
            qrcode: '', // 二维码
            resultdesc: '',
            typelist: [

            ],

            // 列表一
            page1: 1,
            pagesize1: 10,
            total1: 0,
            tableshow1: true,
            tableData1: [],
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    width: 70,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page1 - 1) * this.pagesize1 + 1
                        )
                    }
                },
                {
                    title: '箱号',
                    key: 'boxId'
                },
                {
                    title: '产品编号',
                    key: 'productCode'
                },
                {
                    title: '客户零件号',
                    key: 'partNo'
                },
                {
                    title: '数量',
                    key: 'count'
                },
                {
                    title: '重量',
                    key: 'weight'
                },
                {
                    title: '供应商代码',
                    key: 'suppler'
                },
                {
                    title: '生产日期',
                    key: 'busidate'
                },
                {
                    title: '生产批次',
                    key: 'batch'
                },
                {
                    title: '发货人中文名称',
                    key: 'sendCh'
                },
                {
                    title: '发货人英文名称',
                    key: 'sendEn'
                },
                {
                    title: '收货人英文名称',
                    key: 'reciveCh'
                },
                {
                    title: '收货人英文名称',
                    key: 'reciveEn'
                },
                {
                    title: '是否翻箱',
                    key: 'isOpen'
                }
            ],
            // 列表二
            tableshow2: false,
            tableData2: [],
            tableColumns2: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    width: 70
                },
                {
                    title: '箱号',
                    key: 'boxid'
                },
                {
                    title: '工件二维码',
                    key: 'sn'
                }
            ],
            // 列表三
            page3: 1,
            pagesize3: 10,
            total3: 0,
            tableshow3: true,
            tableData3: [],
            tableColumns3: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    width: 70,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page3 - 1) * this.pagesize3 + 1
                        )
                    }
                },
                {
                    title: '成品二维码',
                    key: 'sn'
                },
                {
                    title: '零件二维码',
                    key: 'sn2'
                },
                {
                    title: '零件名称',
                    key: 'name'
                },
                {
                    title: '通道层级',
                    key: 'sectionDesc'
                },
                {
                    title: '操作人',
                    key: 'user'
                },
                {
                    title: '时间',
                    key: 'dateTime'
                }
            ],
            // 列表四
            page4: 1,
            pagesize4: 10,
            total4: 0,
            tableshow4: true,
            tableData4: [],
            tableColumns4: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    width: 70,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page4 - 1) * this.pagesize4 + 1
                        )
                    }
                },
                {
                    title: '产品编号',
                    key: 'productCode'
                },
                {
                    title: '通道层级',
                    key: 'sectionDesc'
                },
                {
                    title: '二维码',
                    key: 'sn'
                },
                {
                    title: '结果',
                    key: 'result'
                },
                {
                    title: '操作人',
                    key: 'user'
                },
                {
                    title: '时间',
                    key: 'busidate'
                }
            ],
            // 列表五
            tableshow5: false,
            tableData5: [],
            tableColumns5: [
                {
                    type: 'index',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    width: 70
                },
                {
                    title: '二维码',
                    key: 'sn'
                },
                {
                    title: '项目',
                    key: 'item'
                },
                {
                    title: '类型',
                    key: 'remarks'
                },
                {
                    title: '值',
                    key: 'value'
                },
                {
                    title: '结果',
                    key: 'result'
                }
            ],

            // 横向展示 列表六
            page6: 1,
            pagesize6: 10,
            total6: 0,
            tableshow6: true,
            tableData6: [],
            tableColumns6: [

            ],
            excel: 0
        }
    },
    created () {
        this.inilines()
        this.InitTime()
        this.selectdate(this.daterange)
        this.loadProcduct()
        this.search()
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.tableColumns2 = this.$time.initTableTitle(this.tableColumns2)
        this.tableColumns3 = this.$time.initTableTitle(this.tableColumns3)
        this.tableColumns4 = this.$time.initTableTitle(this.tableColumns4)
        this.tableColumns5 = this.$time.initTableTitle(this.tableColumns5)
        this.tableColumns6 = this.$time.initTableTitle(this.tableColumns6)
    },
    methods: {
        downexport () {
            this.excel = 1
            this.search()
        },
        inilines () {
            axios
                .request({
                    url: '/config/Position/GetLine',
                    method: 'get'
                })
                .then(res => {
                    this.lines = res.data.data
                    this.prelines = res.data.data
                })
        },
        lingchange () {
            var params = {
                sectionId: this.lineid
            }
            axios
                .request({
                    url: '/acc/ParameterConfig/GetAttributes',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.typelist = []
                    if (res.data.ret === 1 && res.data.data.length > 0) {
                        this.typelist = res.data.data
                    }
                })
        },
        // 查找
        search () {
            if (this.dtStart == '' || this.dtStart === undefined) {
                this.$Message.error('时间不能为空')
                return false
            }

            if (this.type2 === '竖向展开') {
                this.tableshow1 = true
                this.tableshow2 = false
                this.tableshow3 = true
                this.tableshow4 = true
                this.tableshow5 = false
                this.tableshow6 = false
                // 包装箱基本信息
                this.getBaseInfo()

                // 获取装配关系
                this.assembling()

                // 获取生产关系
                this.production()
            } else {
                // 横向展开
                this.tableshow1 = false
                this.tableshow2 = false
                this.tableshow3 = false
                this.tableshow4 = false
                this.tableshow5 = false
                this.tableshow6 = true
                this.getGeneralDetails()
            }
        },

        /** ************** 第六个列表 横向报表显示 start*****************/
        // 横向报表显示
        getGeneralDetails () {
            if (this.lineid === '' || this.lineid === 0 || this.lineid === undefined) {
                this.$Message.error(this.$t('800082'))
                return false;
            }
            var params = {
                productId: this.productId, // 产品
                section: this.lineid, // this.sectionid, //产线层级
                result: this.resultdesc, // 结果
                qrcode: this.qrcode, // 二维码
                start: this.dtStart, // 开始时间
                end: this.dtEnd, // 结束时间
                type1: this.type1, // 参数属性
                page: this.page,
                pageSize: this.pagesize,
                export: this.excel
            }

            this.axios.request({
                url: 'acc/General/TrackingDetail',
                data: params,
                method: 'post'
            }).then(res => {
                if (this.excel) {
                    window.location.href = axios.publicPath + '' + res.data.data
                    return
                }

                this.tableColumns6 = []
                this.tableData6 = []
                if (res.data.ret === 1) {
                    // 标题
                    let header = res.data.data.heads
                    let headerArr = []
                    headerArr = [{
                        title: 'SN',
                        key: 'sn',
                        align: 'center',
                        width: 300,
                        fixed: 'left'
                    }]
                    header.forEach((item, index) => {
                        let hchild = []
                        let harr = {
                            title: item.station,
                            align: 'center'
                        }
                        if (item.items.length > 0) {
                            item.items.forEach((value, key) => {
                                hchild.push({
                                    title: value.item,
                                    key: item.section + '_' + key,
                                    align: 'center',
                                    width: 200
                                })
                            })
                        }
                        harr.children = hchild
                        headerArr.push(harr)
                    })
                    this.tableColumns6 = headerArr
                    // 数据列表
                    let bodyArr = []
                    let bodyer = res.data.data.bodys
                    for (var i = 0; i < bodyer.length; i++) {
                        var b_obj = {}
                        var b_child = bodyer[i].rowsCols
                        for (var j = 0; j < b_child.length; j++) {
                            if (j === 0) {
                                b_obj.sn = b_child[j].sn
                            }
                            var bb_child = b_child[j].items
                            for (var z = 0; z < bb_child.length; z++) {
                                var b_key = b_child[j].section + '_' + z
                                b_obj[b_key] = bb_child[z].values
                            }
                        }
                        bodyArr.push(b_obj)
                    }
                    this.tableData6 = bodyArr
                    this.total6 = res.data.total
                } else {
                    //   this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        handleRowChange6 (currentRow, oldCurrentRow) {

        },
        changePage6 (value) {
            this.page = value
            this.excel = 0
            this.getGeneralDetails()
        },
        handlePageSize6 (value) {
            this.pagesize = value
            this.excel = 0
            this.getGeneralDetails()
        },
        /** ************** 第六个列表 横向报表显示 end*****************/

        /** ************** 第一个列表 包装箱基本信息 start*****************/
        getBaseInfo () {
            var params = {
                productId: this.productId, // 产品
                section: this.lineid, // this.sectionid, //产线层级
                result: this.resultdesc, // 结果
                qrcode: this.qrcode, // 二维码
                start: this.dtStart, // 开始时间
                end: this.dtEnd, // 结束时间
                type1: this.type1, // 参数属性
                page: this.page1,
                pageSize: this.pagesize1,
                export: this.excel
            }
            this.axios.request({
                url: 'acc/General/GetPackage',
                data: params,
                method: 'post'
            }).then(res => {
                if (this.excel) {
                    window.location.href = axios.publicPath + '' + res.data.data
                    return
                }
                if (res.data.ret === 1) {
                    if (res.data.data.length > 0) {
                        this.total1 = res.data.total
                        this.tableData1 = res.data.data
                    } else {
                        this.total1 = 0
                        this.tableData1 = []
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        handleRowChange1 (currentRow, oldCurrentRow) {
            // 点击包装箱基本信息
            this.tableshow2 = true
            this.getDetailInfo(currentRow.boxId)
        },
        changePage1 (value) {
            this.page1 = value
            this.excel = 0
            this.getBaseInfo()
        },
        handlePageSize1 (value) {
            this.pagesize1 = value
            this.excel = 0
            this.getBaseInfo()
        },
        /** ************** 第一个列表 包装箱基本信息 end*****************/

        /** ************** 第二个列表 包装箱详细信息 start*****************/
        getDetailInfo (boxId) {
            var params = {
                boxId: boxId // 产品
            }
            this.axios.request({
                url: 'acc/Package/Details',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    if (res.data.data.length > 0) {
                        // this.total = res.data.total
                        this.tableData2 = res.data.data
                    } else {
                        // this.total = 0
                        this.tableData2 = []
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        /** ************** 第二个列表 包装箱详细信息 end*****************/

        /** ************** 第三个列表 装配关系 start*****************/
        assembling () {
            var params = {
                productId: this.productId, // 产品
                section: this.lineid, // this.sectionid, //产线层级
                result: this.resultdesc, // 结果
                qrcode: this.qrcode, // 二维码
                start: this.dtStart, // 开始时间
                end: this.dtEnd, // 结束时间
                type1: this.type1, // 参数属性
                page: this.page3,
                pageSize: this.pagesize3,
                export: this.excel
            }
            this.axios.request({
                url: 'acc/General/GetAssmbData',
                data: params,
                method: 'post'
            }).then(res => {
                if (this.excel) {
                    window.location.href = axios.publicPath + '' + res.data.data
                    return
                }
                if (res.data.ret === 1) {
                    if (res.data.data.length > 0) {
                        this.total3 = res.data.total
                        this.tableData3 = res.data.data
                    } else {
                        this.total3 = 0
                        this.tableData3 = []
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        handleRowChange3 (currentRow, oldCurrentRow) {

        },
        changePage3 (value) {
            this.page3 = value
            this.excel = 0
            this.assembling()
        },
        handlePageSize3 (value) {
            this.pagesize3 = value
            this.excel = 0
            this.assembling()
        },
        /** ************** 第三个列表 装配关系 end*****************/

        /** ************** 第四个列表 生产关系 start*****************/
        production () {
            var params = {
                productId: this.productId, // 产品
                section: this.lineid, // this.sectionid, //产线层级
                result: this.resultdesc, // 结果
                qrcode: this.qrcode, // 二维码
                start: this.dtStart, // 开始时间
                end: this.dtEnd, // 结束时间
                type1: this.type1, // 参数属性
                page: this.page4,
                pageSize: this.pagesize4,
                export: this.excel
            }
            this.axios.request({
                url: 'acc/General/GetTrace',
                data: params,
                method: 'post'
            }).then(res => {
                if (this.excel) {
                    setTimeout(function () {
                        window.location.href = axios.publicPath + '' + res.data.data
                    }, 500)
                    return
                }
                if (res.data.ret === 1) {
                    if (res.data.data.length > 0) {
                        this.total4 = res.data.total
                        this.tableData4 = res.data.data
                    } else {
                        this.total4 = 0
                        this.tableData4 = []
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        handleRowChange4 (currentRow, oldCurrentRow) {
            // 点击包装箱基本信息
            this.tableshow5 = true
            this.getProductionDetail(currentRow.seqID)
        },
        changePage4 (value) {
            this.page4 = value
            this.excel = 0
            this.production()
        },
        handlePageSize4 (value) {
            this.pagesize4 = value
            this.excel = 0
            this.production()
        },
        /** ************** 第四个列表 生产关系 end*****************/

        /** ************** 第五个列表 生产关系 start***************/
        getProductionDetail (seqID) {
            var params = {
                guid: seqID // 产品
            }
            this.axios.request({
                url: 'acc/Trace/GetDetails',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    if (res.data.data.length > 0) {
                        // this.total = res.data.total
                        this.tableData5 = res.data.data
                    } else {
                        // this.total = 0
                        this.tableData5 = []
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },

        /** ************** 第五个列表 生产关系 end***************/
        // 加载产品
        loadProcduct () {
            axios
                .request({
                    url: 'config/projectproduct/GetProducts',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.productlist = res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        datetrans (date) {
            if (date === '' || date === undefined || date === 0 || date === null) {
                return ''
            }
            date = new Date(date * 1000)
            var Y = date.getFullYear() + '-'
            var M =
        (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-'
            var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
            return Y + M + D
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
            let last_str = this.dtEnd.split(' ')[1]
            if (last_str === '00:00:00') {
                this.dtEnd = moment(this.dtEnd).format('YYYY-MM-DD') + ' 23:59:59'
                this.daterange = [this.dtStart, this.dtEnd]
            }
        },
        InitTime () {
            var nowtime = Date.parse(new Date()) / 1000
            var oldtime = nowtime - 86400 * 7
            this.daterange = [
                this.datetrans(oldtime) + '00:00:00',
                this.datetrans(nowtime) + '23:59:59'
            ]
        }
    }
}
</script>
<style scoped>

</style>
