<template>
  <view class="mch-index-page">
    <HeaderBar title="任务接单" icon="/static/logo.png" />
    <!-- <StatusBar /> -->
    <!-- <view class="mch-name">
      {{mch.name}}
      <uni-icons type="arrowright" size="20" color="#999" />
    </view> -->
    <view class="main-content">
      <view class="top-banner">
        <image src="https://api.ccttiot.com/Mask%20group-1745760161341.png" class="banner-img" mode="widthFix" />
        <view class="banner-text">
          <view class="banner-title">我的任务<br/>就是</view>
          <button class="banner-btn" @click="goToOrder">立即查看</button>
        </view>
      </view>
      <!-- 公告栏 -->
      <uni-notice-bar
        v-if="noticeText"
        :text="noticeText"
        background-color="#eaf3ff"
        color="#3478f6"
        show-icon
        single
        :font-size="28"
        style="margin-bottom: 24rpx;"
      />
      <view class="func-area">
        <view class="func-card order" @click="goToOrder">
          <image src="https://api.ccttiot.com/Frame%2024-1746427467613.png" class="func-img" mode="aspectFit" />
          <view class="func-info">
            <text class="func-title">我要接单</text>
            <text class="func-desc">快速接单平台</text>
          </view>
        </view>
        <view class="func-card service" @click="goToService">
          <image src="https://api.ccttiot.com/Frame%2024%20(1)-1746427444692.png" class="func-img" mode="aspectFit" />
          <view class="func-info">
            <text class="func-title">我的客服</text>
            <text class="func-desc">管理商户客服</text>
          </view>
        </view>
      </view>
      <!-- 任务大厅 -->
      <view class="task-hall">
        <view class="task-hall-header">
          <text class="task-hall-title">任务大厅</text>
          <text class="task-hall-refresh" @click="getTaskList">刷新</text>
        </view>
        <TaskCard
          v-for="item in taskList"
          :key="item.id"
          :task="item"
          mode="mch"
          @detail="goToTaskDetail"
          @refresh="getTaskList"
        />

        <uni-load-more :status="loadStatus(loading, taskList.length, total)" />
      </view>
    </view>
    <FooterTabBar :active="'/pages/mch/index'" mode="mch" />
  </view>
</template>

<script>
import StatusBar from '@/components/StatusBar.vue'
import HeaderBar from '@/components/HeaderBar.vue'
import FooterTabBar from '@/components/FooterTabBar.vue'
import TaskCard from '@/pages/task/components/TaskCard.vue'
import { mchGetHallTask } from '@/api/mch/task'
import { $loadList } from '@/utils/mixins';
import { getMchDetail } from '@/api/app/mch'
import { mapGetters } from 'vuex'

export default {
  name: 'MchIndex',
  mixins: [$loadList],
  components: {
    StatusBar,
    HeaderBar,
    FooterTabBar,
    TaskCard,
  },
  data() {
    return {
      noticeText: '',
      taskList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      total: null,
      loading: false,
      mch: {}
    }
  },
  computed: {
    ...mapGetters(['mchId'])
  },
  onLoad() {
    this.getTaskList();
    this.getMchInfo();
  },
  onReachBottom() {
    this.loadTaskList()
  },
  methods: {
    getMchInfo() {
      getMchDetail(this.mchId).then(res => {
        this.mch = res.data;
      })
    },
    /**
     * 跳转到接单管理页面
     */
    goToOrder() {
      uni.navigateTo({ url: '/pages/task/index?mode=mch' })
    },
    /**
     * 跳转到客服页面
     */
    goToService() {
      uni.navigateTo({ url: '/pages/mchCustom/index' })
    },
    /**
     * 跳转任务大厅页面
     */
    goToTaskHall() {
      uni.navigateTo({ url: '/pages/task/index?mode=mch' })
    },
    /**
     * 跳转任务详情
     */
    goToTaskDetail(id) {
      uni.navigateTo({ url: `/pages/task/detail?id=${id}&mode=mch` })
    },
    /**
     * 获取公告
     */
    getNotice() {
      // listNotice({ pageNum: 1, pageSize: 1 }).then(res => {
      //   if (res.rows && res.rows.length) {
      //     this.noticeText = res.rows[0].noticeTitle
      //   }
      // })
    },
    /**
     * 获取任务大厅任务
     */
    getTaskList() {
      this.queryParams.pageNum = 0;
      this.queryParams.mchId = this.$store.getters.mchId;
      this.total = null;
      this.loading = false;
      this.taskList = [];
      this.loadTaskList();
    },
    loadTaskList() {
      this.loadMore(() => {
        this.loading = true;
        this.queryParams.pageNum++;
        mchGetHallTask(this.queryParams).then(res => {
          this.taskList.push(...res.rows);
          this.total = res.total;
        }).finally(() => {
          this.loading = false;
        })
      }, this.loadStatus(this.loading, this.taskList.length, this.total))
    }
  }
}
</script>

<style lang="scss" scoped>
.mch-index-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #e6f0ff 0%, #f8fbff 100%);
  padding-bottom: 120rpx;
}
.main-content {
  padding: 0 24rpx 0 24rpx;
}
.top-banner {
  position: relative;
  width: 100%;
  border-radius: 24rpx;
  overflow: hidden;
  margin-bottom: 32rpx;
  background: #e6f0ff;
  .banner-img {
    width: 100%;
    display: block;
    border-radius: 24rpx;
  }
  .banner-text {
    position: absolute;
    left: 0;
    top: 0;
    bottom:0;
    margin: auto;
    width: 100%;
    height: fit-content;
    padding-left: 32rpx;
    z-index: 2;
    pointer-events: none;
    .banner-title {
      font-size: 44rpx;
      color: #3478f6;
      margin-bottom: 16rpx;
      text-shadow: 0 2rpx 8rpx #fff;
    }
    .banner-btn {
      width: fit-content;
      background: #3478f6;
      color: #fff;
      border-radius: 32rpx;
      font-size: 28rpx;
      padding: 4rpx 32rpx;
      line-height: 1.8em;
      border: none;
      pointer-events: auto;
      margin-left: 0;
    }
  }
}
.func-area {
  display: flex;
  gap: 24rpx;
  .func-card {
    flex: 1;
    background: #fff;
    border-radius: 20rpx;
    padding: 32rpx 24rpx;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2rpx 8rpx #e6f0ff;
    transition: box-shadow 0.2s;
    &:active {
      box-shadow: 0 4rpx 16rpx #d0e2ff;
    }
    &.order {
      background: linear-gradient(180deg, #e6f0ff 0%, #d2eaff 100%);
    }
    &.service {
      background: linear-gradient(180deg, #fff7e6 0%, #ffe9c2 100%);
    }
    .func-img {
      width: 100rpx;
      height: 100rpx;
      margin-right: 24rpx;
    }
    .func-info {
      display: flex;
      flex-direction: column;
      .func-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #000000CC;
        margin-bottom: 8rpx;
      }
      .func-desc {
        font-size: 24rpx;
        color: #888;
      }
    }
  }
}
.task-hall {
  border-radius: 20rpx;
  margin-top: 32rpx;
  padding: 24rpx 0 0 0;
  .task-hall-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    .task-hall-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #3478f6;
    }
    .task-hall-refresh {
      font-size: 26rpx;
      color: #fff;
      cursor: pointer;
      background: #3478f6;
      padding: 8rpx 24rpx;
      border-radius: 32rpx;
    }
    .task-hall-more {
      font-size: 26rpx;
      color: #888;
      cursor: pointer;
    }
  }
  .task-hall-empty {
    text-align: center;
    color: #bbb;
    font-size: 28rpx;
    padding: 32rpx 0;
  }
}
.mch-name {
  font-size: 40rpx;
  line-height: 100rpx;
  font-weight: bold;
  color: #333;
  text-align: left;
  padding-left: 36rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>