<template>
  <div class="home">
    <!-- 头部end -->

    <div class="carousel">
      <el-carousel
        trigger="click"
        :height="bannerHeight + 'px'"
        :loop="true"
        :interval="4000"
      >
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <a
            :href="item.src ? item.src : 'javascript:void(0)'"
            :target="item.src ? '_blank' : '_self'"
          >
            <img class="banner" :src="item.url" alt="" ref="bannerHeight" />
          </a>
        </el-carousel-item>
      </el-carousel>
      <div class="addBanner" @click="handleAddBanner" v-show="editState">
        <i class="el-icon-plus"></i>
      </div>
    </div>

    <!-- 走马灯end -->

    <div class="tabsHead">
      <div>
        <input
          type="text"
          v-model="tabsHead.title"
          class="title input"
          v-show="editState"
        />
        <h3 v-show="!editState">{{ tabsHead.title }}</h3>
      </div>
      <div>
        <input
          type="text"
          v-model="tabsHead.content"
          class="content input"
          v-show="editState"
        />
        <p v-show="!editState">
          {{ tabsHead.content }}
        </p>
      </div>
    </div>

    <div class="container">
      <div class="tabs">
        <ul>
          <template v-for="(item, index) in tabs">
            <li
              v-if="item.title"
              :key="index"
              @click="handleTabClick(index)"
              :class="index == tabActiveIndex ? 'active' : 'hover'"
            >
              <div class="iconfont">
                <img
                  :src="index == tabActiveIndex ? item.iconSelected : item.icon"
                  :class="editState ? 'editIcon' : ''"
                  class="editIconSize"
                  alt=""
                  @click="handleUploadIcon('tabs')"
                />
              </div>
              <div class="inp">
                <input
                  type="text"
                  v-model="item.title"
                  class="tabsInput input"
                  v-show="editState"
                />
                <p v-show="!editState">{{ item.title }}</p>
              </div>
            </li>
          </template>
        </ul>
      </div>
      <template v-for="(item, index) in tabs">
        <div
          class="wrap"
          :key="index"
          v-show="index == tabActiveIndex"
          v-if="item.title"
        >
          <div class="content">
            <div class="title">
              <input
                type="text"
                v-model="item.content.title"
                class="titleInput input"
                v-show="editState"
              />
              <h3 v-show="!editState">{{ item.content.title }}</h3>
            </div>
            <div class="divider"></div>
            <div class="article">
              <textarea
                class="articleText textarea"
                v-model="item.content.article"
                rows="8"
                maxlength="630"
                v-show="editState"
              ></textarea>
              <p v-show="!editState">{{ item.content.article }}</p>
            </div>
            <el-button
              type="primary"
              round
              @click="handleGoPage(item.content.btnSrc, 'tabs')"
              >{{ item.content.btnValue }}</el-button
            >
          </div>
          <div class="image">
            <el-image
              class="img"
              :src="item.imageUrl"
              fit="contain"
              v-show="!editState"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleTabImgSuccess"
              :before-upload="beforeTabImgUpload"
              :multiple="false"
              :limit="1"
              v-show="editState"
            >
              <el-image
                v-if="item.imageUrl"
                :src="item.imageUrl"
                fit="contain"
              ></el-image>
              <!-- <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar" /> -->
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </template>
    </div>

    <!-- 标签页end -->

    <div class="analysis">
      <div class="analysisWrap">
        <div class="title">
          <input
            type="text"
            v-model="analysis.title"
            class="titleInput input"
            v-show="editState"
          />
          <h3 v-show="!editState">{{ analysis.title }}</h3>
        </div>
        <div class="divider"></div>
        <div class="content">
          <textarea
            class="articleText textarea"
            v-model="analysis.content"
            cols="60"
            rows="3"
            maxlength="200"
            v-show="editState"
          ></textarea>
          <p v-show="!editState">{{ analysis.content }}</p>
        </div>
        <div class="rules">
          <div
            class="rulesItem"
            v-for="(item, index) in analysis.rules"
            :key="index"
          >
            <img
              :src="item.icon"
              alt=""
              :class="editState ? 'editIcon' : ''"
              @click="handleUploadIcon('analysis', index)"
            />
            <input
              type="text"
              v-model="item.content"
              class="titleInput input"
              v-show="editState"
            />
            <span v-show="!editState">{{ item.content }}</span>
          </div>
        </div>
        <el-button
          type="primary"
          round
          @click="handleGoPage(analysis.btnSrc, 'analysis')"
          >{{ analysis.btnValue }}</el-button
        >
      </div>
    </div>

    <!-- 标示解析end -->

    <div class="devCenter">
      <h3>{{ devCenter.title }}</h3>
      <p>{{ devCenter.subtitle }}</p>
      <div class="divider"></div>

      <div class="devList">
        <div
          class="devItem"
          v-for="(item, index) in devCenter.devList"
          :key="index"
          @mouseover="item.hover = true"
          @mouseout="item.hover = false"
        >
          <div class="imgWrap">
            <img v-show="!item.hover" :src="item.icon" alt="" />
            <img v-show="item.hover" :src="item.iconSelected" alt="" />
          </div>
          <h5 class="title">{{ item.title }}</h5>
          <p>{{ item.content1 }}</p>
          <p>{{ item.content2 }}</p>
        </div>
      </div>
    </div>

    <!-- 开发中心end -->

    <div class="collaborate">
      <h3>{{ collaborate.title }}</h3>
      <div class="divider"></div>
      <div class="collaborateList">
        <div
          class="collaborateItem"
          v-for="(item, index) in collaborate.collaborateList"
          :key="index"
        >
          <img :src="item.url" alt="" />
        </div>
      </div>
    </div>

    <!-- 合作伙伴end -->

    <div class="foot">
      <div class="footItem about">
        <div class="headTitle">
          <input
            type="text"
            v-model="foot.about.title"
            class="input"
            v-show="editState"
            maxlength="8"
            @keyup="
              foot.about.title = foot.about.title.replace(/[@#\$%\^&\*]+/g, '')
            "
          />
          <h4 v-show="!editState">{{ foot.about.title }}</h4>
        </div>
        <div class="divider"></div>
        <textarea
          class="articleText textarea"
          v-model="foot.about.content"
          rows="6"
          v-show="editState"
          maxlength="130"
          @keyup="
            foot.about.content = foot.about.content.replace(
              /[@#\$%\^&\*]+/g,
              ''
            )
          "
        ></textarea>
        <p v-show="!editState">
          {{ foot.about.content }}
        </p>
      </div>
      <div class="footItem product">
        <div class="headTitle">
          <input
            type="text"
            v-model="foot.product.title"
            class="input"
            v-show="editState"
            maxlength="8"
            @keyup="
              foot.product.title = foot.product.title.replace(
                /[@#\$%\^&\*]+/g,
                ''
              )
            "
          />
          <h4 v-show="!editState">{{ foot.product.title }}</h4>
        </div>
        <div class="divider"></div>
        <ul>
          <li
            v-for="(item, index) in foot.product.urlList"
            :key="index"
            :class="editState ? 'editIcon' : ''"
            @click="handleGoPage(item.url, 'divider', index)"
          >
            <a :href="editState ? 'javascript:void(0)' : item.url">{{
              item.title
            }}</a>
          </li>
        </ul>
      </div>
      <div class="footItem contact">
        <div class="headTitle">
          <input
            type="text"
            v-model="foot.contact.title"
            class="input"
            v-show="editState"
            maxlength="8"
            @keyup="
              foot.contact.title = foot.contact.title.replace(
                /[@#\$%\^&\*]+/g,
                ''
              )
            "
          />
          <h4 v-show="!editState">{{ foot.contact.title }}</h4>
        </div>
        <div class="divider"></div>
        <textarea
          class="articleText textarea"
          v-model="foot.contact.content"
          rows="6"
          v-show="editState"
          maxlength="100"
          @keyup="
            foot.contact.content = foot.contact.content.replace(
              /[@#\$%\^&\*]+/g,
              ''
            )
          "
        ></textarea>
        <p v-show="!editState" v-html="foot.contact.content"></p>
      </div>
      <div class="footItem qr">
        <div class="headTitle">
          <input
            type="text"
            v-model="foot.qr.title"
            class="input"
            v-show="editState"
            maxlength="8"
            @keyup="foot.qr.title = foot.qr.title.replace(/[@#\$%\^&\*]+/g, '')"
          />
          <h4 v-show="!editState">{{ foot.qr.title }}</h4>
        </div>
        <div class="divider"></div>
        <img
          :src="foot.qr.src"
          alt=""
          :class="editState ? 'editIcon' : ''"
          @click="handleUploadIcon('qr')"
        />
      </div>
    </div>

    <div class="record">
      <!-- <p>Copyright © chinaunicom.com,All Rights Reserved.中国联通江苏分公司<span>苏ICP备88888号</span></p> -->
      <ul>
        <li @click="handleGoPage(buttomBtn.goHome.url, 'buttomBtn', 'goHome')">
          <a href="javascript:void(0)">{{ buttomBtn.goHome.title }}</a>
        </li>
        <li
          @click="
            handleGoPage(buttomBtn.helpCenter.url, 'buttomBtn', 'helpCenter')
          "
        >
          <a href="javascript:void(0)">{{ buttomBtn.helpCenter.title }}</a>
        </li>
        <li
          @click="
            handleGoPage(buttomBtn.contactUs.url, 'buttomBtn', 'contactUs')
          "
        >
          <a href="javascript:void(0)">{{ buttomBtn.contactUs.title }}</a>
        </li>
      </ul>
    </div>

    <!-- end -->

    <homeEditBtn-diolog
      ref="homeEditBtnDiolog"
      :btnTitle="
        btnType == 'tabs'
          ? tabs[tabActiveIndex].content.btnValue
          : analysis.btnValue
      "
      :btnSrc="
        btnType == 'tabs'
          ? tabs[tabActiveIndex].content.btnSrc
          : analysis.btnSrc
      "
      @handleSuccess="handleSuccess"
    ></homeEditBtn-diolog>
    <homeEditIcon-diolog
      ref="homeEditIconDiolog"
      :icon="
        iconType == 'tabs'
          ? tabs[tabActiveIndex].icon
          : analysis.rules[iconIndex].icon
      "
      :iconSelected="
        iconType == 'tabs' ? tabs[tabActiveIndex].iconSelected : ''
      "
      @handleIconSuccess="handleIconSuccess"
    ></homeEditIcon-diolog>
    <homeEditBanner-diolog
      ref="homeEditBannerDiolog"
      :bannerList="bannerList"
      @handleBannerSuccess="handleBannerSuccess"
    ></homeEditBanner-diolog>
  </div>
</template>

<script>
import HomeEditBtnDiolog from "./HomeEditBtnDiolog";
import HomeEditIconDiolog from "./HomeEditIconDiolog";
import HomeEditBannerDiolog from "./HomeEditBannerDiolog";
import { mapState } from "vuex";

let timer;
let loadTimer;
let interval;

export default {
  props: {
    homeData: {
      type: Object,
      default: null,
    },
  },
  name: "home",
  data() {
    return {
      /* carousel开始 */

      bannerList: [
        {
          url: require("../assets/home/banner.jpg"),
        },
        {
          url: require("../assets/home/banner-2.jpg"),
        },
      ],
      bannerHeight: 700,

      /* carousel结束 */

      /* tabsHead开始 */

      tabsHead: {
        title: "更加开放的物联网使能平台",
        content:
          "完整的物联网开发解决方案帮助开发者快速构建、部署、运营自己的工业应用解决方案",
      },

      /* tabsHead结束 */

      /*  tab开始   */

      // form: {
      //   tabNum: 8,
      // },
      // tabOptions: [
      //   { lable: 1, value: 1 },
      //   { lable: 2, value: 2 },
      //   { lable: 3, value: 3 },
      //   { lable: 4, value: 4 },
      //   { lable: 5, value: 5 },
      //   { lable: 6, value: 6 },
      //   { lable: 7, value: 7 },
      //   { lable: 8, value: 8 },
      // ],
      // tab栏所有数据
      tabs: [
        {
          icon: require("@/assets/home/icon-device.png"),
          iconSelected: require("@/assets/home/icon-device-current.png"),
          title: "设备管理",
          content: {
            title: "设备管理",
            article:
              "利用链接能力可以实现各种异构标识（节点）之间的链接，以及实现各种标识和联通数据的对接，可以把运营商能力（例如链接能力，定位能力，设备管理能力）赋予工业企业以及应用开发商，赋能企业端应用。1",
            btnValue: "立即体验",
            btnSrc: "#",
          },
          imageUrl: require("@/assets/home/link.png"),
        },
        {
          icon: require("@/assets/home/icon-link.png"),
          iconSelected: require("@/assets/home/icon-link-current.png"),
          title: "连接管理",
          content: {
            title: "连接管理",
            article:
              "利用链接能力可以实现各种异构标识（节点）之间的链接，以及实现各种标识和联通数据的对接，可以把运营商能力（例如链接能力，定位能力，设备管理能力）赋予工业企业以及应用开发商，赋能企业端应用。2",
            btnValue: "立即体验",
            btnSrc: "",
          },
          imageUrl: require("@/assets/home/link.png"),
        },
        {
          icon: require("@/assets/home/icon-data.png"),
          iconSelected: require("@/assets/home/icon-data-current.png"),
          title: "数据融合",
          content: {
            title: "数据融合",
            article:
              "利用链接能力可以实现各种异构标识（节点）之间的链接，以及实现各种标识和联通数据的对接，可以把运营商能力（例如链接能力，定位能力，设备管理能力）赋予工业企业以及应用开发商，赋能企业端应用。3",
            btnValue: "立即体验",
            btnSrc: "#",
          },
          imageUrl: require("@/assets/home/link.png"),
        },
        {
          icon: require("@/assets/home/icon-safe.png"),
          iconSelected: require("@/assets/home/icon-safe-current.png"),
          title: "物联网安全",
          content: {
            title: "物联网安全",
            article:
              "利用链接能力可以实现各种异构标识（节点）之间的链接，以及实现各种标识和联通数据的对接，可以把运营商能力（例如链接能力，定位能力，设备管理能力）赋予工业企业以及应用开发商，赋能企业端应用。4",
            btnValue: "立即体验",
            btnSrc: "#",
          },
          imageUrl: require("@/assets/home/link.png"),
        },
        {
          icon: require("@/assets/home/icon-gateway.png"),
          iconSelected: require("@/assets/home/icon-gateway-current.png"),
          title: "网关定制",
          content: {
            title: "网关定制",
            article:
              "利用链接能力可以实现各种异构标识（节点）之间的链接，以及实现各种标识和联通数据的对接，可以把运营商能力（例如链接能力，定位能力，设备管理能力）赋予工业企业以及应用开发商，赋能企业端应用。5",
            btnValue: "立即体验",
            btnSrc: "#",
          },
          imageUrl: require("@/assets/home/link.png"),
        },
        {
          icon: require("@/assets/home/icon-biaoshi.png"),
          iconSelected: require("@/assets/home/icon-biaoshi-current.png"),
          title: "标识解析",
          content: {
            title: "标识解析",
            article:
              "利用链接能力可以实现各种异构标识（节点）之间的链接，以及实现各种标识和联通数据的对接，可以把运营商能力（例如链接能力，定位能力，设备管理能力）赋予工业企业以及应用开发商，赋能企业端应用。6",
            btnValue: "立即体验",
            btnSrc: "#",
          },
          imageUrl: require("@/assets/home/link.png"),
        },
        {
          icon: require("@/assets/home/icon-cloud.png"),
          iconSelected: require("@/assets/home/icon-cloud-current.png"),
          title: "企业上云",
          content: {
            title: "企业上云",
            article:
              "利用链接能力可以实现各种异构标识（节点）之间的链接，以及实现各种标识和联通数据的对接，可以把运营商能力（例如链接能力，定位能力，设备管理能力）赋予工业企业以及应用开发商，赋能企业端应用。7",
            btnValue: "立即体验",
            btnSrc: "#",
          },
          imageUrl: require("@/assets/home/link.png"),
        },
        {
          icon: require("@/assets/home/icon-service.png"),
          iconSelected: require("@/assets/home/icon-service-current.png"),
          title: "技术服务",
          content: {
            title: "技术服务",
            article:
              "利用链接能力可以实现各种异构标识（节点）之间的链接，以及实现各种标识和联通数据的对接，可以把运营商能力（例如链接能力，定位能力，设备管理能力）赋予工业企业以及应用开发商，赋能企业端应用。8",
            btnValue: "立即体验",
            btnSrc: "#",
          },
          imageUrl: require("@/assets/home/link.png"),
        },
      ],
      // tab栏配选中下标
      tabActiveIndex: 0,
      tabsHeight: 700,

      /*  tab结束   */

      /*  analysis开始   */

      analysis: {
        title: "标识解析",
        content:
          "工业互联网标识解析体系是全球供应链系统和企业生产系统精准对接、产品全生命周期管理和只能化服务的前提和基础。",
        rules: [
          {
            icon: require("@/assets/home/g68.png"),
            content: "通过唯一的识别物理实体和数字实体",
          },
          {
            icon: require("@/assets/home/g70.png"),
            content: "促进可识别数据对象的管理和交互",
          },
          {
            icon: require("@/assets/home/g69.png"),
            content: "支撑工业互联网网络互联互通",
          },
          {
            icon: require("@/assets/home/g71.png"),
            content: "支撑工业互联网数据共享共用",
          },
        ],
        btnValue: "立即体验",
        btnSrc: "#",
      },
      iconIndex: 0,

      /*  analysis结束   */

      /* devCenter 开始 */

      devCenter: {
        title: "开发者中心",
        subtitle: "提供开放开发环境，满足线上和线下开发部署",
        devList: [
          {
            icon: require("@/assets/home/platform.png"),
            iconSelected: require("@/assets/home/platform-current.png"),
            hover: false,
            title: "开发平台",
            content1: "提供工业应用",
            content2: "开发、测试、部署",
          },
          {
            icon: require("@/assets/home/device.png"),
            iconSelected: require("@/assets/home/device-current.png"),
            hover: false,
            title: "设备接入",
            content1: "提供智能丰富的",
            content2: "设备管理平台",
          },
          {
            icon: require("@/assets/home/api.png"),
            iconSelected: require("@/assets/home/api-current.png"),
            hover: false,
            title: "开放API",
            content1: "对平台对外发布的",
            content2: "API进行管理及调度",
          },
          {
            icon: require("@/assets/home/service.png"),
            iconSelected: require("@/assets/home/service-current.png"),
            hover: false,
            title: "技术服务",
            content1: "提供开发所需的",
            content2: "SDK及相关技术文档",
          },
        ],
      },

      /* devCenter 结束 */

      /* collaborate 开始 */

      collaborate: {
        title: "合作伙伴",
        collaborateList: [
          {
            url: require("@/assets/home/layer22.png"),
          },
          {
            url: require("@/assets/home/layer23.png"),
          },
          {
            url: require("@/assets/home/layer24.png"),
          },
          {
            url: require("@/assets/home/layer25.png"),
          },
          {
            url: require("@/assets/home/layer26.png"),
          },
        ],
      },

      /* collaborate 结束 */

      /* foot 开始 */

      foot: {
        about: {
          title: "关于我们",
          content:
            " 以设备管理为核心，融合工业设备管理、连接管理、物联网安全、云资源配套服务能力，为工业企业客户提供统一入口、统一账户、数据可视化以及设备、流量、连接安全对应的工业应用服务。",
        },
        product: {
          title: "产品与服务",
          urlList: [
            {
              title: "标识解析",
              url: "#",
            },
            {
              title: "数据湖",
              url: "#",
            },
            {
              title: "使能平台",
              url: "#",
            },
            {
              title: "开发者中心",
              url: "#",
            },
          ],
        },
        contact: {
          title: "联系我们",
          content:
            "地址：江苏省南京市鼓楼区北京西路65-5号。<br/>总机：025-66996040。<br/>网址：www.chinaunicom.com",
        },
        qr: {
          title: "关注公众号",
          src: require("@/assets/home/erweima.png"),
        },
      },

      /* foot 开始 */

      buttomBtn: {
        goHome: {
          title: "网站首页",
          url: "#",
        },
        helpCenter: {
          title: "帮助中心",
          url: "#",
        },
        contactUs: {
          title: "联系我们",
          url: "#",
        },
      },

      btnType: "",
      iconType: "",
    };
  },
  components: {
    HomeEditBtnDiolog,
    HomeEditIconDiolog,
    HomeEditBannerDiolog,
  },
  mounted() {
    this.imgLoad();
    window.addEventListener(
      "resize",
      () => {
        this.bannerHeight = this.$refs.bannerHeight[0].height;
      },
      false
    );
  },
  computed: {
    ...mapState(["editState"]),
  },
  methods: {
    /*  carousel开始   */

    handleAddBanner() {
      this.$refs.homeEditBannerDiolog.dialogVisible = true;
    },
    handleBannerSuccess(data) {},
    imgLoad() {
      clearTimeout(loadTimer);
      loadTimer = setTimeout(() => {
        const bannerHeight = this.$refs.bannerHeight[0].height;
        if (bannerHeight == 0) {
          interval = setInterval(() => {
            this.imgLoad();
          }, 500);
        } else {
          clearInterval(interval);
          this.bannerHeight = bannerHeight;
        }
      }, 0);
    },

    /*   carousel结束   */

    /*  tab开始   */

    // handleTabsChange(e) {
    //   console.log(e);
    //   const tabsNum = this.tabs.length;
    //   if (tabsNum > e) {
    //     this.tabs.length = e;
    //   } else {
    //     const addNum = e - tabsNum;
    //     for (let i = 0; i < addNum; i++) {
    //       this.tabs.push({
    //         icon: "../assets/",
    //         iconSelected: "../assets/icon-device.png",
    //         title: "设备管理",
    //         src: "https://element.eleme.cn/#/zh-CN",
    //         content: {
    //           title: "链接管理",
    //           article: `利用链接能力可以实现各种异构标识节点之间的链接，利用链接能力可以实现各种异构标识节点之间的链接，利用链接能力可以实现各种异构标识节点之间的链接，利用链接能力可以实现各种异构标识节点之间的链接，利用链接能力可以实现各种异构标识节点之间的链接 ${i}`,
    //         },
    //         imageUrl: "http://yuanweiwei131.cn.utools.club/link.png",
    //       });
    //     }
    //   }
    // },
    // tab栏切换
    handleTabClick(index) {
      this.tabActiveIndex = index;
    },
    // 点击立即体验打开新页面
    handleGoPage(src, str = null) {
      if (!this.editState) {
        if (src) window.open(src);
      } else {
        this.btnType = str;
        this.$refs.homeEditBtnDiolog.dialogVisible = true;
      }
    },
    // 图片大图上传成功
    handleTabImgSuccess(response, file, fileList) {
      this.tabs[this.tabActiveIndex].imageUrl = URL.createObjectURL(file.raw);
    },
    // 图片大图上传前
    beforeTabImgUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 打开上传tabicon编辑弹窗
    handleUploadIcon(str, index = null) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        if (this.editState) {
          this.iconType = str;
          if (index !== null) this.iconIndex = index;
          this.$refs.homeEditIconDiolog.dialogVisible = true;
        }
      }, 0);
    },
    // 按钮编辑成功
    handleSuccess(data) {
      if (this.btnType == "tabs") {
        const content = this[this.btnType][this.tabActiveIndex].content;
        content.btnValue = data.title;
        content.btnSrc = data.src;
      } else {
        this.analysis.btnValue = data.title;
        this.analysis.btnSrc = data.src;
      }
    },
    // tabicon编辑成功
    handleIconSuccess(data) {
      if (this.iconType == "tabs") {
        const content = this.tabs[this.tabActiveIndex];
        content.icon = data.iconSrc;
        content.iconSelected = data.iconSelectedSrc;
      } else {
        this.analysis.rules[iconIndex].icon = data.iconSrc;
      }
    },

    /*  tab结束   */

    /*  devCenter开始   */

    /*  devCenter开始   */
  },
  watch: {
    homeData: {
      handler(newValue) {
        if (newValue) {
          this.bannerList = newValue.bannerList;
          this.tabsHead = newValue.tabsHead;
          this.tabs = newValue.tabs;
          this.analysis = newValue.analysis;
          this.devCenter = newValue.devCenter;
          this.collaborate = newValue.collaborate;
          this.foot = newValue.foot;
          if (newValue.buttomBtn) this.buttomBtn = newValue.buttomBtn;
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;

  .input {
    background: unset;
    outline: unset;
    border: 1px dashed #000;
    padding: 6px;
  }

  .input:focus,
  .input:hover {
    border: 1px dashed #409eff;
  }

  .textarea {
    background: unset;
    outline: unset;
    border: 1px dashed #000;
    padding: 6px;
    resize: none;
    width: 100%;
  }

  .textarea:focus,
  .textarea:hover {
    border: 1px dashed #409eff;
  }

  .divider {
    width: 80px;
    height: 5px;
    background: rgb(24, 144, 255);
    margin: 30px 0;
  }

  .editIcon {
    border: 1px dashed #000;
    cursor: pointer;

    &:hover {
      border: 1px dashed #409eff;
    }
  }

  .carousel {
    position: relative;

    .banner {
      width: 100%;
    }

    .addBanner {
      width: 260px;
      // height: 150px;
      border: 1px dashed #fff;
      position: absolute;
      top: 40%;
      right: 80px;
      z-index: 8888;
      text-align: center;
      line-height: 150px;
      background: rgba($color: #fff, $alpha: 0.3);
      cursor: pointer;

      &:hover {
        background: rgba($color: #fff, $alpha: 0.4);
      }

      .el-icon-plus {
        font-size: 20px;
        color: #fff;
      }
    }
  }

  .tabsHead {
    // height: 180px;
    padding: 60px 0;

    .title {
      font-size: 30px;
      font-weight: 600;
      text-align: center;
    }

    .content {
      text-align: center;
      margin-top: 15px;
      width: 1000px;
      font-size: 18px;
    }

    h3 {
      font-size: 30px;
    }

    p {
      font-size: 18px;
      margin-top: 15px;
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    background: url("../assets/home/tab_bg.png") no-repeat center/100%;

    .tabs {
      width: 25%;
      // background: red;
      box-shadow: 3px 0 10px 0px rgba($color: #000000, $alpha: 0.1);
      display: flex;
      align-items: center;

      ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        li {
          width: 100%;
          height: 11%;
          vertical-align: middle;
          display: flex;
          justify-content: flex-end;
          cursor: pointer;
          position: relative;

          .iconfont {
            width: 40%;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            img {
              width: 37px;
            }
          }

          .inp {
            width: 60%;
            display: flex;
            align-items: center;

            .tabsInput {
              height: 37px;
              width: 172px;
              font-size: 20px;
            }

            p {
              text-align: left;
              padding-left: 50px;
              font-size: 20px;
            }
          }
        }

        .active {
          background: linear-gradient(
            to right,
            rgba(252, 252, 252, 0),
            rgb(247, 248, 250)
          );
        }

        .hover:hover {
          background: linear-gradient(
            to right,
            rgba(252, 252, 252, 0),
            rgb(247, 248, 250)
          );
        }
      }
    }

    .wrap {
      width: 75%;
      // background: blue;
      display: flex;
      justify-content: space-around;
      padding: 3% 0;

      .content {
        width: 45%;
        padding: 30px 0px 0 60px;
        text-align: left;

        .title {
          .titleInput {
            font-size: 35px;
            height: 48px;
            width: 300px;
            font-weight: 700;
          }

          h3 {
            font-size: 35px;
          }
        }

        .article {
          .articleText {
            font-size: 15px;
            line-height: 20px;
          }
        }

        .el-button {
          margin-top: 30px;
          width: 180px;
        }
      }

      ::v-deep.image {
        width: 55%;
        display: flex;
        justify-content: center;
        align-items: center;

        .img {
          .image-slot {
            background: #f5f7fa;
          }
        }

        .avatar-uploader {
          // margin: 3% 0;
          .el-upload {
            border: 1px dashed #000;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }

          .el-upload:hover {
            border-color: #409eff;
          }
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          text-align: center;
        }
        .avatar {
          display: block;
        }
      }
    }
  }

  .analysis {
    background: url("../assets/home/mark.png") no-repeat center/100%;
    display: flex;
    justify-content: flex-end;
    align-content: center;

    .analysisWrap {
      width: 55%;
      text-align: left;
      color: #fff;

      .title {
        // margin-top: 8%;
        font-size: 25px;

        .titleInput {
          font-size: 35px;
          height: 48px;
          width: 300px;
          font-weight: 700;
          color: #fff;
        }

        h3 {
          font-size: 35px;
        }
      }

      .content {
        .articleText {
          font-size: 16px;
          line-height: 28px;
          color: #fff;
          width: 60%;
        }

        p {
          width: 500px;
          line-height: 28px;
        }
      }

      .rules {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 3%;

        .rulesItem {
          width: 50%;
          margin-bottom: 30px;

          .titleInput {
            width: 260px;
            color: #fff;
            font-size: 16px;
          }

          img {
            vertical-align: middle;
            margin-right: 10px;
          }
        }
      }

      .el-button.is-round {
        border-radius: 1000px;
      }

      .el-button--primary {
        background-color: #1a4fab;
        border-color: #fff;
        width: 200px;
        font-size: 18px;
        margin-top: 2%;
        // margin-bottom: 8%;

        &:hover {
          background-color: #315da8;
        }
      }
    }
  }

  .devCenter {
    // height: 600px;
    padding-bottom: 100px;
    background: #f1f2f6;
    overflow: hidden;

    h3 {
      margin-top: 80px;
      font-size: 25px;
      font-weight: 600;
    }

    > p {
      margin-top: 20px;
      font-size: 14px;
    }

    .divider {
      margin-left: auto;
      margin-right: auto;
      width: 150px;
      margin-bottom: 50px;
    }

    .devList {
      display: flex;
      justify-content: space-between;
      padding: 0 10%;

      .devItem {
        width: 23%;
        padding-bottom: 40px;
        background: #fff;
        cursor: pointer;

        &:hover {
          .imgWrap {
            background: #1890ff;
          }
        }

        .imgWrap {
          width: 110px;
          height: 110px;
          line-height: 110px;
          border-radius: 50%;
          margin: 50px auto 0;
          // background: #1890ff;
          background: #f1f2f6;
          font-size: 0;

          img {
            vertical-align: middle;
          }
        }

        .title {
          margin: 30px 0px 15px;
          font-size: 17px;
          font-weight: 500;
        }

        p {
          margin-bottom: 8px;
          font-size: 14px;
        }
      }
    }
  }

  .collaborate {
    // height: 330px;
    padding-bottom: 80px;

    h3 {
      margin-top: 80px;
      font-size: 25px;
      font-weight: 600;
    }

    .divider {
      margin-left: auto;
      margin-right: auto;
      width: 150px;
      margin-bottom: 80px;
    }

    .collaborateList {
      display: flex;
      justify-content: space-between;
      padding: 0 10%;
      .collaborateItem {
        width: 18%;
        height: 100px;
        box-shadow: 0 0 5px rgb(194, 194, 194);
        text-align: center;
        line-height: 100px;
        font-size: 0;

        img {
          vertical-align: middle;
        }
      }
    }
  }

  .foot {
    background: #333b47;
    display: flex;
    justify-content: space-between;
    padding: 80px 15% 30px;
    color: #87888b;
    text-align: left;

    .divider {
      width: 35px;
      height: 2px;
      margin-top: 10px;
    }

    .about {
      width: 25%;
      line-height: 25px;
      font-size: 15px;
    }

    .contact {
      width: 20%;
      line-height: 28px;
      font-size: 15px;
    }

    .product,
    .qr {
      width: 10%;
      line-height: 28px;
      font-size: 15px;

      a {
        color: #87888b;
      }
    }

    h4 {
      color: #fff;
      font-weight: 500;
    }
  }

  .record {
    background: #292f39;
    color: #9596a0;
    display: flex;
    justify-content: space-between;
    padding: 10px 15%;
    font-size: 13px;

    p {
      span {
        margin-left: 30px;
      }
    }

    ul {
      li {
        display: inline-block;
        margin-right: 18px;

        a {
          color: #9596a0;
          font-size: 13px;
        }
      }
    }
  }

  .option {
    text-align: left;
  }
}

@media (min-width: 1800px) {
  .wrap {
    padding: 100px;

    ::v-deep.image {
      .img {
        width: 550px;
        height: 550px;

        .image-slot {
          width: 550px;
          height: 550px;
          line-height: 550px;
        }
      }

      .avatar-uploader {
        margin-top: 7%;
        width: 550px;
        height: 550px;
      }

      .avatar-uploader-icon {
        width: 550px;
        height: 550px;
        line-height: 550px;
      }
      .avatar {
        width: 550px;
        height: 550px;
      }
    }
  }
}

@media screen and (min-width: 1600px) and(max-width:1800px) {
  .wrap {
    ::v-deep.image {
      .img {
        width: 450px;
        height: 450px;

        .image-slot {
          width: 450px;
          height: 450px;
          line-height: 450px;
        }
      }

      .avatar-uploader {
        margin-top: 5%;
        width: 450px;
        height: 450px;
      }

      .avatar-uploader-icon {
        width: 450px;
        height: 450px;
        line-height: 450px;
      }
      .avatar {
        width: 450px;
        height: 450px;
      }
    }
  }
}

@media screen and (min-width: 1400px) and(max-width:1600px) {
  .wrap {
    ::v-deep.image {
      .img {
        width: 400px;
        height: 400px;

        .image-slot {
          width: 400px;
          height: 400px;
          line-height: 400px;
        }
      }

      .avatar-uploader {
        margin-top: 3%;
        width: 400px;
        height: 400px;
      }

      .avatar-uploader-icon {
        width: 400px;
        height: 400px;
        line-height: 400px;
      }
      .avatar {
        width: 400px;
        height: 400px;
      }
    }
  }
}

@media (max-width: 1400px) {
  .wrap {
    ::v-deep.image {
      .img {
        width: 350px;
        height: 350px;

        .image-slot {
          width: 350px;
          height: 350px;
          line-height: 350px;
        }
      }

      .avatar-uploader {
        margin-top: 3%;
        width: 350px;
        height: 350px;
      }

      .avatar-uploader-icon {
        width: 350px;
        height: 350px;
        line-height: 350px;
      }
      .avatar {
        width: 350px;
        height: 350px;
      }
    }
  }
}
@media (max-width: 1380px) {
  .container {
    height: 475px;

    .tabs {
      p {
        font-size: 17px !important;
      }

      .tabsInput {
        font-size: 17px !important;
        height: 30px !important;
        width: 120px !important;
      }

      .editIconSize {
        width: 32px !important;
      }
    }
  }

  .analysis {
    .title {
      margin-top: 3%;
    }

    .el-button--primary {
      margin-bottom: 3%;
    }
  }
}

@media (min-width: 1380px) {
  // .container{
  //   height: 537px;
  // }

  .analysis {
    .title {
      margin-top: 7%;
    }

    .el-button--primary {
      margin-bottom: 7%;
    }
  }
}
</style>
