<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label >{{$t('920165')}}：</label>
        <Select v-model="materialid" label-in-value clearable filterable class="searchSelect" >
            <Option v-for="item in materials" :value="item.id" :key="item.id">{{ item.name+"("+item.pn+")" }}</Option>
        </Select>
      </div>
      <div class="filter">
        <label >{{$t('1950645')}}：</label>
        <Select v-model="bussineseid" label-in-value clearable filterable class="searchSelect" >
            <Option v-for="item in bussineses" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="tosearch()">{{$t('1001')}}</Button>
        <Button type="success" class="twoWord" icon="md-add-circle" @click="add()">{{$t('1002')}}</Button>
        <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
        <Button type="error" class="twoWord intervalRight" icon="md-close-circle" @click="dele()">{{$t('1004')}}</Button>
        <Button type="primary" class="fourWord" icon="md-download" @click="loadexcel()">{{$t('1005')}}</Button>
        <Upload style="display:inline-block"
          ref="upload"
          :action="action"
          name="excel-file"
          :headers="headers"
          :show-upload-list="false"
          :on-format-error="handleFormatError"
          :on-success="handleSuccess"
          :on-error="handleError"
          :format ="['xlsx']">
              <Button class="fourWord" icon="md-cloud-upload" type="primary" >{{$t('upload-excel')}}</Button>
          </Upload>
        <Button class="fourWord" type="primary" icon="md-cloud-download" @click="loadexcel1()">{{$t('1007')}}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        :columns="tableColumns1"
        @on-selection-change="handleSelectRow"
      ></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>
      <Modal class="newModalClass" v-model="addmodal" :styles="{width:'800px'}">
        <p slot="header">
          <span v-if="type===1">{{$t('1002')}}</span>
          <span v-if="type===2">{{$t('1003')}}</span>
        </p>
        <div class="modal_body">
            <div class="filter">
              <label ><i>*</i>{{$t('920165')}}：</label>
              <Select v-model="addobj.materialid" label-in-value clearable filterable class="searchSelect">
                  <Option v-for="item in addmaterials" :value="item.id" :key="item.id">{{ item.name+"("+item.pn+")" }}</Option>
              </Select>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1950645')}}：</label>
              <Select v-model="addobj.supplierid" label-in-value clearable filterable class="searchSelect">
                  <Option v-for="item in addbussineses" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </div><br/>
            <div class="filter">
              <label ><i>*</i>{{$t('100390')}}：</label>
              <RadioGroup v-model="addobj.partname">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1950650')}}：</label>
              <RadioGroup v-model="addobj.supplierduns">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('90000028')}}：</label>
              <RadioGroup v-model="addobj.productiondate">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('90000029')}}：</label>
              <RadioGroup v-model="addobj.traceability">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('300084')}}：</label>
              <RadioGroup v-model="addobj.quantity">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1950648')}}：</label>
              <RadioGroup v-model="addobj.matrix">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1950649')}}：</label>
              <RadioGroup v-model="addobj.steelduns">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1950651')}}：</label>
              <RadioGroup v-model="addobj.heat">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1950652')}}：</label>
              <RadioGroup v-model="addobj.steelroute">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1030')}}：</label>
              <RadioGroup v-model="addobj.remark">
                <Radio :label="1" style="width:50px">{{$t(300030)}}</Radio>
                <Radio :label="0" style="width:50px">{{$t(300031)}}</Radio>
              </RadioGroup>
            </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
          <Button type="primary" v-if="type===1" size="large" @click="adddata(1)">{{$t('1002')}}</Button>
          <Button type="primary" v-if="type===2" size="large" @click="adddata(2)">{{$t('1003')}}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    name: 'route',
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            obj: [],
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            addobj: {},
            type: 0,
            materialid: 0,
            bussineseid: 0,
            materials: [],
            addmaterials: [],
            bussineses: [],
            addbussineses: [],
            tableColumns1: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: 70
                },
                {
                    title: this.$t('100390'),
                    key: 'pn'
                },
                {
                    title: this.$t('100391'),
                    key: 'materialname'
                },
                {
                    title: this.$t('100392'),
                    key: 'spec'
                },
                {
                    title: this.$t('9800001'),
                    key: 'suppliername'
                },
                {
                    title: this.$t('100390'),
                    key: 'partname1'
                },
                {
                    title: this.$t('1950650'),
                    key: 'supplierduns1'
                },
                {
                    title: this.$t('90000028'),
                    key: 'productiondate1'
                },
                {
                    title: this.$t('90000029'),
                    key: 'traceability1'
                },
                {
                    title: this.$t('300084'),
                    key: 'quantity1'
                },
                {
                    title: this.$t('1950648'),
                    key: 'matrix1'
                },
                {
                    title: this.$t('1950649'),
                    key: 'steelduns1'
                },
                {
                    title: this.$t('1950651'),
                    key: 'heat1'
                },
                {
                    title: this.$t('1950652'),
                    key: 'steelroute1'
                },
                {
                    title: this.$t('1030'),
                    key: 'remark1'
                }
            ],
            action: axios.publicPath + 'config/upload/submit?templateName=BarcodeBatchSet'
        }
    },
    created () {
        this.initmaterials()
        this.initsuppliers()
        this.search()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        loadexcel () {
            axios.request({
                url: '/config/Download/GetTemplate?name=BarcodeBatchSet',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    window.location.href = axios.publicPath + '' + res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        loadexcel1 () { // 导出excel
            var params = {
                materialid: this.materialid,
                supplierid: this.bussineseid,
                page: this.page,
                pagesize: this.pagesize,
                toexcel: '1'
            }
            axios.request({
                url: '/qms/BarcodeBatchSet/GetPageList',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    window.location.href = axios.publicPath + '' + res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        initmaterials () {
            axios
                .request({
                    url: '/config/Material/GetMaterialList',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.materials = res.data.data
                        this.addmaterials = res.data.data
                    }
                })
        },
        initsuppliers () {
            axios
                .request({
                    url: '/config/Business/GetSupplierNameList?type=1',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.bussineses = res.data.data
                        this.addbussineses = res.data.data
                    }
                })
        },
        tosearch () {
            this.page = 1
            // this.pagesize = 10
            this.search()
        },
        search () {
            var params = {
                materialid: this.materialid,
                supplierid: this.bussineseid,
                page: this.page,
                pagesize: this.pagesize
            }
            axios
                .request({
                    url: '/qms/BarcodeBatchSet/GetPageList',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.total = res.data.total
                    this.mockTableData1(res.data.data)
                })
            this.obj = []
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        pn: item.pn,
                        materialname: item.materialname,
                        spec: item.spec,
                        supplierid: item.supplierid,
                        suppliername: item.suppliername,
                        materialid: item.materialid,

                        partname: item.partname,
                        supplierduns: item.supplierduns,
                        productiondate: item.productiondate,
                        traceability: item.traceability,
                        quantity: item.quantity,
                        matrix: item.matrix,
                        steelduns: item.steelduns,
                        heat: item.heat,
                        steelroute: item.steelroute,
                        remark: item.remark,

                        partname1: item.partname === 1 ? this.$t(1000020) : this.$t(1000021),
                        supplierduns1: item.supplierduns === 1 ? this.$t(1000020) : this.$t(1000021),
                        productiondate1: item.productiondate === 1 ? this.$t(1000020) : this.$t(1000021),
                        traceability1: item.traceability === 1 ? this.$t(1000020) : this.$t(1000021),
                        quantity1: item.quantity === 1 ? this.$t(1000020) : this.$t(1000021),
                        matrix1: item.matrix === 1 ? this.$t(1000020) : this.$t(1000021),
                        steelduns1: item.steelduns === 1 ? this.$t(1000020) : this.$t(1000021),
                        heat1: item.heat === 1 ? this.$t(1000020) : this.$t(1000021),
                        steelroute1: item.steelroute === 1 ? this.$t(1000020) : this.$t(1000021),
                        remark1: item.remark === 1 ? this.$t(1000020) : this.$t(1000021)
                    })
                }
            })
            this.tableData1 = data
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search()
        },
        add () {
            this.addobj = {
                supplierid: 0,
                materialid: 0,

                partname: 0,
                supplierduns: 0,
                productiondate: 0,
                traceability: 0,
                quantity: 0,
                matrix: 0,
                steelduns: 0,
                heat: 0,
                steelroute: 0,
                remark: 0
            }
            this.type = 1
            this.addmodal = true
        },
        closeadd () {
            this.addmodal = false
            this.addobj = {}
        },
        adddata (type) {
            let data = this.addobj
            if (type === 1) {
                axios
                    .request({
                        url: '/qms/BarcodeBatchSet/Add',
                        data,
                        method: 'post'
                    })
                    .then(res => {
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t('1055'))
                            this.addmodal = false
                            this.search()
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
            } else if (type === 2) {
                data.id = this.obj.id
                axios
                    .request({
                        url: '/qms/BarcodeBatchSet/Update',
                        data,
                        method: 'post'
                    })
                    .then(res => {
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t('1060'))
                            this.addmodal = false
                            this.search()
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
            }
        },
        edit () {
            this.addobj = {}
            if (this.obj === null || this.obj === undefined || JSON.stringify(this.obj) === '[]') {
                this.$Message.error(this.$t(9000396))
                return
            }
            this.addobj = this.obj
            this.addmodal = true
            this.type = 2
        },

        handleFormatError (file) {
            this.$Message.error(this.$t('950396') + file.name + this.$t('950397'))
        },
        handleSuccess (res, file) {
            if (res.ret == 1) {
                this.$Message.success(this.$t('950398'))
                this.search()
            } else {
                if (typeof res.msg !== 'number') {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t('' + res.msg))
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('2010006') + '!')
        },
        handleSelectRow: function (data) {
            this.selectids = []
            for (var i in data) {
                this.selectids.push(data[i].id)
            }
        },
        dele () {
            if (this.selectids === undefined || this.selectids === '' || this.selectids === [] || this.selectids.length == 0) {
                this.$Message.error((this.$t('1017')))
                return false
            } else {
                var ids = []
                this.selectids.forEach(ele => {
                    ids.push(ele)
                })
                var data = {
                    ids: ids
                }
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        axios.request({
                            url: '/config/BussineseUser/Delete',
                            data: data,
                            method: 'post'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1058'))
                                this.page = 1
                                this.pagesize = 10
                                this.search()
                                this.obj = {}
                            } else {
                                this.$Message.error(this.$t(res.data.msg))
                            }
                        })
                    }
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>

</style>
