<template>
  <div class="advert-rule-page">
    <!-- 自定义头部 -->
    <s-header
      :name="$t('labelMan.title')"
      :noback="false"
    />

    <!-- 顶部操作栏 -->
    <div class="top-action-bar">
      <div v-if="isDelete" class="delete-mode-bar">
        <div class="selected-count">
          <van-icon name="checked" class="count-icon" />
          {{ $t("advertManage.advertRule.selected") }}
          <span class="highlight">{{ selectTotals }}</span>
          {{ $t("advertManage.advertRule.individual") }}
        </div>
        <div class="action-buttons">
          <van-button size="small" class="cancel-btn" @click="cancelClk">
            {{ $t("advertManage.advertRule.cancel") }}
          </van-button>
          <van-button
            size="small"
            type="danger"
            class="confirm-btn"
            @click="noticeClk"
          >
            {{ $t("advertManage.advertRule.confirmDel") }}
          </van-button>
        </div>
      </div>

      <div v-else class="normal-mode-bar">
        <div class="rule-info">
          <div class="rule-icon">
            <van-icon name="description" class="icon" />
          </div>
          <div class="rule-count">
            {{ $t("advertManage.advertRule.total") }}
            <span class="highlight">{{ ruleTotal }}</span>
            {{ $t("alarmHistory.recordsTotal") }}
          </div>
        </div>

        <div class="action-buttons">
          <van-button icon="plus" size="small" class="add-btn" @click="toAdd">
            {{ $t("advertManage.advertRule.add") }}
          </van-button>
          <van-button
            icon="delete"
            size="small"
            type="danger"
            plain
            class="delete-btn"
            @click="isDelete = true"
          >
            {{ $t("advertManage.advertRule.delete") }}
          </van-button>
        </div>
      </div>
    </div>

    <!-- 规则列表 -->
    <div class="rule-list">
      <div
        v-for="item in tableData"
        :key="item.id"
        class="rule-card"
        :class="{ 'rule-card-delete-mode': isDelete }"
      >
        <div class="rule-content" @click="toEdit(item)">
          <div class="rule-field">
            <van-icon name="label-o" class="field-icon" />
            <span class="field-label">{{ $t("labelMan.labelName") }}：</span>
            <span class="field-value">{{ item.name }}</span>
          </div>

          <div class="rule-field">
            <van-icon name="clock-o" class="field-icon" />
            <span class="field-label"
              >{{ $t("advertManage.advertRule.createTime") }}：</span
            >
            <span class="field-value">{{ Format_time(item.createDate) }}</span>
          </div>
        </div>

        <div class="rule-action">
          <template v-if="isDelete">
            <van-checkbox
              v-model="item.checked"
              shape="square"
              checked-color="#df5e4c"
            />
          </template>
          <template v-else>
            <van-button
              icon="edit"
              size="small"
              class="edit-btn"
              @click.stop="toEdit(item)"
            >
              {{ $t("advertManage.advertRule.edit") }}
            </van-button>
          </template>
        </div>
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <kDialog
      :dialogTitle="$t('advertManage.delPopTitle')"
      :cancelBtnTxt="$t('advertManage.cancelTxt')"
      :confirmBtnTxt="$t('advertManage.confirmDel')"
      ref="kDialogRef"
      :dialogContent="$t('advertManage.delPopContent')"
      @confirmclk="confirmClk"
    />
  </div>
</template>

<script>
// 导入tab组件
// import kTabs from "../../components/commom/kTabs/index.vue";
// 导入公用方法
import { Format_time, getLoginUser } from "../../common/js/utils";
// 导入弹窗
import kDialog from "../../components/commom/kDialog/index.vue";
// 导入接口
import { Api_getLabelList, Api_getDelLabel } from "../../service/labelMan";
import { computed, onMounted, reactive, ref, toRefs } from "vue";
import sHeader from "../../components/SimpleHeader";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
export default {
  components: {
    sHeader,
    kDialog,
    // kTabs
  },
  setup() {
    const { t } = useI18n();
    // 点击tab
    const tabChg = (e) => {
      searchParam.type = e;
      getList();
    };
    // tab栏
    const tabList = ref([
      {
        name: t("labelMan.merchant"),
        icon: "",
        id: 1,
      },
      {
        name: t("labelMan.machine"),
        icon: "",
        id: 2,
      },
    ]);
    // 获取登陆信息
    const user = getLoginUser();
    // 删除确认弹窗
    const kDialogRef = ref(null);
    // 点击确认删除
    const noticeClk = () => {
      if (selectTotals.value < 1) {
        showToast(t("advertManage.delTips"));
        return;
      }
      kDialogRef.value.openDialog();
    };
    // 点击右侧按钮
    const confirmClk = () => {
      const ids = [];
      ruleData.tableData.forEach((item) => {
        if (item.checked) {
          ids.push(item.id);
        }
      });
      Api_getDelLabel(ids).then((res) => {
        console.log(res);
        if (res.data.code === "00000") {
          isDelete.value = false;
          showToast(t("advertManage.delSuccess"));
          setTimeout(() => {
            getList();
          }, 1000);
        }
      });
    };
    // 是否删除状态
    const isDelete = ref(false);
    // 选中
    const selectTotals = computed(() => {
      let nums = 0;
      if (ruleData.tableData.length > 0) {
        ruleData.tableData.forEach((item) => {
          if (item.checked) {
            nums++;
          }
        });
      }
      return nums;
    });
    // 点击取消删除
    const cancelClk = () => {
      // 把选中状态去掉
      if (ruleData.tableData.length > 0) {
        ruleData.tableData.forEach((item) => {
          if (item.checked) {
            item.checked = false;
          }
        });
      }
      isDelete.value = false;
    };
    // 多少条规则
    const ruleTotal = ref(0);
    // 定义列表数据
    let ruleData = reactive({
      tableData: [],
    });
    // 刚进入页面
    onMounted(() => {
      // styleUrl("labelMan");
      getList();
    });
    // 筛选条件
    const searchParam = {
      adminId: user.id,
      type: 1,
    };
    // 获取列表
    const getList = () => {
      Api_getLabelList(searchParam).then((res) => {
        const { data } = res.data;
        console.log("data", data);
        // 加入删除选中状态
        if (data.length > 0) {
          data.forEach((item) => {
            item.checked = false;
          });
        }
        ruleData.tableData = data;
        // 总共
        ruleTotal.value = data.length;
      });
    };
    const router = useRouter();
    // 点击添加按钮
    const toAdd = () => {
      router.push("/labelManAdd");
    };
    // 点击编辑
    const toEdit = (row) => {
      // 如果是删除模式，则是选中和取消状态
      if (isDelete.value) {
        ruleData.tableData.forEach((item) => {
          if (item.id === row.id) {
            item.checked = !item.checked;
          }
        });
      } else {
        router.push(`/labelManAdd?row=${JSON.stringify(row)}`);
      }
    };
    return {
      getList,
      ...toRefs(ruleData),
      isDelete,
      selectTotals,
      cancelClk,
      ruleTotal,
      toAdd,
      confirmClk,
      kDialogRef,
      noticeClk,
      toEdit,
      Format_time,
      tabList,
      tabChg,
    };
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4d6add;
@danger-color: #df5e4c;
@text-dark: #333;
@text-light: #666;
@border-color: #e4e7ec;
@card-bg: #ffffff;

.advert-rule-page {
  min-height: 100vh;
  overflow: hidden;
}

.top-action-bar {
  background-color: @card-bg;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 46px;
  z-index: 10;
}

.delete-mode-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .selected-count {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: @text-dark;

    .count-icon {
      color: @danger-color;
      margin-right: 6px;
    }

    .highlight {
      color: @danger-color;
      font-weight: bold;
      margin: 0 4px;
    }
  }

  .action-buttons {
    display: flex;
    gap: 12px;

    .cancel-btn {
      border-color: @border-color;
      color: @text-dark;
    }

    .confirm-btn {
      background-color: @danger-color;
      border-color: @danger-color;
    }
  }
}

.normal-mode-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .rule-info {
    display: flex;
    align-items: center;

    .rule-icon {
      width: 32px;
      height: 32px;
      background-color: #e8ecff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;

      .icon {
        font-size: 18px;
        color: @primary-color;
      }
    }

    .rule-count {
      font-size: 14px;
      color: @text-dark;

      .highlight {
        color: @danger-color;
        font-weight: bold;
        margin: 0 4px;
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 10px;

    .add-btn {
      background-color: @primary-color;
      border-color: @primary-color;
      color: white;
    }

    .delete-btn {
      border-color: @danger-color;
      color: @danger-color;
    }
  }
}

.rule-list {
  padding: 16px;
  background: #f5f6fa;
  height: calc(100% - 110px);
  overflow: auto;
  overflow-x: hidden;
}

.rule-card {
  background-color: @card-bg;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  &.rule-card-delete-mode {
    background-color: #fff9f9;
    border: 1px solid rgba(223, 94, 76, 0.2);
  }
}

.rule-content {
  flex: 1;
  cursor: pointer;

  .rule-field {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    .field-icon {
      color: @primary-color;
      margin-right: 8px;
      font-size: 16px;
    }

    .field-label {
      font-size: 14px;
      color: @text-light;
    }

    .field-value {
      font-size: 14px;
      color: @text-dark;
      font-weight: 500;
    }
  }
}

.rule-action {
  margin-left: 15px;

  .edit-btn {
    background-color: #e8ecff;
    border: none;
    color: @primary-color;
  }
}

@media (max-width: 480px) {
  .top-action-bar {
    padding: 10px 12px;
  }

  .rule-card {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  .rule-action {
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .delete-mode-bar {
    gap: 10px;

    .action-buttons {
      justify-content: flex-end;
    }
  }
}
</style>
