<template>
    <div>
        <div class="divborder">
            <h2>基本信息</h2>
            <div class="newSearchDiv">
                <div class="filter">
                    <label>{{ $t("1132") }}：</label>
                    <Cascader
                        trigger="click"
                        class="searchSelect"
                        :data="datalevel"
                        :value="leveldata"
                        change-on-select
                        @on-change="getSectionId"
                    ></Cascader>
                </div>
                <div class="searchBtn">
                    <Button
                        type="primary"
                        class="twoWord"
                        icon="ios-search"
                        @click="search()"
                        >{{ $t("1001") }}</Button
                    >
                    <Button
                        type="primary"
                        class="twoWord"
                        icon="ios-search"
                        @click="exportExcel()"
                        >导出</Button
                    >
                </div>
            </div>
        </div>
        <div class="divborder">
            <div class="stateTitle flex">
                <p>
                    <span>{{ summary.waittingTotal }}</span
                    >待上料
                </p>
                <p>
                    <span>{{ summary.produceTotal }}</span
                    >生产中
                </p>
                <p>
                    <span>{{ summary.complateTotal }}</span
                    >待下料
                </p>

                <p>
                    <span>{{ summary.disableTotal }}</span
                    >不可用
                </p>
            </div>
            <div class="stateWrap">
                <template v-for="(item, index) in stateList">
                    <div
                        class="stateItem"
                        :key="index"
                        :style="{ background: item.bgc,color:item.status!=0?fontColor:'' }"
                    >
                        <p class="flex">
                            <span class="infoLabel">工位：</span>
                            <span class="info">{{ item.section }}</span>
                        </p>
                        <p class="flex">
                            <span class="infoLabel">产品：</span>
                            <span class="info">{{ item.product }}</span>
                        </p>
                        <p class="flex">
                            <span class="infoLabel">工装：</span>
                            <span class="info">{{ item.fixtureName }}</span>
                        </p>
                        <p class="flex">
                            <span class="infoLabel">储位：</span>
                            <span class="info">{{ item.location }}</span>
                        </p>
                        <p class="flex">
                            <span class="infoLabel">工件：</span>
                            <span class="info">{{ item.sn }}</span>
                        </p>
                    </div>
                </template>
            </div>
            <Table class="tableClass" :data="data1" :columns="columns1"></Table>
            <div v-show="show1">
                <Table
                    class="tableClass"
                    :data="data2"
                    :columns="columns2"
                ></Table>
            </div>
            <div v-show="show2">
                <Table
                    class="tableClass"
                    :data="data3"
                    :columns="columns3"
                ></Table>
            </div>
        </div>
    </div>
</template>

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

export default {
    data() {
        return {
            productionLine: [],
            leveldata: [], // 产线层级插件所需数据
            datalevel: [], // 产线层级选中数据
            stateList: [0],
            columns1: [
                {
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h("span", params.index + 1);
                    },
                    width: 70,
                },
                {
                    title: "产线层级",
                    key: "section",
                },
                // {
                //     title: "设备",
                //     key: "storage_sn",
                // },
                {
                    title: "工装编号",
                    key: "fixtureName",
                    render: (h, params) => {
                        return h(
                            "a",
                            {
                                on: {
                                    click: () => {
                                        // this.show1 = true;
                                    },
                                },
                            },
                            "look"
                        );
                    },
                },
                {
                    title: "产品编号",
                    key: "product",
                },
                {
                    title: "工件编号",
                    key: "sn",
                    render: (h, params) => {
                        return h(
                            "a",
                            {
                                on: {
                                    click: () => {
                                        // this.show2 = true;
                                    },
                                },
                            },
                            "look"
                        );
                    },
                },
                {
                    title: "状态",
                    key: "status",
                },
                {
                    title: "最后更新时间",
                    key: "workpiece_sn",
                },
            ],
            data1: [],
            columns2: [
                {
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 70,
                },
                {
                    title: "父工装类别",
                    key: "warehouse",
                },
                {
                    title: "父工装编号",
                    key: "storage_sn",
                },
                {
                    title: "父工装名称",
                    key: "install_sn",
                },
                {
                    title: "父工装规格",
                    key: "workpiece_sn",
                },
                {
                    title: "父工装编号",
                    key: "storage_sn",
                },
                {
                    title: "子工装类别",
                    key: "install_sn",
                },
                {
                    title: "子工装编号",
                    key: "install_sn",
                },
                {
                    title: "子工装名称",
                    key: "install_sn",
                },
                {
                    title: "子工装规格",
                    key: "install_sn",
                },
                {
                    title: "子工装编号",
                    key: "install_sn",
                },
                {
                    title: "状态",
                    key: "install_sn",
                },
                {
                    title: "备注",
                    key: "install_sn",
                },
                {
                    title: "附件",
                    key: "install_sn",
                },
                {
                    title: "维护人",
                    key: "install_sn",
                },
                {
                    title: "维护时间",
                    key: "workpiece_sn",
                },
            ],
            data2: [],
            columns3: [
                {
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 70,
                },
                {
                    title: "产品编号",
                    key: "warehouse",
                },
                {
                    title: "产品名称",
                    key: "storage_sn",
                },
                {
                    title: "产品编号",
                    key: "install_sn",
                },
                {
                    title: "工序顺序",
                    key: "workpiece_sn",
                },
                {
                    title: "工序信息",
                    key: "storage_sn",
                },
                {
                    title: "产线层级",
                    key: "install_sn",
                },
                {
                    title: "设备信息",
                    key: "workpiece_sn",
                },
                {
                    title: "工装信息",
                    key: "workpiece_sn",
                },
                {
                    title: "结果",
                    key: "workpiece_sn",
                },
                {
                    title: "维护人",
                    key: "workpiece_sn",
                },
                {
                    title: "维护时间",
                    key: "workpiece_sn",
                },
            ],
            data3: [],
            show2: false,
            show1: false,
            sectionid: 0,
            summary: {
                complateTotal: 0,
                disableTotal: 0,
                produceTotal: 0,
                waittingTotal: 0,
            },
            fontColor:'#fff'
        };
    },
    created() {
        this.initlevel();
        this.search();
    },
    methods: {
        search() {
            // 初始化产线层级
            this.axios
                .request({
                    url:
                        "/acc/AutomationState/GetStationMonitor?section=" +
                        this.sectionid,
                    method: "get",
                })
                .then((res) => {
                    const arr = [];
                    if (res.data.ret == 1) {
                        console.log(res.data.data);
                        // this.stateList = res.data.data.dts;
                        let arr = [];
                        arr =
                            res.data.data.dts.length > 0
                                ? res.data.data.dts
                                : [];
                        arr.forEach((ele) => {
                            let bgc = "";
                            if (ele.enable == 0) {
                                bgc = "red";
                            }
                            if (ele.status == 1) {
                                bgc = "#ff9900";
                            }
                            if (ele.status == 2) {
                                bgc = "#19be6b";
                            }
                            if (ele.status == 3) {
                                bgc = "#2db7f5";
                            }
                            ele.bgc = bgc;
                        });
                        this.stateList = arr;
                        this.data1 = arr;
                        this.summary = res.data.data.sum;
                        console.log(this.summary);
                    }
                });
        },
        initlevel() {
            // 初始化产线层级
            this.axios
                .request({
                    url: "config/ProjectLevelSection/GetSectionTree",
                    method: "get",
                })
                .then((res) => {
                    const arr = [];
                    if (res.data.data.length > 0) {
                        this.datalevel = res.data.data;
                        arr.push(res.data.data[0].value);
                        this.leveldata = arr;
                    }
                });
        },
        getSectionId(val) {
            this.leveldata = val;
            this.sectionid =
                this.leveldata.length > 0
                    ? this.leveldata[this.leveldata.length - 1]
                    : 0;
        },
        exportExcel() {
            let data = {};
            this.axios
                .request({
                    url: "",
                    data,
                    method: "",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
    },
};
</script>

<style lang="less" scoped>
.flex {
    display: flex;
}
.stateWrap {
    margin: 20px 10px;
    display: flex;
    flex-wrap: wrap;
}
.stateItem {
    border: 1px solid #d3d3d3;
    width: 300px;
    // height: 150px;
    padding-left: 10px;
    margin: 10px;
    p {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        
    }
}
.stateTitle {
    p {
        font-size: 20px;
        width: 150px;
        height: 40px;
        line-height: 40px;
        span {
            display: inline-block;
            margin: 0 10px;
            text-align: center;
            width: 40px;
            height: 40px;
            color: #fff;
            // border: 1px solid #333;
        }
    }
    p:nth-child(3) span {
        background-color: #2db7f5;
    }
    p:nth-child(2) span {
        background-color: #19be6b;
    }
    p:nth-child(1) span {
        background-color: #ff9900;
    }
    p:nth-child(4) span {
        background-color: #ed4014;
    }
}
</style>