<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="filter">
        <label >{{$t('100000')}}：</label>
        <Select v-model="sectionid" label-in-value @on-change="departmentsearchchange" clearable class="searchSelect">
            <Option v-for="item in department" :value="item.id" :key="item.id">{{ item.title }}</Option>
        </Select>
      </div>
      <div class="searchBtn">
        <Button class="twoWord" type="primary" icon="ios-search" @click="tosearch()">{{$t('1001')}}</Button>
        <Button class="twoWord" type="success" icon="md-add-circle"  @click="add()">{{$t('1002')}}</Button>
        <Button class="twoWord" type="warning" icon="ios-create-outline"  @click="edit()">{{$t('1003')}}</Button>
        <Button class="twoWord" type="error" icon="md-close-circle"  @click="dele()">{{$t('1004')}}</Button>
      </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-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>

    <Modal class="newModalClass" :title='title1' v-model="shiftmodal" :styles="{width:'640px'}">
      <div class="modal_body">
          <div class="filter">
            <label ><i>*</i>{{$t('100000')}}：</label>
            <Select v-model="departmentid" label-in-value clearable class="searchSelect">
                <Option v-for="item in departmentlist" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label ><i>*</i>{{$t('300080')}}：</label>
            <Input class="searchInput" id="add_desc" v-model="editobj.shiftName"/>
          </div>
          <div class="filter">
            <label><i>*</i>{{$t('100038')}}：</label>
            <TimePicker confirm type="time" v-model="daterange1" format="HH:mm" placement="bottom-end" class="searchInput" @on-change="selectdate1"></TimePicker>
          </div>
           <div class="filter">
            <label><i>*</i>{{$t('100039')}}：</label>
            <TimePicker confirm type="time" v-model="daterange2" format="HH:mm" placement="bottom-end"  class="searchInput" @on-change="selectdate2"></TimePicker>
          </div>
          <div class="filter" style="display:flex;margin-bottom: 30px;">
            <label>{{$t("100037")}}：</label>
            <Input
              type="textarea"
              v-model="editobj.description"
              class="searchInput MaxWidth"
              :autosize="{minRows: 2,maxRows: 2}"
            />
          </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: [],
            shiftmodal: false,
            page: 1,
            pagesize: 10,
            total: 0,
            tableColumns1: [
                {
                    type: 'index2',
                    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('100033'),
                    key: 'sectionName'
                },
                {
                    title: this.$t('100036'),
                    key: 'title'
                },
                {
                    title: this.$t('100037'),
                    key: 'description'
                },
                {
                    title: this.$t('100038'),
                    key: 'start_time'
                },
                {
                    title: this.$t('100039'),
                    key: 'end_time'
                },
                {
                    title: this.$t('1020'),
                    key: 'create_time'
                },
                {
                    title: this.$t('100040'),
                    key: 'name'
                }
            ],
            sectionid: 0,
            usergroupid: 0,
            editobj: {},
            departmentlist: [],
            departmentid: 0,
            department: [],
            usergroup: [],
            daterange1: '',
            daterange2: '',
            dtStart: '',
            dtEnd: '',
            type: 0
        }
    },
    created () {
        this.search()
        this.initdepartment()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        cancle () {
            this.editobj = {}
            this.shiftmodal = false
        },
        selectdate1 (e) {
            this.dtStart = e
        },
        selectdate2 (e) {
            this.dtEnd = e
        },
        add () {
            this.title1 = this.$t('1002')
            this.type = 1
            this.shiftmodal = true
            this.editobj = {}
            this.departmentid = 0
            this.usergroupid = 0
            this.daterange1 = ''
            this.daterange2 = ''
        },
        edit () {
            if (JSON.stringify(this.obj) === '{}' || this.obj === undefined || this.obj === null) {
                this.$Message.error(this.$t('1043'))
                return false
            }
            this.title1 = this.$t('1003')
            this.editobj = {}
            this.shiftmodal = true
            this.getshift()
            this.type = 2
        },
        getshift () {
            axios.request({
                url: '/config/ProjectShift/getShiftInfo?id=' + this.obj.id,
                method: 'get'
            }).then(res => {
                this.editobj = res.data.data
                this.departmentid = this.editobj.sectionid
                this.daterange1 = this.editobj.startTime
                this.daterange2 = this.editobj.endTime
                this.selectdate1(this.daterange1)
                this.selectdate2(this.daterange2)
            })
        },
        adddata () {
            if(this.departmentid === undefined || this.departmentid === null || this.departmentid === 0){
                 this.$Message.error(this.$t(9000103))
                return
            }
            if (this.editobj.shiftName === null || this.editobj.shiftName === undefined || this.editobj.shiftName === '') {
                this.$Message.error(this.$t(9000002))
                return
            }
            if (this.dtStart === undefined || this.dtStart === null || this.dtEnd === undefined || this.dtEnd === null || 
                this.daterange1 === undefined || this.daterange1 === null ||
                this.daterange2 === undefined || this.daterange2 === null || this.daterange1 === '' || this.daterange2 === '') {
                this.$Message.error(this.$t(500124))
                return
            }
            var des = (this.editobj.description === null || this.editobj.description === undefined) ? '' : this.editobj.description
            var data = {
                title: this.editobj.shiftName,
                sectionid: this.departmentid,
                description: des,
                start_time: this.dtStart,
                end_time: this.dtEnd
            }
            axios
                .request({
                    url: '/config/ProjectShift/AddShift',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.shiftmodal = false
                        this.daterange = ''
                        this.$Message.success(this.$t('1055'))
                        this.departmentsearchchange()
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        editdata () {
             if(this.departmentid === undefined || this.departmentid === null || this.departmentid === 0){
                 this.$Message.error(this.$t(9000103))
                return
            }
            if (this.editobj.shiftName === null || this.editobj.shiftName === undefined || this.editobj.shiftName === '') {
                this.$Message.error(this.$t(9000002))
                return
            }
             if (this.dtStart === undefined || this.dtStart === null || this.dtEnd === undefined || this.dtEnd === null || 
                this.daterange1 === undefined || this.daterange1 === null ||
                this.daterange2 === undefined || this.daterange2 === null || this.daterange1 === '' || this.daterange2 === '') {
                this.$Message.error(this.$t(500124))
                return
            }
            var des = (this.editobj.description === null || this.editobj.description === undefined) ? '' : this.editobj.description
            let data = this.editobj
            data.id = this.obj.id
            data.sectionid = this.departmentid
            data.description = des
            data.title = this.editobj.shiftName
            data.start_time = this.dtStart
            data.end_time = this.dtEnd
            axios.request({
                url: '/config/ProjectShift/EditShift',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.shiftmodal = false
                    this.daterange = ''
                    this.$Message.success(this.$t('1060'))
                    this.departmentsearchchange()
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        dele () {
            if (this.obj.id === undefined || this.obj.id === null) {
                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/ProjectShift/DeleteShift?id=' + this.obj.id,
                            method: 'post'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.departmentsearchchange()
                                this.$Message.success(this.$t('1058'))
                                this.search()
                            } else {
                                this.$Message.error(this.$t(res.data.msg))
                            }
                        })
                    }
                })
            }
        },
        initdepartment () {
            axios.request({
                url: '/config/ProjectUser/getUserDepartment',
                method: 'get'
            }).then(res => {
                this.department = res.data.data
                this.departmentlist = res.data.data
            })
        },
        departmentchange () {
            axios.request({
                url: '/config/projectuser/GetUserUserGroup?sectionid=' + this.departmentid,
                method: 'get'
            }).then(res => {
                this.usergroup = res.data.data
            })
        },
        departmentsearchchange () {
            this.search(this.page, this.pagesize)
        },
        tosearch () {
            this.page = 1
            // this.pagesize = 10
            this.search()
        },
        search () {
            var params = {
                page: this.page,
                pagesize: this.pagesize,
                id: this.sectionid
            }
            axios
                .request({
                    url: 'config/ProjectShift/ShiftList',
                    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({
                        id: item.shiftID,
                        title: item.title,
                        description: item.description,
                        create_time: item.create_time,
                        sectionName: item.sectionName,
                        name: item.name,
                        shiftName: item.shiftName,
                        start_time: item.start_time,
                        end_time: item.end_time
                    })
                }
            })
            this.tableData1 = data
        },
        changecondition () {
            this.morecondition = !this.morecondition
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search()
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
        }
    }
}

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

</style>
