<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>
                <Select v-model="frockid" label-in-value clearable filterable filter-by-label class="searchSelect">
                    <Option
                    v-for="(item,index) in frockList"
                    :value="item.id"
                    :key="index"
                    :label="item.name+'#'+item.code"
                    >{{ item.name+'#'+item.code }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>产品名称：</label>
                <Select v-model="productid" label-in-value clearable filterable filter-by-label class="searchSelect">
                    <Option
                    v-for="(item,index) in productList"
                    :value="item.id"
                    :key="index"
                    :label="item.name+'#'+item.code+'#'+item.drawingcode"
                    >{{ item.name+'#'+item.code+'#'+item.drawingcode }}</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" 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:'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>工装类型：</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="addfrockid" label-in-value clearable filterable filter-by-label class="searchSelect">
                        <Option
                        v-for="(item,index) in addfrockList"
                        :value="item.id"
                        :key="index"
                        :label="item.name+'#'+item.code"
                        >{{ item.name+'#'+item.code }}</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label><i>*</i>产品名称：</label>
                    <Select v-model="addproductid" label-in-value clearable filterable filter-by-label class="searchSelect">
                        <Option
                        v-for="(item,index) in productList"
                        :value="item.id"
                        :key="index"
                        :label="item.name+'#'+item.code+'#'+item.drawingcode"
                        >{{ item.name+'#'+item.code+'#'+item.drawingcode }}</Option>
                    </Select>
                </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=FixtureToolsProductTemplate",
            headers: {
                token: localStorage.getItem("token"),
                timestamp: localStorage.getItem("timestamp"),
                nonce: localStorage.getItem("nonce"),
                sign: localStorage.getItem("sign"),
            },
            //搜索
            frockTypeTree:[],//树形结构
            frockType:[],//工装类型
            frockTypeid:'',
            frockList:[],//工装列表
            frockid:'',//工装id
            productList:[],//产品列表
            productid:'',//产品id 

            //列表
            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:'categoryname'
                },
                {
                    title:'工装料号',
                    key:'partnumber'
                },
                {
                    title:'工装名称',
                    key:'fixturetool'
                },
                {
                    title:'规格型号',
                    key:'specfication'
                },
                {
                    title:'产品编号',
                    key:'productcode'
                },
                {
                    title:'产品名称',
                    key:'productname'
                },
                {
                    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:'',
            addfrockList:[],
            addfrockid:'',//工装id
            addproductid:'',//产品
            addremark:'',//备注
            filename: '',//文件名称
            fileurl:'',//文件路径
            UploadAction: this.axios.publicPath + "config/upload/UploadImage",
            spinShow:false,
        }
    },
    created(){
        this.initFrockType();//工装类型
        this.getFrocks();//工装
        this.iniproducts();//产品
        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];
                this.getFrocksChange(1);
            }
        },
        changeFrockType1(value){
            this.parentTypeid = "";
            this.parentType = [];
            if(value!=undefined && value.length){
                this.parentTypeid = value[value.length - 1];
                this.parentType = value;
                this.getFrocksChange(2);
            }
        },
        //获取工装下拉框
        getFrocks(){
            let params = {
                category:'',//工装类型id
                code:'', 
                name:'',
                state:1, //0停用 1可用
                page:1,
                pagesize:1000000,
                toexcel:0 //0查询 1导出
            }
            this.axios.request({
                url: "/acc/FixtureTools/GetPageList",
                params,
                method: "get",
            })
            .then((res) => {
                this.frockList = [];
                this.addfrockList = [];
                let data = res.data.data;
                if (res.data.ret == 1 &&Array.isArray(data)&&data.length) {
                    this.frockList = res.data.data;
                    this.addfrockList = res.data.data;
                }
            });
        },
        getFrocksChange(num){
            this.addfrockid = '';
            let params = {
                category:num==1?this.frockTypeid:this.parentTypeid,//工装类型id
                code:'', 
                name:'',
                state:1, //0停用 1可用
                page:1,
                pagesize:1000000,
                toexcel:0 //0查询 1导出
            }
            this.axios.request({
                url: "/acc/FixtureTools/GetPageList",
                params,
                method: "get",
            })
            .then((res) => {
                if(num == 1){
                    this.frockList = [];
                }else{
                    this.addfrockList = [];
                }
                let data = res.data.data;
                if (res.data.ret == 1 &&Array.isArray(data)&&data.length) {
                    if(num == 1){
                        this.frockList = res.data.data;
                    }else{
                        this.addfrockList = res.data.data;
                    }
                }
            });
        },
        //查询产品
        iniproducts() {
            var params = {
                name: '',
                count: 1000000
            }
            this.axios.request({
                url: '/config/ProjectProduct/GetProductsByCode',
                params,
                method: 'get'
            })
            .then(res => {
                this.productList = [];
                let data = res.data.data;
                if(res.data.ret ===1 &&Array.isArray(data)&&data.length){
                    this.productList = res.data.data
                }
            })
        },
        tosearch(){
            this.page = 1;
            this.pagesize = 10;
            this.search(0);
        },
        search(toexcel){
            let params = {
                category:this.frockTypeid,//工装类别ID
                tool:this.frockid,//工装信息ID
                product:this.productid,//产品ID
                page:this.page,
                pagesize:this.pagesize,
                toexcel:toexcel //0查询 1导出
            }
            this.detailobj = {};
            this.axios.request({
                url: "/acc/FixtureToolsProduct/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.addfrockid = '';//工装id
            this.addproductid = '';//产品
            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.parentType = this.detailobj.categoryids;//工装类型 清空
            this.parentTypeid = this.detailobj.categoryid;
            this.addfrockid = this.detailobj.fixturetoolid;//工装id
            this.addproductid = this.detailobj.productid;//产品
            this.addremark = this.detailobj.remark;//备注
            this.filename = this.detailobj.filename;//文件名称
            this.fileurl = this.detailobj.fileurl;//文件路径
            this.addmodal = true;
        },
        addPost(){
            if(!this.addfrockid){
                this.$Message.error("请输入工装名称");
                return false;
            }
            if(!this.addproductid){
                this.$Message.error("请输入产品名称");
                return false;
            }
            
            let url = '';
            let id = '';
            if(this.type === 1){
                url = '/acc/FixtureToolsProduct/Add';
                id = 0;
            }
            else{
                url = '/acc/FixtureToolsProduct/Update';
                id = this.detailobj.id;
            }

            let data = {
                id:id,
                fixturetoolid:this.addfrockid,//工装id
                productid:this.addproductid,
                remark:this.addremark,//备注
                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('请求错误')
            });
        },
        //删除
        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/FixtureToolsProduct/Delete",
                            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=FixtureToolsProductTemplate",
                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>