<template>
  <view class="objectives-list">
    <view class="search">
      <view class="top-search">
        <view class="search-input">
          <uv-input
            v-model="searchParams.planName"
            :customStyle="customStyle"
            clearable
            shape="circle"
            placeholder="请输入"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #6eb657"
          ></uv-input>
        </view>
        <view class="search-button" @click="searchFn">搜索</view>
        <uv-icon name="plus-circle" color="#6eb657" size="24" />
      </view>
      <view class="search-content">
        <view
          class="search-list"
          @click="searchClick('consigneeId')"
          :class="searchParams.consigneeId ? 'active' : ''"
        >
          <text>承接对象</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.consigneeId ? '#6eb657' : '#111111'"
            size="14"
          />
        </view>
      </view>
    </view>

    <view class="list" v-if="hasInfo">
      <view class="item" v-for="item in listArr" :key="item.id">
        <view class="header">
          <view class="title">{{ item.scorePackageName }}</view>
          <view class="status">
            <text class="circle"></text>
            <text>{{ getPackageFinishName(item.packageFinishStatus) }}</text>
          </view>
        </view>
        <view class="content">
          <view class="txt"
            >分发对象：{{ getSelectSendPackageDeptIdName(item.sendPackageDeptId) }}</view
          >
          <view class="txt">所属月份：{{ item.belongDate }}</view>
          <view class="txt">分配日期：{{ item.allocationDate }}</view>
          <view class="progress">
            <uv-line-progress
              class="pro-two"
              round
              :showText="false"
              :percentage="item.finishRate"
              activeColor="#95dc7e"
              inactiveColor="#f8f8f0"
            ></uv-line-progress>
            <text>{{ item.finishRate }}%</text>
          </view>
          <view class="txt">{{ item.ysh }}/{{ item.score }}</view>
          <view class="btns">
            <view class="btn" @click.stop.prevent.self="generateReportFn(item)">
              <image src="@/static/images/icon/review-img2.png" class="image" />
              <text>生成报告</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <noData v-else />
    <!-- 选择承接对象 -->
    <uv-picker
      ref="pickerRef"
      :columns="csoList"
      keyName="gsmc"
      @confirm="pickerConfim"
    ></uv-picker>
  </view>
</template>

<script setup lang="ts">
import noData from '@/components/noData/index.vue'
import { ref } from 'vue'
import { onShow, onReachBottom } from '@dcloudio/uni-app'
import { getListApi, getSelectSendPackageDeptIdApi } from '@/service/modules/taskManagement'
import { getDictByNameApi } from '@/service/modules/getDict'

const customStyle = {
  backgroundColor: '#f6f6f6'
}

class Params {
  consigneeId = ''
  planName = ''
  total = -1
  current = 1
  size = 10
}

const searchParams = ref(new Params())

const hasInfo = ref(true)
const listArr = ref<any[]>([])
const getList = async () => {
  uni.showLoading()
  const res = await getListApi(searchParams.value)
  if (res.code === 0) {
    searchParams.value.total = res.data.total
    listArr.value = listArr.value.concat(res.data.records)
    searchParams.value.total = res.data.total
    hasInfo.value = !!listArr.value.length
  } else {
    hasInfo.value = false
  }
  uni.hideLoading()
}

onReachBottom(() => {
  if (listArr.value.length === searchParams.value.total) return
  searchParams.value.current++
  getList()
})

const packageFinishStatusList = ref<any[]>([])
const selectSendPackageDeptIdList = ref<any[]>([])
const getDict = () => {
  getDictByNameApi('package_finish_status').then(
    (res: any) => (packageFinishStatusList.value = res.data)
  )
  getSelectSendPackageDeptIdApi().then((res: any) => (selectSendPackageDeptIdList.value = res))
}

onShow(() => {
  listArr.value = []
  searchParams.value.current = 1
  getList()
  getDict()
})

const searchFn = () => {
  listArr.value = []
  searchParams.value.current = 1
  getList()
}

const getPackageFinishName = (packageFinishStatus: string) => {
  const curr = packageFinishStatusList.value.find((item: any) => item.value === packageFinishStatus)
  return curr?.label
}

const getSelectSendPackageDeptIdName = (sendPackageDeptId: string) => {
  const curr = selectSendPackageDeptIdList.value?.find(
    (item: any) => item.deptId === Number(sendPackageDeptId)
  )
  return curr?.name
}

const pickerRef = ref()
const show = ref(false)

const csoList = ref<any[]>([])

const searchClick = (type: string) => {
  if (type === 'consigneeId') {
    pickerRef.value.open()
  }
}

const pickerConfim = (e: any) => {
  searchParams.value.consigneeId = e.value[0].deptId
  searchFn()
}

const generateReportFn = (row: any) => {
  uni.navigateTo({
    url: `/pages-sub-service-mangement/generateReport/index?scorePackageId=${row.id}`
  })
}
</script>

<style lang="scss" scoped>
.objectives-list {
  padding: 24rpx 0;
  .search {
    position: fixed;
    width: 750rpx;
    padding: 0 30rpx;
    top: 0;
    height: 150rpx;
    background-color: #fff;
    z-index: 99;
    .top-search {
      display: flex;
      align-items: center;

      .search-input {
        width: 540rpx;
        height: 70rpx;
      }
      .search-button {
        color: #6eb657;
        font-size: 30rpx;
        margin: 0 10px;
        font-weight: 400;
      }
    }
    .search-content {
      margin-top: 24rpx;
      padding-bottom: 10rpx;
      display: flex;
      .search-list {
        display: flex;
        align-content: center;
        margin-right: 64rpx;
        height: 40rpx;
        text {
          font-weight: 500;
          line-height: 40rpx;
          font-size: 28rpx;
          color: #111111;
          margin-right: 8rpx;
        }
      }
      .active text {
        color: #6eb657;
      }
    }
  }

  .list {
    margin-top: 150rpx;
    padding: 0 30rpx;
    .item {
      margin-bottom: 20rpx;
      width: 100%;
      border-radius: 16rpx;
      box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.2);
      .header {
        background-color: #f8f8f0;
        padding: 26rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        .title {
          font-size: 32rpx;
          line-height: 45rpx;
          width: 70%;
          font-weight: 500;
          color: #333;
          word-wrap: break-word;
        }
        .status {
          .circle {
            display: block;
            border-radius: 50%;
            background-color: #72b25b;
            margin-right: 10rpx;
            width: 15rpx;
            height: 15rpx;
          }
          display: flex;
          align-items: center;
          color: #72b25b;
        }
      }
      .content {
        padding: 20rpx;
        .txt {
          font-weight: 400;
          color: #999;
          font-size: 22rpx;
          line-height: 30rpx;
          margin-bottom: 16rpx;
        }
        .progress {
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;
          .pro-two {
            width: 80%;
          }
          text {
            margin-left: 10px;
            color: #010101;
            font-size: 26rpx;
            line-height: 36rpx;
          }
        }
        .btns {
          margin-top: 30rpx;
          display: flex;

          .btn {
            display: flex;
            align-items: center;
            height: 34rpx;

            .image {
              width: 28rpx;
              height: 28rpx;
              margin-right: 12rpx;
            }
            text {
              color: #6eb657;
              font-size: 24rpx;
              line-height: 34rpx;
            }
          }
        }
      }
    }
  }
}
</style>
