<template>
  <div class="app-container row-container">
    <!-- 标题设置 -->
    <div class="config-title">
      <p>大屏标题</p>
      <el-tooltip v-if="!isEditable" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
        <span class="title-readonly" @dblclick="handleTitleDblClick">
          {{ screen_title }}
        </span>
      </el-tooltip>
      <el-input v-else ref="titleInput" v-model="screen_title" style="width: 600px;" @blur="handleTitleBlur" @keyup.enter="handleTitleBlur" />
      <div class="double-click-btn">
        <i class="iconfont icon-zhuyi-lan" />
        <span>注意：标题不要超过17个字，否则影响美观！</span>
      </div>
      <previewSetting ref="previewSettingRef" :preview-url-parent="previewUrlParent" @triggerInit="initScreenSetting" />
    </div>
    <!-- 屏幕内容设置 -->
    <div class="config-screen">
      <div
        v-for="(item,index) in screenItems"
        :key="item.id"
        class="config-screen-item"
        :class="{ 'active': activeTab === index }"
        :data-index="index"
        @click="handleTabClick(index)"
      >
        <img :src="require(`@/assets/images/screen/screen${item.id}.png`)" alt="">
        <div class="screen-mask">
          <div class="title-mask">{{ item.name }}</div>
          <div class="screen-info">
            <span>1920*1080</span>
            <span>{{ index+1 }}</span>
          </div>
          <div class="screen-playOrPause">
            <i :class="item.enabled ? 'el-icon-video-play' : 'el-icon-video-pause'" @click.stop="toggleScreenStatus(index)" />
          </div>
          <div class="screen-time">
            <el-tooltip v-if="!item.editing" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
              <span class="time-readonly" @click="handleTimeClick($event)" @dblclick="handleEditClick($event, item)">
                {{ item.time }}
              </span>
            </el-tooltip>
            <el-input v-else ref="timeInput" v-model="item.time" type="number" @blur="handleTimeBlur(item)" @keyup.enter="handleTimeBlur(item)" />
            <span class="time-unit">秒</span>
          </div>
        </div>
      </div>

      <div class="screen-right-info">
        <p>大屏启用<span style="color: #0348f3; font-weight: bold; padding: 0 4px;">{{ enabledCount }}</span>版，停用<span style="color: #ED4A41; font-weight: bold; padding: 0 4px;">{{ disabledCount }}</span>版，单次循环总时长<span style="color: #0348f3; font-weight: bold; padding: 0 4px;">{{ cycleTime }}</span>/秒</p>
        <div style="padding-top: 6px; display: flex; justify-content: flex-start; align-items: flex-start;">
          <span style="display: block;">注意：</span>
          <p>单击可切换下方大屏编辑页；<br>长按拖动，编辑大屏播放顺序；<br>单击状态按钮可启用/停用大屏；<br>双击时长编辑框可编辑单个大屏播放时长；<br>至少开启1个大屏</p>
        </div>
      </div>
    </div>
    <transition name="tab-slide" mode="out-in">
      <div :key="activeTab" class="content-area">
        <!-- {{ currentScreenItem.name }}（ID: {{ currentScreenItem.id }}）内容 - 这里是第{{ activeTab + 1 }}个大屏的详细配置 -->
        <div>
          <div class="screen-content-title">
            <h4>{{ currentScreenItem.name }}</h4>
            <el-tag v-if="currentScreenItem.enabled" type="success">已启用</el-tag>
            <el-tag v-else type="danger">已停用</el-tag>
            <p>第<span>{{ activeTab + 1 }}</span>屏 播放时长<span>{{ currentScreenItem.time }}</span>/秒</p>
          </div>
          <div class="screen-remarks">
            <span>简介</span>
            <p v-if="currentScreenItem.id === 1">{{ currentScreenItem.name }}为系统默认第1屏，主要显示数据包括（按从上到下，从左到右的顺序）：到馆统计、藏书总量、累积办证、粉丝数量、累积借出、热门搜索、图书推荐、微信公众号二维码</p>
            <p v-if="currentScreenItem.id === 2">{{ currentScreenItem.name }}为系统默认第2屏，主要显示数据包括（按从上到下，从左到右的顺序）：总分馆介绍、区域地图及总分馆定位、读者统计、借阅Top10</p>
            <p v-if="currentScreenItem.id === 3">{{ currentScreenItem.name }}为系统默认第3屏，主要显示数据包括（按从上到下，从左到右的顺序）：本年累积借阅数量、今日借阅数量、今日借阅趋势、近7日借阅统计</p>
            <p v-if="currentScreenItem.id === 4">{{ currentScreenItem.name }}为系统默认第4屏，主要显示数据包括（按从上到下，从左到右的顺序）：宣传视频、重要通知、图书借阅排行榜、微信公众号二维码。</p>
            <p v-if="currentScreenItem.id === 5">{{ currentScreenItem.name }}为系统默认第5屏，整屏显示宣传图片（支持多图片切换）。</p>
          </div>
          <div class="area-config">
            <div v-if="currentScreenItem.id === 1" class="config-item">
              <div class="config-item-main">
                <span class="data-title">到馆统计</span>
                <el-radio-group v-model="arrival_library_setting" aria-hidden="false" @change="handleArrivalSettingChange">
                  <el-radio label="1">本地数据</el-radio>
                  <el-radio label="2">基数计算</el-radio>
                  <el-radio label="3">第三方接口</el-radio>
                </el-radio-group>
              </div>
              <div v-if="arrival_library_setting === '2'" class="library-form">
                <!-- 原到馆统计表单 -->
                <el-form ref="librarySettingForm" :model="librarySettingForm" :rules="rules" size="small" label-width="100px">
                  <el-form-item label="本年到馆" prop="visit_base">
                    <el-tooltip v-if="!editStatus.librarySettingForm.visit_base" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
                      <span class="edit-readonly" @dblclick="handleDblClick('librarySettingForm', 'visit_base')">
                        {{ librarySettingForm.visit_base }}
                      </span>
                    </el-tooltip>
                    <el-input v-else ref="librarySettingFormvisit_base" v-model="librarySettingForm.visit_base" type="number" @blur="handleBlur('librarySettingForm', 'visit_base')" @keyup.enter="handleBlur('librarySettingForm', 'visit_base')" />
                    <el-checkbox v-model="librarySettingForm.visit_base_checked" label="直接显示" name="visit_base_checked" @change="handleCheckboxChange('visit_base', $event)" />
                  </el-form-item>
                  <el-form-item label="去年到馆" prop="last_year_visit_base">
                    <el-tooltip v-if="!editStatus.librarySettingForm.last_year_visit_base" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
                      <span class="edit-readonly" @dblclick="handleDblClick('librarySettingForm', 'last_year_visit_base')">
                        {{ librarySettingForm.last_year_visit_base }}
                      </span>
                    </el-tooltip>
                    <el-input v-else ref="librarySettingFormlast_year_visit_base" v-model="librarySettingForm.last_year_visit_base" type="number" @blur="handleBlur('librarySettingForm', 'last_year_visit_base')" @keyup.enter="handleBlur('librarySettingForm', 'last_year_visit_base')" />
                  </el-form-item>
                  <el-form-item label="今日到馆" prop="today_visit">
                    <el-tooltip v-if="!editStatus.librarySettingForm.today_visit" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
                      <span class="edit-readonly" @dblclick="handleDblClick('librarySettingForm', 'today_visit')">
                        {{ librarySettingForm.today_visit }}                      </span>
                    </el-tooltip>
                    <el-input v-else ref="librarySettingFormtoday_visit" v-model="librarySettingForm.today_visit" type="number" @blur="handleBlur('librarySettingForm', 'today_visit')" @keyup.enter="handleBlur('librarySettingForm', 'today_visit')" />
                    <el-checkbox v-model="librarySettingForm.today_visit_checked" label="直接显示" name="today_visit_checked" @change="handleCheckboxChange('today_visit', $event)" />
                  </el-form-item>
                  <el-form-item label="昨日到馆" prop="yesterday_visit">
                    <el-tooltip v-if="!editStatus.librarySettingForm.yesterday_visit" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
                      <span class="edit-readonly" @dblclick="handleDblClick('librarySettingForm', 'yesterday_visit')"> {{ librarySettingForm.yesterday_visit }} </span>
                    </el-tooltip>
                    <el-input v-else ref="librarySettingFormyesterday_visit" v-model="librarySettingForm.yesterday_visit" type="number" @blur="handleBlur('librarySettingForm', 'yesterday_visit')" @keyup.enter="handleBlur('librarySettingForm', 'yesterday_visit')" />
                    <el-checkbox v-model="librarySettingForm.yesterday_visit_checked" label="直接显示" name="yesterday_visit_checked" @change="handleCheckboxChange('yesterday_visit', $event)" />
                  </el-form-item>
                  <el-form-item label="本月到馆" prop="this_month_visit">
                    <el-tooltip v-if="!editStatus.librarySettingForm.this_month_visit" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
                      <span class="edit-readonly" @dblclick="handleDblClick('librarySettingForm', 'this_month_visit')">
                        {{ librarySettingForm.this_month_visit }}
                      </span>
                    </el-tooltip>
                    <el-input v-else ref="librarySettingFormthis_month_visit" v-model="librarySettingForm.this_month_visit" type="number" @blur="handleBlur('librarySettingForm', 'this_month_visit')" @keyup.enter="handleBlur('librarySettingForm', 'this_month_visit')" />
                    <el-checkbox v-model="librarySettingForm.this_month_visit_checked" label="直接显示" name="this_month_visit_checked" @change="handleCheckboxChange('this_month_visit', $event)" />
                  </el-form-item>
                  <el-form-item label="上月到馆" prop="last_month_visit">
                    <el-tooltip v-if="!editStatus.librarySettingForm.last_month_visit" class="item" effect="dark" content="双击输入框进行编辑" placement="top">
                      <span class="edit-readonly" @dblclick="handleDblClick('librarySettingForm', 'last_month_visit')">
                        {{ librarySettingForm.last_month_visit }}
                      </span>
                    </el-tooltip>
                    <el-input v-else ref="librarySettingFormlast_month_visit" v-model="librarySettingForm.last_month_visit" type="number" @blur="handleBlur('librarySettingForm', 'last_month_visit')" @keyup.enter="handleBlur('librarySettingForm', 'last_month_visit')" />
                    <el-checkbox v-model="librarySettingForm.last_month_visit_checked" label="直接显示" name="last_month_visit" @change="handleCheckboxChange('last_month_visit', $event)" />
                  </el-form-item>
                </el-form>
                <div class="config-remarks">双击输入框可进行编辑，注意：<br>
                  如未勾选“直接显示”，系统根据“本年到馆”和“去年到馆”所填数量自动生成：今日到馆、昨日到馆、本月到馆、上月到馆<br>
                  若勾选了“直接显示”，系统会直接显示用户所填数量值（注意：未填写数量，则显示为“0”）
                </div>
              </div>
            </div>
            <div v-if="currentScreenItem.id !== 5" class="config-item">
              <div class="config-item-main">
                <span class="data-title">图创接口</span>
                <!-- 原图创接口表单 -->
                <el-form ref="openForm" :model="openForm" size="small" label-width="100px">
                  <el-form-item label="OpenLib地址" prop="open_lib_http">
                    <el-tooltip
                      v-if="!editStatus.openForm.open_lib_http"
                      class="item"
                      effect="dark"
                      content="双击输入框进行编辑"
                      placement="top"
                    >
                      <span
                        class="edit-readonly"
                        @dblclick="handleDblClick('openForm', 'open_lib_http')"
                      >
                        {{ openForm.open_lib_http }}
                      </span>
                    </el-tooltip>

                    <el-input
                      v-else
                      ref="openFormopen_lib_http"
                      v-model="openForm.open_lib_http"
                      @blur="handleBlur('openForm', 'open_lib_http')"
                      @keyup.enter="handleBlur('openForm', 'open_lib_http')"
                    />
                  </el-form-item>
                  <el-form-item label="AppId" prop="open_lib_appId">
                    <el-tooltip
                      v-if="!editStatus.openForm.open_lib_appId"
                      class="item"
                      effect="dark"
                      content="双击输入框进行编辑"
                      placement="top"
                    >
                      <span

                        class="edit-readonly"
                        @dblclick="handleDblClick('openForm', 'open_lib_appId')"
                      >
                        {{ openForm.open_lib_appId }}
                      </span>
                    </el-tooltip>
                    <el-input
                      v-else
                      ref="openFormopen_lib_appId"
                      v-model="openForm.open_lib_appId"
                      @blur="handleBlur('openForm', 'open_lib_appId')"
                      @keyup.enter="handleBlur('openForm', 'open_lib_appId')"
                    />
                  </el-form-item>
                  <el-form-item label="Secret" prop="open_lib_secret">
                    <el-tooltip
                      v-if="!editStatus.openForm.open_lib_secret"
                      class="item"
                      effect="dark"
                      content="双击输入框进行编辑"
                      placement="top"
                    >
                      <span
                        class="edit-readonly"
                        @dblclick="handleDblClick('openForm', 'open_lib_secret')"
                      >
                        {{ openForm.open_lib_secret }}
                      </span>
                    </el-tooltip>
                    <el-input
                      v-else
                      ref="openFormopen_lib_secret"
                      v-model="openForm.open_lib_secret"
                      @blur="handleBlur('openForm', 'open_lib_secret')"
                      @keyup.enter="handleBlur('openForm', 'open_lib_secret')"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div class="config-remarks">双击输入框可进行编辑。数据将用于“总览屏”、“区域屏”、“统计屏”、“媒体屏”，在任意分屏编辑均可生效！ </div>
            </div>
            <div v-if="currentScreenItem.id === 1" class="config-item">
              <div class="config-item-main">
                <span class="data-title">热门搜索</span>
                <!-- 原热门搜索表单 -->
                <el-form ref="hotForm" :model="hotForm" size="small" label-width="100px">
                  <el-form-item label="数据来源地址" prop="hot_search_http">
                    <el-tooltip
                      v-if="!editStatus.hotForm.hot_search_http"
                      class="item"
                      effect="dark"
                      content="双击输入框进行编辑"
                      placement="top"
                    >
                      <span
                        class="edit-readonly"
                        @dblclick="handleDblClick('hotForm', 'hot_search_http')"
                      >
                        {{ hotForm.hot_search_http }}
                      </span>
                    </el-tooltip>
                    <el-input
                      v-else
                      ref="hotFormhot_search_http"
                      v-model="hotForm.hot_search_http"
                      @blur="handleBlur('hotForm', 'hot_search_http')"
                      @keyup.enter="handleBlur('hotForm', 'hot_search_http')"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div class="config-remarks">双击输入框可进行编辑。数据将用于“总览屏”。 </div>
            </div>
            <div v-if="currentScreenItem.id === 1" class="config-item">
              <div class="config-item-main">
                <span class="data-title">微信绑定</span>
                <!-- 原微信绑定表单 -->
                <el-form ref="vxForm" :model="vxForm" size="small" label-width="100px">
                  <el-form-item label="AppID" prop="vx_appID">
                    <el-tooltip
                      v-if="!editStatus.vxForm.vx_appID"
                      class="item"
                      effect="dark"
                      content="双击输入框进行编辑"
                      placement="top"
                    >
                      <span
                        class="edit-readonly"
                        @dblclick="handleDblClick('vxForm', 'vx_appID')"
                      >
                        {{ vxForm.vx_appID }}
                      </span>
                    </el-tooltip>
                    <el-input
                      v-else
                      ref="vxFormvx_appID"
                      v-model="vxForm.vx_appID"
                      @blur="handleBlur('vxForm', 'vx_appID')"
                      @keyup.enter="handleBlur('vxForm', 'vx_appID')"
                    />
                  </el-form-item>
                  <el-form-item label="AppSecret" prop="vx_AppSecret">
                    <el-tooltip
                      v-if="!editStatus.vxForm.vx_AppSecret"
                      class="item"
                      effect="dark"
                      content="双击输入框进行编辑"
                      placement="top"
                    >
                      <span
                        class="edit-readonly"
                        @dblclick="handleDblClick('vxForm', 'vx_AppSecret')"
                      >
                        {{ vxForm.vx_AppSecret }}
                      </span>
                    </el-tooltip>
                    <el-input
                      v-else
                      ref="vxFormvx_AppSecret"
                      v-model="vxForm.vx_AppSecret"
                      @blur="handleBlur('vxForm', 'vx_AppSecret')"
                      @keyup.enter="handleBlur('vxForm', 'vx_AppSecret')"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div class="config-remarks">双击输入框可进行编辑。图书馆公众号AppID、AppSecrect 仅用于“总览屏”显示公众号粉丝数量。</div>
            </div>
            <wecharQrCode v-if="currentScreenItem.id === 1 || currentScreenItem.id === 4" ref="wecharQrCodeRef" :qr-code-url="wecharQrCodeUrl" @triggerInit="initScreenSetting" @ready="onWechatQrCodeReady" />
            <bookRecommend v-if="currentScreenItem.id === 1" ref="bookRecommendRef" @ready="initScreenBookRecommend" />
            <areaSetting v-if="currentScreenItem.id === 2" ref="areaSettingRef" :map-data="mapData" @triggerInit="initScreenSetting" @ready="initScreenBranch" />
            <mediaSetting v-if="currentScreenItem.id === 4" ref="mediaSettingRef" @ready="initScreenNotice" />
            <advSetting v-if="currentScreenItem.id === 5" ref="advSettingRef" :welcome-play="welcomePlay" @triggerInit="initScreenSetting" @ready="initScreenWelcomePromotion" />
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { FetchInitScreenSetting, FetchEditScreenSetting } from '@/api/digitalScreen/index'
import Sortable from 'sortablejs'
import previewSetting from './module/previewSetting'
import wecharQrCode from './module/wecharQrCode'
import bookRecommend from './module/bookRecommend'
import areaSetting from './module/areaSetting'
import mediaSetting from './module/mediaSetting'
import advSetting from './module/advSetting'
import { mapGetters } from 'vuex'

export default {
  name: 'DigitalScreen',
  components: {
    previewSetting,
    wecharQrCode,
    bookRecommend,
    areaSetting,
    mediaSetting,
    advSetting
  },
  data() {
    return {
      tabPosition: 'top',
      screen_title: '',
      isEditable: false,
      originalTitle: '',
      activeTab: 0,
      screenItems: [
        { id: 1, time: '5', name: '总览屏', enabled: true, editing: false, originalTime: '5', code: 'show1' },
        { id: 2, time: '5', name: '区域屏', enabled: true, editing: false, originalTime: '5', code: 'show2' },
        { id: 3, time: '5', name: '统计屏', enabled: true, editing: false, originalTime: '5', code: 'show3' },
        { id: 4, time: '5', name: '媒体屏', enabled: true, editing: false, originalTime: '5', code: 'show4' },
        { id: 5, time: '5', name: '欢迎屏', enabled: true, editing: false, originalTime: '5', code: 'show5' }
      ],
      editingLock: false,
      prevActiveTab: 0,
      clickTimer: null, // 用于判断单击/双击的计时器
      isDoubleClick: false,
      // 到馆统计
      arrival_library_setting: '1',
      librarySettingForm: {
        visit_base: null,
        remarks: null,
        last_year_visit_base: null,
        today_visit: null,
        yesterday_visit: null,
        this_month_visit: null,
        last_month_visit: null
      },
      openForm: {
        open_lib_http: null,
        open_lib_appId: null,
        open_lib_secret: null
      },
      hotForm: {
        hot_search_http: null
      },
      vxForm: {
        vx_appID: null,
        vx_AppSecret: null
      },
      wecharQrCodeUrl: null,
      mapData: null,
      welcomePlay: null,
      previewUrlParent: null,
      editStatus: {
        openForm: {
          open_lib_http: false,
          open_lib_appId: false,
          open_lib_secret: false
        },
        hotForm: {
          hot_search_http: false
        },
        vxForm: {
          vx_appID: false,
          vx_AppSecret: false
        },
        librarySettingForm: {
          // 基础属性（已有的）
          visit_base: null,
          last_year_visit_base: null,
          today_visit: null,
          yesterday_visit: null,
          this_month_visit: null,
          last_month_visit: null,
          visit_base_checked: false, // 对应“本年到馆”的“直接显示”
          today_visit_checked: false, // 对应“今日到馆”的“直接显示”
          yesterday_visit_checked: false, // 对应“昨日到馆”的“直接显示”
          this_month_visit_checked: false, // 对应“本月到馆”的“直接显示”
          last_month_visit_checked: false // 对应“上月到馆”的“直接显示”
        }
      },
      originalValues: {
        title: '',
        openForm: {},
        hotForm: {},
        vxForm: {},
        librarySettingForm: {},
        specialFields: {}
      },
      rules: {
        visit_base: [
          { required: true, message: '本年累计到馆不可为空', trigger: 'blur' }
        ],
        last_year_visit_base: [
          { required: true, message: '去年到馆不可为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'baseApi',
      'user'
    ]),
    enabledCount() {
      return this.screenItems.filter(item => item.enabled).length
    },
    disabledCount() {
      return this.screenItems.filter(item => !item.enabled).length
    },
    cycleTime() {
      return this.screenItems.reduce((total, item) => {
        return item.enabled ? total + (parseInt(item.time) || 0) : total
      }, 0)
    },
    currentScreenItem() {
      return this.screenItems[this.activeTab]
    }
  },
  created() {
    this.initTitle()
  },
  mounted() {
    this.$nextTick(() => {
      this.initScreenSetting()
      this.draggableScreen()
    })
  },
  methods: {
    initScreenWelcomePromotion() {
      this.$refs.advSettingRef.initScreenWelcomePromotion()
      if (this.$refs.advSettingRef) {
        this.$refs.advSettingRef.updateSwiper()
      }
    },
    initScreenNotice() {
      this.$refs.mediaSettingRef.initScreenNotice()
      this.$refs.mediaSettingRef.initScreenVideo()
    },
    initScreenBranch() {
      this.$refs.areaSettingRef.initScreenBranch()
    },
    initScreenBookRecommend() {
      this.$refs.bookRecommendRef.initScreenBookRecommend()
      if (this.$refs.bookRecommendRef) {
        this.$refs.bookRecommendRef.updateBookSwiper()
      }
    },
    onWechatQrCodeReady() {
      this.$refs.wecharQrCodeRef.reloadImage()
    },
    // 初始化智慧大屏基本数据
    initScreenSetting() {
      FetchInitScreenSetting({ 'libcode': this.user.fonds.fondsNo }).then(res => {
        const showScreenItem = Object.values(res).find(item => item.code === 'show_screen')
        if (showScreenItem) {
          // 处理显示状态（context）
          if (showScreenItem.context) {
            const enabledIds = showScreenItem.context.split(',').map(Number)
            this.screenItems.forEach(item => {
              item.enabled = enabledIds.includes(item.id)
            })
          }

          // 处理显示顺序（remarks）
          if (showScreenItem.remarks) {
            const orderIds = showScreenItem.remarks.split(',').map(Number)
            // 按照remarks指定的顺序重新排列screenItems
            this.screenItems.sort((a, b) => {
              return orderIds.indexOf(a.id) - orderIds.indexOf(b.id)
            })
          }
        }

        Object.values(res).forEach(item => {
          const { code, context } = item
          // 处理标题
          if (code === 'screen_title') {
            this.screen_title = context
            this.originalTitle = this.screen_title
            this.originalValues.title = this.screen_title
            return
          }

          // 处理到馆统计相关
          if (code === 'arrival_library_setting') {
            this.arrival_library_setting = context
            return
          }

          // 处理各个屏幕的显示时间（show1-show5）
          if (code.startsWith('show') && !isNaN(parseInt(code.replace('show', '')))) {
            const screenId = parseInt(code.replace('show', ''))
            const screenItem = this.screenItems.find(item => item.id === screenId)
            if (screenItem) {
              screenItem.time = context || '5' // 默认5秒
              screenItem.originalTime = screenItem.time // 同步originalTime
            }
            return
          }

          // 处理到馆统计表单字段
          if (['visit_base', 'last_year_visit_base', 'today_visit', 'yesterday_visit', 'this_month_visit', 'last_month_visit'].includes(code)) {
            this.$set(this.librarySettingForm, code, context)
            return
          }

          // 处理图创接口相关
          if (code === 'open_lib_http') {
            this.openForm.open_lib_http = context
          } else if (code === 'open_lib_appId') {
            this.openForm.open_lib_appId = context
          } else if (code === 'open_lib_secret') {
            this.openForm.open_lib_secret = context
          }

          // 处理热门搜索相关
          if (code === 'hot_search_http') {
            this.hotForm.hot_search_http = context
          }

          // 处理微信绑定相关
          if (code === 'vx_appID') {
            this.vxForm.vx_appID = context
          } else if (code === 'vx_AppSecret') {
            this.vxForm.vx_AppSecret = context
          }

          // 处理公众号二维码
          if (code === 'wechar_qr_code') {
            this.wecharQrCodeUrl = context
          }

          if (code === 'map_data') {
            this.mapData = context
          }

          if (code === 'welcome_play') {
            this.welcomePlay = context
          }

          if (code === 'preview_url') {
            this.previewUrlParent = context
          }
        })

        Object.values(res).forEach(item => {
          const { code, context, remarks } = item
          if (['visit_base', 'today_visit', 'yesterday_visit', 'this_month_visit', 'last_month_visit'].includes(code)) {
            this.$set(this.librarySettingForm, code, context)
            this.$set(this.librarySettingForm, `${code}_checked`, remarks === '1')
          }
        })
      }).catch(() => {
      })
    },
    // 大屏标题
    initTitle() {
      this.screen_title = '' // 默认空字符串
      this.originalTitle = this.screen_title
      this.originalValues.title = this.screen_title
    },
    handleTitleDblClick() {
      this.isEditable = true
      this.originalTitle = this.screen_title
      this.originalValues.title = this.screen_title
      this.$nextTick(() => {
        const titleInput = this.$refs.titleInput
        if (titleInput) {
          titleInput.focus()
        }
      })
    },
    handleTitleBlur() {
      this.isEditable = false
      if (this.screen_title.length > 17) {
        this.$message.warning('标题不能超过17个字，请修改！')
        this.screen_title = this.originalTitle
        return
      }

      if (this.screen_title !== this.originalTitle) {
        this.saveEdit('title', 'screen_title')
      }
    },
    handleTabClick(index) {
      // 如果是双击事件，则不执行Tab切换
      if (this.isDoubleClick) {
        this.isDoubleClick = false
        return
      }
      this.prevActiveTab = this.activeTab
      this.activeTab = index

      this.$nextTick(() => {
        if (this.currentScreenItem && this.currentScreenItem.id === 1) {
          if (this.$refs.bookRecommendRef) {
            this.$refs.bookRecommendRef.updateBookSwiper()
          }
        } else if (this.currentScreenItem && this.currentScreenItem.id === 5) {
          if (this.$refs.advSettingRef) {
            this.$refs.advSettingRef.updateSwiper()
          }
        }
      })
    },
    // handleTabClick(index) {
    //   if (this.isDoubleClick) {
    //     this.isDoubleClick = false
    //     return
    //   }

    //   const prevTab = this.activeTab
    //   this.activeTab = index

    //   if (prevTab === index) {
    //     return
    //   }

    //   this.$nextTick(() => {
    //     const currentId = this.currentScreenItem?.id
    //     if (!currentId) return
    //     switch (currentId) {
    //       case 1:
    //         this.handleScreen1()
    //         break
    //       case 4:
    //         this.handleScreen4()
    //         break
    //       case 5:
    //         this.handleScreen5()
    //         break
    //     }
    //   })
    // },

    // // 处理ID=1的屏幕（总览屏）
    // handleScreen1() {
    //   if (this.$refs.bookRecommendRef) {
    //     this.$refs.bookRecommendRef.updateBookSwiper()
    //   } else {
    //     console.warn('bookRecommend组件未渲染（ID=1屏幕）')
    //   }
    //   this.refreshWechatQrCode()
    // },
    // // 处理ID=1的屏幕
    // handleScreen4() {
    //   this.refreshWechatQrCode()
    // },

    // // 处理ID=5的屏幕（欢迎屏）
    // handleScreen5() {
    //   if (this.$refs.advSettingRef) {
    //     this.$refs.advSettingRef.updateSwiper()
    //   } else {
    //     console.warn('advSetting组件未渲染（ID=5屏幕）')
    //   }
    // },

    // refreshWechatQrCode() {
    //   if (this.$refs.wecharQrCodeRef) {
    //     this.$refs.wecharQrCodeRef.reloadImage()
    //   } else {
    //     console.log('wecharQrCode组件尚未渲染或无需渲染')
    //   }
    // },
    // 大屏是否启用 - 修改后也需要提交show_screen
    toggleScreenStatus(index) {
      const currentEnabledCount = this.enabledCount

      if (this.screenItems[index].enabled && currentEnabledCount <= 1) {
        this.$message.warning('至少需要启用一个大屏')
        return
      }

      // 正常切换状态
      this.screenItems[index].enabled = !this.screenItems[index].enabled
      const statusText = this.screenItems[index].enabled ? '启用' : '停用'
      this.$message.info(`大屏${index + 1}-即${this.screenItems[index].name}已${statusText}`)

      this.submitScreenOrderAndStatus()
    },
    // 大屏拖拽排序
    draggableScreen() {
      const container = document.querySelector('.config-screen')
      const that = this
      let originalOrder = [...this.screenItems.map(item => item.id)]
      Sortable.create(container, {
        draggable: '.config-screen-item',
        animation: 150,
        onStart() {
          originalOrder = [...that.screenItems.map(item => item.id)]
        },
        onEnd({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) return

          const activeItemId = that.screenItems[that.activeTab].id
          // 执行元素移动操作
          const movedItem = that.screenItems.splice(oldIndex, 1)[0]
          that.screenItems.splice(newIndex, 0, movedItem)

          // 查找原激活项在新数组中的索引
          const newActiveIndex = that.screenItems.findIndex(item => item.id === activeItemId)
          if (newActiveIndex !== -1) {
            that.activeTab = newActiveIndex
          }

          // 检查顺序是否真的发生了变化
          const newOrder = [...that.screenItems.map(item => item.id)]
          if (!that.arraysEqual(originalOrder, newOrder)) {
            // 顺序变化，提交show_screen数据
            that.submitScreenOrderAndStatus()
          }
        }
      })
    },
    // 辅助方法：判断两个数组是否相等
    arraysEqual(arr1, arr2) {
      if (arr1.length !== arr2.length) return false
      for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) return false
      }
      return true
    },
    // 提交屏幕顺序和状态到show_screen
    submitScreenOrderAndStatus() {
      // 1. 收集显示的屏幕ID（enabled为true的）
      const enabledIds = this.screenItems
        .filter(item => item.enabled)
        .map(item => item.id)
        .join(',')

      // 2. 收集所有屏幕的顺序（无论是否启用）
      const orderIds = this.screenItems
        .map(item => item.id)
        .join(',')

      // 3. 调用saveEdit提交，使用specialFields表单类型
      const formName = 'specialFields'
      const field = 'show_screen'

      // 记录原始值用于可能的回滚
      if (!this.originalValues[formName]) {
        this.originalValues[formName] = {}
      }
      this.originalValues[formName][field] = {
        context: enabledIds,
        remarks: orderIds
      }

      // 调用saveEdit提交
      this.saveEdit(formName, field)
    },
    // 大屏展示时间操作
    handleTimeClick(event) {
    // 阻止事件冒泡
      event.stopPropagation()
      // 清除之前的计时器
      if (this.clickTimer) {
        clearTimeout(this.clickTimer)
      }
      // 设置新计时器，300ms内无第二次点击则视为单击
      this.clickTimer = setTimeout(() => {
        this.isDoubleClick = false
      }, 300)
    },
    handleEditClick(event, item) {
      event.stopPropagation()
      this.isDoubleClick = true
      if (!item) {
        console.warn('item is undefined')
        return
      }
      if (this.editingLock) {
        return
      }
      this.editingLock = true
      setTimeout(() => {
        this.editingLock = false
      }, 300)

      try {
        this.enableEdit(item)
      } catch (error) {
        console.error(error)
      }
    },
    enableEdit(item) {
      item.editing = true
      item.originalTime = item.time
      this.$nextTick(() => {
        const input = this.$refs.timeInput.find(ref => ref && ref.$el)
        if (input) {
          input.focus()
          setTimeout(() => {
            input.select()
          }, 0)
        }
      })
    },
    handleTimeBlur(item) {
      // 验证时长有效性
      if (item.time === '' || isNaN(item.time) || parseInt(item.time) <= 0) {
        this.$message.warning('播放时长必须为大于0的数字')
        item.time = item.originalTime
      } else {
        // 转换为整数字符串（避免出现小数）
        item.time = parseInt(item.time).toString()
        // 只有当值发生变化时才提交
        if (item.time !== item.originalTime) {
          this.submitScreenTime(item)
        }
      }
      item.editing = false
    },
    // 提交屏幕时长到对应show1-show5
    submitScreenTime(item) {
      // 使用specialFields表单类型
      const formName = 'specialFields'
      const field = item.code

      // 记录原始值用于可能的回滚
      if (!this.originalValues[formName]) {
        this.originalValues[formName] = {}
      }
      this.originalValues[formName][field] = item.originalTime

      // 调用saveEdit提交
      this.saveEdit(formName, field)
    },
    // 其他表单编辑框
    handleDblClick(formName, field) {
      this.originalValues[formName][field] = this[formName][field]
      this.editStatus[formName][field] = true
      this.$nextTick(() => {
        const input = this.$refs[`${formName}${field}`]
        if (input) input.focus()
      })
    },
    handleBlur(formName, field) {
      this.editStatus[formName][field] = false
      if (this[formName][field] !== this.originalValues[formName][field]) {
        this.saveEdit(formName, field)
      }
    },
    // 处理到馆统计设置变更
    handleArrivalSettingChange(newValue) {
      const virtualFormName = 'specialFields'
      const field = 'arrival_library_setting'

      // 初始化原始值（仅首次）
      if (!this.originalValues[virtualFormName]) {
        this.originalValues[virtualFormName] = {}
      }
      if (this.originalValues[virtualFormName][field] === undefined) {
        this.originalValues[virtualFormName][field] = this.arrival_library_setting
      }

      this.saveEdit(virtualFormName, field)
    },
    handleCheckboxChange(field, checked) {
      this.$set(this.librarySettingForm, `${field}_checked`, checked)
      this.saveEdit('librarySettingForm', field)
    },
    saveEdit(formName, field) {
      let code = field
      let context
      let remarks = ''

      // 处理标题特殊情况
      if (formName === 'title') {
        code = 'screen_title'
        context = this.screen_title
      } else if (formName === 'specialFields' && field === 'show_screen') {
        // 处理show_screen特殊情况
        context = this.originalValues[formName][field].context
        remarks = this.originalValues[formName][field].remarks
      } else if (formName === 'specialFields' && field.startsWith('show')) {
        // 处理show1-show5时长提交
        // 从screenItems中找到对应的屏幕获取time
        const screenItem = this.screenItems.find(item => item.code === field)
        context = screenItem ? screenItem.time : '5' // 默认5秒
      } else if (formName === 'specialFields') {
        // 处理其他特殊字段（如arrival_library_setting）
        context = this[field]
      } else {
        // 处理普通表单字段
        context = this[formName][field]
        if (formName === 'librarySettingForm') {
          remarks = this[formName][`${field}_checked`] ? '1' : '0'
        }
      }

      // 2. 校验必填项和特殊规则
      // 对于show_screen，至少需要启用一个屏幕
      if (formName === 'specialFields' && field === 'show_screen') {
        if (!context) {
          this.$message.warning('至少需要启用一个大屏')
          return
        }
      } else if (formName === 'specialFields' && field.startsWith('show')) {
        // 对于show1-show5，校验时长有效性
        if (!context || isNaN(context) || parseInt(context) <= 0) {
          this.$message.warning('播放时长必须为大于0的数字')
          this.rollbackValue(formName, field)
          return
        }
      } else if (!context && context !== 0) {
        // 其他字段的非空校验
        this.$message.warning(`${this.getFieldLabel(formName, field)}不能为空`)
        this.rollbackValue(formName, field)
        return
      }

      // 3. 构建提交参数
      const submitParam = { code, context, remarks }

      // 4. 调用接口保存
      FetchEditScreenSetting(submitParam)
        .then(() => {
          this.$message.success(`${this.getFieldLabel(formName, field)}更新成功`)
          // 更新原始值为新值
          if (formName === 'title') {
            this.originalTitle = this.screen_title
            this.originalValues.title = this.screen_title
          } else if (formName === 'specialFields' && field.startsWith('show') && field !== 'show_screen') {
            // 更新屏幕的originalTime
            const screenItem = this.screenItems.find(item => item.code === field)
            if (screenItem) {
              screenItem.originalTime = context
            }
            this.originalValues[formName][field] = context
          } else if (formName !== 'specialFields' || field !== 'show_screen') {
            this.originalValues[formName][field] = context
          }
        })
        .catch(() => {
          this.$message.error(`${this.getFieldLabel(formName, field)}更新失败`)
          this.rollbackValue(formName, field)
        })
    },
    // 新增：回滚值的通用方法
    rollbackValue(formName, field) {
      if (this.originalValues[formName]?.[field] !== undefined) {
        if (formName === 'title') {
          this.screen_title = this.originalValues[formName][field]
        } else if (formName === 'specialFields' && field.startsWith('show') && field !== 'show_screen') {
          // 回滚屏幕时长
          const screenItem = this.screenItems.find(item => item.code === field)
          if (screenItem) {
            screenItem.time = this.originalValues[formName][field]
            screenItem.originalTime = this.originalValues[formName][field]
          }
        } else if (formName === 'specialFields') {
          this[field] = this.originalValues[formName][field]
        } else {
          this[formName][field] = this.originalValues[formName][field]
          // 回滚复选框状态
          if (formName === 'librarySettingForm') {
            const originalChecked = this.originalValues[formName][`${field}_checked`]
            if (originalChecked !== undefined) {
              this[formName][`${field}_checked`] = originalChecked
            }
          }
        }
      }
    },
    getFieldLabel(formName, field) {
      const labels = {
        title: {
          screen_title: '大屏标题'
        },
        specialFields: {
          arrival_library_setting: '到馆统计设置',
          show_screen: '大屏显示设置',
          show1: '总览屏播放时长',
          show2: '区域屏播放时长',
          show3: '统计屏播放时长',
          show4: '媒体屏播放时长',
          show5: '欢迎屏播放时长'
        },
        openForm: {
          open_lib_http: 'OpenLib地址',
          open_lib_appId: 'AppId',
          open_lib_secret: 'Secret'
        },
        hotForm: {
          hot_search_http: '数据来源地址'
        },
        vxForm: {
          vx_appID: '微信AppID',
          vx_AppSecret: '微信AppSecret'
        },
        librarySettingForm: {
          visit_base: '本年到馆',
          last_year_visit_base: '去年到馆',
          today_visit: '今日到馆',
          yesterday_visit: '昨日到馆',
          this_month_visit: '本月到馆',
          last_month_visit: '上月到馆'
        }
      }
      return labels[formName][field] || field
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/digitalScreen.scss";
.config-screen{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 12px 0 20px 0;
  position: relative;
  border-top: 1px  solid #ebeef5;
  height: 175px;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    height: 4px;
    background-color: #0348f3;
    border-radius: 2px 2px 0 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); // 平滑过渡动画
    z-index: 1;
    width: 242px;
    left: 0;
    transform: translateX(calc(256px * var(--active-index, 0))); // 242px + 14px间距
  }

  .config-screen-item{
    position: relative;
    width: 242px;
    margin-right: 12px;
    cursor: pointer;
    transition: all 0.3s ease; // 选中状态过渡
    z-index: 2; // 确保内容在蓝色条上方

    .screen-mask{
      position: relative;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background:rgba(0,0,0,0.4);
      .title-mask{
        text-align: center;
        font-weight: bold;
        color: #fff;
        letter-spacing: 3px;
      }
    }

    &.active {
      transform: translateY(-5px); // 上浮效果
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); // 阴影效果
      border-radius: 4px;
      // overflow: hidden;
    }

    img{
      display: block;
      height: 136px;
      width: 100%;
    }
    .screen-info{
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 6px;
      font-size: 12px;
      color: #fff;
      span{
        display: block;
      }
    }
    .screen-playOrPause{
      position: absolute;
      left: 6px;
      bottom: 4px;
      font-size: 30px;
      .el-icon-video-play{
         color: #12C47A;
      }
      .el-icon-video-pause{
         color: #ED4A41;
      }
    }
    .screen-time{
      position: absolute;
      right: 8px;
      bottom: 8px;
      align-items: center;
      color: #fff;
      .time-readonly {
        display: inline-block;
        width: 40px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 2px;
        background-color: #fff;
        font-size: 13px;
        color: #606266;
        cursor: default;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
      }
      ::v-deep .el-input {
        width: 40px;
        .el-input__inner{
          height: 26px;
          line-height: 26px;
          text-align: center;
          padding: 0 4px;
          border-radius: 2px;
        }
      }
      span.time-unit{
        display: inline-block;
        font-size: 12px;
      }
    }
  }
  .screen-right-info{
    flex: 1;
    padding: 8px;
    background-color: #EEF5FE;
    color: #545B65;
    font-size: 12px;
    line-height: 20px;
    border-left: 3px solid #0348F3;
    .iconfont::before{
      margin-top: 5px;
    }
  }
}

// 内容区域样式 + 过渡动画
.content-area {
  height: 510px;
  border-radius: 4px;
  width: 100%;
  overflow-y: scroll;
}

// 左右切换动画
.tab-slide-enter-active,
.tab-slide-leave-active {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.tab-slide-enter-from {
  transform: translateX(50px);
  opacity: 0;
}

.tab-slide-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}

// 监听activeTab变化，更新CSS变量
::v-deep .config-screen {
  --active-index: v-bind(activeTab);
}

</style>
