<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{$t('100088')}}：</label>
                <Select
                    v-model="productname"
                    clearable
                    class="searchSelect"
                    filerable
                    @on-change="getLine"
                >
                    <!--  -->
                    <Option
                        v-for="item in products"
                        :value="item.id"
                        :key="item.code"
                    >{{ item.name }}({{item.code}})</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(500006)}}；</label>
                <Select v-model="lineid" clearable class="searchSelect" @on-change="getMachine2">
                    <Option
                        v-for="item in lines"
                        label-in-value
                        :value="item.route"
                        :key="item.id"
                    >{{ item.text }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(100308)}}：</label>
                <Select v-model="machineId" clearable class="searchSelect">
                    <Option
                        v-for="item in machineList1"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.title }}</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"
                    @on-change="getDate"
                ></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 newEchartStyle">
            <div class="echartsId" id="echarts_div"></div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
import echarts from "echarts";
import axios from "@/libs/api.request";

export default {
    data() {
        return {
            abnormalReason: "", // 异常原因
            kpi: 1, // 指标
            index_time: [], // 时间范围
            name1: "",
            machineId: 0,
            machineList1: [],
            products: [], // 产品
            productname: 0,
            addproductid: 0,
            lines: [],
            lineid: 0,
        };
    },
    created() {
        this.iniproducts();

        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 HH:mm:ss"),
        ];
        this.search();
    },
    methods: {
        iniproducts() {
            var params = {
                name: "",
                count: 50,
            };
            axios
                .request({
                    url: "/config/ProjectProduct/GetProductsByCode",
                    params,
                    method: "get",
                })
                .then((res) => {
                    // console.log(res.data.data);
                    this.products = res.data.data;
                });
        },
        inilines(id) {
            axios
                .request({
                    url: "/tlm/Technology/GetRoutes?productid=" + id,
                    method: "get",
                })
                .then((res) => {
                    // console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.lines = res.data.data;
                    }
                });
        },
        getLine(value) {
            this.productname = value;

            this.inilines(this.productname);
            this.lineid = "";
            this.getMachine();
        },
        getMachine2(val) {
            if (val) {
                this.lineid = val;
                this.getMachine();
            }
        },
        getMachine() {
            this.request(
                "/tlm/Technology/GetTechMachine?product_id=" +
                    this.productname +
                    "&route=" +
                    this.lineid,
                "",
                "get"
            ).then((res) => {
                if (res.data.ret == 1) {
                    // this.machineList = res.data.data;
                    this.machineList1 = res.data.data;
                }
            });
        },
        getDate(value) {
            this.index_time = value;
        },
        search() {
            let starttime = 0,
                endtime = 0;
            starttime = Date.parse(this.index_time[0]) / 1000;
            endtime = Date.parse(this.index_time[1]) / 1000;

            let data = {
                start: starttime,
                end: endtime,
                machine: this.machineId,
                route: this.lineid,
                product: this.productname,
            };
            //   console.log(data);
            this.axios
                .request({
                    url: "/tlm/ToolInstall/ToolLifeAnalysis",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        console.log(res.data);
                        let xArr = res.data.data.x;
                        let y1 = res.data.data.y1;
                        let y2 = res.data.data.y2;

                        this.getCharts(xArr, y1,y2);
                    }
                });
        },
        getCharts(x, y1,y2) {
            // switch (this.kpi) {
            //     case 1:
            //         this.name1 = "报废量";
            //         break;
            //     case 2:
            //         this.name1 = "修磨量";
            //         break;
            //     case 3:
            //         this.name1 = "使用量";
            //         break;
            // }
            var main_test = echarts.init(
                document.getElementById("echarts_div")
            );
            let option_base = {
                title: {
                    textStyle: {
                        fontSize: 18,
                    },
                    subtextStyle: {
                        fontSize: 14,
                    },
                },
                color: ["#3398DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                legend: {
                    name: "",
                    top: "10px",
                },
                grid: {
                    left: "3%",
                    right: "10%",
                    bottom: "8%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        name: "刀具条码",
                        data: x,
                        axisTick: {
                            alignWithLabel: true,
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 0,
                        },
                    },
                ],
                yAxis: [
                    {
                        name: "数量",
                        nameTextStyle: { fontSize: 18 },
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: '额定寿命',
                        type: "bar",
                        barMaxWidth: 70,
                        barWidth: "60%",
                        data: y1,
                    },
                    {
                        name: '实际寿命',
                        type: "bar",
                        barMaxWidth: 70,
                        barWidth: "60%",
                        data: y2,
                    },
                ],
            };
            var main_test = echarts.init(
                document.getElementById("echarts_div")
            );
            main_test.clear();
            main_test.setOption(option_base);
        },
        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 lang="less" scoped>
</style>
