<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
        <div class="filter">
          <label>{{$t('950183')}}：</label>
          <Input class="searchInput" type="text" v-model="keyword" />
        </div>
        <div class="searchBtn">
          <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,10)">{{$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 type="primary" class="fourWord" icon="md-cloud-upload">{{$t('1006')}}</Button>
        </Upload>
          <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="Export()">{{$t('1007')}}</Button>
          <Button type="primary" class="fourWord" icon="md-cloud-upload" @click="ImportImage()">{{$t('960576')}}</Button>
            </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        @on-selection-change="handleSelectRow"
        :columns="tableColumns1"></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" :title="$t('1002')" v-model="addmodal" :styles="{width:'650px'}">
        <div class="modal_body">
        <div class="filter">
            <label><i>*</i>{{this.$t('100089')}}：</label>
            <Input class="searchInput" type="text" id="input1" v-model="addcode"/>
        </div>
        <div class="filter">
            <label><i>*</i>{{this.$t('100088')}}：</label>
            <Input class="searchInput" type="text" id="input1" v-model="addname"/>
        </div>
        <div class="filter">
            <label><i>*</i>{{this.$t('100090')}}：</label>
            <Input class="searchInput" type="text" id="input1" v-model="adddrawcode"/>
        </div>
        <div class="filter">
            <label>{{this.$t('100091')}}：</label>
            <Input class="searchInput" type="text" id="input1" v-model="addremark"/>
        </div>
        <div style="display: flex;">
          <label>{{$t(600528)}}：</label>
          <div class="uploadMax">
            <img :src="loadimg" alt />
            <input
              type="file"
              name
              ref="fileIntimg"
              id
              @change="unloadimg"
              accept="image/png, image/gif, image/jpeg"
            />
          </div>
        </div>
      </div>
      <div slot="footer">
            <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
            <Button type="primary" size="large" @click="adddata()">{{$t('1011')}}</Button>
        </div>
      </Modal>
      <Modal class="newModalClass" :title="$t('1003')" v-model="editmodal" :styles="{width:'700px'}" @on-ok="editdata">
        <div class="modal_body">
        <div class="filter">
            <label><i>*</i>{{this.$t('100089')}}：</label>
            <Input class="searchInput" type="text" id="input1" v-model="editobj.editcode"/>
        </div>
        <div class="filter">
            <label ><i>*</i>{{this.$t('100088')}}：</label>
            <Input class="searchInput" type="text" id="input1" v-model="editobj.editname"/>
        </div>
        <div class="filter">
            <label ><i>*</i>{{this.$t('100090')}}：</label>
            <Input class="searchInput" type="text" id="input1" v-model="editobj.editdrawcode"/>
        </div>
        <div class="filter">
            <label >{{this.$t('100091')}}：</label>
            <Input class="searchInput" type="text" id="input1" v-model="editobj.editremark"/>
        </div>
        <div style="display: flex;">
          <label>{{$t(600528)}}：</label>
          <div class="uploadMax">
            <img :src="loadimg1" alt />
            <input
              type="file"
              name
              ref="fileIntimg1"
              id
              @change="unloadimg1"
              accept="image/png, image/gif, image/jpeg"
            />
          </div>
        </div>
      </div>
      </Modal>
      <Modal class="newModalClass" :title="$t('960576')" v-model="imagemodal" :styles="{width:'700px'}">
        <div class="modal_body">
        <div style="display: flex;">
          <label>{{$t(600528)}}：</label>
          <div class="uploadMax">
            <img :src="loadimg2" alt />
            <input
              type="file"
              name
              ref="fileIntimg2"
              id
              @input="unloadimg2"
              accept="image/png, image/gif, image/jpeg"
            />
          </div>
        </div>
      </div>
       <div slot="footer">
            <Button type="text" size="large" @click="closeupload()">{{$t('1033')}}</Button>
            <Button type="primary" size="large" @click="uploadimage()">{{$t('1011')}}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    name: 'productmanagement', // 组件不刷新
    data () {
        return {
            action: axios.publicPath + 'config/upload/submit?templateName=productlist',
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            keyword: '',
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            detailobj: {},
            editmodal: false,
            editobj: {},
            addcode: '',
            addname: '',
            adddrawcode: '',
            addremark: '',
            editcode: '',
            editname: '',
            editdrawcode: '',
            editremark: '',
            selectids: [],
            imagemodal: false,
            loadimg: require('../../../static/images/xiangjitwo.png'),
            uploadimg: '',
            loadimg1: require('../../../static/images/xiangjitwo.png'),
            uploadimg1: '',
            loadimg2: require('../../../static/images/xiangjitwo.png'),
            uploadimg2: '',
            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: '90px'
                },
                {
                    title: this.$t('100089'),
                    key: 'code'
                },
                {
                    title: this.$t('100088'),
                    key: 'name'
                },
                {
                    title: this.$t('100090'),
                    key: 'drawingcode'
                },
                {
                    title: this.$t('100091'),
                    key: 'remark'
                },
                {
                    title: this.$t('1045'),
                    key: 'image',
                    render: (h, params) => {
                        if (params.row.image) {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    title: this.$t(1045),
                                    placement: 'bottom',
                                    transfer: true,
                                    left: '30%'
                                }
                            }, [
                                h('Tag', this.$t(1045)),
                                h('div', {
                                    slot: 'content'
                                }, [
                                    h('img', {
                                        attrs: {
                                            src: params.row.image, style: 'border-radius: 2px;z-index:9999;width:500px;height:500px'
                                        }
                                    })
                                ])
                            ])
                        } else {
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    title: this.$t(1045),
                                    placement: 'bottom',
                                    transfer: true,
                                    left: '30%'
                                }
                            }, [
                                h('Tag', this.$t(1045)),
                                h('div', {
                                    slot: 'content'
                                })
                            ])
                        }
                    }
                }
            ]
        }
    },
    created () {
        this.search(1, 10)
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        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(this.page, this.pagesize)
            } else {
                if ((res.msg + '').indexOf(',') != -1) {
                    this.page = 1
                    this.search(this.page, this.pagesize)
                    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)
            }
        },
        search (page, pagesize) {
            var params = {
                key: this.keyword,
                page: page,
                pagesize: pagesize
            }
            axios
                .request({
                    url: '/config/ProjectProduct/GetProductItems',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.total = res.data.total
                    this.mockTableData1(res.data.data)
                    this.obj = {}
                    this.selectids = []
                })
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        code: item.code,
                        name: item.name,
                        drawingcode: item.drawingcode,
                        remark: item.remark,
                        id: item.id,
                        image: item.image
                    })
                }
            })
            this.tableData1 = data
        },
        unloadimg () {
            // 上传照片
            const file = this.$refs.fileIntimg.files[0]
            const data = new FormData()
            data.append('file', file)
            axios
                .request({
                    url: '/config/upload/UploadImage',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(100378))
                        this.loadimg = axios.publicPath + res.data.data
                        this.uploadimg = this.loadimg
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
                .catch(err => {
                    this.$Message.error(this.$t(err.msg))
                })
        },
        unloadimg1 () {
            // 上传照片
            const file = this.$refs.fileIntimg1.files[0]
            const data = new FormData()
            data.append('file', file)
            axios
                .request({
                    url: '/config/upload/UploadImage',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(100378))
                        this.loadimg1 = this.axios.publicPath + res.data.data
                        this.uploadimg1 = this.loadimg1
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
                .catch(err => {
                    this.$Message.error(this.$t(err.msg))
                })
        },
        unloadimg2 () {
            // 上传照片
            const file = this.$refs.fileIntimg2.files[0]
            const data = new FormData()
            data.append('file', file)
            axios
                .request({
                    url: '/config/upload/UploadImage',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(100378))
                        this.loadimg2 = this.axios.publicPath + res.data.data
                        this.uploadimg2 = this.loadimg2
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
                .catch(err => {
                    this.$Message.error(this.$t(err.msg))
                })
        },
        cancle () {
            this.editloadimg = require('../../../static/images/xiangjitwo.png')
            this.loadimg = require('../../../static/images/xiangjitwo.png')
            this.editloadimg1 = require('../../../static/images/xiangjitwo.png')
            this.loadimg1 = require('../../../static/images/xiangjitwo.png')
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        add () {
            this.loadimg = require('../../../static/images/xiangjitwo.png')
            this.addmodal = true
            this.addcode = ''
            this.addname = ''
            this.adddrawcode = ''
            this.addremark = ''
            this.uploadimg1 = ''
            this.$refs.fileIntimg.value = '';
        },
        closeadd () {
            this.addmodal = false
        },
        adddata () {
            var code = this.addcode.trim()
            var name = this.addname.trim()
            var drawcode = this.adddrawcode.trim()
            var remark = this.addremark.trim()
            var image = (this.loadimg == require('../../../static/images/xiangjitwo.png') ? '' : this.loadimg)

            if (code === '' || name === '' || drawcode === '') {
                this.$Message.error(this.$t('600652'))
                return false
            }
            let data = {
                code: code,
                name: name,
                drawingcode: drawcode,
                remark: remark,
                image: image,
                id: 0
            }
            axios.request({
                url: '/config/ProjectProduct/OptProduct',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1055'))
                    this.addmodal = false
                    this.search(this.page, this.pagesize)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        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/ProjectProduct/DeleteProducts',
                            data: data,
                            method: 'post'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1058'))
                                this.page = 1
                                this.search(1, this.pagesize)
                                this.detailobj = {}
                            } else {
                                this.$Message.error(this.$t(res.data.msg))
                            }
                        })
                    }
                })
            }
        },
        edit () {
            if (this.detailobj === undefined || this.detailobj.id === undefined) {
                this.$Message.error((this.$t('1017')))
                return false
            }
            if (this.detailobj.image === '') {
                this.loadimg1 = require('../../../static/images/xiangjitwo.png')
            } else {
                this.loadimg1 = this.detailobj.image
            }
            this.editmodal = true
            this.editobj.editcode = this.detailobj.code
            this.editobj.editname = this.detailobj.name
            this.editobj.editdrawcode = this.detailobj.drawingcode
            this.editobj.editremark = this.detailobj.remark
            this.editobj.image = this.detailobj.image
        },
        editdata () {
            var code = this.editobj.editcode.trim()
            var name = this.editobj.editname.trim()
            var drawcode = this.editobj.editdrawcode.trim()
            var remark = this.editobj.editremark.trim()
            var image = (this.loadimg1 == require('../../../static/images/xiangjitwo.png') ? '' : this.loadimg1)
            if (code === '' || name === '' || drawcode === '') {
                this.$Message.error(this.$t('600652'))
                return false
            }
            let data = {
                code: code,
                name: name,
                drawingcode: drawcode,
                remark: remark,
                id: this.detailobj.id,
                image: image
            }
            axios.request({
                url: '/config/ProjectProduct/OptProduct',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1055'))
                    this.addmodal = false
                    this.search(this.page, this.pagesize)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        loadexcel () {
            axios.request({
                url: '/config/download/GetTemplate?name=productlist',
                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))
                }
            })
        },
        Export () {
            let params = {
            }
            axios.request({
                url: '/config/projectproduct/ExportProducts',
                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))
                }
            })
        },
        unloadexcel () {
            let file = this.readyFiles[0]
            const data = new FormData()
            data.append('file', file)
            axios.request({
                url: '/config/upload/submit?templateName=productlist',
                data,
                method: 'post'
            }).then(res => {
                if (res.ret === 1) {
                    this.page = 1
                    this.search(this.page, this.pagesize)
                    this.$Message.success(this.$t('100378'))
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            }).catch(err => {
                alert(err.msg)
            })
        },
        ImportImage () {
            if (this.selectids === undefined || this.selectids === '' || this.selectids === [] || this.selectids.length == 0) {
                this.$Message.error((this.$t('1017')))
                return false
            } else {
                this.imagemodal = true
                this.uploadimg2 = ''
                this.loadimg2 = require('../../../static/images/xiangjitwo.png')
            }
        },
        uploadimage () {
            var image = (this.loadimg2 == require('../../../static/images/xiangjitwo.png') ? '' : this.loadimg2)
            if (image === '') {
                this.$Message.error((this.$t('100380')))
                return false
            }
            var ids = []
            this.selectids.forEach(ele => {
                ids.push(ele)
            })
            var data = {
                ids: ids,
                img: image
            }
            axios.request({
                url: '/config/ProjectProduct/UploadProductImages',
                data: data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('100378'))
                    this.page = 1
                    this.search(1, this.pagesize)
                    this.detailobj = {}
                    this.imagemodal = false
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        closeupload () {
            this.imagemodal = false
        }
    }
}
</script>
<style lang="less" scoped>

</style>
