<template>
  <div v-loading="broadcastLoading">
    <div class="main-title-box">
      <div class="main-title">{{ $t("backendSystem.publishedBroadcast") }}</div>
      <el-button class="add-btn" @click="handelAddBroadcast"
        >{{ $t("backendSystem.addBroadcast") }}
        <i class="iconfont icon-youjiantou1 arrow"></i
      ></el-button>
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-bottom: 18px"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      height="60vh"
    >
      <el-table-column prop="id" label="ID" width="60" show-overflow-tooltip />
      <el-table-column
        prop="createTime"
        :label="$t('backendSystem.createTime')"
        width="160"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ handelTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        :label="$t('backendSystem.content')"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createUser"
        :label="$t('backendSystem.createUser')"
        width="160"
        show-overflow-tooltip
      />
    
      <el-table-column
        prop="buttonContent"
        :label="$t('backendSystem.bthContent2')"
        width="200"
        show-overflow-tooltip
      
      >
        <template slot-scope="scope">
          <div v-if="scope.row.buttonContent">
            <el-tag 
              v-for="(button, index) in formatButtonContent(scope.row.buttonContent)" 
              :key="index"
              size="small"
              style="margin: 2px;"
            >
              {{ button }}
            </el-tag>
          </div>
          <span v-else style="color: #999;">无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="buttonPath"
        :label="$t('backendSystem.bthPath2')"
        width="250"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div v-if="scope.row.buttonPath">
            <div 
              v-for="(path, index) in formatButtonPath(scope.row.buttonPath)" 
              :key="index"
              class="path-item"
              style="font-size: 12px;"
            >
              {{ index + 1 }}. {{ path }}
            </div>
          </div>
          <span v-else style="color: #999;">无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        :label="$t('backendSystem.updateTime')"
        width="160"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ handelTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="updateUser"
        :label="$t('backendSystem.updateUser')"
        width="160"
        show-overflow-tooltip
      />

      <el-table-column :label="$t('backendSystem.operation')" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">{{
            $t("backendSystem.edit")
          }}</el-button>

          <el-popconfirm
            :confirm-button-text="$t(`work.confirm`)"
            :cancel-button-text="$t(`work.cancel`)"
            icon="el-icon-info"
            icon-color="red"
            :title="$t(`alerts.deleteRemind`)"
            @confirm="handelDelete(scope.row)"
          >
            <el-button class="elBtn" size="mini" slot="reference">{{
              $t(`personal.delete`)
            }}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24" style="display: flex; justify-content: center">
        <el-pagination
          style="margin: 0 auto; margin-top: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="pageSizes"
          :page-size="listParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 新增广播弹窗 -->
    <el-dialog
      :title="$t('backendSystem.dialogTitle')"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form :model="addParams"  ref="addForm">
        <!-- v-if="isOverLimit" -->
        <el-form-item :label="$t('backendSystem.broadcastContent')" prop="content">
          <el-input
            resize="none"
            v-model="addParams.content"
            type="textarea"
            :rows="5"
            @input="(val) => handleInput(val, 'add')"
          />
          <div
            style="
              color: #999;
              font-size: 12px;
              margin-top: 4px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <span v-if="isOverLimit">
              {{ $t("backendSystem.exceedingInput") }}</span
            >
            <span> {{ $t("backendSystem.newlineInvalid") }}</span>
          </div>
        </el-form-item>

        <el-form-item :label="$t('backendSystem.bthContent')" prop="buttonContent">
          <el-input
            resize="none"
            v-model="addParams.buttonContent"
            type="text"        
          
          />

        </el-form-item>

        <el-form-item :label="$t('backendSystem.bthPath')" prop="buttonPath">
          <el-input
            resize="none"
            v-model="addParams.buttonPath"
            type="textarea"
            :rows="2"         
          />
          <div
            style="
              color: #999;
              font-size: 12px;
              margin-top: 4px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <span v-if="isOverLimit">
              {{ $t("backendSystem.exceedingInput") }}</span
            >
            <span> {{ $t("backendSystem.bthPathStandard") }}</span>
            <el-button type="text" size="mini" @click="showPathHelp">
              查看路径示例
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{
          $t("backendSystem.cancel")
        }}</el-button>
        <el-button
          type="primary"
          :loading="bthLoading"
          @click="sureAddBroadcast"
          >{{ $t("backendSystem.publish") }}</el-button
        >
      </div>
    </el-dialog>


    <!-- 修改广播弹窗 -->
    <el-dialog
      :title="$t('backendSystem.editContent')"
      :visible.sync="editDialogVisible"
      width="50%"
      :before-close="handleEditClose"
      :close-on-click-modal="false"
    >
      <el-form :model="editParams">
        <el-form-item :label="$t('backendSystem.broadcastContent')">
          <el-input
            resize="none"
            v-model="editParams.content"
            type="textarea"
            :rows="5"
            @input="(val) => handleInput(val, 'edit')"
          />
          <div
            style="
              color: #999;
              font-size: 12px;
              margin-top: 4px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <span v-if="isOverLimit">
              {{ $t("backendSystem.exceedingInput") }}</span
            >
            <span> {{ $t("backendSystem.newlineInvalid") }}</span>
          </div>
        </el-form-item>

        <el-form-item :label="$t('backendSystem.bthContent')">
          <el-input
            v-model="editParams.buttonContent"
            type="text"        
          />
        </el-form-item>

        <el-form-item :label="$t('backendSystem.bthPath')">
          <el-input
            v-model="editParams.buttonPath"
            type="textarea"
            :rows="2"         
          />
          <div
            style="
              color: #999;
              font-size: 12px;
              margin-top: 4px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <span>{{ $t("backendSystem.bthPathStandard") }}</span>
            <el-button type="text" size="mini" @click="showPathHelp">
              查看路径示例
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditClose">{{
          $t("backendSystem.cancel")
        }}</el-button>
        <el-button
          type="primary"
          :loading="editLoading"
          @click="sureEditBroadcast"
          >{{ $t("backendSystem.editBroadcast") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Index from "./index";
export default {
  mixins: [Index],
};
</script>

<style scoped lang="scss">
.main-title-box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .add-btn {
    background: #661ffb;
    color: #fff;
    border: none;
    margin-left: 28px;
    border-radius: 20px;
    padding: 10px 20px;
    transition: all 0.3s ease;
    .arrow {
      margin-left: 10px;
    }
  }
  .add-btn:hover {
    transform: scale(1.05);
  }
}
.main-title {
  font-size: 24px;
  font-weight: bold;

  color: #333;
}

.elBtn {
  background: #e60751;
  color: #fff;
  border: none;
  margin-left: 18px;
}

/* 按钮内容和路径显示优化 */
.el-table .cell {
  word-break: break-word;
}

/* 路径帮助弹窗样式 */
::v-deep .path-help-dialog {
  .el-message-box__message {
    white-space: pre-line;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
  }
}

/* 按钮标签样式优化 */
.el-tag {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 路径显示样式 */
.path-item {
  font-family: 'Courier New', monospace;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 1px 0;
  border-left: 3px solid #409EFF;
}

::v-deep .el-tag{
  max-width: 200px !important;
}
</style>