<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="l-flex-RC">
              <div @click="reviewedClk" class="label3 o-mr-30">查看待审批的申请</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>
                  ritchie
                </div>
                <!-- 收款账号 -->
                <div class="itemRow">
                  <span class="itemTitle">收款账号:&nbsp;</span>
                  186....2721
                </div>
                <!-- 部门岗位 -->
                <div class="itemRow">
                  <span class="itemTitle">部门:&nbsp;</span>
                  研发部
                  <span class="itemTitle discount">岗位:&nbsp;</span>
                  软件工程师
                </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' && isOper">
                  <van-button span="5" round type="primary" style="
                        height: 2em;
                        padding: 0 1em;
                        margin: 0 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 0.5em;
                        background: rgb(25 137 250 / 20%);
                        color: #1989fa;
                      " @click="changeStatusFun(item, 1)">
                    通过
                  </van-button>
                </div>
                <!-- 审批状态 -->
                <!-- 确认状态 status：0 未确认...，1 已确认✓ -->
                <div class="itemRow" style="display: flex; justify-content: flex-end">
                  <span v-if="item.checkType === '0' && user.type > 1" style="color: #FFA500"> {{ $t('taskMessage.toBeApproved') }}</span>
                  <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>

    </div>
  </template>
  
  <script>
  import { onMounted, reactive, ref } from "vue";
  import sHeader from "@/components/SimpleHeader";
  import {
    getTaskProportionList,
    changeProportionStatus,
  } from "@/service/taskMessage";
  import { showFailToast } from "vant";
  import { getLoginUser, styleUrl } from "@/common/js/utils";
  import dateUtil from "@/utils/dateUtil";
  
  export default {
    components: { sHeader },
    setup() {
      
      const busiPopFieldName = reactive({
        text: "name",
        value: "id",
      });
      const kDialogRef = ref(null);
      const busiPopShow = ref(false);
      // 筛选条件
      const searchForm = reactive({
        merchantName: "",
        state: "",
        stateName: '',
      });
      // 点击状态输入框
      const busiInpClk = () => {
        busiPopShow.value = true;
      };
      const busiPopConfirm = ({ selectedOptions }) => {
        busiPopShow.value = false;
        searchForm.state = selectedOptions[0].id;
        searchForm.stateName = selectedOptions[0].name;
      };
    
      // 点击查询按钮
      const confirmClk = () => {
        isClkReview.value = false;
        searchGetList();
      };
      // 是否点击待审核
      const isClkReview = ref(true);
      // 点击查看待审核
      const reviewedClk = () => {
        isClkReview.value = true;
        // 改为未审核状态
        searchParams.type = "0";
        searchGetList();
      };
      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 () => {
        // 把弹窗的筛选条件组合到请求参数里面
        if (!isClkReview.value) {
          searchParams.type = searchForm.state;
        }
        searchParams.userName = searchForm.merchantName;
        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 {
          showFailToast(data.message);
        }
      };
      // 是否有操作的权限
      const isOper = ref(true);
      // 初始化页面获取列表
      onMounted(async () => {
        // 加载样式
        styleUrl('taskMessage');
        if (user) {
          searchParams.adminId = user.id;
          searchGetList();
          // 如果是type大于1，那么不能有操作的权限
          if (user.type > 1) {
            isOper.value = false;
          }
        }
      });
      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") {
          showFailToast("操作成功");
          searchGetList();
        } else {
          showFailToast(data.message);
        }
        console.log(data);
      };
      return {
        loading,
        error,
        finished,
        onLoad,
        alarmHistoryList,
        alarmHistoryTotal,
        showDateTime,
        changeStatusFun,
        kDialogRef,
        confirmClk,
        busiInpClk,
        busiPopConfirm,
        busiPopShow,
        searchForm,
        busiPopFieldName,
        reviewedClk,
        isOper,
        user,
      };
    },
  };
  </script>
  
  <style lang="less" scoped>
  @import "../../../common/style/common.less";
  </style>
  