<template>
  <!-- 设备信息修改 -->
  <div class="deviceSetPage page flex-col">
    <s-header :name="$t('device.deviceInformation')" :noback="false"></s-header>
    <van-form @submit="updateDeviceFun">
      <div class="bd1 flex-col">
        <div class="bd3 flex-col">
          <div class="mod1 flex-col">
            <span class="word2">{{ $t("device.essentialInformation") }}</span>
            <img
              class="pic1"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
            />
          </div>
          <div class="mod2 flex-col"></div>
        </div>
        <van-field
          colon
          readonly
          v-model="deviceDetal.clientId"
          :label="`${$t('device.equipmentCode')}`"
          placeholder=""
        />
        <div class="cust_vantBorder">
          <van-field
            colon
            required
            clearable
            v-model="deviceDetal.name"
            name="name"
            :label="`${$t('device.equipmentNameLabel')}`"
            :placeholder="$t('device.equipmentNamePlaceholder')"
            :rules="[
              {
                required: true,
                message: $t('device.equipmentNamePlaceholder'),
              },
            ]"
          />
          <van-field
            colon
            clearable
            v-model="deviceDetal.selfName"
            :label="`${$t('device.equipmentRemarksLabel')}`"
            :placeholder="$t('device.equipmentRemarksPlaceholder')"
          />
        </div>
        <van-field
          colon
          readonly
          v-model="deviceDetal.adminUserName"
          :label="`${$t('device.affiliatedMerchant')}`"
          placeholder=""
        />
        <!-- 地区 -->
        <div v-if="areaShow" class="bd7 l-flex-between">
          <div class="l-flex-RC">
            <div class="cust_vantBorder">
              <div class="filedInpPad">
                <van-field
                  colon
                  @click-input="fieldValueInpClk"
                  readonly
                  clearable
                  v-model="fieldValue"
                  :label="`${$t('device.affiliatedArea')}`"
                  :placeholder="$t('user.regionPlace')"
                >
                  <template #right-icon>
                    <div class="l-flex-RC">
                      <van-icon
                        v-if="fieldValue"
                        @click="
                          fieldValue = '';
                          deviceDetal.areaId = '';
                        "
                        class="o-mr-6"
                        name="clear"
                      />
                      <van-icon @click="fieldValueInpClk" name="arrow-down" />
                    </div>
                  </template>
                  <template #extra>
                    <van-icon
                      @click="areaShow = !areaShow"
                      color="#4d6add"
                      size="20"
                      name="edit"
                    />
                  </template>
                </van-field>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="bd7 l-flex-between">
          <van-field
            colon
            readonly
            v-model="fieldValue"
            :label="`${$t('device.affiliatedArea')}`"
            placeholder=""
          >
            <template #extra>
              <van-icon
                @click="areaShow = !areaShow"
                color="#4d6add"
                size="20"
                name="edit"
              />
            </template>
          </van-field>
        </div>
        <van-field
          colon
          readonly
          v-model="deviceDetal.equimentType"
          :label="`${$t('device.machineType')}`"
          placeholder=""
        />
        <!-- mg280才有到期时间 -->
        <template v-if="deviceDetal?.equimentType?.indexOf('mg280') !== -1">
          <van-field
            colon
            readonly
            v-model="deviceDetal.lastUseDate"
            :label="`${$t('device.expirationTime')}`"
            placeholder=""
          />
        </template>
        <div class="bd9 l-f">
          <van-field
            colon
            readonly
            :label="`${$t('device.equipmentLabel')}`"
            placeholder=""
          >
            <template #input>
              <div
                class="box2 l-flex-RC l-flex-w"
                v-if="tagsList.arr.length > 0"
              >
                <div
                  class="word8 o-mr-6 o-p-6 c-radius-2 o-mb-10"
                  v-for="(item, index) in tagsList.arr"
                  :key="index"
                >
                  {{ item.name }}
                </div>
              </div>
            </template>
            <template #extra>
              <div @click="toTagSet" class="ImageText1 flex-col">
                <div class="box3 flex-row justify-between">
                  <div class="bd10 flex-col"></div>
                  <div class="TextGroup1 flex-col">
                    <span class="word9">{{ $t("device.edit") }}</span>
                  </div>
                </div>
              </div>
            </template>
          </van-field>
        </div>
        <div v-if="isAdmind" class="bd9 l-f">
          <van-field
            colon
            readonly
            :label="`${$t('device.adRule')}`"
            placeholder=""
          >
            <template #input>
              <div class="box2 l-flex-RC l-flex-w" v-if="adRuleList.length > 0">
                <div
                  class="word8 o-mr-6 o-p-6 c-radius-2 o-mb-10"
                  v-for="(item, index) in adRuleList"
                  :key="index"
                >
                  {{ item.name }}
                </div>
              </div>
            </template>
            <template #extra>
              <div @click="toEditAdRule" class="ImageText1 flex-col">
                <div class="box3 flex-row justify-between">
                  <div class="bd10 flex-col"></div>
                  <div class="TextGroup1 flex-col">
                    <span class="word9">{{ $t("device.edit") }}</span>
                  </div>
                </div>
              </div>
            </template>
          </van-field>
        </div>
        <van-field
          colon
          readonly
          :label="`${$t('device.coupon')}`"
          placeholder=""
        >
          <template #input>
            <div class="l-flex-RC">
              <span>{{ couponStatusNameComp }}</span>
              <van-switch
                @change="couponStatusChg"
                v-model="deviceDetal.couponStatus"
                size="24"
                active-value="1"
                inactive-value="0"
              />
            </div>
          </template>
        </van-field>
        <div class="cust_vantBorder">
          <van-field
            colon
            required
            clearable
            v-model="deviceDetal.operationalName"
            name="operationalName"
            :label="`${$t('device.nameOfOperatorLabel')}`"
            :placeholder="$t('device.nameOfOperatorPlaceholder')"
            :rules="[
              {
                required: true,
                message: $t('device.nameOfOperatorPlaceholder'),
              },
            ]"
          />
          <van-field
            colon
            required
            clearable
            v-model="deviceDetal.operationalPhone"
            name="operationalPhone"
            :label="`${$t('device.operatorTelephoneLabel')}`"
            :placeholder="$t('device.operatorTelephonePlaceholder')"
            :rules="[
              {
                required: true,
                message: $t('device.operatorTelephonePlaceholder'),
              },
            ]"
          />

          <van-field
            clearable
            v-model="deviceDetal.timeRuleId"
            :label="`${$t('device.advertisingRulesLabel')}:`"
            :placeholder="$t('device.advertisingRulesPlaceholder')"
          />
        </div>
		<div class="cust_vantBorder">
			<van-field
			  clearable
			  label-width="32%"
			  v-model="deviceDetal.messageReceiver1"
			  :label="`${$t('device.messageReceiver1')}:`"
			  :placeholder="$t('device.equipmentmessageReceiverPlaceholder')"
			/>
		</div>
		<div class="cust_vantBorder">
			<van-field
			  clearable
			  label-width="32%"
			  v-model="deviceDetal.messageReceiver2"
			  :label="`${$t('device.messageReceiver2')}:`"
			  :placeholder="$t('device.equipmentmessageReceiverPlaceholder')"
			/>
		</div>
		<div class="cust_vantBorder">
			<van-field
			  clearable
			  label-width="32%"
			  v-model="deviceDetal.messageReceiver3"
			  :label="`${$t('device.messageReceiver3')}:`"
			  :placeholder="$t('device.equipmentmessageReceiverPlaceholder')"
			/>
		</div>
        <van-field
          colon
          readonly
		  label-width="18%"
          :label="`${$t('device.paymentMethod')}`"
          placeholder=""
        >
          <template #input>
            <div class="van-cell__value van-field__value radioBox">
              <van-radio-group
                v-model="deviceDetal.payType"
                direction="horizontal"
              >
                <van-radio name="0" icon-size="18px">{{
                  $t("device.onlinePayment")
                }}</van-radio>
                <van-radio name="1" icon-size="18px">{{
                  $t("device.offlinePayment")
                }}</van-radio>
                <van-radio name="2" icon-size="18px">{{
                  $t("device.onlineAndOfflinePayment")
                }}</van-radio>
              </van-radio-group>
            </div>
          </template>
        </van-field>
        <!-- 通信通道 -->
        <template v-if="isAdmind">
          <van-field
            colon
            readonly
            :label="`${$t('device.communiChannel')}`"
            placeholder=""
          >
            <template #input>
              <div class="van-cell__value van-field__value radioBox">
                <van-radio-group
                  v-model="deviceDetal.channel"
                  direction="horizontal"
                >
                  <van-radio name="1" icon-size="18px">{{
                    $t("device.tweets")
                  }}</van-radio>
                  <van-radio name="2" icon-size="18px">{{
                    $t("device.mq")
                  }}</van-radio>
                </van-radio-group>
              </div>
            </template>
          </van-field>
        </template>
        <!-- 花型种类 -->
        <template v-if="isAdmind">
          <van-field
            colon
            readonly
            :label="`${$t('device.flowerType')}`"
            placeholder=""
          >
            <template #input>
              <div class="van-cell__value van-field__value radioBox">
                <van-radio-group
                  v-model="deviceDetal.flowers"
                  direction="horizontal"
                >
                  <van-radio name="18" icon-size="18px">18</van-radio>
                  <van-radio name="22" icon-size="18px">22</van-radio>
                  <van-radio name="26" icon-size="18px">26</van-radio>
                  <van-radio name="30" icon-size="18px">30</van-radio>
                </van-radio-group>
              </div>
            </template>
          </van-field>
        </template>
        <!-- 版本号 -->
        <van-field
          colon
          readonly
          v-model="deviceDetal.apkVersion"
          :label="`${$t('device.versionNo')}`"
          placeholder=""
        />
        <!-- url -->
        <div v-if="isAdmind" class="cust_vantBorder">
          <van-field
            colon
            clearable
            v-model="deviceDetal.url"
            :label="$t('device.url')"
            :placeholder="$t('device.urlPlace')"
          >
            <template #button>
              <van-button @click="updateUrlClk" type="primary"
                >&nbsp;&nbsp;{{ $t("device.update") }}&nbsp;&nbsp;</van-button
              >
            </template>
          </van-field>
        </div>
        <div class="l-flex-center">
          <div class="bd18 flex-col">
            <van-button
              round
              type="primary"
              class="register info7"
              native-type="submit"
              >{{ $t("device.submitAndPushDeviceUpdates") }}</van-button
            >
          </div>
        </div>
      </div>
    </van-form>
    <!-- 地区弹窗 -->
    <kCascader
      @getareaname="getAreaName"
      :selectId="deviceDetal.areaId"
      @areapopfinish="areaPopFinish"
      ref="kCascaderRef"
    ></kCascader>
    <!-- 更新弹窗 -->
    <kDialog
      :dialogTitle="$t('user.logOutTips')"
      :cancelBtnTxt="$t('user.cancelLog')"
      :confirmBtnTxt="$t('user.confirmLog')"
      ref="kDialogRef"
      :dialogContent="$t('device.sureUpdate')"
      @confirmclk="confirmClk"
    >
    </kDialog>
  </div>
</template>
<script>
// 导入接口
import { Api_getAdRuleDetail } from "@/service/advertManage";
// 引入弹窗
import kDialog from "@/components/commom/kDialog/index.vue";
// 导入公用方法
import { setLocal, getLoginUser } from "@/common/js/utils";
// 导入vuex
import { useStore } from "vuex";
// 导入接口
import { Api_getGetEquipmentToLabel } from "@/service/labelMan";
// 导入地区弹窗
import kCascader from "@/components/commom/kCascader/index.vue";
import { computed, onMounted, reactive, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { useRoute, useRouter } from "vue-router";
import {
  getDeviceDetal,
  updateDevice,
  Api_getTApkInfo_updateApk,
  Api_getDiscCodeStatus,
} from "@/service/device/index";
import { Toast } from "vant";
import { useI18n } from "vue-i18n";
import dateUtil from "@/utils/dateUtil";

export default {
  name: "deviceSet",
  components: { sHeader, kCascader, kDialog },
  // // 路由守卫
  // beforeRouteEnter(to, from, next) {
  //   console.log("to", to);
  //   console.log("from", from);
  //   // 不能获取组件实例
  //   // 因为当守卫执行前，组件实例还没被创建
  //   if (from.name === "editTag") {
  //     let tagList = sessionStorage.getItem("tagList") || "[]";
  //     this.tagsList.arr = JSON.parse(tagList);
  //     sessionStorage.removeItem("tagList");
  //   }
  //   next();
  // },
  setup() {
    // 广告规则列表
    const adRuleList = ref([]);
    // 获取用户信息
    const user = getLoginUser();
    // 导入vuex
    const store = useStore();
    const { t } = useI18n();
    const route = useRoute();
    const router = useRouter();
    const deviceDetal = ref({
      name: "",
      selfName: "",
      operationalName: "",
      operationalPhone: "",
      timeRuleId: "",
      payType: "",
      channel: "",
      flowers:"18",
	  messageReceiver1:"",
	  messageReceiver2:"",
	  messageReceiver3:"",
    });
    let tagsList = reactive({
      arr: [],
    });
    // 过滤时间
    const filterDate = (date) => {
      if (date) {
        return dateUtil.formateDate(new Date(date), dateUtil.DATE_yyyy_MM_dd());
      }
      return "";
    };
    // 是否管理员
    const isAdmind = ref(false);
    // 初始化页面获取列表
    onMounted(async () => {
      console.log("onMounted");
      // 从标签设置回来
      // let tagList = sessionStorage.getItem("tagList") || "[]";
      // tagsList.arr = JSON.parse(tagList);
      // sessionStorage.removeItem("tagList");
      getDeviceDetalFun();
      getLabelDetail();
      // 如果user.type<2那么则是公司人员
      if (user.type < 2) {
        isAdmind.value = true;
      }
    });
    // 获取标签
    const getLabelDetail = () => {
      Api_getGetEquipmentToLabel({ equipmentId: route.query.deviceId }).then(
        (res) => {
          console.log("res", res);
          if (res.data.code === "00000") {
            tagsList.arr = res.data.data;
            // 储存数据到vuex
            store.commit("MUTA_LABELLIST", tagsList.arr);
            setLocal("deviceSet-tagsList", JSON.stringify(tagsList.arr));
          }
        }
      );
    };

    // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({ id: route.query.deviceId });
      if (data.code === "00000") {
        if (data.data.lastUseDate) {
          data.data.lastUseDate = filterDate(data.data.lastUseDate);
        }
        // channel如果为null，那么默认是个推
        if (!data.data.channel) {
          data.data.channel = "1";
        }
        // couponStatus如果是null，默认是关闭
        if (data.data.couponStatus != 1) {
          data.data.couponStatus = "0";
        }
        deviceDetal.value = data.data;
        // 查询地址回显
        kCascaderRef.value.init(deviceDetal.value.areaId);
        // 获取广告规则详情
        if (isAdmind.value) {
          if (data.data.timeRuleId) {
            getDetail(data.data.timeRuleId);
          }
        }
      } else {
        Toast.fail(data.message);
      }
    };
    // 获取广告规则详情
    const getDetail = (id) => {
      Api_getAdRuleDetail({ id }).then((res) => {
        const resData = res.data.data;
        console.log("resData", resData);
        adRuleList.value = [{ name: resData.name, id: resData.id }];
      });
    };
    // 修改设备详情
    const updateDeviceFun = async () => {
      let params = Object.assign({}, deviceDetal.value);
      params = [params].map((item) => {
        return {
          id: item.id,
          name: item.name,
          selfName: item.selfName,
          areaId: item.areaId,
          contactName: item.contactName,
          contactPhone: item.contactPhone,
          flowers: item.flowers,
          operationalName: item.operationalName,
          operationalPhone: item.operationalPhone,
          timeRuleId: item.timeRuleId,
          channel: item.channel,
		  messageReceiver1: item.messageReceiver1,
		  messageReceiver2: item.messageReceiver2,
		  messageReceiver3: item.messageReceiver3
        };
      })[0];
      const { data } = await updateDevice(params);
      if (data.code === "00000") {
        Toast.success(t("device.modificationSucceeded"));
        router.push({ path: "/device" });
      } else {
        Toast.fail(data.message);
      }
    };

    // 点击去到编辑标签页
    const toTagSet = () => {
      router.push({
        path: "/editTag",
        query: { deviceId: route.query.deviceId },
      });
    };
    // 地区的显示
    const areaShow = ref(false);
    // 地区弹窗
    const fieldValue = ref("");
    const kCascaderRef = ref(null);
    // 点击地区输入框
    const fieldValueInpClk = () => {
      kCascaderRef.value.openPop();
    };
    // 选择地区完成
    const areaPopFinish = async (e) => {
      console.log("e", e);
      fieldValue.value = e.selectName;
      deviceDetal.value.areaId = e.selectId;
    };
    // 获取回显的值
    const getAreaName = (e) => {
      fieldValue.value = e;
    };
    // 退出登录弹窗
    const kDialogRef = ref(null);
    // 点击更新url
    const updateUrlClk = () => {
      if (!deviceDetal.value.url) {
        Toast(t("device.urlPlace"));
        return;
      }
      kDialogRef.value.openDialog();
    };
    // 点击更新弹窗的确定
    const confirmClk = () => {
      Api_getTApkInfo_updateApk({
        id: deviceDetal.value.id,
        url: deviceDetal.value.url,
      }).then((res) => {
        Toast(res.data.message);
        setTimeout(() => {
          getDeviceDetalFun();
        }, 1000);
      });
    };
    // 点击优惠券开关
    const couponStatusChg = (couponStatus) => {
      Api_getDiscCodeStatus({
        equipmentId: deviceDetal.value.id,
        couponStatus,
      }).then((res) => {
        Toast(res.data.message);
        setTimeout(() => {
          getDeviceDetalFun();
        }, 1000);
      });
    };
    const couponStatusNameComp = computed(() => {
      if (deviceDetal.value.couponStatus != 1) {
        return t("device.close");
      } else {
        return t("device.open");
      }
    });
    // 点击广告规则的编辑
    const toEditAdRule = () => {
      router.push({
        path: "/editAdRule",
        query: { deviceId: route.query.deviceId, adRuleList: JSON.stringify(adRuleList.value)},
      });
    };
    return {
      deviceDetal,
      updateDeviceFun,
      filterDate,
      toTagSet,
      tagsList,
      areaShow,
      fieldValue,
      kCascaderRef,
      fieldValueInpClk,
      areaPopFinish,
      getAreaName,
      isAdmind,
      updateUrlClk,
      confirmClk,
      kDialogRef,
      couponStatusChg,
      couponStatusNameComp,
      toEditAdRule,
      adRuleList,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";

.deviceSetPage {
  .van-field__label {
    display: flex;
    align-items: center;
    margin-right: 0;
  }

  .van-field__control {
    line-height: 2.5;
    border: 0.01333rem solid #b9bad0;
    border-radius: 0.05333rem;
    text-indent: 0.16rem;
    font-size: 0.34667rem;
  }

  .van-cell:after {
    display: none;
  }
}

.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: calc(100vh);
  overflow: hidden;
  overflow-y: auto;

  .bd1 {
    width: 100%;

    .bd2 {
      z-index: 3;
      height: 64px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnged210ff8540d1e20d828b0758e650612a9ea018b41f720bede87fea0f933d8d8)
        100% no-repeat;
      width: 100%;
      position: relative;

      .block1 {
        width: 364px;
        height: 20px;
        margin: 1px 0 0 7px;

        .group1 {
          width: 34px;
          height: 6px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga64b2ae35561e96115c75cc6dfc235eedb108ecf95df957be1ef364417a9806e)
            100% no-repeat;
          margin-top: 7px;
        }

        .txt1 {
          width: 38px;
          height: 17px;
          overflow-wrap: break-word;
          color: rgba(81, 84, 106, 1);
          font-size: 12px;
          font-family: PingFangSC-Semibold;
          text-align: right;
          white-space: nowrap;
          line-height: 17px;
          margin-left: 21px;
          display: block;
        }

        .group2 {
          width: 30px;
          height: 17px;
          overflow-wrap: break-word;
          font-size: 0;
          font-family: PingFangSC-Semibold;
          text-align: right;
          white-space: nowrap;
          line-height: 17px;
          margin: 3px 0 0 73px;

          .info1 {
            width: 30px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(81, 84, 106, 1);
            font-size: 12px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
          }

          .word1 {
            width: 30px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(81, 84, 106, 1);
            font-size: 12px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
          }
        }

        .group3 {
          width: 26px;
          height: 10px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2e68dee6e62554db0f6ac40572f41b7be9cc24d35fc06b24c556fed2b7b18626)
            100% no-repeat;
          margin: 5px 0 0 142px;
        }
      }

      .block2 {
        width: 210px;
        height: 22px;
        margin: 9px 0 12px 10px;

        .icon1 {
          width: 10px;
          height: 18px;
          margin-top: 4px;
        }

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

      .img1 {
        z-index: 22;
        position: absolute;
        left: 0;
        top: 63px;
        width: 100%;
        height: 2px;
      }
    }

    .bd3 {
      background-color: rgba(255, 255, 255, 1);
      z-index: 24;
      height: 54px;
      margin-top: 1px;
      width: 100%;
      position: relative;

      .mod1 {
        width: 100%;
        height: 38px;
        margin-top: 16px;

        .word2 {
          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;
          margin: 1px 0 0 43px;
        }

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

      .mod2 {
        z-index: 28;
        position: absolute;
        left: 17px;
        top: 18px;
        width: 19px;
        height: 20px;
        background: url("../../assets/device/baseMssage.png") 100% no-repeat;
        background-size: 100%;
        background-position: top center;
      }
    }

    .word3 {
      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: 14px 0 0 15px;
    }

    .bd4 {
      width: 345px;
      height: 38px;
      margin: 10px 0 0 15px;

      .info3 {
        width: 65px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 13px;
        margin-top: 13px;
        display: block;
      }

      .box1 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 254px;

        .word4 {
          width: 74px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(168, 168, 197, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 6px;
        }
      }
    }

    .bd5 {
      width: 345px;
      height: 38px;
      margin: 10px 0 0 15px;

      .word5 {
        width: 65px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 13px;
        margin-top: 13px;
        display: block;
      }

      .bd6 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 254px;

        .txt2 {
          width: 152px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(168, 168, 197, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 6px;
        }
      }
    }

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

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

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

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

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

    .bd9 {
      .txt5 {
        width: 65px;
        flex: 0 0 65px;
        height: 18px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 18px;
        display: block;
      }

      .box2 {
        width: 100%;

        .word8 {
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 18px;
          display: block;
          background-color: rgba(229, 154, 109, 1);
        }
      }

      .ImageText1 {
        height: 17px;
        width: 40px;
        flex: 0 0 40px;
        margin: 6px 0 0 28px;

        .box3 {
          width: 40px;
          height: 17px;

          .bd10 {
            width: 11px;
            height: 15px;
            background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/954cd8f1feea46dc8d798320da0ce881_mergeImage.png)
              100% no-repeat;
            margin-top: 1px;
          }

          .TextGroup1 {
            height: 17px;
            width: 24px;

            .word9 {
              width: 24px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(77, 106, 221, 1);
              font-size: 12px;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
              display: block;
            }
          }
        }
      }
    }

    .bd11 {
      width: 345px;
      height: 38px;
      margin: 32px 0 0 15px;

      .word10 {
        width: 78px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 13px;
        margin-top: 13px;
        display: block;
      }

      .bd12 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 253px;

        .word11 {
          width: 74px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(168, 168, 197, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 6px;
        }
      }
    }

    .bd13 {
      width: 345px;
      height: 38px;
      margin: 10px 0 0 15px;

      .info4 {
        width: 91px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 13px;
        margin-top: 13px;
        display: block;
      }

      .main1 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 254px;

        .txt6 {
          width: 86px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(168, 168, 197, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 6px;
        }
      }
    }

    .bd14 {
      width: 345px;
      height: 38px;
      margin: 10px 0 0 15px;

      .info5 {
        width: 65px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 13px;
        margin-top: 13px;
        display: block;
      }

      .bd15 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 254px;

        .word12 {
          width: 52px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(168, 168, 197, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 6px;
        }
      }
    }

    .bd16 {
      width: 348px;
      height: 18px;
      margin: 20px 0 0 15px;

      .txt7 {
        width: 65px;
        height: 18px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 18px;
        display: block;
      }

      .section1 {
        width: 12px;
        height: 12px;
        background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5e3fac6de0c7dcaa42c48ad9495ff6feeaa9cdab9afc41f6b5ceac1719f3fd50)
          100% no-repeat;
        margin: 4px 0 0 6px;
      }

      .info6 {
        width: 52px;
        height: 18px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 18px;
        margin-left: 4px;
        display: block;
      }

      .ImageText2 {
        height: 18px;
        margin-left: 20px;
        width: 68px;

        .group4 {
          width: 68px;
          height: 18px;

          .outer1 {
            border-radius: 50%;
            width: 12px;
            height: 12px;
            border: 1px solid rgba(77, 106, 221, 1);
            margin-top: 4px;
          }

          .TextGroup2 {
            height: 18px;
            width: 52px;

            .word13 {
              width: 52px;
              height: 18px;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 13px;
              text-align: left;
              white-space: nowrap;
              line-height: 18px;
              display: block;
            }
          }
        }
      }

      .ImageText3 {
        height: 18px;
        margin-left: 20px;
        width: 101px;

        .bd17 {
          width: 101px;
          height: 18px;

          .outer2 {
            border-radius: 50%;
            width: 12px;
            height: 12px;
            border: 1px solid rgba(77, 106, 221, 1);
            margin-top: 4px;
          }

          .TextGroup3 {
            height: 18px;
            width: 85px;

            .word14 {
              width: 85px;
              height: 18px;
              overflow-wrap: break-word;
              color: rgba(64, 77, 116, 1);
              font-size: 13px;
              text-align: left;
              white-space: nowrap;
              line-height: 18px;
              display: block;
            }
          }
        }
      }
    }

    .bd18 {
      background-color: rgba(77, 106, 221, 1);
      border-radius: 17px;
      height: 34px;
      width: 220px;
      margin: 42px 0 42px 0;

      .info7 {
        width: 150px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 15px;
        font-family: PingFangSC-Medium;
        text-align: center;
        white-space: nowrap;
        line-height: 15px;
        display: block;
        margin: 11px 0 0 35px;
      }
    }
  }
}
</style>
