<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div class="filter">
                <label>
                    <span v-text="$t('100000')">岗位</span>：
                </label>
                <Select
                    v-model="depart"
                    label-in-value
                    clearable
                    class="searchSelect"
                    @on-change="departmentchange"
                >
                    <Option
                        v-for="item in departmentlist"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.title }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>
                    <span v-text="$t('100001')">岗位</span>：
                </label>
                <Select v-model="job" label-in-value clearable class="searchSelect">
                    <Option
                        v-for="item in usergroup"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.title }}</Option>
                </Select>
            </div>

            <div class="searchBtn">
                <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 type="primary" class="fourWord" 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" v-model="modal" :styles="{width:'600px'}">
            <p slot="header">
                <span v-show="type==1">{{$t('1002')}}</span>
                <span v-show="type==2">{{$t('1003')}}</span>
            </p>
            <div class="modal_body">
                    <div class="filter">
                        <label>
                            <span v-text="$t('100000')">岗位</span>：
                        </label>
                        <Select
                            v-model="depart"
                            label-in-value
                            clearable
                            class="searchSelect"
                            @on-change="departmentchange"
                        >
                            <Option
                                v-for="item in departmentlist"
                                :value="item.id"
                                :key="item.id"
                            >{{ item.title }}</Option>
                        </Select>
                    </div>
                    <div class="filter">
                        <label>
                            <span v-text="$t('100001')">岗位</span>：
                        </label>
                        <Select
                            v-model="job1"
                            label-in-value
                            clearable
                            class="searchSelect"
                        >
                            <Option
                                v-for="item in usergroup"
                                :value="item.id"
                                :key="item.id"
                            >{{ item.title }}</Option>
                        </Select>
                    </div>
                    <div class="filter">
                        <label>
                            <span v-text="$t('10203001')">工时费</span>：
                        </label>
                        <Input type="number" class="searchInput" v-model.number="cost" />
                    </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="modal=false" v-text="$t('1033')">取消</Button>
                <Button type="primary" size="large" @click="editdata" 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=WorkingCost', // 上传excel

            depart: '',
            departmentlist: [],
            job: 0, // 岗位
            job1: '',
            usergroup: [],
            obj: {},
            cost: '', // 工时费
            table_row_obj: {}, // 某一行选中的对象，用来应对修改优化
            modal: false,
            total: 0,
            page: 1,
            pagesize: 10,
            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('100029'), // 岗位名称
                    key: 'usergroup_name'
                },
                {
                    title: this.$t('10203002'), // 工时费
                    key: 'work_cost'
                }
            ],
            type: 0
        };
    },

    created () {
        this.initdepartment();
        this.gettable(1, 10);
        // this.initupmachine();
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        initdepartment () {
            axios
                .request({
                    url: '/config/ProjectUser/getUserDepartment',
                    method: 'get'
                })
                .then(res => {
                    this.department = res.data.data;
                    this.departmentlist = res.data.data;
                    console.log(this.departmentlist);
                    // if (this.department != null && this.department.length > 0) {
                    //     this.sectionid = this.department[0].id;
                    //     this.defaultdepart = this.department[0].title;
                    //     this.departmentsearchchange();
                    // }
                });
        },
        departmentchange () {
            axios
                .request({
                    url:
                        '/config/projectuser/GetUserUserGroup?sectionid=' +
                        this.depart,
                    method: 'get'
                })
                .then(res => {
                    this.usergroup = res.data.data;
                });
        },
        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=WorkingCost',
                    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 data = {
                usergroup_id: this.job,
                page: 0,
                pagesize: 0
            };
            axios
                .request({
                    url: '/config/WorkingCost/ExportData',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + '' + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },

        delefun () {
            var id = this.obj.id;
            if (id === undefined) {
                this.$Message.error(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/WorkingCost/DelData?ids=' + id,
                            method: 'get'
                        })
                        .then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1058'));
                                // this.initftype();
                                this.page = 1;
                                this.gettable(1, 10);
                            } else {
                                this.$Message.error(this.$t(res.data.msg));
                            }
                        });
                }
            });
        },
        add () {
            this.depart = '';
            this.cost = '';
            this.job1 = 0;
            this.type = 1;
            this.modal = true;
        },
        editdata () {
            let id = 0,
                msg = '';
            if (this.type == 2) {
                id = this.obj.id;
                msg = this.$t(1030);
            } else {
                id = 0;
                msg = this.$t(1055);
            }

            var data = {
                usergroup_id: this.job1,
                id: id,
                work_cost: +this.cost,
                complex_id: 0,
                complex_name: ''
            };
            axios
                .request({
                    url: '/config/WorkingCost/SetData',
                    data: data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(msg);
                        this.gettable(1, 10);
                        this.modal = false;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        mockTableData1 (tablelist) {
            let data = [];
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        usergroup_id: item.usergroup_id,
                        usergroup_name: item.usergroup_name,
                        work_cost: item.work_cost,
                        id: item.id,
                        sectionid: item.sectionid
                    });
                }
            });
            this.tableData1 = data;
        },
        search () {
            this.page = 1;
            // this.pagesize = 10
            this.gettable(1, 10);
        },
        gettable (page, pagesize) {
            let data = {
                usergroup_id: this.job,
                page: page,
                pagesize: pagesize
            };
            axios
                .request({
                    url: '/config/WorkingCost/GetData',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret == 1) {
                        this.tablelist = res.data.data;
                        this.total = res.data.total;
                        this.mockTableData1(this.tablelist);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.gettable();
        },

        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.depart = this.obj.sectionid;
                this.departmentchange();
                this.job1 = this.obj.usergroup_id;
                this.cost = this.obj.work_cost;
                this.modal = true;
                this.type = 2;
            }
        },
        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>
