<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>工装类型：</label>
                <Cascader class="searchSelect" :data="frockTypeTree" v-model="frockType" clearable change-on-select @on-change="changeFrockType"></Cascader>
            </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 intervalRight" icon="md-close-circle" @click="dele()">{{ $t(1004) }}</Button>
                <Button type="primary" class="fourWord" icon="md-download" @click="loadexcel()">{{$t('1005')}}</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','xls']"
                >
                    <Button
                        type="primary"
                        class="fourWord"
                        icon="md-cloud-upload"
                    >{{$t('1006')}}</Button>
                </Upload>
                <Button type="primary" class="fourWord" icon="ios-cloud-download" @click="search(1)">{{$t('1007')}}</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" v-model="addmodal" :styles="{width:'400px'}">
            <p slot="header">
                <span v-show="type==1">{{$t('1002')}}</span>
                <span v-show="type==2">{{$t('1003')}}</span>
            </p>
            <div style="">
                <div class="filter">
                    <label>上级类型：</label>
                    <Cascader v-show="type==1" class="searchSelect" :data="frockTypeTree" change-on-select v-model="parentType" @on-change="changeFrockType1"></Cascader>
                    <Input v-show="type==2" type="text" class="searchInput" v-model="parentTypename" disabled/>
                </div>
                <div class="filter">
                    <label><i>*</i>工装类型：</label>
                    <Input type="text" class="searchInput" v-model="frockTypename" />
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="addmodal=false">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="addPost()">{{$t('1011')}}</Button>
            </div>
        </Modal>

    </div>
</template>
<script>
export default {
    data(){
        return{
            //导入方法
            action: this.axios.publicPath + "acc/Upload/UploadExcel?templateName=FixtureToolsCategoryTemplate",
            headers: {
                token: localStorage.getItem("token"),
                timestamp: localStorage.getItem("timestamp"),
                nonce: localStorage.getItem("nonce"),
                sign: localStorage.getItem("sign"),
            },
            frockTypeTree:[],//树形结构
            frockType:[],//工装类型
            frockTypeid:'',

            total:0,
            page:1,
            pagesize:10,
            tableData1:[],
            tableColumns1:[
                {
                    type: "index2",
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                },
                {
                    title:'工装类型',
                    key:'name'
                },
                {
                    title:'上级类型',
                    key:'parentname'
                }
            ],

            addmodal:false,//添加编辑弹窗
            type:1,//1添加 2编辑
            parentType:[],//父级类型
            parentTypeid:'',
            parentTypename:'',
            frockTypename:'',//工装类型名称
        }
    },
    created(){
        this.initFrockType();//工装类型树形结构
        this.tosearch();
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    methods:{
        //工装类型
        initFrockType(){
            this.axios.request({
                url: "/acc/FixtureTools/GetCategoryList",
                method: "get",
            })
            .then((res) => {
                if (res.data.ret == 1) {
                    let arr = res.data.data;
                    this.contentTree(arr);
                    this.frockTypeTree = arr;
                }
            });
        },
        contentTree (arr) {
            arr.forEach(ele => {
                ele.disabled = false;
                if (
                    ele.children != undefined &&
                    ele.children != null &&
                    ele.children.length != 0 
                ) {
                    this.contentTree(ele.children);
                }
                else{
                    ele.children = []
                }
            });
        },
        changeFrockType(value){
            this.frockTypeid = "";
            if(value!=undefined && value.length){
                this.frockTypeid = value[value.length - 1];
            }
        },
        changeFrockType1(value){
            this.parentTypeid = "";
            if(value!=undefined && value.length){
                this.parentTypeid = value[value.length - 1];
            }
        },
        tosearch(){
            this.page = 1;
            this.pagesize = 10;
            this.search(0);
        },
        search(toexcel){
            let params = {
                id:this.frockTypeid,//工装类型id
                page:this.page,
                pagesize:this.pagesize,
                toexcel:toexcel //0查询 1导出
            }
            this.detailobj = {};
            this.axios.request({
                url: "/acc/FixtureTools/GetCategoryPageList",
                params,
                method: "get",
            })
            .then((res) => {
                if(toexcel === 1){
                    if (res.data.ret === 1) {
                        window.location.href =
                            this.axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
                else{
                    this.total = 0;
                    this.tableData1 = [];
                    let data = res.data.data;
                    if (res.data.ret == 1 &&Array.isArray(data)&&data.length) {
                        this.total = res.data.total;
                        this.tableData1 = res.data.data;
                    }
                }
            });
        },
        add(){
            this.addmodal = true;
            this.parentType = [];
            this.parentTypeid = '';
            this.frockTypename = '';
            this.type = 1;
        },
        edit(){
            if(!this.detailobj || !this.detailobj.id){
                this.$Message.error(this.$t('1017'));
                return false;
            }
            this.parentTypeid = this.detailobj.parentid;
            this.parentTypename = this.detailobj.parentname;
            this.frockTypename = this.detailobj.name;
            this.type = 2;
            this.addmodal = true;
        },
        addPost(){
            if(!this.frockTypename.trim()){
                this.$Message.error("请输入工装类型");
                return false;
            }
            let url = '';
            let id = '';
            if(this.type === 1){
                url = '/acc/FixtureTools/AddCategory';
                id = 0;
            }
            else{
                url = '/acc/FixtureTools/UpdateCategory';
                id = this.detailobj.id;
            }
            let data = {
                id:id,
                parentid:this.parentTypeid?this.parentTypeid:0,
                name:this.frockTypename
            }
            this.axios.request({
                url: url,
                data,
                method: "post",
            }).then((res) => {
                if (res.data.ret == 1) {
                    this.addmodal = false;
                    this.initFrockType();//重新初始化类型
                    if(this.type===1){
                        this.tosearch();
                        this.$Message.success(this.$t('1055'));
                    }
                    else{
                        this.$Message.success(this.$t('1060'));
                        this.search(0);
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg+''));
                }
            });
        },
        //删除
        dele(){
            if (
                this.detailobj.id === undefined ||
                this.detailobj.id === null
            ) {
                this.$Message.error(this.$t("1017"));
                return false;
            } else {
                var params = {
                    id: this.detailobj.id,
                };
                this.$Modal.confirm({
                    title: this.$t("1018"),
                    content: "",
                    width: "290px",
                    closable: true,
                    okText: this.$t("1004"),
                    onOk: () => {
                        this.axios.request({
                            url: "/acc/FixtureTools/DeleteCategory",
                            params,
                            method: "get",
                        })
                        .then((res) => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t("1058"));
                                this.search(0);
                            } else {
                                this.$Message.error(this.$t(res.data.msg));
                            }
                        });
                    },
                });
            }
        },
        //导出模板
        loadexcel() {
            this.axios.request({
                url: "/config/Download/GetTemplate?name=FixtureToolsCategoryTemplate",
                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));
                }
            });
        },
        handleRowChange(currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        handlePageSize(value) {
            this.page = 1;
            this.pagesize = value;
            this.search(0);
        },
        changePage(value) {
            this.page = value;
            this.search(0);
        },
        handleFormatError(file) {
            this.$Message.error(
                this.$t("950396") + file.name + this.$t("950397")
            );
        },
        handleSuccess(res, file) {
            if (res.ret == 1) {
                this.$Message.success(this.$t("950398"));
                this.initFrockType();
                this.tosearch();
            } else {
                if ((res.msg + "").indexOf(",") != -1) {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t(res.data));
                }
            }
        },
        handleError() {
            this.$Message.error(this.$t("2010006") + "!");
        },
    }
}
</script>
<style>

</style>