<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
        <div class="filter">
          <label >{{$t('1950573')}}：</label>
          <Input class="searchInput" type="text" v-model="key" />
        </div>
        <div class="filter">
          <label >{{$t('1950574')}}：</label>
          <Cascader :data="datalevel" :value="leveldata" v-model="sectionid" trigger="click" change-on-select class="searchSelect"></Cascader>
        </div>
        <div class="filter">
          <label >{{$t('950083')}}：</label>
          <Select v-model="machineid" label-in-value clearable class="searchSelect" >
              <Option v-for="item in machines" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </div>
      <div class="filter">
              <label >{{$t('950101')}}：</label>
              <Select v-model="field" label-in-value clearable class="searchSelect">
                  <Option v-for="item in types" :value="item.key" :key="item.key">{{ item.value }}</Option>
              </Select>
            </div>
        <!-- 次级搜索条件--隐藏 -->
      <div v-show="!morecondition">
        <div>

            <div class="filter">
              <label >{{$t('1950575')}}：</label>
              <Select v-model="configtype" label-in-value clearable class="searchSelect" >
                  <Option :value="0" :key="0">{{$t("101096")}}</Option>
                  <Option :value="1" :key="1">{{$t("600078")}}</Option>
              </Select>
            </div>
            <div class="filter">
              <label>{{$t('1046')}}：</label>
              <DatePicker
                id="日期"
                type="datetimerange"
                v-model="daterange"
                confirm
                placeholder=""
                class="searchInput MaxWidth "
                format="yyyy-MM-dd HH:mm:ss"
                @on-change="selectdate"
              ></DatePicker>
          </div>
      </div>
      </div>
      <div class="searchBtn">
          <Button type="primary" class="twoWord" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
          <Button type="warning" class="twoWord" icon="ios-create-outline"  @click="edit()">{{$t('1003')}}</Button>
          <Button type="primary" class="twoWord" icon="md-bulb"  @click="changeenable(1)">{{$t('800212')}}</Button>
          <Button type="error" class="twoWord" icon="ios-bulb-outline"  @click="changeenable(0)">{{$t('400014')}}</Button>
      </div>

      <!-- 更多条件 按钮 -->
      <MoreConbtn @getCon="morecondition = !morecondition" :morecondition="morecondition"></MoreConbtn>

    </div>
    <div class="divborder newTableDiv">
      <Table
         class="tableClass"
        width='100%'
        @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:'650px'}">
      <div class="modal_body" >
            <div class="filter">
                <label ><i>*</i>{{$t('1950573')}}：</label>
                <Input class="searchInput" type="text" v-model="editobj.key" disabled="disabled" />
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1950574')}}：</label>
              <Cascader :data="datalevel1" :value="leveldata1" v-show="showlevel" v-model="editobj.editsectionid" trigger="click" change-on-select class="searchSelect"></Cascader>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('950101')}}：</label>
              <Select v-model="editobj.field" label-in-value clearable class="searchSelect" >
                  <Option v-for="item in edittypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
              </Select>
            </div>
            <div class="filter">
              <label ><i>*</i>{{$t('1950575')}}：</label>
              <Select v-model="editobj.iscfg" label-in-value clearable class="searchSelect" >
                  <Option :value="0" :key="0">{{$t("101096")}}</Option>
                  <Option :value="1" :key="1">{{$t("600078")}}</Option>
              </Select>
            </div>
            <div class="filter">
                <label ><i>*</i>{{$t('100044')}}：</label>
                <Input class="searchInput" type="text" v-model="editobj.description" />
            </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancle">{{$t('1033')}}</Button>
        <Button type="primary" size="large" @click="editdata">{{$t('1003')}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
import moment from 'moment'
export default{
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            morecondition: false,
            dtStart: '',
            dtEnd: '',
            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: 70
                },
                {
                    title: this.$t('1950573'),
                    key: 'key'
                },
                {
                    title: this.$t('1950574'),
                    key: 'SectionName'
                },
                {
                    title: this.$t('950083'),
                    key: 'machineName'
                },
                {
                    title: this.$t('950101'),
                    key: 'type'
                },
                {
                    title: this.$t('1950575'),
                    key: 'iscfg_value'
                },
                {
                    title: this.$t('920152'),
                    key: 'enable_value'
                },
                {
                    title: this.$t('920139'),
                    key: 'userName'
                },
                {
                    title: this.$t('920138'),
                    key: 'changeTime'
                },
                {
                    title: this.$t('100044'),
                    key: 'description'
                }
            ],
            editobj: {},
            machines: [],
            editmachines: [],
            machineid: 0,
            leveldata: [],
            datalevel: [],
            sectionid: [],
            leveldata1: [],
            datalevel1: [],
            editsectionid: [],
            type: '',
            daterange: [],
            key: '',
            types: [],
            edittypes: [],
            configtype: '',
            edititems: [],
            field: '',
            selectids: [],
            showlevel: true
        }
    },
    created () {
        this.daterange = []
        this.search(1, 10)
        this.initmachines()
        this.initlevel()
        this.inittypes()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        datetrans (date) {
            if (date === '' || date === undefined || date === 0 || date === null) {
                return ''
            }
            date = new Date(date * 1000)
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
            return Y + M + D
        },
        search (page, pagesize) {
            var sectionid = this.sectionid[this.sectionid.length - 1]
            var params = {
                page: page,
                pagesize: pagesize,
                machineid: this.machineid,
                field: this.field,
                key: this.key,
                sectionid: sectionid,
                configtype: this.configtype,
                starttime: this.dtStart,
                endtime: this.dtEnd
            }
            axios
                .request({
                    url: '/qms/ParameterConfig/GetPageList',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.total = res.data.total
                    this.mockTableData1(res.data.data)
                })

            this.obj = {}
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        key: item.key,
                        machineID: item.machineID,
                        machineName: item.machineName,
                        type: item.type,
                        field: item.field,
                        SectionID: item.sectionID,
                        SectionName: item.sectionName,
                        enable: item.enable,
                        iscfg: item.iscfg,
                        userID: item.userID,
                        userName: item.userName,
                        changeTime: item.changeTime,
                        enable_value: item.enable === 1 ? this.$t('800212') : this.$t('400014'),
                        iscfg_value: item.iscfg === 1 ? this.$t('600078') : this.$t('101096'),
                        description: item.description
                    })
                }
            })
            this.tableData1 = data
        },
        cancle () {
            this.editobj = {}
            this.editmodal = false
            this.search(this.page, this.pagesize)
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
            let last_str = this.dtEnd.split(' ')[1]
            if (last_str === '00:00:00') {
                this.dtEnd = moment(this.dtEnd).format('YYYY-MM-DD') + ' 23:59:59'
                this.daterange = [this.dtStart, this.dtEnd]
            }
        },
        edit () {
            if (JSON.stringify(this.obj) === '{}' || this.obj === null || this.obj === undefined) {
                this.$Message.error(this.$t('1043'))
                return false
            }
            this.editobj = {}
            this.title1 = this.$t('1003')
            this.editobj = this.obj
            this.editmodal = true
            this.editobj.editsectionid = []
            this.initedittypes()
            this.getdata()
            this.initeditlevel()
        },
        getdata () {
            this.initeditsectionid()
        },
        initeditsectionid () {
            axios.request({
                url: '/qms/SendTestCollection/GetParentSection?sectionid=' + this.editobj.SectionID,
                method: 'get'
            })
                .then(res => {
                    this.editobj.editsectionid = res.data.data
                    this.showlevel = false
                    this.showlevel = true
                })
        },
        editdata () {
            let data = this.editobj
            data.key = this.obj.key
            data.sectionID = this.editobj.editsectionid[this.editobj.editsectionid.length - 1]
            axios.request({
                url: '/qms/ParameterConfig/Update',
                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))
                }
            })
        },
        changeenable (state) {
            if (this.selectids === undefined || this.selectids === null || this.selectids === []) {
                this.$Message.error((this.$t('1017')))
                return false
            } else {
                this.$Modal.confirm({
                    title: this.$t('1124'),
                    content: state === 1 ? this.$t('1950576') : this.$t('1950577'),
                    onOk: () => {
                        let parameter = {
                            keys: this.selectids,
                            enable: state
                        }
                        axios.request({
                            url: '/qms/ParameterConfig/ChangeEnable',
                            data: parameter,
                            method: 'post'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.obj = {}
                                this.selectids = []
                                this.search(this.page, this.pagesize)
                                this.$Message.success(this.$t('1'))
                            } else {
                                this.$Message.error(this.$t(res.data.msg))
                            }
                        })
                    }
                })
            }
        },
        initmachines () {
            axios.request({
                url: '/config/Machine/GetAllMachines',
                method: 'get'
            }).then(res => {
                this.machines = res.data.data
            })
        },
        inittypes () {
            axios.request({
                url: '/qms/ParameterConfig/GetTypeList',
                method: 'get'
            }).then(res => {
                this.types = res.data.data
            })
        },
        initlevel () {
            axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            }).then(res => {
                const arr = []
                this.datalevel = res.data.data
                arr.push(res.data.data[0].value)
                this.leveldata = arr
            })
        },
        initeditmachines () {
            var sectionid = this.editsectionid[this.editsectionid.length - 1]
            axios.request({
                url: '/config/Machine/GetAllMachines?sectionid=' + sectionid,
                method: 'get'
            }).then(res => {
                this.editmachines = res.data.data
            })
        },
        initedittypes () {
            axios.request({
                url: '/qms/ParameterConfig/GetTypeList',
                method: 'get'
            }).then(res => {
                this.edittypes = res.data.data
            })
        },
        initeditlevel () {
            axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            }).then(res => {
                const arr = []
                this.datalevel1 = res.data.data
                arr.push(res.data.data[0].value)
                this.leveldata1 = arr
            })
        },
        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
        },
        handleSelectRow: function (data) {
            this.selectids = []
            for (var i in data) {
                if (this.selectids.indexOf(data[i].key) < 0) {
                    this.selectids.push(data[i].key)
                }
            }
        }
    }
}

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

</style>
