<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{ $t(8070) }}：</label>
                <Select v-model="whid" label-in-value clearable filterable filter-by-label class="searchSelect">
                    <Option
                    v-for="(item,index) in whdata"
                    :value="item.id"
                    :key="index"
                    :label="item.name"
                    >{{ item.name }}</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="Export()">{{$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="max-height:250px;overflow: auto;">
                <div class="filter">
                    <label><i>*</i>ID：</label>
                    <InputNumber type="number" class="searchInput" v-model="stid" :min="1" />
                </div>
                <div class="filter">
                    <label><i>*</i>{{ $t(8070) }}：</label>
                    <Select v-model="whid1" label-in-value clearable filterable filter-by-label class="searchSelect">
                        <Option
                        v-for="(item,index) in whdata1"
                        :value="item.id"
                        :key="index"
                        :label="item.name"
                        >{{ item.name }}</Option
                        >
                    </Select>
                </div>
                <div class="filter" v-for="(item,index) in sTypes" :key="index">
                    <label><i>*</i>{{item.name}}：</label>
                    <Input type="text" class="searchInput" v-model="item.val" />
                </div>
                <div class="filter row" v-show="type==2">
                    <label>是否停用：</label>
                    <Checkbox v-model="isdel" style="width:25px"></Checkbox>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="this.addmodal=false">{{$t('1033')}}</Button>
                <Button type="primary" size="large" @click="addPost()">{{$t('1011')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import axios from "@/libs/api.request";
import { getLodop } from "../../../static/Clodop/LodopFuncs";
import QRCode from "qrcodejs2";
export default {
    data() {
        return {
            action: axios.publicPath + "wms/Upload/Submit?templateName=StorageLocation",
            headers: {
                token: localStorage.getItem("token"),
                timestamp: localStorage.getItem("timestamp"),
                nonce: localStorage.getItem("nonce"),
                sign: localStorage.getItem("sign"),
            },
            whdata:[],//仓库列表
            whid:[],//选中仓库id
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            tableColumns1: [
                {
                    type: "index2",
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                },
            ],
            storeTypes:[],//储位类别
            sTypes:[],//储位类别
            whid1:'',//添加仓库
            whdata1:[],//仓库列表
            stid:1,//储位id
            isdel:true,//启用
            type:1,
            addmodal:false,

        };
    },
    created() {
        this.initTableTitle();//获取列表标题
        this.initWarehouse();
        this.tosearch();
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    methods: {
        //仓库下拉框
        initWarehouse(){
            let data = {
                page: 1,
                pagesize: 1000000,
                typeid: 0, // 产线层级id
                name: '',
            };
            this.request("/wms/WaveHouse/GetWaveHouseList", data, "get").then(
                (res) => {
                    this.whdata = [];
                    this.whdata1 = [];
                    let data = res.data.data;
                    if (res.data.ret == 1&&Array.isArray(data)&&data.length) {
                        this.whdata = res.data.data;
                        this.whdata1 = res.data.data;
                    }
                }
            );
        },
        //获取列表标题
        initTableTitle(){
            let data = {
                page: 1,
                pageSize: 1000000
            };
            this.request('/wms/Location/GetLocationTypeList', data, 'get').then(
                res => {
                    this.tableColumns1 = [
                        {
                            type: "index2",
                            title: this.$t("1008"),
                            key: "xuhao",
                            render: (h, params) => {
                                return h(
                                    "span",
                                    params.index + (this.page - 1) * this.pagesize + 1
                                );
                            },
                        },
                        {
                            key:'storageName',
                            title:this.$t('8070')
                        }
                    ];
                    let data = res.data.data;
                    this.storeTypes = res.data.data;
                    if (res.data.ret == 1 && Array.isArray(data)&&data.length) {
                        data.forEach((item,key)=>{
                            this.tableColumns1.push({
                                key:'sm_'+key,
                                title:item.name
                            });
                        })
                        this.tableColumns1.push(
                            {
                                key:'state',
                                title:this.$t('920152')
                            },
                            {
                                key:'storeID',
                                title:'ID'
                            }
                        )
                    }
                }
            );
        },
        //查询储位
        tosearch(){
            this.page = 1;
            this.pagesize = 10;
            this.search();
        },
        search() {
            let data = {
                page: this.page,
                pageSize: this.pagesize,
                id: this.whid, // 仓库id
                isWavehouse: 1,
            };
            this.detailobj = {};
            this.request("/wms/Location/GetLocationList", data, "get").then(
                (res) => {
                    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.renderTable(res.data.data);
                    }
                }
            );
        },
        renderTable(arr = []) {
            let data = [];
            if (arr.length > 0) {
                arr.forEach((item) => {
                    data.push({
                        id: item.id,
                        pid: item.pid,
                        serialNumber: item.serialNumber,
                        storageName: item.storageName,
                        sm_0: item.field[0]?item.field[0].val:'',
                        sm_1: item.field[1]?item.field[1].val:'',
                        sm_2: item.field[2]?item.field[2].val:'',
                        sm_3: item.field[3]?item.field[3].val:'',
                        state: item.state == 1 ? "否" : "是",
                        status: item.state,
                        storeID: item.storeID,
                        field: item.field,
                        warehouseId: item.warehouseId
                    });
                });
            }
            this.tableData1 = data;
        },
        //添加弹窗
        add() {
            //判断储位类别存不存在
            if(!this.storeTypes || !this.storeTypes.length){
                this.$Message.error("请先创建储位类别");
                return false;
            }
            this.sTypes = [];
            this.storeTypes.forEach((item)=>{
                this.sTypes.push({
                    id:item.id,
                    name:item.name,
                    val:''
                })
            })
            this.whid1 = "";
            this.stid = 1;
            this.isdel = false;//启用
            this.type = 1;//添加
            this.addmodal = true;
        },
        //添加提交
        addPost(){
            if(!this.stid){
                this.$Message.error("请填写ID");
                return false;
            }
            if(!this.whid1){
                this.$Message.error("请选择仓库");
                return false;
            }
            if(!this.sTypes || this.sTypes.length === 0){
                this.$Message.error("请填写储位层级");
                return false;
            }
            else{
                for(var i = 0;i<this.sTypes.length;i++){
                    if(!this.sTypes[i].val){
                        this.$Message.error("请填写"+this.sTypes[i].name);
                        return false;
                    }
                }
            }

            let code = 0;
            if(!this.stid){
                code = 1;
            }
            this.sTypes.forEach((item)=>{
                if(item===""){
                    code = 1;
                }
            })
            //编辑，不能修改仓库
            if(this.type===1 && !this.whid1){
                code = 1;
            }
            if(code === 1){
                this.$Message.error(this.$t('9000136'));
                return false;
            }
            let url = '';
            let id = '';
            if(this.type===1){
                url = '/wms/Location/AddLocation';
                id = 0;
            }else{
                url = '/wms/Location/UpdateLocation';
                id = this.detailobj.id;
            }
            let data = {
                id:id,
                warehouseid:this.whid1,
                storeID:this.stid,
                status:this.isdel?0:1,
                storeArr:this.sTypes
            }
            this.request(url, data, "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();
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg+''));
                }
            });
        },
        edit() {
            if (!this.detailobj || !this.detailobj.id ) {
                this.$Message.error(this.$t('1017'));
                return false;
            }
            this.sTypes = this.detailobj.field;
            this.whid1 = this.detailobj.warehouseId;
            this.stid = this.detailobj.storeID;
            this.isdel = this.detailobj.status?false:true;//启用

            this.type = 2;//添加
            this.addmodal = true;
        },
        handleRowChange(currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        handlePageSize(value) {
            this.page = 1;
            this.pagesize = value;
            this.search();
        },
        changePage(value) {
            this.page = value;
            this.search();
        },
       
        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.getCategory();
                this.search(1, 10);
            } else {
                if ((res.msg + "").indexOf(",") != -1) {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t(res.data));
                }
            }
        },
        handleError() {
            this.$Message.error(this.$t("2010006") + "!");
        },
        loadexcel() {
            axios
                .request({
                    url: "/config/Download/GetTemplate?name=StorageLocation",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        Export() {
            this.request("/wms/Location/ExportLocation", "", "get").then(
                (res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        request(url, data, type) {
            if (type == "get") {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        },
    },
};
</script>

<style scoped>
.row {
    display: flex;
}
</style>
