<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin: 0px">
            <!-- <div class="filter">
          <label ><span v-text="$t('1132')">产线层级</span>:</label>
          <Cascader :data="datalevel" :value="leveldata" trigger="click" change-on-select style="display:inline-block;width:200px;" @on-change="getlevel"></Cascader>
            </div>-->
            <div class="filter">
                <label> <span v-text="$t('1031')">父级设备类型</span>： </label>
                <Select
                    v-model="ftype"
                    label-in-value
                    @on-change="ftypechange"
                    clearable
                    class="searchSelect"
                >
                    <Option
                        v-for="item in ftypelist"
                        :value="item.id"
                        :key="item.id"
                        >{{ item.title }}</Option
                    >
                </Select>
            </div>
            <div class="filter">
                <label> <span v-text="$t('1032')">子级设备类型</span>： </label>
                <Select
                    v-model="ctype"
                    label-in-value
                    clearable
                    class="searchSelect"
                >
                    <Option
                        v-for="item in ctypelist"
                        :value="item.id"
                        :key="item.id"
                        >{{ item.title }}</Option
                    >
                </Select>
            </div>
            <div class="filter">
                <label> <span v-text="$t('800231')">设备属性</span>： </label>
                <Select
                    v-model="attribution"
                    label-in-value
                    clearable
                    class="searchSelect"
                >
                    <Option :value="1" v-text="$t('960432')">设备</Option>
                    <Option :value="2" v-text="$t('960433')">子系统</Option>
                    <Option :value="3" v-text="$t('960434')">部件</Option>
                </Select>
            </div>
            <div class="filter">
                <label> <span v-text="$t('100067')">入固日期</span>： </label>
                <DatePicker
                    type="datetime"
                    :value="fixationtime"
                    @on-change="timechange"
                    format="yyyy-MM-dd"
                    confirm
                    placeholder
                    class="searchInput"
                ></DatePicker>
            </div>

            <!-- 次级搜索条件--隐藏 -->
            <div v-show="!morecondition">
                <div>
                    <div class="filter">
                        <label>
                            <span v-text="$t('1040')">设备编号</span>：
                        </label>
                        <Input
                            class="searchInput"
                            type="text"
                            v-model="fixedcode"
                        />
                    </div>
                    <div class="filter">
                        <label>
                            <span v-text="$t('100066')">生产商</span>：
                        </label>
                        <Input
                            class="searchInput"
                            type="text"
                            v-model="indexmanufacturer"
                        />
                    </div>
                </div>
            </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']"
                >
                    <Button
                        class="fourWord"
                        icon="md-cloud-upload"
                        type="primary"
                        >{{ $t("upload-excel") }}</Button
                    >
                </Upload>
                <Button
                    type="primary"
                    class="fourWord"
                    icon="md-cloud-download"
                    @click="loadexcel1()"
                    >{{ $t("1007") }}</Button
                >

                <Button
                    type="primary"
                    class="fourWord"
                    style="margin-left: 50px"
                    icon="ios-information-circle-outline"
                    @click="importanceSetting()"
                    >设备重要度</Button
                >

                <!-- <Button type="primary" icon="ios-cash-outline" @click="DeviceQR()">{{this.$t('920137')}}</Button> -->
                <!-- <Button type="primary" icon="ios-cash-outline" @click="ToolQR()">{{this.$t('920136')}}</Button> -->
            </div>

            <!-- 更多条件 按钮 -->
            <MoreConbtn
                @getCon="morecondition = !morecondition"
                :morecondition="morecondition"
            ></MoreConbtn>
        </div>

        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange"
                @on-selection-change="handleSelectRow"
                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 class="showdetail" v-show="show1">
                <div>
                    <img :src="detailobj.image" alt />
                </div>
                <div style="border: 0">
                    <div>
                        <div>
                            <span v-text="$t('100069')">所在位置</span>
                        </div>
                        <div>{{ detailobj.lmachine }}</div>
                    </div>
                    <div>
                        <div>
                            <span v-text="$t('100074')">设备类型</span>
                        </div>
                        <div>{{ detailobj.typetitle }}</div>
                    </div>
                    <div>
                        <div>
                            <span v-text="$t('1041')">设备名称</span>
                        </div>
                        <div>{{ detailobj.title }}</div>
                    </div>
                    <div>
                        <div>
                            <span v-text="$t('1040')">设备编号</span>
                        </div>
                        <div>{{ detailobj.code }}</div>
                    </div>
                    <div>
                        <div>
                            <span v-text="$t('100066')">生产商</span>
                        </div>
                        <div>{{ detailobj.factory }}</div>
                    </div>
                    <div>
                        <div>
                            <span v-text="$t('100072')">设备型号</span>
                        </div>
                        <div>{{ detailobj.model }}</div>
                    </div>
                </div>
                <div style="border: 0">
                    <div>
                        <div>
                            <span v-text="$t('100073')">出厂编号</span>
                        </div>
                        <div>{{ detailobj.factory_code }}</div>
                    </div>
                    <div>
                        <div>
                            <span v-text="$t('100067')">入固日期</span>
                        </div>
                        <div>
                            {{
                                detailobj.made_date == "Invalid date"
                                    ? ""
                                    : detailobj.made_date
                            }}
                        </div>
                    </div>
                    <div>
                        <div>
                            <span v-text="$t('1030')">备注</span>
                        </div>
                        <div>{{ detailobj.description }}</div>
                    </div>
                    <div>
                        <div>
                            <span v-text="$t('100078')">所在区域</span>
                        </div>
                        <div></div>
                    </div>
                    <div>
                        <div class="specialdiv">{{ detailobj.station }}</div>
                    </div>
                    <div>
                        <div class="specialdiv"></div>
                    </div>
                </div>
                <div id="detailqrcode"></div>
            </div>
        </div>
        <Modal
            class="newModalClass"
            :title="$t('100075')"
            v-model="addmodal"
            :styles="{ width: '600px' }"
        >
            <div class="modal_body">
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('1031')">父级设备类型</span>：
                    </label>
                    <Select
                        v-model="addptype"
                        label-in-value
                        clearable
                        class="searchSelect"
                        @on-change="addftypechange"
                    >
                        <Option
                            v-for="item in addptypelist"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.title }}</Option
                        >
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('1032')">子级设备类型</span>：
                    </label>
                    <Select
                        v-model="addctype"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option
                            v-for="item in addctypelist"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.title }}</Option
                        >
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('1041')">设备名称</span>：
                    </label>
                    <Input class="searchInput" type="text" v-model="addmname" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('800231')">设备属性</span>：
                    </label>
                    <Select
                        v-model="addattribution"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option :value="1" v-text="$t('960432')">设备</Option>
                        <Option :value="2" v-text="$t('960433')">子系统</Option>
                        <Option :value="3" v-text="$t('960434')">部件</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('901111')">设备等级</span>：
                    </label>
                    <Select
                        v-model="addmlevel"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option :value="1" v-text="$t('900809')"
                            >普通设备</Option
                        >
                        <Option :value="2" v-text="$t('900808')"
                            >重点设备</Option
                        >
                        <Option :value="3" v-text="$t('900807')"
                            >瓶颈设备</Option
                        >
                        <Option :value="4" v-text="$t('900806')"
                            >非生产设备</Option
                        >
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('950196')">数采设备</span>：
                    </label>
                    <Select
                        v-model="addcategory"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option value="1" v-text="$t('950197')">NC</Option>
                        <Option value="2" v-text="$t('950198')">非NC</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('1040')">设备编号</span>：
                    </label>
                    <Input class="searchInput" type="text" v-model="addfcode" />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('5500092')">接口类型</span>：
                    </label>
                    <Select
                        v-model="addattribute"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option :value="1" v-text="$t('800256')"
                            >正常设备</Option
                        >
                        <Option :value="2" v-text="$t('700161')"
                            >串口设备</Option
                        >
                        <Option :value="3" v-text="$t('700162')"
                            >FTP设备</Option
                        >
                        <Option :value="4" v-text="$t('700163')"
                            >无系统设备</Option
                        >
                    </Select>
                </div>
                <div class="filter">
                    <label> <span v-text="$t('100066')">生产商</span>： </label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="addmanufacturer"
                    />
                </div>
                <div class="filter">
                    <label>
                        <span v-text="$t('100072')">设备型号</span>：
                    </label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="addmachinetype"
                    />
                </div>
                <div class="filter">
                    <label>
                        <span v-text="$t('100073')">出厂编号</span>：
                    </label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="addfnumber"
                    />
                </div>
                <div class="filter">
                    <label>
                        <span v-text="$t('100067')">入固日期</span>：
                    </label>
                    <DatePicker
                        class="searchInput"
                        type="date"
                        v-model="adddconsolidation"
                    ></DatePicker>
                </div>
                <div class="filter">
                    <label> <span v-text="$t('950093')">排序</span>： </label>
                    <InputNumber
                        :min="0"
                        class="searchInput"
                        type="text"
                        v-model="addsorting"
                        onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                    />
                </div>
                <div>
                    <label>{{ $t(600528) }}：</label>
                    <div
                        class="uploadMax"
                        style="display: inline-block; vertical-align: text-top"
                    >
                        <img :src="loadimg" alt />
                        <input
                            type="file"
                            name
                            ref="fileIntimg"
                            id
                            @change="unloadimg"
                            accept="image/png, image/gif, image/jpeg"
                        />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button
                    type="text"
                    size="large"
                    @click="addmodal = false"
                    v-text="$t('1033')"
                    >取消</Button
                >
                <Button
                    type="primary"
                    size="large"
                    @click="adddata"
                    v-text="$t('1011')"
                    >确定</Button
                >
            </div>
        </Modal>

        <Modal
            class="newModalClass"
            :title="$t('1044')"
            v-model="editmodal"
            :styles="{ width: '600px' }"
        >
            <div class="modal_body">
                <div class="filter">
                    <label>{{ $t("100069") }}：</label>
                    <Input
                        class="searchInput MaxWidth"
                        type="text"
                        v-model="editobj.station"
                        readonly
                    />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{ $t("1031") }}：
                    </label>
                    <Select
                        v-model="editobj.ptypeid"
                        label-in-value
                        clearable
                        class="searchSelect"
                        @on-change="edittypechange(editobj.ptypeid)"
                    >
                        <Option
                            v-for="item in editptypelist"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.title }}</Option
                        >
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{ $t("1032") }}：
                    </label>
                    <Select
                        v-model="editobj.typeid"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option
                            v-for="item in editctypelist"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.title }}</Option
                        >
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{ $t("1041") }}：
                    </label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="editobj.title"
                    />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{ $t("901111") }}：
                    </label>
                    <Select
                        v-model="editobj.machinelevel"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option :value="1" v-text="$t('900809')"
                            >普通设备</Option
                        >
                        <Option :value="2" v-text="$t('900808')"
                            >重点设备</Option
                        >
                        <Option :value="3" v-text="$t('900807')"
                            >瓶颈设备</Option
                        >
                        <Option :value="4" v-text="$t('900806')"
                            >非生产设备</Option
                        >
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{ $t("950196") }}：
                    </label>
                    <Select
                        v-model="editobj.category"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option :value="1" v-text="$t('950197')">NC</Option>
                        <Option :value="2" v-text="$t('950198')">非NC</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{ $t("960431") }}：
                    </label>
                    <Select
                        v-model="editobj.attribution"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option :value="1">{{ this.$t("960432") }}</Option>
                        <Option :value="2">{{ this.$t("960433") }}</Option>
                        <Option :value="3">{{ this.$t("960434") }}</Option>
                    </Select>
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        {{ $t("100065") }}：
                    </label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="editobj.code"
                    />
                </div>
                <div class="filter">
                    <label>
                        <i>*</i>
                        <span v-text="$t('5500092')">接口类型</span>：
                    </label>
                    <Select
                        v-model="editobj.attribute"
                        label-in-value
                        clearable
                        class="searchSelect"
                    >
                        <Option :value="1" v-text="$t('800256')"
                            >正常设备</Option
                        >
                        <Option :value="2" v-text="$t('700161')"
                            >串口设备</Option
                        >
                        <Option :value="3" v-text="$t('700162')"
                            >FTP设备</Option
                        >
                        <Option :value="4" v-text="$t('700163')"
                            >无系统设备</Option
                        >
                    </Select>
                </div>
                <div class="filter">
                    <label>{{ $t("100066") }}：</label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="editobj.factory"
                    />
                </div>
                <div class="filter">
                    <label>{{ $t("100072") }}：</label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="editobj.model"
                    />
                </div>
                <div class="filter">
                    <label>{{ $t("100073") }}：</label>
                    <Input
                        class="searchInput"
                        type="text"
                        v-model="editobj.factory_code"
                    />
                </div>
                <div class="filter">
                    <label>{{ $t("100067") }}：</label>
                    <DatePicker
                        class="searchInput"
                        type="date"
                        placeholder="Select date"
                        v-model="editobj.made_date"
                    ></DatePicker>
                </div>
                <div class="filter">
                    <label> <span v-text="$t('950093')">排序</span>： </label>
                    <InputNumber
                        :min="0"
                        class="searchInput"
                        type="text"
                        v-model="editobj.sorting"
                        onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                    />
                </div>
                <div>
                    <label>{{ $t(600528) }}：</label>
                    <div
                        class="uploadMax"
                        style="display: inline-block; vertical-align: text-top"
                    >
                        <img :src="editloadimg" alt />
                        <input
                            type="file"
                            name
                            ref="fileInteditimg"
                            id
                            @change="editunloadimg"
                            accept="image/png, image/gif, image/jpeg"
                        />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button
                    type="text"
                    size="large"
                    @click="editmodal = false"
                    v-text="$t('1033')"
                    >取消</Button
                >
                <Button
                    type="primary"
                    size="large"
                    @click="editdata"
                    v-text="$t('1011')"
                    >确定</Button
                >
            </div>
        </Modal>
        <!-- 修改结束 -->

        <!-- 打印设备二维码 -->
        <Modal
            :title="$t(920137)"
            v-model="DeviceQRmodal"
            :styles="{ top: '40px', width: '700px' }"
            class="DeviceQR"
            id="DeviceQR"
        >
            <div
                class="modal_body"
                style="width: 700px !important; padding: 0 20px"
            >
                <div style="width: 660px; padding-left: 5px">
                    <div>
                        <div class="filter">
                            <label v-text="$t('1132')">产线层级</label>:
                            <Cascader
                                :data="datalevel"
                                trigger="click"
                                change-on-select
                                style="display: inline-block; width: 300px"
                                @on-change="getlevel"
                            ></Cascader>
                        </div>
                    </div>
                    <!--startprint-->
                    <div id="printTest">
                        <div
                            class="DeviceQRblock"
                            v-for="(item, key) in DeviceQRlist"
                            :key="key"
                        >
                            <div>{{ item.title }}</div>
                            <div
                                class="DeviceQRblockqr"
                                :id="'id' + item.id"
                            ></div>
                            <div>{{ item.station }}</div>
                        </div>
                    </div>
                    <!--endprint-->
                </div>
            </div>
            <div slot="footer">
                <Button
                    type="text"
                    size="large"
                    @click="DeviceQRcancel"
                    v-text="$t('1033')"
                    >取消</Button
                >
                <Button
                    type="primary"
                    size="large"
                    v-print="'#printTest'"
                    v-text="$t('100077')"
                    >打印</Button
                >
            </div>
        </Modal>
        <!-- 设备重要度设置 -->
        <Modal
            title="设备重要度设置"
            class="newModalClass"
            v-model="importance"
            :styles="{ top: '40px', width: '800px' }"
        >
            <div class="modal_body" style="padding: 0 20px">
                <!-- <div style="width:660px;padding-left:5px;"> -->
                <div>
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{ $t("901111") }}：
                        </label>
                        <Select
                            v-model="level"
                            clearable
                            class="searchSelect"
                            @on-change="getLevelTree"
                        >
                            <Option value="1" v-text="$t('900809')"
                                >普通设备</Option
                            >
                            <Option value="2" v-text="$t('900808')"
                                >重点设备</Option
                            >
                            <Option value="3" v-text="$t('900807')"
                                >瓶颈设备</Option
                            >
                            <Option value="4" v-text="$t('900806')"
                                >非生产设备</Option
                            >
                        </Select>
                    </div>
                </div>
                <div style="display: flex; position: relative">
                    <div style="width: 250px; height: 600px; overflow: auto">
                        <Tree :data="leftTree"></Tree>
                    </div>
                    <div
                        style="
                            height: 600px;
                            display: flex;
                            align-items: center;
                            margin: 0 20px;
                        "
                    >
                        <Button
                            type="primary"
                            class="twoWord"
                            @click="changeImportance"
                            >{{ $t("1003") }}</Button
                        >
                    </div>
                    <div
                        style="
                            width: 350px;
                            height: 600px;
                            overflow: auto;
                            border: 1px solid #e0e0e0;
                        "
                    >
                        <Tree
                            :data="rightTree"
                            ref="tree"
                            show-checkbox
                            @on-check-change="getTreeNodes"
                        ></Tree>
                    </div>
                    <!-- <Spin size="large" fix v-if="spinShow"></Spin> -->
                    <Spin fix v-if="spinShow">
                        <Icon
                            type="ios-loading"
                            size="18"
                            class="demo-spin-icon-load"
                        ></Icon>
                        <div>Loading</div>
                    </Spin>
                </div>
                <!-- </div> -->
            </div>
            <!-- <div slot="footer">
                <Button type="text" size="large" @click="DeviceQRcancel" v-text="$t('1033')">取消</Button>
                <Button type="primary" size="large" v-print="'#printTest'" v-text="$t('100077')">打印</Button>
            </div>-->
        </Modal>
    </div>
</template>

<script>
import axios from "@/libs/api.request";
import QRCode from "qrcodejs2";
import moment from "moment";
// import { color } from "html2canvas/dist/types/css/types/color";
export default {
    components: {},
    data() {
        return {
            headers: {
                token: localStorage.getItem("token"),
                timestamp: localStorage.getItem("timestamp"),
                nonce: localStorage.getItem("nonce"),
                sign: localStorage.getItem("sign"),
            },
            morecondition: false,
            leveldata: [],
            action:
                axios.publicPath +
                "config/upload/submit?templateName=machinelist",
            levelid: 0,
            indexlevelid: 0,
            ftype: "",
            ftypelist: [],
            ctype: "",
            ctypelist: [],
            addptypelist: [],
            addctypelist: [],
            editptypelist: [],
            editctypelist: [],
            fixedcode: "",
            equipmentid: "",
            manufacturer: "",
            indexmanufacturer: "",
            fixationtime: "",
            machineidarr: [],
            total: 0,
            tableData1: [],
            page: 1,
            obj: {},
            show1: false,
            detailobj: {},
            pagesize: 10,
            addmodal: false,
            addmtype: "",
            addptype: 0,
            addctype: 0,
            addmname: "",
            addmattribute: "1", // 作废
            addmlevel: "",
            addfcode: "",
            addattribute: 1,
            addsorting: 0,

            addtnumber: 0, // 刀位数量默认为0
            addmanufacturer: "",
            addmachinetype: "",
            addfnumber: "",
            addcategory: "", // 添加模态框数采设备
            addattribution: "",
            adddconsolidation: "",
            loadimg: require("../../../static/images/xiangjitwo.png"),
            editloadimg: require("../../../static/images/xiangjitwo.png"),
            editmodal: false,
            editobj: {},
            DeviceQRmodal: false,
            qscodelevelid: 0,
            toolqscodelevelid: 0,
            attribution: "",
            // ToolQRmodal: false,
            DeviceQRlist: [],
            // ToolQRlist: [],
            datalevel: [],
            selectids: [],
            tableColumns1: [
                {
                    type: "selection",
                    width: 50,
                    align: "center",
                },
                {
                    type: "index2",
                    title: this.$t("1008"), // 序号
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 60,
                },
                {
                    title: this.$t("100069"), // 所在位置
                    key: "place",
                    width: 280,
                },
                {
                    title: this.$t("1041"), // 设备名称
                    key: "machinename",
                    width: "220",
                },
                {
                    title: "MID",
                    key: "MID",
                    width: "80",
                },
                {
                    title: this.$t("1040"), // 设备编号
                    key: "fixedno",
                    width: "150",
                },
                {
                    title: this.$t("800231"), // 设备属性
                    key: "attribution_name",
                    width: "120",
                },
                {
                    title: this.$t("100074"), // 设备类型
                    key: "type_name",
                    width: "220",
                },
                {
                    title: this.$t("100066"), // 生产商
                    key: "manufacturer",
                    width: "220",
                },
                {
                    title: this.$t("100072"), // 设备型号
                    key: "equipmenttype",
                    width: "220",
                },
                {
                    title: this.$t("400067"), // 资产编号
                    key: "asset_code",
                    width: "150",
                },
                {
                    title: this.$t("100067"), // 入固日期
                    key: "data",
                    width: "100",
                },
                {
                    title: this.$t("1030"), // 备注
                    key: "remarks",
                    width: "180",
                },
            ],
            importance: false,
            level: "1",
            leftTree: [],
            rightTree: [],
            spinShow: false,
            ids: "",
        };
    },
    created() {
        this.initftype();
        this.search();
        // this.initlevel()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    methods: {
        handleFormatError(file) {
            this.$Message.error(
                this.$t("950396") + file.name + this.$t("950397")
            );
        },
        handleSuccess(res, file) {
            if (res.ret === 1) {
                this.search();
                this.$Message.success(this.$t("950398"));
            } else {
                if ((res.msg + "").indexOf(",") != -1) {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t(res.msg));
                }
            }
        },
        handleError() {
            this.$Message.error(this.$t("950399")); // 数据导入失败！
        },
        timechange(value) {
            this.fixationtime = value;
        },
        handleSelectRow: function (data) {
            for (var i in data) {
                if (this.selectids.indexOf(data[i].id) < 0) {
                    this.selectids.push(data[i].id);
                }
            }
        },
        initlevel() {
            axios
                .request({
                    url: "config/ProjectLevelSection/GetSectionTree",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        const arr = [];
                        this.datalevel = res.data.data;
                        console.log(this.datalevel);
                        arr.push(res.data.data[0].value);
                        this.leveldata = arr;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        // printElement () {
        //   this.$print(this.$refs.print)
        // },
        getlevel: function (data) {
            this.levelid = data[data.length - 1];
            this.qscodelevelid = data[data.length - 1];
            this.toolqscodelevelid = data;
            // 打印设备二维码层级
            if (this.DeviceQRmodal) {
                let params = {
                    id: this.qscodelevelid,
                    page: this.page,
                    pagesize: this.pagesize,
                };
                axios
                    .request({
                        url: "/config/Machine/GetMachineItem",
                        params,
                        method: "get",
                    })
                    .then((res) => {
                        if (res.data.ret === 1) {
                            this.DeviceQRlist = res.data.data;
                            res.data.data.forEach((item) => {
                                this.getQrcode1(item.id, "id" + item.id);
                            });
                        } else {
                            this.$Message.error(this.$t(res.data.msg));
                        }
                    });
            }
        },
        initftype() {
            axios
                .request({
                    url: "/config/MachineType/GetEditDcategory",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.ftypelist = res.data.data;
                        this.addptypelist = res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        ftypechange() {
            if (this.ftype === undefined) {
                this.ctype = "";
                return false;
            }
            this.equipmentid = this.ftype;
            axios
                .request({
                    url:
                        "/config/MachineType/GetLastMachineType?id=" +
                        this.equipmentid,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.ctypelist = res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        addftypechange() {
            if (this.addptype === undefined || this.addptype === 0) {
                this.addctypelist = [];
                this.addctype = 0;
                return false;
            }
            axios
                .request({
                    url:
                        "/config/MachineType/GetLastMachineType?id=" +
                        this.addptype,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.addctypelist = res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        tosearch() {
            this.page = 1;
            // this.pagesize = 10
            this.search();
        },
        search() {
            this.show1 = false;
            var params = {
                typeid: this.ctype,
                machinetype1: this.ftype,
                code: this.fixedcode,
                factory: this.indexmanufacturer,
                made_date: this.fixationtime,
                // machineidarr: this.machineidarr,
                attribution: this.attribution,
                page: this.page,
                pagesize: this.pagesize,
            };
            axios
                .request({
                    url: "/config/Machine/selectmachine",
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.total = res.data.total;
                        this.mockTableData1(res.data.data);
                        this.page = res.data.page;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },

        mockTableData1(tablelist) {
            let data = [];
            tablelist.forEach((item) => {
                var attribution_name = "";
                if (item.attribution === 1) {
                    attribution_name = this.$t("960432");
                } else if (item.attribution === 2) {
                    attribution_name = this.$t("960433");
                } else if (item.attribution === 3) {
                    attribution_name = this.$t("960434");
                }

                if (item) {
                    data.push({
                        place: item.stas,
                        machinename: item.title,
                        MID: item.id,
                        toolnameber: item.tool_count,
                        fixedno: item.code,
                        manufacturer: item.factory,
                        equipmenttype: item.model,
                        factorynumber: item.factory_code,
                        data: item.made_date,
                        typeid: item.typeid,
                        ptypeid: item.ptypeid,
                        attribution: item.attribution,
                        attribution_name: attribution_name,
                        type_name: item.type_name,
                        id: item.id,
                        attribute: item.attribute,
                        sorting: item.sorting,
                        remarks: item.remarks,
                        asset_code: item.asset_code,
                    });
                }
            });
            this.tableData1 = data;
        },
        loadexcel1() {
            // 导出excel
            var params = {
                typeid: this.ctype,
                machinetype1: this.ftype,
                code: this.fixedcode,
                factory: this.indexmanufacturer,
                made_date: this.fixationtime,
                // machineidarr: this.machineidarr,
                attribution: this.attribution,
                page: 1,
                pagesize: 99999,
            };
            axios
                .request({
                    url: "/config/Machine/exportmachine",
                    params,
                    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));
                    }
                });
        },
        handleRowChange(currentRow, oldCurrentRow) {
            this.obj = currentRow;
            this.show1 = true;
            axios
                .request({
                    url: "/config/Machine/GetMachines?id=" + this.obj.id,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.detailobj = res.data.data[0];
                        this.getQrcode(this.detailobj.id, "detailqrcode");
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        handlePageSize(value) {
            this.pagesize = value;
            this.tableData1 = this.search();
        },
        changePage(value) {
            this.page = value;
            // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
            this.tableData1 = this.search();
        },
        qrcode(qr_code, elid) {
            document.getElementById(elid).innerHTML = "";
            let qrcode = new QRCode(elid, {
                width: 160,
                height: 160,
                text:
                    this.axios.publicPath +
                    "QrScanUrl=?_controller=WeChatApp&_function=Scan&__function=Result&type=machine&id=" +
                    qr_code,
            });
        },
        getQrcode(qr_code, elid) {
            this.$nextTick(() => {
                this.qrcode(qr_code, elid);
            });
        },
        qrcode1(qr_code, elid) {
            document.getElementById(elid).innerHTML = "";
            let qrcode = new QRCode(elid, {
                width: 150,
                height: 150,
                text:
                    this.axios.publicPath +
                    "QrScanUrl=?_controller=WeChatApp&_function=Scan&__function=Result&type=machine&id=" +
                    qr_code,
            });
        },
        getQrcode1(qr_code, elid) {
            this.$nextTick(() => {
                this.qrcode1(qr_code, elid);
            });
        },
        add() {
            this.addmodal = true;
            this.addptype = ''
            this.addctype = ''
            this.addmname = ''
            this.addattribution = ''
            this.addmlevel = ''
            this.addcategory = ''
            this.addfcode = ''
            this.addattribute = 1
            this.addmanufacturer = ''
            this.addmachinetype = ''
            this.addfnumber = ''
            this.adddconsolidation = ''
            this.addsorting = 0
            this.loadimg = require("../../../static/images/xiangjitwo.png")
        },
        adddata() {
            if (
                this.addmname === "" ||
                this.addfcode === "" ||
                !this.addmattribute ||
                !this.addmlevel ||
                !this.addattribute ||
                !this.addcategory ||
                this.addptype === 0 ||
                this.addctype === 0 ||
                this.addattribution === ""
            ) {
                this.$Message.error(this.$t("9000136"));
                return false;
            }
            var data = {
                title: this.addmname,
                code: this.addmtype,
                model: this.addmachinetype,
                factory: this.addmanufacturer,
                factory_code: this.addfnumber,
                made_date: moment(this.adddconsolidation).format("YYYY-MM-DD"),
                typeid: this.addctype,
                code: this.addfcode,
                attribution: this.addmattribution,
                machinelevel: this.addmlevel,
                tool_count: this.addtnumber,
                category: this.addcategory,
                attribution: this.addattribution,
                sorting: this.addsorting,
                image:
                    this.loadimg ==
                    require("../../../static/images/xiangjitwo.png")
                        ? ""
                        : this.loadimg,
                attribute: this.addattribute,
            };
            this.axios
                .request({
                    url: "/config/Machine/AddMachine",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t("1"));
                        this.addmodal = false;
                        this.search();
                        (this.addmname = ""),
                            (this.addmtype = ""),
                            (this.addmachinetype = ""),
                            (this.addmanufacturer = ""),
                            (this.addfnumber = ""),
                            (this.adddconsolidation = ""),
                            (this.addctype = ""),
                            (this.addptype = ""),
                            (this.addfcode = ""),
                            (this.addmattribution = ""),
                            (this.addmlevel = ""),
                            (this.addtnumber = ""),
                            (this.addcategory = ""),
                            (this.addattribution = ""),
                            (this.addattribute = 1);
                        this.addsorting = 0;
                        this.loadimg ==
                            require("../../../static/images/xiangjitwo.png");
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        inieditptypelist(ptyid, typeid) {
            axios
                .request({
                    url: "/config/MachineType/GetEditDcategory",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.editptypelist = res.data.data;
                        this.edittypechange(ptyid, typeid);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        edit() {
            if (JSON.stringify(this.obj) === "{}") {
                this.$Message.error(this.$t("1043"));
                return false;
            }
            this.editloadimg = require("../../../static/images/xiangjitwo.png");
            this.getmachineinfo();
            this.editmodal = true;
        },
        editdata() {
            this.editobj.attribution = this.editobj.attribution;
            this.editobj.title = this.editobj.title;
            this.editobj.attribute = this.editobj.attribute;
            this.editobj.machinelevel = this.editobj.machinelevel;
            this.editobj.code = this.editobj.code;
            this.editobj.sorting = this.editobj.sorting;
            this.editobj.category = this.editobj.category;
            this.editobj.made_date = moment(this.editobj.made_date).format(
                "YYYY-MM-DD"
            );
            if (
                this.editobj.title === "" ||
                this.editobj.attribute === "" ||
                this.editobj.machinelevel === "" ||
                this.editobj.code === "" ||
                this.editobj.category === "" ||
                this.editobj.ptypeid === 0 ||
                this.editobj.typeid === 0
            ) {
                this.$Message.error(this.$t("1063"));
                return false;
            }
            (this.editobj.image =
                this.editloadimg ==
                require("../../../static/images/xiangjitwo.png")
                    ? ""
                    : this.editloadimg),
                (this.editobj.mid = this.obj.id);
            this.editobj.machineid = this.obj.id;
            let data = this.editobj;
            axios
                .request({
                    url: "/config/Machine/EditMachine",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t("1"));
                        this.editmodal = false;
                        this.search();
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        edittypechange(value, tyid) {
            if (value === undefined || value === 0) {
                this.editctypelist = [];
                this.editobj.typeid = 0;
                return false;
            }
            axios
                .request({
                    url: "/config/MachineType/GetLastMachineType?id=" + value,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.editctypelist = res.data.data;
                        this.editobj.typeid = tyid;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        getmachineinfo() {
            axios
                .request({
                    url: "/config/Machine/GetMachineInfo?id=" + this.obj.id,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.editobj = res.data.data[0];
                        if (res.data.data[0].image !== "") {
                            this.editloadimg = res.data.data[0].image;
                        }
                        this.inieditptypelist(
                            res.data.data[0].ptypeid,
                            res.data.data[0].typeid
                        );
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        dele() {
            if (this.selectids === undefined || this.selectids.length <= 0) {
                this.$Message.error(this.$t("1017"));
                return false;
            } else {
                this.$Modal.confirm({
                    title: this.$t("1018"),
                    content: "",
                    width: "290px",
                    closable: true,
                    okText: this.$t("1004"),
                    onOk: () => {
                        let data = {
                            ids: this.selectids,
                        };
                        axios
                            .request({
                                url: "/config/Machine/DeleteMachines",
                                data,
                                method: "post",
                            })
                            .then((res) => {
                                if (res.data.ret === 1) {
                                    this.$Message.success(this.$t("1058"));
                                    this.search();
                                } else {
                                    this.$Message.error(this.$t(res.data.msg));
                                }
                            });
                    },
                });
            }
        },
        loadexcel() {
            axios
                .request({
                    url: "/config/Download/GetTemplate?name=MachineList",
                    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));
                    }
                });
        },
        DeviceQR() {
            this.indexlevelid = this.levelid;
            this.DeviceQRmodal = true;
        },
        unloadimg() {
            // 上传照片
            const file = this.$refs.fileIntimg.files[0];
            const data = new FormData();
            data.append("file", file);
            axios
                .request({
                    url: "/config/upload/UploadImage",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t("100378"));
                        this.loadimg = axios.publicPath + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                })
                .catch((err) => {
                    alert(err.msg);
                });
        },
        editunloadimg() {
            // 上传照片
            const file = this.$refs.fileInteditimg.files[0];
            const data = new FormData();
            data.append("file", file);
            axios
                .request({
                    url: "/config/upload/UploadImage",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t("100378"));
                        this.editloadimg = axios.publicPath + res.data.data;
                        console.log(this.editloadimg);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                })
                .catch((err) => {
                    alert(err.msg);
                });
        },
        DeviceQRcancel() {
            this.levelid = this.indexlevelid;
            this.DeviceQRmodal = false;
        },
        changecondition() {
            this.morecondition = !this.morecondition;
        },
        //设备重要度
        importanceSetting() {
            this.importance = true;
            this.level = "1";
            this.getLevelTree("1");
            // this.initlevel();
        },
        getLevelTree(val) {
            // console.log(val);
            this.spinShow = true;

            this.level = val;
            this.axios
                .request({
                    url:
                        "config/MachineAttribution/GetSectionMachineLevelData?machineLevel=" +
                        this.level,
                    method: "get",
                })
                .then((res) => {
                    console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.$nextTick(() => {
                            this.leftTree = this.handelTree(res.data.data);
                        });
                        // this.rightTree = res.data.data;
                    }
                });
            this.axios
                .request({
                    url:
                        "config/MachineAttribution/GetSectionMachineLevelDataEx?machineLevel=" +
                        this.level,
                    method: "get",
                })
                .then((res) => {
                    console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.$nextTick(() => {
                            this.rightTree = this.handelTree(res.data.data);
                        });
                        // this.rightTree = res.data.data;
                    }
                });
            setTimeout(() => {
                this.spinShow = false;
            }, 1000);
        },
        handelTree(data = []) {
            data.forEach((ele) => {
                if (ele.children.length == 0 && ele.disabled == false) {
                    let str = "";

                    switch (ele.machinelevel) {
                        case 1:
                            str = "普通";
                            break;
                        case 2:
                            str = "重点";
                            break;
                        case 3:
                            str = "瓶颈";
                            break;
                        case 4:
                            str = "非生产";
                            break;
                    }
                    ele.title = "[" + str + "] " + ele.label;
                } else {
                    ele.title = ele.label;
                    ele.disabled = false;
                    this.handelTree(ele.children);
                }
            });

            return data;
        },
        getTreeNodes(data) {
            console.log(data);
            let arr = [];
            if (data.length > 0) {
                data.forEach((ele) => {
                    if (ele.children.length === 0 && ele.machineid !== 0) {
                        arr.push(ele.machineid);
                    }
                });
            }
            this.ids = arr.join(",");
            // console.log(arr);
            console.log(this.ids);
        },
        changeImportance() {
            if (this.ids == "") {
                this.$Message.error('请勾选右侧设备结构树进行修改');
                return false
            }
            let data = {
                ids: this.ids,
                machineLevel: this.level,
            };
            this.axios
                .request({
                    url: "config/MachineAttribution/EditMachineLevelData",
                    data,
                    method: "post",
                })
                .then((res) => {
                    console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.$Message.success(this.$t(1060));
                        this.getLevelTree(this.level);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
    },
};
</script>
<style lang="less" scoped>
#detailqrcode{
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 0.3px solid #ccc;
}

.testdiv{
   width: 100%;
   height: 100%;
}
.showdetail{
  width: 900px;
  height: 180px;
  // background-color: #515a6e;
  margin-top: 10px;
  border:0.3px solid #ccc;
  margin: -0.3px;
  div{
    float: left;
    width: 25%;
    height: 100%;
    // border:0.3px solid #ccc;
    // background-color: blue;
    margin: -0.3px;
    img{
      width: 100%;
      height: 100%;
    };
    div{
      width: 100%;
      height: 30px;
      margin: 0!important;
      div{
        display: inline-block;
        width: 50%;
        height: 100%;
        border:0.3px solid #ccc;
        text-align: center;
        line-height: 30px;
        border-right: 0px;
        border-bottom: 0px;
        overflow: hidden;
      };
      .specialdiv{
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        // border:0.3px solid #ccc;
      }
    }
  }
}
.filter{
  height: 40px;
  label{
    display: inline-block;
    width: 100px;
  }
}
 .addmodal_body .filter, .editmodal_body .filter{
    display: inline-block;
    height: 40px;
    font-size: 15px;
    margin-right: 15px;
    margin-top: 0px;
    select {
      border-radius: 4px;
      height: 32px;
      color: #999;
      padding: 5px;
      box-shadow: 0px 0px 1px 1px #eee;
     }
    ;
    label {
      font-size: 12px;
      display: inline-block;
      margin-right: 5px;
      width: 135px;
      text-align: end;
    }
  }
  .editmodal_body .filter .publicinput{
    width: 330px;
  }
.uploadexcel{
  display: inline-block;
  margin-right: 15px;
}
.file {
  width: 80px;
  height: 32px;
  position: relative;
   color: #fff;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 5px 15px 6px;
    font-size: 12px;
    border-radius: 4px;
    background-color: #2d8cf0;
    margin-right: 15px;
    // border-color: #2d8cf0;
    -webkit-appearance: button
    // border-color: #57a3f3;
}
.file input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 80px;
    height: 30px;
}
.addload{
  position: relative;
  img{
    vertical-align:top;
    width: 128px;
    height: 128px;
    margin: 10px 0px;
    margin-left: 180px;
  };
  input{
    position: absolute;
    left: 180px;
    top: 10px;
    opacity: 0;
    width: 128px;
    height: 128px;
  }
}
.editload{
  position: relative;
  img{
    vertical-align:top;
    width: 128px;
    height: 128px;
    margin: 10px 0px;
    margin-left: 140px;
  };
  input{
    position: absolute;
    left: 300px;
    top: 10px;
    opacity: 0;
    width: 128px;
    height: 128px;
  }
}
.DeviceQRblock{
  width: 150px;
  height: 200px;
  display: inline-block;
   margin-right: 10px;
  .DeviceQRblockqr{
   width: 150px;
   height: 150px;
  };
  div{
    text-align: center;
  }
}
    .treeSelect{
      span{
        background:#2D8CF1;
        color:#fff;
        margin: 0;
        padding: 0 4px;
        border-radius: 3px;
        cursor: pointer;
        vertical-align: top;
      }
    }
</style>
