<template>
    <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
        <div class="filter">
          <label><span v-text="$t('100079')">设备类型名称</span>：</label>
          <Input type="text" class="searchInput" v-model="Etypename" />
        </div>
        <div class="filter">
            <label ><span v-text="$t('1031')">父级设备类型</span>：</label>
            <Select v-model="ftype" label-in-value @on-change="ftypechange" clearable class="searchSelect" >
                <Option v-for="item in ftypelist" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label ><span v-text="$t('1032')">子级设备类型</span>：</label>
            <Select v-model="ctype" label-in-value  clearable class="searchSelect" >
                <Option v-for="item in ctypelist" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </div>

    <div class="searchBtn" style="">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search()">{{$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="editfun">{{$t('1003')}}</Button>
        <Button type="error" class="twoWord intervalRight" icon="md-close-circle" @click="delefun">{{$t('1004')}}</Button>
        <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="loadexcel1()">{{$t('1005')}}</Button>
        <Button type="primary" class="fourWord" icon="md-download" @click="loadexcel()">{{$t('1007')}}</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" type="primary" icon="md-cloud-upload" >{{$t('1006')}}</Button>
        </Upload>
      </div>
    </div>
    <div class="divborder newTableDiv">
       <Table
         class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        :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>
        </div>
      </div>
    </div>
    <Modal class="newModalClass" :title="$t('1003')" v-model="modal9" :styles="{width:'600px'}" >
      <div class="modal_body">
          <div class="filter">
            <label><i>*</i>{{$t('100079')}}：</label>
            <Input type="text" class="searchInput" id="reason" v-model="obj.fathertype"/>
          </div>
          <div class="filter">
            <label><span v-text="$t('100083')">设备类型描述</span>：</label>
            <Input type="text" class="searchInput" id="reason" v-model="obj.description"/>
          </div>
      </div>
      <div slot="footer">
          <Button type="text" size="large" @click="modal9=false" v-text="$t('1033')">取消</Button>
          <Button type="primary" size="large" @click="editdata" v-text="$t('1011')">确定</Button>
      </div>
    </Modal>
    <!-- 修改模态框结束 -->
    <!-- 添加模态框开始 -->
     <Modal class="newModalClass" :title="$t('1002')" v-model="modal10" :styles="{width:'600px'}" >
      <div class="modal_body">
         <div class="filter">
          <label><span v-text="$t('100074')">设备类型</span>：</label>
          <Select v-model="addmtype" label-in-value  clearable class="searchSelect">
               <Option :value="1" v-text="$t('100085')">添加父级设备类型</Option>
               <Option :value="2" v-text="$t('100086')">添加子级设备类型</Option>
          </Select>
        </div>
        <div v-if="addmtype==1">
          <div class="filter">
            <label><i>*</i><span v-text="$t('100079')">设备类型名称</span>：</label>
            <Input type="text" class="searchInput" id="reason" v-model="addtypename"/>
          </div>
          <div class="filter">
            <label><span v-text="$t('100083')">设备类型描述</span>：</label>
            <Input type="text" class="searchInput" id="reason" v-model="addtypedesc"/>
          </div>
        </div>
        <div v-else-if="addmtype==2">
          <div class="filter">
            <label ><i>*</i><span v-text="$t('100087')">上级设备类型</span>：</label>
            <Select v-model="addupmtype" label-in-value  clearable class="searchSelect">
                <Option v-for="item in upmtypelist" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label><i>*</i><span v-text="$t('1032')">子级设备类型</span>：</label>
            <Input type="text" class="searchInput" id="reason" v-model="addsonmtype"/>
          </div>
          <div class="filter">
            <label><span v-text="$t('100083')">设备类型描述</span>：</label>
            <Input type="text" class="searchInput" id="reason" v-model="addsontype"/>
          </div>
        </div>
        <!-- </div> -->
      </div>
      <div slot="footer">
          <Button type="text" size="large" @click="modal10=false" v-text="$t('1033')">取消</Button>
          <Button type="primary" size="large" @click="adddata" v-text="$t('1011')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    name: 'ParentView',
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            action: this.axios.publicPath + 'config/upload/submit?templateName=machinetypelist', // 上传excel
            ftype: '',
            ftypelist: [],
            ctype: '',
            ctypelist: [],
            obj: {},
            table_row_obj: {}, // 某一行选中的对象，用来应对修改优化
            modal9: false,
            modal10: false,
            total: 0,
            page: 1,
            pagesize: 10,
            Etypename: '',
            addmtype: '',
            addtypename: '',
            addtypedesc: '',
            addupmtype: '',
            addsonmtype: '',
            addsontype: '',
            upmtypelist: [],
            addparentid: 0,
            adddescription: '',
            addtitle: '',
            edittypename: '',
            edittypedesc: '',
            tablelist: [],
            tableData1: [],
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t('1008'), // 序号
                    key: 'xuhao',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    },
                    width: '80px'
                },
                {
                    title: this.$t('100081'), // 父级类型
                    key: 'fathertype'
                },
                {
                    title: this.$t('1032'), // 子级设备类型
                    key: 'sontype'
                },
                {
                    title: this.$t('100083'), // 设备类型描述
                    key: 'description'
                },
                {
                    title: this.$t('100084'), // 包含设备数量
                    key: 'number'
                }
            ]
        }
    },

    created () {
        this.initftype()
        this.gettable()
        this.initupmachine()
        // 格式化表格样式
        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.gettable()
                this.$Message.success(this.$t('950398'))
            } else {
                if ((res.msg + '').indexOf(',') != -1) {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t(res.msg))
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('950399'))
        },
        loadexcel1 () {
            axios.request({
                url: '/config/download/GetTemplate?name=machinetypelist',
                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))
                }
            })
        },
        loadexcel () {
            let params = {
                machinename: this.Etypename,
                machinetype1: this.ftype,
                machinetype2: this.ctype
            }
            axios.request({
                url: '/config/MachineType/ExportMachineType',
                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))
                }
            })
        },
        initftype () {
            axios.request({
                url: '/config/MachineType/GetEditDcategory',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.ftypelist = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        ftypechange () {
            this.ftype = this.ftype
            if (this.ftype === undefined) {
                this.ctype = ''
                return false
            }
            this.equipmentid = this.ftype
            axios.request({
                url: '/config/MachineType/GetLastMachineType?id=' + this.equipmentid,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.ctypelist = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        initupmachine () {
            axios.request({
                url: '/config/MachineType/GetEditDcategory',
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.upmtypelist = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        delefun () {
            var id = this.obj.id
            if (id === undefined) {
                this.$Message.warning((this.$t('1017')))
                return false
            }
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                width: '290px',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    axios.request({
                        url: '/config/MachineType/DeleteDcategory?id=' + id,
                        method: 'post'
                    }).then(res => {
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t('1058'))
                            this.initftype()
                            this.page = 1
                            this.gettable()
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
                } })
        },
        error (msg) {
            this.$Message.error(this.$t(msg))
        },
        success (msg) {
            this.$Message.success(this.$t(msg))
        },
        adddata () {
            if (this.addmtype === 1) {
                this.addtypename = this.addtypename
                if (this.addtypename === '') {
                    this.$Message.error(this.$t('9000102'))
                    return false
                } else {
                    this.adddescription = this.addtypedesc
                    this.addtitle = this.addtypename
                }
            } else if (this.addmtype === 2) {
                this.parentid = this.addupmtype
                this.addupmtype = this.addupmtype
                if (this.addupmtype === '' || this.addsonmtype === '') {
                    this.$Message.error(this.$t('9000082'))
                    return false
                } else {
                    this.addparentid = this.addupmtype
                    this.addtitle = this.addsonmtype
                    this.adddescription = this.addsontype
                }
            } else {
                this.$Message.error(this.$t('100180'))
                return false
            }
            let data = {
                parentid: this.addparentid,
                description: this.adddescription,
                title: this.addtitle
            }
            axios.request({
                url: '/config/MachineType/AddDcategory',
                data: data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1055'))
                    this.page = 1
                    this.gettable()
                    this.modal10 = false
                    this.addmtype = ''
                    this.addtypename = ''
                    this.addtypedesc = ''
                    this.addupmtype = ''
                    this.addsonmtype = ''
                    this.addsontype = ''
                    this.initupmachine()
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        editdata () {
            this.obj.fathertype = this.obj.fathertype
            if (this.obj.fathertype === '') {
                this.$Message.error(this.$t('9000102'))
                return false
            }
            var data = {
                machinetypeid: this.obj.id,
                description: this.obj.description,
                title: this.obj.fathertype
            }
            axios.request({
                url: '/config/MachineType/EditMachineType',
                data: data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1060'))
                    this.gettable()
                    this.modal9 = false
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        fathertype: item.t1,
                        sontype: item.t2,
                        description: item.description,
                        number: item.nums,
                        id: item.id,
                        parentid: item.parentid
                    })
                }
            })
            this.tableData1 = data
        },
        search () {
            this.page = 1
            // this.pagesize = 10
            this.gettable()
            this.obj = {}
        },
        gettable () {
            let params = {
                machinename: this.Etypename,
                machinetype1: this.ftype,
                machinetype2: this.ctype,
                page: this.page,
                pagesize: this.pagesize
            }
            axios.request({
                url: '/config/MachineType/GetmachineTypeItemTwo',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.tablelist = res.data.data
                    this.total = res.data.total
                    this.mockTableData1(this.tablelist)
                    this.obj = {}
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        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.tableData1 = this.gettable()
        },
        add () {
            this.modal10 = true
        },
        editfun () {
            if (this.obj.id === undefined) {
                this.$Message.error(this.$t('1043'))
            } else {
                this.obj = this.$time.deepClone(this.table_row_obj)
                if (this.obj.parentid === 0) {
                    this.obj.fathertype = this.obj.fathertype
                } else {
                    this.obj.fathertype = this.obj.sontype
                }
                this.modal9 = true
            }
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
            this.table_row_obj = this.$time.deepClone(currentRow)
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.gettable()
        },
        tagNavList () {
            return this.$store.state.app.tagNavList
        },
        notCacheName () {
            return [(this.$route.meta && this.$route.meta.notCache) ? this.$route.name : '']
        },
        cacheList () {
            return ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
        }
    }
}
</script>
<style lang="less" scoped>

</style>
