<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin: 0px">
            <div class="filter">
                <label>{{ $t(8070) }}：</label>
                <Select v-model="storageid" clearable class="searchSelect">
                    <Option
                        v-for="item in stores"
                        :value="item.id"
                        :key="item.id"
                        >{{ item.name }}</Option
                    >
                </Select>
            </div>
            <div class="filter">
                <label>{{ $t(900933) }}：</label>
                <Select
                    v-model="pn"
                    clearable
                    filterable
                    remote
                    :remote-method="getPn"
                    class="searchSelect"
                    >·
                    <Option
                        v-for="item in materials"
                        :value="item.name"
                        :key="item.id"
                        >{{ item.name }}</Option
                    >
                </Select>
            </div>
            <div class="filter">
                <label>{{ $t("900908") }}：</label>
                <DatePicker
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    :clearable="false"
                    v-model="index_time"
                    class="searchInput MaxWidth"
                ></DatePicker>
            </div>
            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search(1, 10)"
                    >{{ $t("1001") }}</Button
                >
            </div>
        </div>
        <div class="divborder">
            <div id="main"></div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
import echarts from "echarts";

export default {
    data() {
        return {
            storageid: "",
            stores: [],
            pn: "",
            materials: [],
            index_time: [],
            x: [],
            y: [],
        };
    },
    created() {
        this.index_time = [
            moment(new Date().getTime() - 3600 * 1000 * 24 * 7).format(
                "YYYY-MM-DD "
            ) + "00:00:00",
            moment(new Date().getTime()).format("YYYY-MM-DD ") + "23:59:59",
        ];
        this.getStore();
        this.search();
    },
    methods: {
        search() {
            let starttime = this.index_time[0];
            let endtime = this.index_time[1];

            var params = {
                sn: this.pn, //料号
                storageid: 1000,
                start: starttime,
                end: endtime,
                page: 1,
                pageSize: 1000000,
            };

            this.axios
                .request({
                    url: "/wms/StockHistory/GetStockChangeChart",
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.x = res.data.data.x;
                        this.y = res.data.data.y;
                        this.$nextTick(() => {
                            this.toechart();
                        });
                    } else {
                        this.x = [];
                        this.y = [];
                        this.$nextTick(() => {
                            this.toechart();
                        });
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        getStore() {
            let data = {
                getAll: 1,
            };
            this.request("/wms/Allocation/GetWavehouse", data, "get").then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.stores = res.data.data;
                    }
                }
            );
        },
        getPn(query = "") {
            this.request(
                "/wms/Inventory/GetInventoryListByName",
                { pn: query, count: 50 },
                "get"
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.materials = res.data.data;
                }
            });
        },
        toechart() {
            var myChart = echarts.init(document.getElementById("main"));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            color: "#999",
                        },
                    },
                },
                legend: {
                    data: ["库存变化"],
                },
                xAxis: {
                    type: "category",
                    data: this.x,
                    axisLabel: {
                        show: true,
                        // textStyle: {
                        //     color: '#fff',
                        //     fontSize:'25'
                        // },
                        interval: 0,
                        rotate: 15,
                    },
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "库存变化",
                        symbolSize: 8,
                        data: this.y,
                        type: "line",
                    },
                ],
            };
            myChart.setOption(option);
        },
        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>
#main {
    width: 100%;
    height: 60vh;
}
</style>