<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv">
            <div>
                <div class="filter">
                    <label >参数名称：</label>
                    <Input class="searchInput" type="text"  v-model="keyword" :placeholder="'关键词'" />
                </div>
                 <div class="searchBtn">
                    <Button type="primary" class="twoWord" icon="ios-search" @click="tosearch()" >{{$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" icon="md-close-circle" @click="dele()" >{{$t('1004')}}</Button>
                </div>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                @on-current-change="handleRowChange"
                @on-selection-change="selecttrchange"
                class="tableClass"
                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="type===1?this.$t('1002'):this.$t(1003)" v-model="add_model"   :styles="{width:'680px'}" >
                <div class="modal_body" style="height:200px;">
                    <div class="filter">
                        <label ><i>*</i>参数名称：</label>
                        <Input v-model="addobj.name"   class="searchInput" />
                        <!-- <Input class="publicinput" type="text"  v-model="addobj.name"  /> -->
                    </div>
                     <div class="filter">
                        <label ><i>*</i>参数模块：</label>
                        <Select v-model="addobj.module" label-in-value  clearable class="searchSelect" >
                            <Option v-for="(item,key) in Modulelist" :value="item.code" :key="key" >{{$t(item.name)}}</Option>
                            <!-- <Option  :value="2" >下拉框</Option> -->
                        </Select>
                    </div>
                    <div class="filter">
                        <label >单位：</label>
                        <Input  v-model="addobj.unit"  class="searchInput"/>
                    </div>
                    <div class="filter">
                        <label >说明：</label>
                        <Input   v-model="addobj.description" class="searchInput" />
                    </div>
                    <div class="filter">
                        <label ><i >*</i>参数类型：</label>
                        <Select v-model="addobj.type" :disabled="type===2" label-in-value  clearable class="searchSelect" >
                            <Option  :value="1" >文本</Option>
                            <Option  :value="2" >下拉框</Option>
                        </Select>
                    </div>
                    <div>
                        <div class="filter">
                            <label><i>*</i>参数初始值：</label>
                            <Input  v-show="addobj.type===1 || !addobj.type"  v-model="addobj.code"  class="searchInput"/>
                            <div v-show="addobj.type===2" style="display:inline-block;width:300px;vertical-align:top;border:0.2px solid #ddd;border-radius:5px;height: 100px;overflow-y: auto;border: 1px solid #ddd;">
                                 <div v-for="(item,key) in addobj.selectValue" :key="key" style="margin-bottom:10px;">
                                      <span>键</span>
                                      <Input   v-model="item.key" style="width:80px;" disabled />
                                      <span>值</span>
                                      <Input   v-model="item.value" style="width:80px;" />
                                      <Button style="width:50px;margin-left:5px;text-align:center" v-show="Number(item.key)===1" type="primary" icon="md-add" @click="additem()" ></Button>
                                      <Button style="margin-left:5px;width:50px;text-align:center" v-show="Number(item.key)!==1" type="primary" icon="md-remove" @click="removeitem(key)" ></Button>
                                 </div>
                            </div>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="add_model=false" v-text="$t('1033')">取消</Button>
                    <Button type="primary" size="large" @click="adddata" v-text="$t('1011')">确定</Button>
                </div>
        </Modal>
    </div>
</template>
<script>
export default {
    data () {
        return {
            keyword: '', // 参数名称
            page: 1, // 页码
            pagesize: 10, //
            total: 0, // 数据总条数
            obj: {},
            addobj: {}, // 添加对象
            cloneobj: {}, // 深克隆对象
            add_model: false, // 添加修改模态框
            ids: [], // 选中的id集合
            tableData1: [], // table数据
            type: 1, //
            Modulelist: [], // 模块list
            tableColumns1: [ // table数据
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    type: 'index2',
                    title: this.$t('1008'), // 序号
                    width: 70,
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.pagesize + 1)
                    }
                },
                {
                    title: '参数名称', // 参数名称
                    key: 'name',
                    width: '150',
                    align: 'center'
                },
                {
                    title: '参数模块', // 参数模块
                    key: 'module',
                    width: '150',
                    align: 'center'
                },
                {
                    title: '参数形式', // 参数形式
                    key: 'typeValue',
                    width: '150',
                    align: 'center'
                },
                {
                    title: '初始值', // 初始值
                    key: 'code',
                    align: 'center'
                },
                {
                    title: this.$t('200017'), // 单位
                    key: 'unit',
                    width: '100',
                    align: 'center'
                },
                {
                    title: this.$t('1950569'), // 说明
                    key: 'description',
                    align: 'center'
                }
            ]
        }
    },
    created () {
        this.tosearch()
        this.initblocklist()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        tosearch () {
            this.page = 1
            this.pagesize = 10
            this.search()
        },
        search () {
            var params = {
                name: this.keyword,
                page: this.page,
                category: 'Geometry',
                pagesize: this.pagesize
            }
            this.axios.request({
                url: '/config/Parameter/GetPagedList',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.total = res.data.total
                    if (res.data.data.length > 0) {
                        res.data.data.forEach(item => {
                            item.typeValue = item.type === 1 ? this.$t(800016) : this.$t(8109)
                        })
                        this.tableData1 = res.data.data
                    } else {
                        this.tableData1 = []
                    }
                }
            })
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
        },
        changePage (value) {
            this.page = value
            this.search()
        },
        handlePageSize (value) {
            this.pagesize = value
            this.search()
        },
        selecttrchange (value) {
            if (value.length > 0) {
                this.ids = []
                value.forEach(item => {
                    this.ids.push(item.id)
                })
            } else {
                this.ids = []
            }
        },
        initblocklist () {
            this.axios.request({
                url: '/config/User/GetRootModules',
                method: 'get'
            }).then(res => {
                if (res.data.ret == 1) {
                    this.Modulelist = res.data.data
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        add () {
            this.type = 1;
            this.add_model = true
            this.addobj = {
                selectValue: [{
                    key: 1,
                    value: ''
                }]
            }
        },
        additem () {
            var num = this.addobj.selectValue[this.addobj.selectValue.length - 1].key
            this.addobj.selectValue.push({
                key: num + 1,
                value: ''
            })
        },
        removeitem (key) {
            this.addobj.selectValue.splice(key, 1)
        },
        adddata () {
            if (!this.addobj.name) {
                this.$Message.error('请输入参数名称');
                return false;
            }
            if (!this.addobj.module) {
                this.$Message.error('请选择参数模块');
                return false;
            }
            // if(!this.addobj.unit){
            //     this.$Message.error("请输入单位");
            //     return false;
            // }
            if (!this.addobj.type) {
                this.$Message.error('请选择参数类型');
                return false;
            }
            var bool = false;
            if (this.addobj.type === 1) {
                if (!this.addobj.code) {
                    bool = true
                }
            } else if (this.addobj.type === 2) {
                this.addobj.selectValue.forEach(item => {
                    if (!item.key || !item.value) {
                        bool = true
                    }
                });
            }
            if (bool) {
                this.$Message.error('请填写完整初始值')
                return false
            }
            if (this.type === 1) {
                this.addobj.category = 'Geometry'
                this.addobj.remark = this.addobj.description
                this.axios.request({
                    url: '/config/Parameter/Add',
                    data: this.addobj,
                    method: 'post'
                }).then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1'))
                        this.tosearch()
                        this.add_model = false
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
            } else if (this.type === 2) {
                this.addobj.category = 'Geometry'
                this.addobj.remark = this.addobj.description
                this.axios.request({
                    url: '/config/Parameter/Edit',
                    data: this.addobj,
                    method: 'post'
                }).then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1'))
                        this.search()
                        this.add_model = false
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
            }
        },
        edit () {
            if (JSON.stringify(this.obj) == '{}') {
                this.$Message.error('请先选择要修改的数据')
                return false
            } else {
                this.addobj = {}
                var params = {
                    id: this.obj.id
                }
                this.axios.request({
                    url: '/config/Parameter/GetEntity',
                    params,
                    method: 'get'
                }).then(res => {
                    if (res.data.ret === 1) {
                        this.type = 2
                        this.add_model = true
                        if (res.data.data.selectValue.length > 0) {
                            res.data.data.selectValue.forEach((item) => {
                                item.key = Number(item.key)
                            })
                        }
                        this.addobj = res.data.data
                    }
                })
            }
        },
        dele () {
            if (this.ids.length === 0) {
                this.$Message.error('请先勾选要删除的数据')
                return false
            }
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                width: '290px',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    this.axios.request({
                        url: '/config/Parameter/Delete?id=' + this.ids,
                        method: 'post'
                    }).then(res => {
                        if (res.data.ret === 1) {
                            this.tosearch()
                            this.$Message.success(this.$t('1'))
                            this.ids = []
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
                },
                onCancel: () => {
                    return false
                }
            })
        }

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

</style>
