<template>
  <div class="testdiv">
    <div class="divborder" style="margin:0px;">
          <Button type="success" icon="md-add-circle" @click="add()">{{$t('1002')}}</Button>
          <Button type="warning" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
          <Button type="error" icon="md-close-circle" @click="dele()">{{$t('1004')}}</Button>
    </div>
    <div class="divborder">
      <Table
        style="margin-top:10px"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        @on-selection-change="handleSelectRow"
        :columns="tableColumns1"></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <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 :title="$t('100093')" v-model="editmodal" :styles="{top: '40px',width:'700px'}" @on-ok="editdata">
        <div class="modal_body" style="width:700px!important;padding:0 20px;height:100px!important;">
        <div class="filter">
            <label>{{this.$t('9900075')}}<span><i style="color:red;margin-left: 5px!important;margin-top: -5px!important" >*</i>:</span></label>
            <input class="publicinput" type="text" id="input1" v-model="editobj.editcode">
        </div>
        <div class="filter">
            <label >{{this.$t('9900076')}}<span><i style="color:red;margin-left: 5px!important;margin-top: -5px!important" >*</i>:</span></label>
            <input class="publicinput" type="text" id="input1" v-model="editobj.editname">
        </div>
        <div class="filter">
            <label >{{this.$t('9900077')}}<span><i style="color:red;margin-left: 5px!important;margin-top: -5px!important" >*</i>:</span></label>
            <input class="publicinput" type="text" id="input1" v-model="editobj.editdrawcode">
        </div>
        <div class="filter">
            <label >{{this.$t('9900074')}}:</label>
            <input class="publicinput" type="text" id="input1" v-model="editobj.editremark">
        </div>
      </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    name: 'productmanagement', // 组件不刷新
    data () {
        return {
            keyword: '',
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            detailobj: {},
            editmodal: false,
            editobj: {},
            selectids: '',
            tableColumns1: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    type: 'index',
                    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('9900075'),
                    key: 'name'
                },
                {
                    title: this.$t('9900076'),
                    key: 'drawingcode'
                },
                {
                    title: this.$t('9900077'),
                    key: 'remark'
                },
                {
                    title: this.$t('9900074'),
                    key: 'remark'
                }
            ]
        }
    },
    created () {
        this.search(1, 10)
    },
    methods: {
        handleFormatError (file) {
            this.$Message.error(this.$t('950396') + file.name + this.$t('950397'))
        },
        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)
                })
        },
        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
                    })
                }
            })
            this.tableData1 = data
        },
        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.addmodal = true
        },
        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()
            if (code === '' || name === '' || drawcode === '') {
                this.$Message.error(this.$t('600652'))
                return false
            }
            let data = {
                code: code,
                name: name,
                drawingcode: drawcode,
                remark: remark,
                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.$Message.error((this.$t('1017')))
                return false
            } else {
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        axios.request({
                            url: '/config/ProjectProduct/DeleteProduct?id=' + this.selectids,
                            method: 'post'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1058'))
                                this.tableData1 = this.search(this.page, 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
            }
            this.editmodal = true
        },
        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()
            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
            }
            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))
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
