<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label >{{$t('600648')}}：</label>
          <Select v-model="categoryid" label-in-value clearable class="searchSelect" >
              <Option v-for="item in categorys" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </div>
        <div class="filter">
          <label >{{$t('1950540')}}：</label>
          <Input class="searchInput" type="text" v-model="unhealthyname" />
        </div>
        <div class="filter">
          <label >{{$t('1950532')}}：</label>
          <Input class="searchInput" type="text" v-model="unhealthycode" />
        </div>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,pagesize)">{{$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="axios.publicPath+'qms/upload/submit?templateName=InspectUnhealthyTemplate'"
            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="downexcel()">{{$t('1007')}}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        @on-selection-change="handleSelectRow"
        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-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>

    <Modal class="newModalClass" :title='title1' v-model="editmodal" :styles="{width:'500px'}">
      <div class="modal_body">
          <div class="filter">
              <label ><i>*</i>{{$t('1950531')}}：</label>
              <Select v-model="editobj.categoryid" label-in-value clearable class="searchSelect" >
                  <Option v-for="item in categorys" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
          </div>
          <div class="filter">
              <label><i>*</i>{{$t('1950540')}}：</label>
              <Input class="searchInput" type="text" v-model="editobj.name" />
          </div>
          <div class="filter">
              <label><i>*</i>{{$t('1950532')}}：</label>
              <Input class="searchInput" type="text" v-model="editobj.code"  maxlength="5"/>
          </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancle">{{$t('1033')}}</Button>
        <Button type="primary" v-if="type===1" size="large" @click="adddata">{{$t('1002')}}</Button>
        <Button type="primary" v-if="type===2" size="large" @click="editdata">{{$t('1003')}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from '@/libs/api.request'

export default{
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            title1: this.$t('1002'),
            tableData1: [],
            editmodal: false,
            page: 1,
            pagesize: 10,
            total: 0,
            tableColumns1: [
                {
                    type: 'selection',
                    width: 50,
                    align: 'center'
                },
                {
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: 90
                },
                {
                    title: this.$t('1950531'),
                    key: 'categoryname'
                },
                {
                    title: this.$t('1950540'),
                    key: 'name'
                },
                {
                    title: this.$t('1950532'),
                    key: 'code'
                }
            ],
            editobj: {},
            categorys: [],
            unhealthyname: '',
            unhealthycode: '',
            categoryid: 0,
            type: 0,
            selectids: []
        }
    },
    created () {
        this.search(1, 10)
        this.initcategorys()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        search (page, pagesize) {
            var params = {
                page: page,
                pagesize: pagesize,
                categoryid: this.categoryid,
                name: this.unhealthyname,
                code: this.unhealthycode
            }
            axios
                .request({
                    url: '/qms/InspectCategory/GetUnhealthyList',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.page = page
                    this.pagesize = pagesize
                    this.total = res.data.total
                    this.mockTableData1(res.data.data)
                })

            this.obj = {}
        },
        cancle () {
            this.editobj = {}
            this.editmodal = false
            this.type = 0
            this.search(this.page, this.pagesize)
        },
        add () {
            this.title1 = this.$t('1002')
            this.type = 1
            this.editobj = {}
            this.editmodal = true
        },
        edit () {
            if (JSON.stringify(this.obj) === '{}' || this.obj === null || this.obj === undefined) {
                this.$Message.error(this.$t('1043'))
                return false
            }
            this.title1 = this.$t('1003')
            this.editobj = {}
            this.editmodal = true
            this.type = 2
            this.editobj = this.obj
        },
        adddata () {
            var data = this.editobj
            axios
                .request({
                    url: '/qms/InspectCategory/AddUnhealthy',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1055'))
                        this.search(this.page, this.pagesize)
                        this.editmodal = false
                        this.daterange = ''
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        editdata () {
            let data = this.editobj
            data.id = this.obj.id
            axios.request({
                url: '/qms/InspectCategory/UpdateUnhealthy',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1060'))
                    this.search(this.page, this.pagesize)
                    this.editmodal = false
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        dele () {
            if (this.selectids === undefined || this.selectids === null || 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: () => {
                        let parameter = {
                            ids: this.selectids
                        }
                        axios.request({
                            url: '/qms/InspectCategory/DeleteUnhealthy',
                            data: parameter,
                            method: 'post'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.page = 1
                                this.selectids = []
                                this.search(this.page, this.pagesize)
                                this.$Message.success(this.$t('1058'))
                            } else {
                                this.$Message.error(this.$t(res.data.msg))
                            }
                        })
                    }
                })
            }
        },
        initcategorys () {
            axios.request({
                url: '/qms/InspectCategory/GetNameList',
                method: 'get'
            }).then(res => {
                this.categorys = res.data.data
            })
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        categoryid: item.categoryid,
                        categoryname: item.categoryname,
                        name: item.name,
                        code: item.code
                    })
                }
            })
            this.tableData1 = data
        },
        loadexcel () {
            axios.request({
                url: '/config/download/GetTemplate?name=InspectUnhealthyTemplate',
                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))
                }
            })
        },
        downexcel () {
            var params = {
                categoryid: this.categoryid,
                name: this.unhealthyname,
                code: this.unhealthycode,
                toexcel: 1
            }
            axios.request({
                url: '/qms/InspectCategory/GetUnhealthyList',
                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));
                }
            })
        },
        changecondition () {
            this.morecondition = !this.morecondition
        },
        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)
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
        },
        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) {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t('' + res.msg))
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('950399'))
        },
        handleSelectRow: function (data) {
            this.selectids = []
            for (var i in data) {
                if (this.selectids.indexOf(data[i].id) < 0) {
                    this.selectids.push(data[i].id)
                }
            }
        }
    }
}

</script>
<style lang="less" scoped>

</style>
