<template>
  <!-- 设备列表 -->
  <div class="devicePage flex-col">
    <s-header
      :name="sys ? sys.title : $t('public.sysName')"
      :noback="false"
    ></s-header>
    <div class="listBox">
      <van-list
        v-model:loading="loading"
        v-model:error="error"
        :error-text="$t('public.requestFailed')"
        :finished="finished"
        :finished-text="$t('public.noMore')"
        offset="300"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="deviceBox flex-col">
          <div class="searchRow flex-row justify-between">
            <div class="flex-col">
              <div class="flex-row justify-between bd3">
                <div class="flex-col outer4"></div>
                <span class="flex-col txt2">{{
                  $t("device.dataOverview")
                }}</span>
              </div>
            </div>
            <div class="flex-col">
              <div class="main5 flex-row justify-between" @click="searchClick">
                <img class="label2" src="../../assets/device/searchIcon.png" />
                <div class="TextGroup2 flex-col">
                  <span class="txt3">{{ $t("device.search") }}</span>
                </div>
              </div>
            </div>
          </div>
          <img class="pic2" src="../../assets/device/line.png" />
          <div class="o-plr-15 o-ptb-20">
            <div class="bd4 flex-col">
              <div class="box2 l-f l-flex-c l-flex-j-a">
                <div @click="eqeStatusClk(1)" class="TextGroup3 flex-col">
                  <div class="group1 flex-col justify-between align-center">
                    <span class="word4">{{  equipStatus.machineUseNum }}</span>
                    <span class="info1">{{
                      $t("device.totalNumberOfRuns")
                    }}</span>
                  </div>
                </div>
                <div @click="eqeStatusClk('')" class="TextGroup4 flex-col">
                  <div class="main6 flex-col justify-between align-center">
                    <span class="word5">{{ equipStatus.machineTotalNum }}</span>
                    <span class="word6">{{
                      $t("device.totalNumberOfEquipment")
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box1 flex-col justify-between">
          <div class="section2 flex-col">
            <div class="outer3 flex-col o-plr-15">
              <div v-for="item in list" :key="item" class="o-pb-20">
                <div class="bd5 l-flex-between">
                  <div class="l-flex-RC">
                    <div class="layer1 flex-col"></div>
                    <span class="txt4 c-text-line1">{{ item.name }}</span>
                  </div>
                  <div class="l-flex-RC">
					  <!-- 报警标志 -->
                    <div v-if="item.hasTodayAlarm" class="box4 flex-col">
						<img class="pic1" src="../../assets/home/M4.png"/>
					</div>
                    <div
                      class="layer2 flex-col"
                      :class="{
                        deviceOn: item.eqeStatus === 1,
                        layerLeft: item.hasTodayAlarm,
                      }"
                    ></div>
                  </div>
                </div>
                <span class="txt5 o-mt-10"
                  >{{ $t("device.affiliatedMerchants") }}：{{
                    item.adminUserName
                  }}</span
                >
                <span class="txt5 o-mt-10 kBordBott"
                  >{{ $t("device.machineUniqueCode") }}：{{
                    item.clientId
                  }}</span
                >
                <div class="contentBottomCon" v-if="item.checkType">
                  <img
                    class="pic1"
                    referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
                  />
                  <div
                    class="layer6_7 flex-row justify-between o-ptb-10 kBordBott"
                  >
                    <span class="word8 c-text-line1"
                      >{{ $t("device.sleepState") }}：{{
                        item.isSleep
                          ? $t("device.sleeping")
                          : $t("device.notSleeping")
                      }}</span
                    >
                    <!-- <van-switch size="24px" v-model="item.isSleep" /> -->
                  </div>
				  <div v-if="item.isSleep" class="layer8_1 o-ptb-10">
					  <span class="word8_1">
					  	<div v-if="!sleepDescBoxShow" >
							<span>{{ $t("device.sleepDesc") }}: 
								<van-field
								  class="word8_2"
								  v-model="item.sleepDesc"
								  :placeholder="$t('device.sleepDescPlace')"
								>
								<template #button>
									<van-button
									  type="primary"
									  @click="sleepDescChg(item.sleepDesc, item.id)"
									  >{{ $t("device.confirm") }}
									</van-button>
									<van-icon name="edit" class="editIcon" @click="editSleepDesc()" />
								</template>
								</van-field>
							</span>
					  	</div>
					  	<div v-else>
					  	  <span class="word8_3" >{{ $t("device.sleepDesc") }}: 
						  {{item.sleepDesc ==null ? $t("device.SuspendBusiness") : item.sleepDesc}}</span>
					  	  <van-icon name="edit" class="editIcon" @click="editSleepDesc()" />
					  	</div>
					  </span>
				  </div>
                  <!-- <span class="txt5 o-ptb-10 kBordBott l-flex-RC"><span>一键重启炉头：</span>
                    <van-button type="primary">重启</van-button>
                  </span> -->
                  <div class="word9 o-ptb-10 kBordBott l-flex-between">
                    <span>
                      {{ $t("device.furnHeadStatus") }}: {{
                        item.eqeStatus === 1
                          ? $t("device.opened")
                          : $t("device.closed")
                      }}
                    </span>
                    <!-- <div class="l-flex-RC">
                      <van-button type="primary">开启</van-button>
                      <van-button type="primary">关闭</van-button>
                    </div> -->
                  </div>
                  <!-- <span class="txt5 o-ptb-10 kBordBott l-flex-RC"><span>远程开门：</span>
                    <van-button type="primary">开门</van-button>
                  </span> -->
                  <span class="txt5 o-ptb-8">{{ item.fullName }}</span>
                  <span
                    v-if="item.latitude"
                    class="txt5 o-ptb-5 kBordBott l-flex-RC"
                    ><span>{{ $t("device.position") }}：</span>
                    <van-button @click="viewPosiClk(item)" type="primary">{{
                      $t("device.view")
                    }}</van-button>
                  </span>
                  <van-row
                    class="layer7 o-ptb-10 kBordBott"
					justify="space-between"
                  >
                    <van-col class="word10"
                      >{{ $t("device.furnaceHeadTemperature") }}：{{
                        item.furnaceTm
                      }}{{ $t("device.degree") }}</van-col
                    >
                    <van-col class="word11"
                      >{{ $t("device.temperatureInCabinet") }}：{{
                        item.cabinetTm
                      }}{{ $t("device.degree") }}</van-col
                    >
                    <van-col class="word11"
                      >{{ $t("device.humidityInCabinet") }}：{{ item.cabinetHd
                      }}{{ $t("device.degree") }}</van-col
                    >
                  </van-row>
                  <template v-if="item.isMaterialUse === '1'">
					<van-row justify="space-between" class="sugarTxt o-ptb-10 kBordBott">
                      <van-col>
						{{ $t("device.whiteSugar") }}：{{$M_FormatCalcuDecial(item.whiteSugar)}}%
					  </van-col>
                      <van-col>
						  {{ $t("device.redSugar") }}：{{$M_FormatCalcuDecial(item.redSugar)}}%
					  </van-col>
                      <van-col>
						  {{ $t("device.yellowSugar") }}：{{$M_FormatCalcuDecial(item.yellowSugar)}}%
					  </van-col>
                      <van-col>
						  {{ $t("device.blueSugar") }}：{{$M_FormatCalcuDecial(item.blueSugar)}}%
					  </van-col>
					</van-row>
                    <div class="sugarTxt o-ptb-10 kBordBott">
                      <span
                        >{{ $t("device.stick") }}：{{
                          $M_FormatCalcuDecial(item.stick)
                        }}%</span
                      >
                    </div>
                    <van-row gutter="50" class="sugarTxt o-ptb-10 kBordBott">
                      <van-col>
					  {{ $t("device.water") }}：{{$M_FormatCalcuDecial(item.water)}}%
					  </van-col>
                      <van-col>
					  {{ $t("device.wasteWater") }}：{{$M_FormatCalcuDecial(item.wasteWater)}}%
					  </van-col>
                    </van-row>
                    <span class="txt5 o-ptb-5 kBordBott l-flex-RC"
                      ><span>{{ $t("device.oneKeyFeed") }}：</span>
                      <van-button @click="replenishmentClk(item)" type="primary"
                        >{{ $t("device.replenishment") }}
                      </van-button>
                    </span>
                  </template>
                  <span class="info3 o-ptb-8 kBordBott"
                    >{{ $t("device.lastRefreshTime") }}：{{
                      showDateTime(item.lastUpdateTime)
                    }}</span
                  >
                  <span class="info4 o-ptb-5 kBordBott"
                    >{{ $t("device.volume") }}：{{ item.volume }}</span
                  >
                  <span class="info5 o-ptb-10 kBordBott"
                    >{{ $t("device.alarmContent") }}：{{
                      item.alarmList && item.alarmList[0]
                        ? item.alarmList[0].alarmContent
                        : item.alarmContent
                    }}
                    <span
                      v-if="item.alarmList && item.alarmList[0]"
                      style="color: #4d6add"
                      @click="clearAlarm(item.alarmList[0])"
                      >{{ $t("device.eliminateAlarm") }}</span
                    ></span
                  >
                  <div class="editDeviceBtnCon l-flex-center o-mt-10">
                    <div class="l-flex-RC" @click="deviceSet(item)">
                      <span class="c-text-14">{{
                        $t("device.editDevice")
                      }}</span>
                      <div class="box2 flex-col"></div>
                    </div>
                    <div class="l-flex-RC o-ml-30" @click="deviceOprShow(item)">
                      <span class="c-text-14">{{
                        $t("device.commonOperations")
                      }}</span>
                      <div class="box2 flex-col"></div>
                    </div>
                  </div>
                </div>
                <div
                  class="bd6 l-flex-center o-ptb-10"
                  @click="item.checkType = !item.checkType"
                >
                  <div class="l-flex-RC">
                    <span class="info2 o-mr-2">{{
                      item.checkType ? $t("device.stow") : $t("device.seeMore")
                    }}</span>
                    <div
                      class="group2 flex-col"
                      :class="{ checkType: item.checkType }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <deviceOper ref="oprRef" @operfinish="operFinish"></deviceOper>
    <!-- 搜索弹出框 -->
    <deviceSearch ref="searchRef" @search="search($event)"></deviceSearch>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import {
  Api_postMachineNum,
} from "@/service/home";
import { onMounted, reactive, toRefs, ref } from "vue";
import { Toast, Dialog } from "vant";
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { getLoginUser, $M_FormatCalcuDecial } from "@/common/js/utils";
import {
  getDeviceList,
  eliminate,
  Api_getReplenishment,
  changeSleepDesc,
} from "@/service/device/index";
import deviceSearch from "./deviceSearch.vue";
import deviceOper from "./deviceOper.vue";
import { useRouter } from "vue-router";
import dateUtil from "@/utils/dateUtil";
import { useI18n } from "vue-i18n";

export default {
  name: "device",
  components: { sHeader, navBar, deviceSearch, deviceOper },
  setup() {
    const { t } = useI18n();
    const searchRef = ref(null);
    const oprRef = ref(null);
    const list = ref([]);
    const loading = ref(true);
    const error = ref(false);
    const finished = ref(false);
    const router = useRouter();
    const sys = ref(null);
    const user = getLoginUser();
	//控制睡眠描述的显示隐藏
	const sleepDescBoxShow = ref(true);
    // 页面列表查询参数
    let searchParams = reactive({
      id: "", // 用户账户id
      // adminName: '', // 用户登录名
      current: 1, // 页数
      size: 10, // 页大小
    });
    // 初始化页面获取列表
    onMounted(() => {
      init();
    });
    // 初始化
    const init = () => {
      // 获取设备情况
      getMachineNum();
      if (localStorage.getItem("loginSys")) {
        const loginSysString = localStorage.getItem("loginSys");
        sys.value = JSON.parse(loginSysString);
      }
      list.value = [];
      searchParams.current = 1;
      if (user) {
        searchParams.id = user.id;
        // if (user.isAdmined) {
        //   searchParams.adminName = user.username;
        // }
        getList();
      }
    };

    // 获取设备列表数据
    const getList = async () => {
	  finished.value = false;
      const { data } = await getDeviceList(Object.assign({}, searchParams));
      if (data.code === "00000") {
        if (searchParams.current === 0) {
          list.value = [];
        }
        // 列表值叠加
        list.value = list.value.concat(
          data.data.records.map((item) => {
			if(item.sleepDesc == null) {
			  	item.sleepDesc = t("device.SuspendBusiness");
			}
            return {
              ...item,
              checkType: false,
            };
          })
        );
        if (list.value.length === data.data.total) {
          finished.value = true;
        }
        loading.value = false;
      } else {
        Toast.fail(data.message);
      }
    };
    // 滚动加载
    const onLoad = () => {
      if (!finished.value) {
        searchParams.current = searchParams.current + 1;
        getList();
      }
    };
    // 搜索点击
    const searchClick = () => {
      searchRef.value.showSearch();
    };
    // 搜索条件触发查询
    const search = (e) => {
	  list.value = [];
	  loading.value = true;
      searchParams.current = 1;
      searchParams = Object.assign(searchParams, e);
      getList();
    };
    // 跳转设备编辑
    const deviceSet = (e) => {
      router.push({ path: "deviceSet", query: { deviceId: e.id } });
    };
    // 常用操作弹窗展示触发
    const deviceOprShow = (e) => {
      oprRef.value.showOper(e);
    };
    // 消除报警
    const clearAlarm = async (e) => {
      const params = {
        id: e.id,
        name: e.name,
        selfName: e.selfName,
        areaId: e.areaId,
        channel: e.channel,
        contactName: e.contactName,
        contactPhone: e.contactPhone,
        flowers: e.flowers,
        operationalName: e.operationalName,
        operationalPhone: e.operationalPhone,
        timeRuleId: e.timeRuleId,
      };
      const { data } = await eliminate(Object.assign({}, params));
      if (data.code === "00000") {
        Toast.success(t("device.successfullyEliminatedTheAlarm"));
        e.alarmList = [];
      } else {
        Toast.fail(data.message);
      }
      console.log("/tEquipment/eliminate", e);
    };
    const showDateTime = (date) => {
      return date
        ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss")
        : "";
    };

    // 点击查看定位
    const viewPosiClk = (row) => {
      if (row.latitude) {
        router.push({
          path: "viewPosition",
          query: {
            latitude: row.latitude,
            longitude: row.longitude,
            fullName: row.fullName,
          },
        });
      } else {
        Toast(`${t("device.noPosition")}！！！`);
      }
    };
    // 点击补料
    const replenishmentClk = (row) => {
      console.log("row", row);
      Api_getReplenishment({ equipmentId: row.id }).then((res) => {
        console.log("res", res);
        // Toast(res.data.message);
		Dialog.alert({
		  message: t('device.sentSuccessfully'),
		}).then(() => {
		 //返回上一页
		  router.go(0);
		});
        setTimeout(() => {
          getList();
        }, 500);
      });
    };
    // 操作弹窗完成的回调
    const operFinish = () => {
      init();
    };
    // 设备状况
    const equipStatus = ref({});
    // 获取设备情况
    const getMachineNum = () => {
      Api_postMachineNum({ adminId: user.id }).then((res) => {
        equipStatus.value = res.data.data || {};
      });
    };
    // 点击运行总数和总设备数
    const eqeStatusClk = (val)=>{
      searchParams.eqeStatus = val;
      // 初始化
      searchParams.current = 1;
      list.value = [];
      getList();
    };
	// 点击修改图标
	const editSleepDesc = () => {
		sleepDescBoxShow.value = !sleepDescBoxShow.value;
	}
	// 点击睡眠描述的确定按钮
	const sleepDescChg = async (sleepDesc, id) => {
		console.log(sleepDesc);
		if (!sleepDesc) {
		  Toast(t("device.sleepDescPlace"));
		} else {
		  const { data } = await changeSleepDesc({
		    equipmentId: id,
		    sleepDesc,
		  });
		  if (data.code === "00000") {
			sleepDescBoxShow.value = true;
		    Toast(data.message);
		    // setTimeout(() => {
		    //   gettAdminGetRelation();
		    // }, 500);
		  }
		}
	}
    return {
      ...toRefs(searchParams),
      list,
      loading,
      error,
      finished,
      onLoad,
      searchRef,
      searchClick,
      search,
      deviceSet,
      clearAlarm,
      oprRef,
      deviceOprShow,
      showDateTime,
      sys,
      viewPosiClk,
      replenishmentClk,
      $M_FormatCalcuDecial,
      operFinish,
      equipStatus,
      eqeStatusClk,
	  editSleepDesc,
	  sleepDescBoxShow,
	  sleepDescChg,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common";

.devicePage {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;

  .listBox {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
    overflow-y: auto;
  }

  .searchRow {
    margin: 21px 15px;

    .bd3 {
      width: 87px;
      height: 16px;

      .outer4 {
        width: 14px;
        height: 16px;
        background: url("../../assets/device/searchLeft.png") 100% no-repeat;
      }

      .txt2 {
        width: 65px;
        height: 14px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 15px;
        font-family: PingFangSC-Semibold;
        text-align: left;
        white-space: nowrap;
        line-height: 15px;
        display: block;
      }
    }

    .main5 {
      width: 39px;
      height: 16px;

      .label2 {
        width: 14px;
        height: 14px;
        margin-top: 1px;
      }

      .TextGroup2 {
        height: 16px;
        width: 22px;

        .txt3 {
          width: 22px;
          height: 16px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 11px;
          text-align: center;
          white-space: nowrap;
          line-height: 16px;
          display: block;
        }
      }
    }
  }

  .pic2 {
    width: 100%;
    height: 2px;
  }

  .bd4 {
    width: 100%;
    height: 108px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1dca9a6ec745da9b5640037f8cb04c3e1b9e96a39e75024fe48317cf85cbdc44)
      no-repeat;
    background-size: 100% 100%;

    .box2 {
      width: 100%;
      height: 100%;

      .TextGroup3 {
        height: 57px;
        width: 48px;

        .group1 {
          width: 48px;
          height: 57px;

          .word4 {
            height: 26px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: Helvetica;
            text-align: center;
            white-space: nowrap;
            line-height: 26px;
            display: block;
          }

          .info1 {
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            line-height: 17px;
            margin-top: 14px;
            display: block;
          }
        }
      }

      .TextGroup4 {
        height: 57px;
        width: 48px;

        .main6 {
          width: 48px;
          height: 57px;

          .word5 {
            height: 26px;
            overflow-wrap: break-word;
            color: rgba(223, 94, 76, 1);
            font-size: 22px;
            font-family: Helvetica;
            text-align: center;
            white-space: nowrap;
            line-height: 26px;
            display: block;
          }

          .word6 {
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            line-height: 17px;
            margin-top: 14px;
            display: block;
          }
        }
      }
    }
  }

  .box1 {
    width: 100%;

    .section2 {
      background-color: rgba(255, 255, 255, 1);
      margin-top: 1px;
      width: 100%;

      .outer3 {
        width: 100%;

        .bd1 {
          background-color: rgba(255, 255, 255, 1);
          height: 54px;
          width: 375px;

          .main4 {
            width: 375px;
            height: 33px;
            margin-top: 21px;

            .bd2 {
              width: 345px;
              height: 17px;
              margin-left: 15px;

              .ImageText1 {
                height: 16px;
                margin-top: 1px;
                width: 87px;

                .bd3 {
                  width: 87px;
                  height: 16px;

                  .outer4 {
                    width: 14px;
                    height: 16px;
                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaf434f154dc423fe53e1c1f756bb2336f532874e7b7ea909f1680d0cabd0ab9d)
                      100% no-repeat;
                  }

                  .TextGroup1 {
                    height: 14px;
                    margin-top: 2px;
                    width: 65px;

                    .txt2 {
                      width: 65px;
                      height: 14px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 15px;
                      font-family: PingFangSC-Semibold;
                      text-align: left;
                      white-space: nowrap;
                      line-height: 15px;
                      display: block;
                    }
                  }
                }
              }

              .ImageText2 {
                height: 16px;
                width: 39px;

                .main5 {
                  width: 39px;
                  height: 16px;

                  .label2 {
                    width: 14px;
                    height: 14px;
                    margin-top: 1px;
                  }

                  .TextGroup2 {
                    height: 16px;
                    width: 22px;

                    .txt3 {
                      width: 22px;
                      height: 16px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 11px;
                      text-align: center;
                      white-space: nowrap;
                      line-height: 16px;
                      display: block;
                    }
                  }
                }
              }
            }

            .pic2 {
              width: 375px;
              height: 2px;
              margin-top: 14px;
            }
          }
        }

        .bd4 {
          height: 108px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1dca9a6ec745da9b5640037f8cb04c3e1b9e96a39e75024fe48317cf85cbdc44) -5px -6px
            no-repeat;
          width: 345px;
          margin: 20px 0 0 15px;

          .box2 {
            width: 227px;
            height: 57px;
            margin: 22px 0 0 48px;

            .TextGroup3 {
              height: 57px;
              width: 48px;

              .group1 {
                width: 48px;
                height: 57px;

                .word4 {
                  width: 25px;
                  height: 26px;
                  overflow-wrap: break-word;
                  color: rgba(223, 94, 76, 1);
                  font-size: 22px;
                  font-family: Helvetica;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 26px;
                  margin-left: 7px;
                  display: block;
                }

                .info1 {
                  width: 48px;
                  height: 17px;
                  overflow-wrap: break-word;
                  color: rgba(135, 135, 166, 1);
                  font-size: 12px;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 17px;
                  margin-top: 14px;
                  display: block;
                }
              }
            }

            .TextGroup4 {
              height: 57px;
              width: 48px;

              .main6 {
                width: 48px;
                height: 57px;

                .word5 {
                  width: 25px;
                  height: 26px;
                  overflow-wrap: break-word;
                  color: rgba(223, 94, 76, 1);
                  font-size: 22px;
                  font-family: Helvetica;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 26px;
                  margin-left: 12px;
                  display: block;
                }

                .word6 {
                  width: 48px;
                  height: 17px;
                  overflow-wrap: break-word;
                  color: rgba(135, 135, 166, 1);
                  font-size: 12px;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 17px;
                  margin-top: 14px;
                  display: block;
                }
              }
            }
          }
        }

        .bd5 {
          width: 100%;
          height: 18px;

          .layer1 {
            background-color: rgba(128, 150, 236, 1);
            border-radius: 2px;
            width: 4px;
            height: 12px;
            margin-top: 4px;
          }

          .txt4 {
            width: 176px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 15px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 15px;
            display: block;
            margin: 3px 0 0 6px;
          }

          .layer2 {
            height: 18px;
            background: url("../../assets/device/powerOff.png") 100% no-repeat;
            background-size: 100%;
            width: 18px;
            margin-left: 30px;

            &.layerLeft {
              margin-left: 5px;
            }

            &.deviceOn {
              background: url("../../assets/device/powerOn.png") 100% no-repeat;
              background-size: 100%;
            }
          }

          .box4 {
            width: 24px;
            height: 19px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngef4f843cdff906e6011a7f39f1db213a5917441c6a3584d9033278e7b0fc91b5)
              100% no-repeat;
          }
        }

        .txt5 {
          width: 100%;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          display: block;
        }

        .sugarTxt {
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
		  line-height: 13px;
        }

        .word7 {
          width: 262px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 10px 0 0 15px;
        }

        .contentBottomCon {
          /deep/ .van-button--primary {
            width: auto;
            padding: 0 10px;
            height: 34px !important;
          }

          .pic1 {
            width: 100%;
            height: 2px;
            margin-top: 19px;
          }

          .layer6_7 {
            width: 100%;

            .word8 {
              color: rgba(64, 77, 116, 1);
              font-size: 14px;
              line-height: 13px;
              display: block;
              margin: 0;
            }
          }
		  
		  .layer8_1 {
			  width: 100%;
			  
			.word8_1 {
				width: 100%;
				font-size: 14px;

			}
			.word8_2 {
				width: 75%;
			}
			.word8_3 {
				width: 70%;
			}
			
			.editIcon {
			  font-size: 20px;
			  color: #4d6add;
			}  
		  }

          .word9 {
            width: 100%;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
          }

          .layer7 {
            width: 100%;

            .word10 {
              // width: 33.33%;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 14px;
              text-align: left;
              line-height: 13px;
              display: block;
            }

            .word11 {
              // width: 33.33%;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 14px;
              line-height: 13px;
              display: block;
            }
          }

          .info3 {
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            display: block;
          }

          .info4 {
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            display: block;
          }

          .info5 {
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            display: block;
          }

          .editDeviceBtnCon {
            color: rgba(77, 106, 221, 1);

            .box2 {
              width: 18px;
              height: 20px;
              background: url("../../assets/order/gotoRight.png") no-repeat;
              background-size: 100%;
              margin-top: 2px;
            }
          }

          .bd8 {
            width: 345px;
            height: 18px;
            margin: 20px 0 0 15px;

            .outer5 {
              background-color: rgba(128, 150, 236, 1);
              border-radius: 2px;
              width: 4px;
              height: 12px;
              margin-top: 4px;
            }

            .txt6 {
              width: 176px;
              height: 13px;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 14px;
              font-family: PingFangSC-Medium;
              text-align: left;
              white-space: nowrap;
              line-height: 15px;
              display: block;
              margin: 3px 0 0 6px;
            }

            .outer6 {
              width: 18px;
              height: 18px;
              background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng164fc6854bc0badab9c36f9e9751c42ceda02742fc5e78f7662ced4a0f76844c)
                100% no-repeat;
              margin-left: 141px;
            }
          }

          .txt7 {
            width: 242px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            display: block;
            margin: 8px 0 0 15px;
          }

          .word8 {
            width: 262px;
            height: 13px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
            margin: 10px 0 0 15px;
          }

          .bd9 {
            width: 61px;
            height: 17px;
            margin: 15px 0 0 157px;

            .txt8 {
              width: 48px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(135, 135, 166, 1);
              font-size: 14px;
              text-align: center;
              white-space: nowrap;
              line-height: 17px;
              display: block;
            }

            .block1 {
              width: 10px;
              height: 4px;
              background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngcea7125d2a8b914ff1d7c432b5e4d9dd1026bdc056f5510f5b48f76e9058d48d)
                0px -1px no-repeat;
              margin-top: 7px;
            }
          }

          .bd10 {
            width: 345px;
            height: 1px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng699372cef543e7a77f69ee4b13e1e8fd3969dbac13a75ca8bfd596af7891e8b5) -1px
              0px no-repeat;
            margin: 15px 0 0 15px;
          }

          .bd11 {
            width: 345px;
            height: 18px;
            margin: 20px 0 0 15px;

            .section3 {
              background-color: rgba(128, 150, 236, 1);
              border-radius: 2px;
              width: 4px;
              height: 12px;
              margin-top: 4px;
            }

            .txt9 {
              width: 176px;
              height: 13px;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 14px;
              font-family: PingFangSC-Medium;
              text-align: left;
              white-space: nowrap;
              line-height: 15px;
              display: block;
              margin: 3px 0 0 6px;
            }

            .section4 {
              width: 22px;
              height: 15px;
              background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/be1271ed70774869b81ed2d5f43b6a44_mergeImage.png)
                100% no-repeat;
              margin: 3px 0 0 111px;
            }

            .section5 {
              height: 18px;
              background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/5723fcdad1574aef9e65c326de33d8b2_mergeImage.png)
                100% no-repeat;
              margin-left: 8px;
              width: 18px;

              .box3 {
                background-color: rgba(255, 255, 255, 1);
                border-radius: 1px;
                width: 2px;
                height: 7px;
                margin: 2px 0 0 8px;
              }
            }
          }

          .txt10 {
            width: 242px;
            height: 20px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            line-height: 20px;
            display: block;
            margin: 8px 0 0 15px;
          }
        }

        .bd6 {
          width: 100%;
          border-bottom: 1px solid #eee;

          .info2 {
            overflow-wrap: break-word;
            color: rgba(135, 135, 166, 1);
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
            display: block;
          }

          .group2 {
            width: 10px;
            height: 5px;
            background: url("../../assets/device/deviceSelect.png") center
              no-repeat;
            background-size: 100%;

            &.checkType {
              transform: scaleY(-1);
            }
          }
        }
      }
    }
  }
}
</style>
