<template>
  <!-- 分销申请审批 -->
  <div class="taskMessagePage flex-col">
    <s-header :name="'分销申请审批'" :noback="false"></s-header>
    <div class="taskMessageBox flex-col">
      <van-list
        v-model:loading="loading"
        v-model:error="error"
        error-text="请求失败，点击重新加载"
        :finished="finished"
        finished-text="没有更多了"
        offset="300"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <div class="flex-col outer4 proportionIcon"></div>
              <span class="flex-col txt2"
                >共<span class="discountNumber">{{ alarmHistoryTotal }}</span
                >条记录</span
              >
            </div>
          </div>
          <div class="flex-col">
            <div class="main5 flex-row justify-between" @click="searchClick">
              <img class="label2" src="../../../assets/device/searchIcon.png" />
              <div class="TextGroup2 flex-col">
                <span class="txt3">搜索</span>
              </div>
            </div>
          </div>
        </div>
        <div class="listBox">
        <div
          v-for="(item, index) in alarmHistoryList"
          :key="index"
          class="listItem"
        >
          <div class="itemBox">
            <div class="itemRow"><span class="itemTitle">设备名称:&nbsp;</span>{{item.clientId}}</div>
            <div class="itemRow" v-if='item.type >= 1' ><span class="itemTitle">合作商:&nbsp;</span>{{item.agencyName}}<span class="itemTitle discount">比例:&nbsp;</span>{{item.agencyProportion}}%</div>
            <div class="itemRow" v-if='item.type >= 2' ><span class="itemTitle">合作商:&nbsp;</span>{{item.merchantName}}<span class="itemTitle discount">比例:&nbsp;</span>{{item.merchantProportion}}%</div>
            <div class="itemRow" v-if='item.type >= 3' ><span class="itemTitle">合作商:&nbsp;</span>{{item.personageName}}<span class="itemTitle discount">比例:&nbsp;</span>{{item.personageProportion}}%</div>
            <div class="itemRow"><span class="itemTitle">申请时间:&nbsp;</span>{{showDateTime(item.createDate)}}</div>
            <div class="itemRow" v-if='item.checkType !== "0"' ><span class="itemTitle">审批时间:&nbsp;</span>{{showDateTime(item.modifyDate)}}</div>
            <div class="itemRow" style="display: flex; justify-content: flex-end;" v-if='item.checkType === "0"'>
              <van-button
                span="5"
                round
                type="primary"
                style="height: 2em; padding: 0 1em; margin: 0 .5em; background: rgb(255 0 0 / 20%); color: #ff0000; border-color: #ff0000;"
                @click="changeStatusFun(item, 3)"
              >
                不通过
              </van-button>
              <van-button
                span="5"
                round
                type="primary"
                style="height: 2em; padding: 0 1em; margin: 0 .5em; background: rgb(25 137 250 / 20%); color: #1989fa;"
                @click="changeStatusFun(item, 1)"
              >
                通过
              </van-button>
            </div>
            <div class="itemRow" style="display: flex; justify-content: flex-end;" v-if='item.checkType !== "0"'>
              <span v-if='item.checkType === "1"' style="color: #1989fa;" >通过</span>
              <span v-if='item.checkType === "2"' style="color: #ff0000;" >取消</span>
              <span v-if='item.checkType === "3"' style="color: #ff0000;" >不通过</span>
            </div>
          </div>
        </div>
      </div>
      </van-list>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from 'vue';
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";
import { getTaskProportionList, changeProportionStatus } from "@/service/taskMessage";
import { Toast } from "vant";
import { getLoginUser } from "@/common/js/utils";
import dateUtil from "@/utils/dateUtil";

export default {
  components: { sHeader, navBar },
  setup() {
    const user = getLoginUser();
    const loading = ref(false); // 加载状态
    const error = ref(false); // 错误状态
    const finished = ref(false); // 结束翻页状态
    const alarmHistoryList = ref([]); // 列表集合
    const alarmHistoryTotal = ref(0); // 列表总数
    let searchParams = reactive({
      adminId: '', // 当前登录账户的id
      type: '1', // 审核状态 未审核_0；全部_1
      current: 1, // 当前页
      size: 20, // 页大小
      username: '', // 商家名称
    });
    // 滚动加载
    const onLoad = () => { if (!finished.value) { searchParams.current = searchParams.current + 1; getList(); } };
    // 查询列表
    const searchGetList = () => {
      alarmHistoryList.value = [];
      searchParams.current = 1;
      getList();
    };
    // 获取设备初始化审批列表数据
    const getList = async () => {
      const { data } = await getTaskProportionList(Object.assign({}, searchParams));
      if (data.code === "00000") {
        // 列表值叠加
        alarmHistoryList.value = alarmHistoryList.value.concat(data.data.records);
        alarmHistoryTotal.value = data.data.total;
        if (alarmHistoryList.value.length === data.data.total) {finished.value = true;}
        loading.value = false;
        console.log(alarmHistoryList);
      } else {Toast.fail(data.message);}
    };
    // 初始化页面获取列表
    onMounted(async () => {
      if (user) {
        searchParams.adminId = '1';
        searchGetList();
      }
    });
    const showDateTime = (date) => { return date ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss") : ""; };
    const changeStatusFun = async (item, type) => {
      const { data } = await changeProportionStatus({id: item.id, type: type});
      if (data.code === '00000') {
        Toast.fail('操作成功');
        searchGetList();
      } else { Toast.fail(data.message); }
      console.log(data);
    }
    return {
      loading,
      error,
      finished,
      onLoad,
      alarmHistoryList,
      alarmHistoryTotal,
      showDateTime,
      changeStatusFun,
    };
  }
};
</script>

<style lang="less" scoped>
@import "../../../common/style/common.less";
@import "../index.less";
</style>
