<template>
  <div class="advertRuleIdx">
    <s-header :name="$t('apkManage.apkManagement')" :noback="false"></s-header>
    <div v-if="isDelete" class="headCon l-flex-between o-plr-20 o-pt-26 o-pb-12 kBordBott">
      <div class="l-flex-RC c-text-15 c-text-color c-text-b">
        {{ $t("advertManage.advertRule.selected") }}
        {{ selectTotals }}
        {{ $t("advertManage.advertRule.individual") }}
      </div>
      <div class="l-flex-RC">
        <div @click="cancelClk" class="c-text-c c-text-13 c-color">
          {{ $t("advertManage.advertRule.cancel") }}
        </div>
        <div @click="noticeClk" class="c-text-c o-ml-24 c-text-13" style="color: #df5e4c">
          {{ $t("advertManage.advertRule.confirmDel") }}
        </div>
      </div>
    </div>
    <div v-else class="headCon l-flex-between o-plr-20 o-pt-26 o-pb-12 kBordBott">
      <div class="l-flex-RC">
        <!-- <img class="ruleIcon o-mr-10" src="@/assets/advertManage/ruleIcon.png" alt="" /> -->
        <div class="ruleIcon"></div>
        <div class="c-text-color c-text-b c-text-15">
          {{ $t("advertManage.advertRule.total") }}
          <span class="c-text-20" style="color: #df5e4c">{{ ruleTotal }}</span>
          {{ $t("alarmHistory.recordsTotal") }}
        </div>
      </div>
      <div class="l-flex-RC">
        <div @click="toAdd" class="c-text-c">
          <div>
            <van-icon size="18" name="add-o" />
          </div>
          <div class="c-text-color c-text-12">
            {{ $t("advertManage.advertRule.add") }}
          </div>
        </div>
        <div @click="isDelete = true" class="c-text-c o-ml-24">
          <div>
            <van-icon size="18" name="close" />
          </div>
          <div class="c-text-color c-text-12">
            {{ $t("advertManage.advertRule.delete") }}
          </div>
        </div>
      </div>
    </div>
    <div class="contentCon">
      <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" :finished-text="$t('common.noMoreTxt')" @load="onLoad"
          :offset="20" :immediate-check="false">
          <div @click.self="toEdit(item)" v-for="item in tableData" :key="item.id"
            class="o-plr-20 o-pt-24 o-pb-12 l-flex-between kBordBott content">
            <div>
              <div class="l-flex-RC">
                <span class="c-color c-text-12">{{ $t('apkManage.version') }}：</span>
                <span class="c-text-color c-text-12">{{ item.version }}</span>
              </div>
              <div class="l-flex-RC">
                <span class="c-color c-text-12">{{ $t('apkManage.versionInfo') }}：</span>
                <span class="c-text-color c-text-12">{{ item.versionName }}</span>
              </div>
              <div class="l-flex-RC">
                <span class="c-color c-text-12">{{ $t('apkManage.model') }}：</span>
                <span class="c-text-color c-text-12">{{ item.model }}</span>
              </div>
              <div class="l-flex-RC">
                <span class="c-color c-text-12">{{ $t("advertManage.advertRule.createTime") }}：</span>
                <span class="c-text-color c-text-12">{{
                  Format_time(item.createDate)
                }}</span>
              </div>
            </div>
            <div class="rightCon">
              <template v-if="isDelete">
                <van-checkbox v-model="item.checked">{{ " " }}</van-checkbox>
              </template>
              <template v-else>
                <div @click="toEdit(item)" class="editBtn c-text-14">
                  {{ $t("advertManage.advertRule.edit") }}
                </div>
              </template>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 删除确认弹窗 -->
    <kDialog :dialogTitle="$t('advertManage.delPopTitle')" :cancelBtnTxt="$t('advertManage.cancelTxt')"
      :confirmBtnTxt="$t('advertManage.confirmDel')" ref="kDialogRef" :dialogContent="$t('advertManage.delPopContent')"
      @confirmclk="confirmClk">
    </kDialog>
  </div>
</template>

<script>
import { Format_time } from "@/common/js/utils";
import kDialog from "@/components/commom/kDialog/index.vue";
// 导入接口
import {
  Api_getPageApkInfo,
  Api_getDeletesApk,
} from "@/service/apkManage";
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";
import { styleUrl } from "../../common/js/utils";
export default {
  components: { sHeader, kDialog },
  setup() {
    const { t } = useI18n();
    // 删除确认弹窗
    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);
        }
      });
      let param = {
        ids,
      };
      Api_getDeletesApk(param).then((res) => {
        console.log(res);
        if (res.data.code === '00000') {
          isDelete.value = false;
          showToast(res.data.message);
          setTimeout(() => {
            onRefresh(1);
          }, 500);
        }
      });
    };
    // 是否删除状态
    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);
    // 分页
    const pageNo = ref(1);
    const pageSize = ref(20);
    let ruleData = reactive({
      tableData: [],
    });
    // 上拉刷新
    const loading = ref(true);
    const finished = ref(false);
    // 下拉刷新
    const refreshing = ref(false);
    onMounted(() => {
      // 加载样式
      styleUrl('apkManage');
      onRefresh();
    });
    // 下拉刷新
    const onRefresh = (idx) => {
      ruleData.tableData = [];
      // 解决请求两次问题
      if (!idx) {
        finished.value = false;
      }
      loading.value = true;
      // 初始化分页
      pageNo.value = 1;
      pageSize.value = 20;
      getList();
    };
    // 上拉加载
    const onLoad = () => {
      pageNo.value++;
      getList();
    };
    const getList = () => {
      let param = {
        current: pageNo.value,
        size: pageSize.value,
      };
      Api_getPageApkInfo(param).then((res) => {
        const { data } = res.data;
        refreshing.value = false;
        // 加入删除选中状态
        if (data.records.length > 0) {
          data.records.forEach((item) => {
            item.checked = false;
          });
        }
        ruleData.tableData.push(...data.records);
        // 加载状态结束
        loading.value = false;
        // 总共
        ruleTotal.value = data.total;
        if (ruleData.tableData.length >= data.total) {
          finished.value = true;
        }
      });
    };
    const router = useRouter();
    // 点击添加按钮
    const toAdd = () => {
      router.push("/apkManageAdd");
    };
    // 点击编辑
    const toEdit = (row) => {
      // 如果是删除模式，则是选中和取消状态
      if (isDelete.value) {
        ruleData.tableData.forEach((item) => {
          if (item.id === row.id) {
            item.checked = !item.checked;
          }
        });
      } else {
        router.push(`/apkManageAdd?row=${JSON.stringify(row)}`);
      }
    };
    return {
      pageNo,
      pageSize,
      loading,
      finished,
      refreshing,
      onRefresh,
      onLoad,
      getList,
      ...toRefs(ruleData),
      isDelete,
      selectTotals,
      cancelClk,
      ruleTotal,
      toAdd,
      confirmClk,
      kDialogRef,
      noticeClk,
      toEdit,
      Format_time,
    };
  },
};
</script>

<style lang="less" scoped></style>