<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
        <div class="filter">
          <label>{{$t('900514')}}：</label>
          <Input class="searchInput" type="text" v-model="cat" />
        </div>
        <div class="filter">
          <label>{{$t('920167')}}：</label>
          <Input class="searchInput" type="text" v-model="dkey" />
        </div>
        <div class="filter">
          <label>{{$t('920168')}}：</label>
          <Input class="searchInput" type="text" v-model="dval" />
        </div>
          <div class="filter">
          <label>{{$t('920169')}}：</label>
          <DatePicker
            id="日期"
            type="datetimerange"
            :value="daterange"
            confirm
            placeholder=""
            class="searchInput middleWidth"
            format="yyyy-MM-dd"
            @on-change="selectdate"
          ></DatePicker>
        </div>
        <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="commitDelete()">{{$t('1004')}}</Button>
            <!-- <Button type="primary" icon="md-download" @click="download()">{{$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" icon="md-cloud-upload">{{$t('1006')}}</Button>
            </Upload> -->
            <!-- <a type="button" href="javascript:;" class="file">
              {{$t('1006')}}
              <input type="file" name ref="fileInt" id @change="importxls" />
            </a> -->
            <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="exportxls()">{{$t('1007')}}</Button>
          </div>

        </div>
        </div>
        <Modal
          class="newModalClass"
          :title="$t(1002)"
          v-model="addmodal"
          :styles="{width:'600px'}"
        >
          <div class="filter">
            <label><i>*</i>{{$t(900514)}}：</label>
            <Input class="searchInput" type="text" id="cat" v-model="addcat"  />
          </div>
          <div class="filter">
            <label><i>*</i>{{$t(920167)}}：</label>
            <Input class="searchInput" type="text" id="dkey" v-model="adddkey"  />
          </div>
          <div class="filter">
            <label><i>*</i>{{$t(920168)}}：</label>
            <Input class="searchInput" type="text" id="dval" v-model="adddval"  />
          </div>
          <div slot="footer">
              <Button type="text" size="large" @click="addmodal=false" v-text="$t('1033')">取消</Button>
              <Button type="primary" size="large" @click="commitAdd" v-text="$t('1011')">确定</Button>
          </div>
        </Modal>

        <Modal
           class="newModalClass"
          :title="$t(1003)"
          v-model="editmodal"
          :styles="{width:'600px'}"
          @on-ok="commitEdit"
        >
          <div class="filter">
            <label><i>*</i>{{$t(900514)}}：</label>
            <Input
              class="searchInput"
              type="text"
              id="input1"
              v-model="detailobj.cat"
            />
          </div>
          <div class="filter">
            <label><i>*</i>{{$t(920167)}}：</label>
            <Input
              class="searchInput"
              type="text"
              id="input1"
              v-model="detailobj.dkey"
            />
          </div>
          <div class="filter">
            <label><i>*</i>{{$t(920168)}}：</label>
            <Input
              class="searchInput"
              type="text"
              id="input1"
              v-model="detailobj.dval"
            />
          </div>
          <div slot="footer">
              <Button type="text" size="large" @click="editmodal=false" v-text="$t('1033')">取消</Button>
              <Button type="primary" size="large" @click="commitEdit" v-text="$t('1011')">确定</Button>
          </div>
        </Modal>
    <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-size-opts="[10,20,30,40,100]"
        ></Page>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
import moment from 'moment'
export default {
    name: 'Businessmanagement', // 组件不刷新
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            morecondition: false,
            addmodal: false,
            editmodal: false,
            cat: '',
            dkey: '',
            dval: '',
            action: axios.publicPath + 'config/upload/submit?templateName=productlist',
            daterange: '',
            addcat: '',
            adddkey: '',
            adddval: '',
            dtStart: '',
            dtEnd: '',
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            detailobj: {},
            addId: '',
            addName: '',
            addPinyin: '',
            addCommit: false,
            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(900514),
                    key: 'cat',
                    width: '200px'
                },
                {
                    title: this.$t(920167),
                    key: 'dkey'
                },
                {
                    title: this.$t(920168),
                    key: 'dval'
                },
                {
                    title: this.$t(920169),
                    key: 'createtime',
                    width: '200px',
                    render: (h, params) => {
                        return h(
                            'span',
                            moment(params.row.createtime * 1000).format('YYYY-MM-DD HH:mm:ss')
                        )
                    }
                }
            ]
        }
    },
    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'))
            } else {
                if ((res.msg + '').indexOf(',') != -1) {
                    inittip(res.msg)
                } else {
                    this.$Message.error(this.$t('' + res.msg))
                }
            }
        },
        handleError () {
            this.$Message.error(this.$t('2010006') + '!')
        },
        search (page, pagesize) {
            var params = {
                page: page,
                pagesize: pagesize,
                cat: this.cat,
                dkey: this.dkey,
                dval: this.dval,
                dtStart: this.dtStart,
                dtEnd: this.dtEnd
            }
            axios
                .request({
                    url: '/config/Dict/getList',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total
                        this.mockTableData1(res.data.data.data)
                        this.page = res.data.page
                    }
                })

            this.detailobj = ''
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        cat: item.cat,
                        dkey: item.dkey,
                        dval: item.dval,
                        createtime: item.createtime,
                        status: item.status
                    })
                }
            })
            this.tableData1 = data
        },
        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.detailobj = currentRow
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
        },
        add () {
            this.addmodal = true
        },
        commitAdd () {
            this.valid()
            if (this.addCommit === false) {
                return false
            }
            var data = {
                cat: this.addcat,
                dkey: this.adddkey,
                dval: this.adddval
            }
            axios
                .request({
                    url: '/config/Dict/Add',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1055))
                        this.search(1, 10)
                        this.cat = ''
                        this.dkey = ''
                        this.dval = ''
                        this.dtStart = ''
                        this.dtEnd = ''
                        this.addcat = ''
                        this.adddkey = ''
                        this.adddval = ''
                        this.addmodal = false
                    } else {
                        this.$Message.error(this.$t('9000119'))
                    }
                })
        },

        commitEdit () {
            this.editValid()
            if (this.detailobj.id === undefined) {
                this.$Message.error(this.$t(90000081))
                return
            }
            var data = this.detailobj
            axios
                .request({
                    url: '/config/Dict/Modify',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(90000054))
                        this.editmodal = false
                        this.search(1, 10)
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                    this.search(1, 10)
                })
        },
        valid () {
            if (this.addcat === '') {
                this.$Message.error(this.$t(90000082))
                return false
            } else if (this.adddval === '') {
                this.$Message.error(this.$t(90000083))
                return false
            } else if (this.adddkey === '') {
                this.$Message.error(this.$t(90000084))
                return false
            } else {
                this.addCommit = true
            }
        },
        editValid () {
            if (this.detailobj.cat === '') {
                this.$Message.error(this.$t(90000082))
                return false
            } else if (this.detailobj.dkey === '') {
                this.$Message.error(this.$t(90000083))
                return false
            } else if (this.detailobj.dval === '') {
                this.$Message.error(this.$t(90000084))
                return false
            } else {
            }
        },
        edit () {
            if (this.detailobj.id == null) {
                this.$Message.error(this.$t(90000081))
                return
            }

            this.editmodal = true
        },
        commitDelete () {
            if (this.detailobj.id === undefined) {
                this.$Message.error(this.$t(90000081))
                return false
            } else {
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        axios
                            .request({
                                url: '/config/Dict/Delete?id=' + this.detailobj.id,
                                method: 'get'
                            })
                            .then(res => {
                                if (res.data.ret === 1) {
                                    this.$Message.success(this.$t(1058))
                                } else {
                                    this.$Message.error(this.$t(res.data.msg))
                                }
                                this.search(1, 10)
                            })
                    }
                })
            }
        },
        download () {
            axios
                .request({
                    url: '/config/download/GetTemplate?name=DictInfo',
                    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))
                    }
                })
        },
        // importxls () {
        //   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.$Message.success(this.$t('100378'))
        //       } else {
        //         alert(res.data.msg)
        //       }
        //     })
        //     .catch(err => {
        //       alert(err.msg)
        //     })
        // },
        exportxls () {
            let params = {
                cat: this.cat,
                dkey: this.dkey,
                dval: this.dval,
                dtStart: this.dtStart,
                dtEnd: this.dtEnd
            }

            axios
                .request({
                    url: '/config/Dict/exportAll',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data
                        this.cat = ''
                        this.dkey = ''
                        this.dval = ''
                        this.dtStart = ''
                        this.dtEnd = ''
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
