<template>
  <view class="objectives-list">
    <view class="search">
      <view class="top-search">
        <view class="search-input">
          <uv-input
            v-model="searchParams.scorePackageName"
            :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" @click="addFn" />
      </view>
      <view class="search-content">
        <view
          class="search-list"
          @click="searchClick('acceptSug')"
          :class="searchParams.acceptSug ? 'active' : ''"
        >
          <text>承接对象</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.acceptSug ? '#6eb657' : '#111111'"
            size="14"
          />
        </view>
        <view
          class="search-list"
          @click="searchClick('period')"
          :class="searchParams.allocationDate ? 'active' : ''"
        >
          <text>创建日期</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.allocationDate ? '#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>{{ getStatusName(item.packageFinishStatus) }}</text>
          </view>
        </view>
        <view class="content">
          <view class="txt">承接对象：{{ getCsoName(Number(item.acceptSug)) }}</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="toDetail(2, item)">
              <image src="@/static/images/icon/detail.png" class="image" />
              <text>查看</text>
            </view>
            <view class="btn" @click.stop.prevent.self="toDetail(3, item)">
              <image src="@/static/images/icon/edit.png" class="image" />
              <text>编辑</text>
            </view>
            <view class="btn" @click.stop.prevent.self="stopBtn(item)">
              <image src="@/static/images/icon/close.png" class="image" />
              <text>终止</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <noData v-else />
    <!-- 选择承接对象 -->
    <uv-picker
      :cancelText="searchParams.acceptSug ? '清空' : '取消'"
      ref="pickerRef"
      :columns="csoList"
      keyName="gsmc"
      @confirm="pickerConfim"
      @cancel="pickerCancel"
    ></uv-picker>
    <!-- 月份范围 -->
    <KDatePicker
      v-model="show"
      type="day"
      :confirmText="searchParams.allocationDate.length ? '清除' : '确定'"
      is-range
      @change="getDate"
      formatter="YYYY-MM-DD"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onReachBottom } from '@dcloudio/uni-app'
import { getListCsoApi } from '@/service/modules/objectivesList'
import { getListApi } from '@/service/modules/serviceDelivery'
import { getDictByNameApi } from '@/service/modules/getDict'
import KDatePicker from '@/components/dateSelect/k-date-picker/KDatePicker.vue'
import noData from '@/components/noData/index.vue'

const customStyle = {
  backgroundColor: '#f6f6f6'
}

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

class Params {
  acceptSug = ''
  scorePackageName = ''
  total = -1
  current = 1
  allocationDate = ''
  endLabelDate = ''
  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)
    hasInfo.value = !!listArr.value.length
  }
  uni.hideLoading()
}

const csoList = ref<any[]>([])
const packageFinishStatusList = ref<any[]>([])
const getDict = async () => {
  getDictByNameApi('package_finish_status').then(
    (res: any) => (packageFinishStatusList.value = res.data)
  )
  getListCsoApi().then((res: any) => (csoList.value = [res.data]))
}
const getCsoName = (acceptSug: number) => {
  const curr = csoList.value[0]?.find((item: any) => item.id === acceptSug)
  return curr?.gsmc
}
const getStatusName = (planState: string) => {
  const curr = packageFinishStatusList.value?.find((item: any) => item.value === planState)
  return curr?.label
}

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

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

const searchClick = (type: string) => {
  if (type === 'acceptSug') {
    pickerRef.value.open()
  } else {
    show.value = true
  }
}

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

const pickerCancel = () => {
  if (searchParams.value.acceptSug) {
    searchParams.value.acceptSug = ''
    searchFn()
  }
}

const getDate = (e: any[]) => {
  if (searchParams.value.allocationDate && searchParams.value.endLabelDate) {
    searchParams.value.allocationDate = ''
    searchParams.value.endLabelDate = ''
  } else {
    searchParams.value.allocationDate = e[0]
    searchParams.value.endLabelDate = e[1]
  }

  show.value = false
  searchFn()
}

onReachBottom(() => {
  if (listArr.value.length === searchParams.value.total) return
  searchParams.value.current++
  getList()
})
const addFn = () => {
  uni.navigateTo({
    url: '/pages-sub-service-mangement/serviceDeliveryAdd/index?&type=1'
  })
}

const toDetail = (type: number, row: any) => {
  if (type === 3) {
    if (['1', '2'].includes(row.packageFinishStatus)) {
      return uni.showToast({
        title: '当前执行包无法编辑',
        icon: 'none'
      })
    }
  }
  uni.navigateTo({
    url: `/pages-sub-service-mangement/serviceDeliveryAdd/index?&type=${type}&id=${row.id}`
  })
}
//
const stopBtn = (row: any) => {
  uni.navigateTo({
    url: `/pages-sub-service-mangement/stopServiceDelivery/index?type=${1}&id=${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;
            margin-right: 36rpx;

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