<template>
    <div class="testdiv">
      <div class="divborder newSearchDiv">
          <div>
            <div class="filter">
                <label>{{$t('1132')}}：</label>
                <Cascader :data="datalevel" :value="leveldata"   trigger="click" @on-change="levelchange" change-on-select class="searchSelect" ></Cascader>
            </div>
            <div class="filter">
                <label>{{$t('900337')}}：</label>
                <Input class="searchInput" type="text"   v-model="Work_order" />
            </div>
            <div class="filter">
                  <label>{{$t('950453')}}：</label>
                  <Select v-model="Stocking_status"  label-in-value  clearable class="searchSelect" >
                      <Option  :value=2 v-text="$t('950441')">备货中</Option>
                      <Option  :value=4 v-text="$t('500097')">已完成</Option>
                  </Select>
            </div>
            <div class="searchBtn">
              <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search(1,pagesize)" >{{$t('1001')}}</Button>
              <Button type="primary" class="fourWord" icon="ios-checkmark-circle-outline" style="margin-right: 5px" @click="confirmation()">{{$t('1590032')}}</Button>
            </div>
          </div>
      </div>
      <div class="divborder newTableDiv">
          <Table
           class="tableClass"
            highlight-row
            border
            @on-current-change="handleRowChange"
            :data="tableData1"
            :columns="tableColumns1"
             @on-selection-change="handleSelectRow"
          >
          <template slot-scope="{ row }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="show(row.id)">{{$t('300017')}}</Button>
        </template>
          </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>
      <!-- 详情模态框 -->
       <Modal class="newModalClass" :title="$t('5000000')" v-model="detailmodal"   :styles="{width:'850px'}" >
            <div class="modal_body" style="padding-right:40px;">
                <Table
                  highlight-row
                  border
                  :data="tableData2"
                  :columns="tableColumns2"
                  max-height='250'
                >
                </Table>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" @click="detailmodal=false" v-text="$t('1011')">确定</Button>
            </div>
      </Modal>

      <!-- 备货确认 -->
       <Modal class="newModalClass" :title="$t('1590032')" v-model="confirmmodal"   :styles="{width:'950px'}" >
            <div class="modal_body" style="padding-right:40px;">
                <Table
                  highlight-row
                  border
                  :data="tableData3"
                  :columns="tableColumns3"
                  max-height='250'
                >
                </Table>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" @click="confirmmodal=false" v-text="$t('1028')">关闭</Button>
                <Button type="primary" size="large" @click="submit" v-text="$t('1027')">提交</Button>
            </div>
      </Modal>
    </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
    data () { // 基础数据
        return {
            spinShow: false,
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            Work_order: '', // 工单号
            Stocking_status: '', // 审核状态
            page: 1, // 页码
            pagesize: 10, // 数据条数
            obj: {}, // 某一行的数据
            tableData1: [], // 表格数据
            detailmodal: false, // 细节模态框
            tableData2: [], // 模态框table
            tableColumns2: [
                {
                    title: this.$t('1950578'), // 备件编码
                    align: 'center',
                    key: 'code'
                },
                {
                    title: this.$t('300002'), // 备件名称
                    key: 'name',
                    align: 'center',
                    width: 250
                },
                {
                    title: this.$t('300090'), // 备件类别
                    key: 'type',
                    align: 'center'
                },
                {
                    title: this.$t('300003'), // 库位
                    key: 'location',
                    align: 'center'
                },
                {
                    title: this.$t('300016'), // 当前库存
                    key: 'Stock',
                    align: 'center'
                },
                {
                    title: this.$t('950455'), // 申请数量
                    key: 'number',
                    align: 'center'
                }

                // {
                //   title: this.$t('800008'), // 二维码
                //   key: 'qrcode',
                //   width: '130',
                //   align: 'center',
                //   render: (h, params) => {
                //     return h('Poptip', {
                //       props: {
                //         trigger: 'hover',
                //         title: this.$t('800008'), // 图片
                //         placement: 'bottom',
                //         transfer: true,
                //         left: '30%'
                //       },
                //       on: {
                //         'on-popper-show': () => {
                //           console.log(params.row.qrcode)
                //           this.handleBatchPrintCode(params.row.qrcode)
                //         }
                //       }
                //     }, [
                //       h('Tag', this.$t('800008')),
                //       h('div', {
                //         slot: 'content',
                //         attrs: {
                //           id: 'qrcodeshow'
                //         }
                //       }, [
                //         // h('img', {
                //         //   attrs: {
                //         //     src: params.row.image, style: 'border-radius: 2px;z-index:9999;width:500px;height:500px;'
                //         //   }
                //         // })
                //       ])
                //     ])
                //   }
                // }
            ],
            total: 0, // 数据总条数
            selectids: '',
            tableColumns1: [
                // {
                //   type: 'selection',
                //   width: 50,
                //   align: 'center'
                // },
                {
                    type: 'index2',
                    title: this.$t('1008'), // 序号
                    key: 'xuhao',
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: 80
                },
                {
                    title: this.$t('900337'), // 工单号
                    align: 'center',
                    key: 'work_order'
                },
                {
                    title: this.$t('960432'), // 设备
                    key: 'location',
                    align: 'center'
                },
                {
                    title: this.$t('200022'), // 失效模式
                    key: 'faultmode',
                    align: 'center'
                },
                {
                    title: this.$t('950444'),
                    slot: 'action',
                    width: 150,
                    align: 'center'
                },
                {
                    title: this.$t('950445'), // 申请人
                    key: 'user_name',
                    align: 'center'
                },

                {
                    title: this.$t('950446'), // 申请时间
                    key: 'apply_time',
                    align: 'center'
                },
                {
                    title: this.$t('950453'), // 备货状态
                    key: 'apply_state_name',
                    align: 'center'
                }
            ], // 表头
            confirmmodal: false, // 备货确认弹出框
            tableData3: [], // 模态框table
            tableColumns3: [
                {
                    title: this.$t('1950578'), // 备件编码
                    align: 'center',
                    key: 'code'
                },
                {
                    title: this.$t('300002'), // 备件名称
                    key: 'name',
                    align: 'center',
                    width: 180
                },
                {
                    title: this.$t('300090'), // 备件类别
                    key: 'type',
                    align: 'center'
                },
                {
                    title: this.$t('300003'), // 库位
                    key: 'location',
                    align: 'center'
                },
                {
                    title: this.$t('300016'), // 当前库存
                    key: 'Stock',
                    align: 'center'
                },
                {
                    title: this.$t('950455'), // 申请数量
                    key: 'number',
                    align: 'center',
                    width: 140,
                    render: (h, params, vm) => {
                        if (params.row.is_replace == 1) {
                            return h('span', {
                            }, params.row.number)
                        } else {
                            return h('InputNumber', {
                                style: {
                                    width: '100px'
                                },
                                props: {
                                    type: 'number',
                                    size: 'large',
                                    value: params.row.number,
                                    min: 1,
                                    max: params.row.Stock
                                },
                                on: {
                                    'on-change': (e) => {
                                        params.row.number = e // 如果是select记得 要直接等于e  例如：params.row.attrName = e
                                        this.tableData3[params.index] = params.row
                                    },
                                    'on-blur': () => {
                                        // this.updateFoo()
                                    }
                                }
                            }, '')
                        }
                    }
                },
                {
                    title: this.$t('1590033'), // 申请数量
                    key: 'number',
                    align: 'center',
                    width: 150,
                    render: (h, params, vm) => {
                        if (params.row.is_replace == 0) {
                            return h('span', {
                            }, '/')
                        } else {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    size: 'large',
                                    value: params.row.qrcode
                                },
                                on: {
                                    'on-change': (e) => {
                                        params.row.qrcode = e.target.value // 如果是select记得 要直接等于e  例如：params.row.attrName = e
                                        this.tableData3[params.index] = params.row
                                        this.checkqrcode(params.index, params.row.qrcode) // 校验二维码
                                    },
                                    'on-blur': () => {
                                        // this.checkqrcode(params.row) //校验二维码
                                    }
                                }
                            }, '')
                        }
                    }
                }
            ]
        }
    },
    created () { // 生命周期
        this.initlevel()
        // this.search(1, 10)
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.tableColumns2 = this.$time.initTableTitle(this.tableColumns2)
        this.tableColumns3 = this.$time.initTableTitle(this.tableColumns3)
    },
    methods: {
    // 初始化产线层级
        initlevel () {
            this.axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    const arr = []
                    if (res.data.data.length > 0) {
                        this.datalevel = res.data.data
                        arr.push(res.data.data[0].value)
                        this.leveldata = arr
                        this.search(1, this.pagesize)
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        levelchange (value) {
            this.leveldata = value
        },
        search (page, pagesize) {
            var params = {
                sectionId: this.leveldata.length === 0 ? 0 : this.leveldata[this.leveldata.length - 1],
                code: this.Work_order,
                status: this.Stocking_status,
                category: 2, // 备件备货
                page: page,
                pagesize: pagesize
            }
            this.axios.request({
                url: '/tpm/SparepartAudit/GetAuditPagedList',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.total = res.data.total
                    this.mockTableData1(res.data.data)
                    this.page = res.data.page
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        // 渲染列表开始
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    var state_name = ''
                    if (item.apply_state === 2) {
                        state_name = this.$t('950441')
                    } else if (item.apply_state === 4) {
                        state_name = this.$t('500097')
                    }
                    data.push({
                        id: item.id,
                        code: item.code,
                        machine_id: item.machine_id,
                        location: item.location,
                        apply_state: item.apply_state,
                        apply_time: item.apply_time,
                        user_name: item.user_name,
                        faultmode: item.faultmode,
                        apply_state_name: state_name,
                        work_order: item.work_order
                    })
                }
            })
            this.tableData1 = data
        },
        changePage (value) {
            this.page = value
            // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
            this.search(this.page, this.pagesize)
        },
        handlePageSize (value) {
            this.pagesize = value
            this.search(this.page, this.pagesize)
        },
        handleRowChange (currentRow, oldCurrentRow) { // 点击之后将某一行的数据添加到obj的对象中
            this.obj = currentRow
        },
        handleSelectRow: function (data) {
            var ids = []
            for (var i in data) {
                ids.push(data[i].id)
            }
            this.selectids = ids.join(',')
        },
        show (index) {
            this.detailmodal = true
            var params = {
                id: index
            }
            this.axios.request({
                url: '/tpm/SparepartAudit/GetSparepartApplyList',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.mockTableData2(res.data.data)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        // 备货确认
        confirmation () {
            if (this.obj.id !== undefined && this.obj.apply_state_name == this.$t(950441)) {
                this.confirmmodal = true
                this.search3()
            } else {
                this.$Message.error(this.$t('1590034'))
            }
        },
        search3 () {
            var params = {
                repair_id: parseInt(this.obj.code)
            }
            this.axios.request({
                url: '/tpm/AppSparepart/GetPrepareSpareparts',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.mockTableData3(res.data.data)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        // 渲染detailmodal列表开始
        mockTableData2 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        code: item.code,
                        name: item.name,
                        type: item.sparepart_type == 1 ? this.$t(930126) : this.$t(930127),
                        Stock: item.sku,
                        number: item.apply_count,
                        qrcode: item.qrcode,
                        location: item.location
                    })
                }
            })
            this.tableData2 = data
        },
        mockTableData3 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.sparepartid,
                        code: item.code,
                        name: item.name,
                        type: item.is_replace == 1 ? this.$t(930126) : this.$t(930127),
                        Stock: item.sku,
                        number: item.apply_count,
                        qrcode: item.qrcode,
                        location: item.location,
                        is_replace: item.is_replace
                    })
                }
            })
            this.tableData3 = data
        },
        // 校验二维码
        checkqrcode (index, qrcode) {
            if (qrcode == '') {
                return false
            }
            var params = {
                qrcode: qrcode
            }
            this.axios.request({
                url: '/tpm/AppSparepart/CheckQrCode',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t('930125'))
                } else {
                    this.tableData3[index].qrcode = ''
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        submit () {
            let data = []
            this.tableData3.forEach(item => {
                if (item) {
                    data.push({
                        sparepartid: item.id,
                        apply_count: item.number,
                        qrcode: item.qrcode != undefined ? item.qrcode : ''
                    })
                }
            })
            var data1 = {
                id: this.obj.id,
                spareparts: data
            }
            this.spinShow = true
            this.axios.request({
                url: '/tpm/AppSparepart/SubmitPrepare',
                data: data1,
                method: 'post'
            }).then(res => {
                this.spinShow = false
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t(1060))
                    this.confirmmodal = false
                    this.search(1, this.pagesize)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        handleBatchPrintCode (item) {
            // 必须要等到页面加载完成，不然会报错
            this.$nextTick(() => {
                let code = item
                document.querySelector('#qrcodeshow').innerHTML = ''
                var htmlcode = document.querySelector('#qrcodeshow')
                let qrcodex = new QRCode(htmlcode, {
                    text: code, // 二维码内容
                    width: 150,
                    height: 150
                })
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
