<template>
    <div >
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label ><span v-text="$t('1025')">产线层级</span>：</label>
                <Cascader
                :data="datalevel"
                :value="leveldata"
                trigger="click"
                change-on-select
                class="searchSelect"
                @on-change="handlelevelchange"
                ></Cascader>
            </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="del()">{{$t(1004)}}</Button>
                <Button type="primary" class="fourWord" icon="md-download" @click="loadexcel()">{{$t('1005')}}</Button>
                <btnUpload class="fourWord" @upload_success="getMsgFormbtn" :uploadSrc="'acc/Upload/Submit?templateName=TrParameterConfig'"></btnUpload>
                <Button type="primary" class="fourWord"  icon="ios-cloud-download" @click="Export()">{{$t('1007')}}</Button>
            </div>

        </div>

    <!-- 添加修改模态框开始 -->
    <div class="divborder">
        <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>
    </div>
            <Modal class="newModalClass" :title="type===1?'添加':'修改'" v-model="editModel"   :styles="{width:'500px'}" >
                <div class="modal_body" >
                    <div class="filter">
                        <label ><span><i>*</i>{{$t(1025)}}：</span></label>
                        <Cascader
                        :data="datalevel"
                        :value="editobj.leveldata"
                        trigger="click"
                        change-on-select
                        class="searchSelect"
                        @on-change="edithandlelevelchange"
                        ></Cascader>
                    </div>
                    <div class="filter">
                        <label><i>*</i>{{$t(99100039)}}：</label>
                        <Input v-model="editobj.name" type="text"  class="searchInput"/>
                        <!-- <Select
                            style="width:260px;"
                            v-model="editobj.name"
                        >
                            <Option
                            v-for="(option, index) in namelist"
                            :value="option.id"
                            :key="index"
                            >{{option.name}}</Option>
                        </Select> -->
                    </div>
                    <div class="filter">
                        <label ><i></i>{{$t(5500221)}}：</label>
                        <Input v-model="editobj.attribute"   class="searchInput" />
                    </div>
                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="editModel=false" v-text="$t('1033')">取消</Button>
                    <Button type="primary" size="large" @click="editdata" v-text="$t('1011')">确定</Button>
                </div>
        </Modal>
    </div>
</template>
<script>
import btnUpload from '../../components/upload/index'
import btnDownload from '../../components/download/index'

export default {
    data () {
        return {
            datalevel: [], // 产线层级数据
            leveldata: [], // 产线层级value
            tableData1: [], // table数据
            total: 0, // 数据总数
            page: 1, // 当前页
            pagesize: 10, // 当前页size
            obj: {}, // table选中对象
            ids: [], // 选中的数据id集合
            cloneobj: {}, // 深克隆对象
            editobj: {}, // 修改对象
            editModel: false, // 修改模态框
            editleveldata: [], // 修改模态框的产线层级
            namelist: [
                { id: 1, name: 'SC' },
                { id: 2, name: '客户' },
                { id: 3, name: 'SPC' },
                { id: 4, name: 'KPI' }], // 参数名称list
            type: 1, // 添加修改条件
            tableColumns1: [ // table表头
                {
                    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: '通道层级',
                    key: 'section_name',
                    minWidth: 150
                },
                {
                    title: '参数名称',
                    key: 'name',
                    minWidth: 150
                },

                {
                    title: '参数属性',
                    key: 'attribute',
                    minWidth: 150
                },
                {
                    title: '维护人',
                    key: 'user_name',
                    minWidth: 150
                },
                {
                    title: '维护时间',
                    key: 'create_time',
                    minWidth: 150
                }
            ]
        }
    },
    components: {
        btnUpload,
        btnDownload
    },
    created () {
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.initlevel() // 初始化产线层级
    },
    mounted () {
        this.search(1, 10)
    },
    methods: {
        handlelevelchange (value, selectedData) {
            this.leveldata = value
        },
        edithandlelevelchange (value, selectedData) {
            this.editobj.leveldata = value
        },
        initlevel () {
            this.axios.request({
                url: 'config/ProjectLevelSection/GetSectionTree',
                method: 'get'
            })
                .then(res => {
                    if (res.data.ret === 1) {
                        const arr = []
                        this.datalevel = res.data.data
                        arr.push(res.data.data[0].value)
                        this.leveldata = arr
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        getMsgFormbtn (data) {
            if (data) {
                this.search(1, this.pagesize)
            }
        },
        search (page, pagesize) {
            var params = {
                sectionId: this.leveldata[this.leveldata.length - 1] ? this.leveldata[this.leveldata.length - 1] : 0,
                page: page,
                pagesize: pagesize
            }
            this.axios.request({
                url: 'acc/ParameterConfig/GetPageList',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    if (res.data.data.length > 0) {
                        this.total = res.data.total
                        this.tableData1 = res.data.data
                    } else {
                        this.total = 0
                        this.tableData1 = []
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        add () {
            this.type = 1
            this.editobj = {}
            this.editModel = true
        },
        edit () {
            this.type = 2
            if (!this.obj.id) {
                this.$Message.error('请先选择数据')
                return false;
            }

            this.editobj = this.$time.deepClone(this.cloneobj)
            this.editobj.leveldata = this.obj.section_ids
            this.editModel = true
        },
        editdata () {
            this.editobj.section_id = this.editobj.leveldata[this.editobj.leveldata.length - 1] ? this.editobj.leveldata[this.editobj.leveldata.length - 1] : 0
            var data = this.editobj
            var url;
            if (this.type === 1) {
                url = 'acc/ParameterConfig/add'
            } else {
                url = 'acc/ParameterConfig/Update'
            }
            this.axios.request({
                url: url,
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1'))
                    this.editModel = false
                    this.search(1, this.pagesize)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        del () {
            if (this.ids == undefined || this.ids.length === 0) {
                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 data = {
                            ids: this.ids
                        };
                        this.axios
                            .request({
                                url: 'acc/ParameterConfig/Delete',
                                data,
                                method: 'post'
                            })
                            .then(res => {
                                if (res.data.ret === 1) {
                                    this.page = 1;
                                    this.search(1, this.pagesize);
                                    this.$Message.success(this.$t('1058'));
                                } else {
                                    this.$Message.error(this.$t(res.data.msg));
                                }
                            });
                    }
                });
            }
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData1 = this.search(1, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow;
            this.cloneobj = this.$time.deepClone(currentRow)
        },
        handleSelectRow (data) {
            this.ids = [];
            if (data.length > 0) {
                data.forEach((item) => {
                    this.ids.push(item.id)
                })
            }
        },
        loadexcel () {
            this.axios.request({
                url: '/config/download/GetTemplate?name=TrParameterConfig',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    window.location.href = this.axios.publicPath + '' + res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        Export () {
            var params = {
                sectionId: this.leveldata[this.leveldata.length - 1] ? this.leveldata[this.leveldata.length - 1] : 0,
                page: 1,
                pagesize: 100000,
                toexcel: 1
            }
            this.axios.request({
                url: 'acc/ParameterConfig/GetPageList',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    if (res.data.data.length > 0) {
                        window.location.href = this.axios.publicPath + '' + res.data.data
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        }
    }

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

</style>
