<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>工装类型：</label>
                <Cascader class="searchSelect" :data="frockTypeTree" clearable change-on-select v-model="frockType" @on-change="changeFrockType"></Cascader>
            </div>
            <div class="filter">
                <label>工装编号：</label>
                <Input type="text" class="searchInput" v-model="frockcode" />
            </div>
            <div class="filter">
                <label>工装名称：</label>
                <Input type="text" class="searchInput" v-model="frockname" />
            </div>
            <div class="filter">
                <label>状态：</label>
                <Select v-model="status" clearable class="searchSelect">
                    <Option :value="1">可用</Option>
                    <Option :value="0">停用</Option>
                </Select>
            </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 intervalRight" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</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:'650px'}">
            <p slot="header">
                <span v-show="type==1">{{$t('1002')}}</span>
                <span v-show="type==2">{{$t('1003')}}</span>
            </p>
            <div class="demo-spin-col">
                <Spin fix  v-if="spinShow">
                    <div>正在上传...</div>
                </Spin>
                <div class="filter">
                    <label><i>*</i>工装类型：</label>
                    <Cascader class="searchSelect" :data="frockTypeTree" v-model="parentType" change-on-select @on-change="changeFrockType1"></Cascader>
                </div>
                <div class="filter">
                    <label><i>*</i>管理类型：</label>
                    <Select v-model="addmtype" class="searchSelect">
                        <Option :value="1">单件</Option>
                        <Option :value="2">批次</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label><i>*</i>工装名称：</label>
                    <Input type="text" class="searchInput" v-model="addfrockname" />
                </div>
                <div class="filter">
                    <label><i>*</i>工装料号：</label>
                    <Input type="text" class="searchInput" v-model="addfrockno" />
                </div>
                <div class="filter">
                    <label><i>*</i>工装编号：</label>
                    <Input type="text" class="searchInput" v-model="addfrockcode" />
                </div>
                <div class="filter">
                    <label><i>*</i>规格型号：</label>
                    <Input type="text" class="searchInput" v-model="addfrockspec" />
                </div>
                <div class="filter">
                    <label><i>*</i>数量：</label>
                    <InputNumber type="text" class="searchInput" :min="1" :formatter="value => `${parseInt(value)}`" v-model="addnum" />
                </div>
                <div class="filter">
                    <label><i>*</i>状态：</label>
                    <RadioGroup v-model="addstatus">
                        <Radio label="1"><span>可用</span></Radio>
                        <Radio label="0"><span>停用</span></Radio>
                    </RadioGroup>
                </div>
                <div class="filter">
                    <label>备注：</label>
                    <Input type="text" class="searchInput" v-model="addremark" />
                </div>
                <div>
                    <label>上传文件：</label>
                    <div class="accountInfoUploadFile">
                        <Upload
                            ref="upload"
                            :show-upload-list="false"
                            :on-success="handleSuccess1"
                            :before-upload="handleBeforeUpload"
                            :on-error="handleError1"
                            type="drag"
                            :headers="headers"
                            :action="UploadAction">
                            <div class="descicon" style="">
                                <Icon type="md-cloud-upload" size="15"></Icon>
                                <span>上传文件</span>
                            </div>
                        </Upload>
                        <div v-show="filename" class="hasfile">{{filename}}<Icon @click.native="delfile" type="ios-close-circle" size="15" /></div>
                    </div>
                </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=FixtureToolsTemplate",
            headers: {
                token: localStorage.getItem("token"),
                timestamp: localStorage.getItem("timestamp"),
                nonce: localStorage.getItem("nonce"),
                sign: localStorage.getItem("sign"),
            },
            //搜索
            frockTypeTree:[],//树形结构
            frockType:[],//工装类型
            frockTypeid:'',
            frockcode:'',//工装编号
            frockname:'',//工装名称
            status:'',//状态

            //列表
            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:'category'
                },
                {
                    title:'管理类型',
                    key:'managetype',
                    render:(h,params)=>{
                        let str = '';
                        if(params.row.managetype===1){
                            str = '单件';
                        }else if(params.row.managetype===2){
                            str = '批次';
                        }
                        return h('span',str);
                    }
                },
                {
                    title:'工装料号',
                    key:'partnumber'
                },
                {
                    title:'工装名称',
                    key:'name'
                },
                {
                    title:'工装编号',
                    key:'code'
                },
                {
                    title:'规格型号',
                    key:'specification'
                },
                {
                    title:'数量',
                    key:'number'
                },
                {
                    title:'状态',
                    key:'status',
                    render:(h,params)=>{
                        let str = '';
                        if(params.row.status===1){
                            str = '可用';
                        }else{
                            str = '停用';
                        }
                        return h('span',str);
                    }
                },
                {
                    title:'备注',
                    key:'remark'
                },
                {
                    title:'附件',
                    key:'filename',
                    render:(h,params)=>{
                        return h('span',{
                            style:{
                                color:'#2b85e4',
                                cursor:'pointer'
                            },
                            on:{
                                click:()=>{
                                    let name = params.row.filename;
                                    let url = params.row.fileurl;
                                    if(url){
                                        this.downFile(url,name);
                                    }
                                }
                            }
                        },params.row.filename);
                    }
                },
                {
                    title:'维护人',
                    key:'updator'
                },
                {
                    title:'维护时间',
                    key:'updatetime'
                }
            ],

            //弹窗
            detailobj:{},
            addmodal:false,
            type:0,//1添加 2编辑
            parentType:[],//工装类型
            parentTypeid:'',
            frockTypename:'',//工装类型名称
            addmtype:1,//管理类型
            addfrockname:'',//工装名称
            addfrockno:'',//工装料号
            addfrockcode:'',//工装编号
            addnum:0,
            addstatus:'1',//状态 1可用 0停用
            addfrockspec:'',//规格型号
            addremark:'',//备注
            filename: '',//文件名称
            fileurl:'',//文件路径
            UploadAction: this.axios.publicPath + "config/upload/UploadImage",
            spinShow:false,
        }
    },
    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 = "";
            this.parentType = [];
            if(value!=undefined && value.length){
                this.parentTypeid = value[value.length - 1];
                this.parentType = value;
            }
        },
        tosearch(){
            this.page = 1;
            this.pagesize = 10;
            this.search(0);
        },
        search(toexcel){
            let params = {
                category:this.frockTypeid,//工装类型id
                code:this.frockcode, 
                name:this.frockname,
                state:this.status, //0停用 1可用
                page:this.page,
                pagesize:this.pagesize,
                toexcel:toexcel //0查询 1导出
            }
            this.detailobj = {};
            this.axios.request({
                url: "/acc/FixtureTools/GetPageList",
                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.type = 1;
            this.parentType = [];//工装类型 清空
            this.parentTypeid = '';

            this.addmtype = 1;//管理类型
            this.addfrockname = '';//工装名称
            this.addfrockno = '';//工装料号
            this.addfrockcode = '';//工装编号
            this.addnum = 1;
            this.addfrockspec = '';
            this.addstatus = '1';//状态 1可用 0停用
            this.addremark = '';//备注
            this.filename = '';//文件名称
            this.fileurl = '';//文件路径
            this.addmodal = true;
        },
        edit(){
            if(!this.detailobj || !this.detailobj.id){
                this.$Message.error(this.$t('1017'));
                return false;
            }
            this.type = 2;
            this.parentTypeid = this.detailobj.categoryid;
            this.parentType = this.detailobj.categoryids;
            this.addmtype = this.detailobj.managetype;//管理类型
            this.addfrockname = this.detailobj.name;//工装名称
            this.addfrockno = this.detailobj.partnumber;//工装料号
            this.addfrockcode = this.detailobj.code;//工装编号
            this.addnum = this.detailobj.number;
            this.addfrockspec = this.detailobj.specification;
            this.addstatus = this.detailobj.status+'';//状态 1可用 0停用
            this.addremark = this.detailobj.remark;//备注
            this.filename = this.detailobj.filename;//文件名称
            this.fileurl = this.detailobj.fileurl;//文件路径
            this.addmodal = true;
        },
        addPost(){
            if(!this.parentTypeid){
                this.$Message.error("请选择工装类型");
                return false;
            }
            if(!this.addfrockname){
                this.$Message.error("请输入工装名称");
                return false;
            }
            if(!this.addfrockno){
                this.$Message.error("请输入工装料号");
                return false;
            }
            if(!this.addfrockcode){
                this.$Message.error("请输入工装编号");
                return false;
            }
            if(!this.addfrockspec){
                this.$Message.error("请输入规格型号");
                return false;
            }
            if(!this.addnum){
                this.$Message.error("请输入工装数量");
                return false;
            }

            let url = '';
            let id = '';
            if(this.type === 1){
                url = '/acc/FixtureTools/Add';
                id = 0;
            }
            else{
                url = '/acc/FixtureTools/Update';
                id = this.detailobj.id;
            }

            let data = {
                id:id,
                categoryid:this.parentTypeid,//工装类型id
                managetype:this.addmtype,
                partnumber:this.addfrockno,//料号
                code:this.addfrockcode,//编号
                name:this.addfrockname,//名称
                specifition:this.addfrockspec,//规格型号
                number:this.addnum,//数量
                remark:this.addremark,//备注
                status:this.addstatus,//附件
                fileurl:this.fileurl,
                filename:this.filename
            }
            this.axios.request({
                url: url,
                data,
                method: "post",
            }).then((res) => {
                if (res.data.ret == 1) {
                    this.addmodal = false;
                    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+''));
                }
            });

        },
        /*********文件上传 start******** */
        handleBeforeUpload(file){
            this.spinShow = true;
            if(!file){
                this.spinShow = false;
                return false;
            }
        },
        handleSuccess1 (res,file) {
            this.spinShow = false;
            if (res.ret == 1) {
                this.$Message.success(this.$t("100378"));
                this.filename = file.name;
                this.fileurl = res.data;
            } else {
                this.$Message.error(this.$t(res.msg+''));
            }
        },
        handleError1(){
            this.spinShow = false;
            this.$Message.error(this.$t("600512") + "!");
        },
        delfile(){
            this.filename = '';
            this.fileurl = '';
        },
        /*********文件上传 end******** */
        //下载文件 
        downFile(url,fileName){
            let params = {
                url: url,
                name:fileName
            };
            this.axios.request({
                url: "/config/Download/DownloadFileByUrl",
                params,
                method: "get",
                responseType: "blob"
            })
            .then((res) => {
                if (res.status == 200) {
                    let url;
                    let link = document.createElement("a");
                    url = window.URL.createObjectURL(res.data);
                    link.style.display = "none";
                    link.href = url;
                    link.setAttribute("download", fileName);
                    document.body.appendChild(link);
                    link.click();
                }
            }).catch(error=>{
                this.$Message.error('请求错误')
            });
        },
        //导出模板
        loadexcel() {
            this.axios.request({
                url: "/config/Download/GetTemplate?name=FixtureToolsTemplate",
                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.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 lang="less">
    .accountInfoUploadFile{
        display:inline-block;
        position: relative;
        left: 5px;
        .ivu-upload{
            display: inline-block;
            width: 140px;
            height: 29px;
            vertical-align: middle;
            .descicon{
                width: 140px;
                height:29px;
                line-height: 29px;
            }
        }
        .ivu-upload-drag{
            border:1px solid #dcdee2!important;
        }
        .ivu-upload-drag:hover {
            border: 1px solid #2d8cf0!important;
        }
        .hasfile{
            display: inline-block;
            position: relative;
            left: -140px;
            top: 29px;
            i{
                color: red;
                font-size: 15px;
                cursor: pointer;
                vertical-align: top;
            }
        }
    }
</style>