<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
          class="search-list"
          @click="searchClick('period')"
          :class="searchParams.period.length ? 'active' : ''"
        >
          <text>创建日期</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.period.length ? '#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.planName }}</view>
          <view class="status">
            <text class="circle"></text>
            <text>{{ getStatusName(item.planState) }}</text>
          </view>
        </view>
        <view class="content">
          <view class="txt">承接对象：{{ item.consigneeInfo.consigneeName }}</view>
          <view class="txt">目标周期：{{ item.planIssue + ' 至 ' + item.planExpiry }}</view>
          <view class="txt">创建日期：{{ item.createTime }}</view>
          <view class="progress">
            <uv-line-progress
              class="pro-two"
              round
              :showText="false"
              :percentage="item.percentage"
              activeColor="#95dc7e"
              inactiveColor="#f8f8f0"
            ></uv-line-progress>
            <text>{{ item.percentage }}%</text>
          </view>
          <view class="txt">{{ item.execScoreValue }}/{{ item.planScore }}</view>
          <view class="btns">
            <!-- 区域管理员 -->
            <template v-if="isYQGLY">
              <!-- 分发 -->
              <template v-if="item.parentId != '0' && item.planState === 'INIT'">
                <view class="btn" @click="toDetail(4, item)">
                  <image src="@/static/images/icon/review-img2.png" class="image" />
                  <text>分发审核</text>
                </view>
              </template>
            </template>
            <!-- 区域管理员 | 一级cso -->
            <template v-if="isDLSGLY">
              <!-- 拆解审核 -->
              <template v-if="item.planDetails && !item.planDetails.cktMsg1">
                <view class="btn" @click="toDetail(7, item)">
                  <image src="@/static/images/icon/review-img.png" class="image" />
                  <text>拆解审核</text>
                </view>
              </template>
            </template>
            <!-- 商务组-->
            <template v-if="isSWZ">
              <!-- 拆解审核 -->
              <template
                v-if="item.planDetails && item.planDetails.cktMsg1 && !item.planDetails.cktMsg2"
              >
                <view class="btn" @click="toDetail(7, item)">
                  <image src="@/static/images/icon/review-img.png" class="image" />
                  <text>拆解审核</text>
                </view>
              </template>
            </template>
            <!-- 事业部-->
            <template v-if="isSYB">
              <!-- 拆解审核 -->
              <template
                v-if="
                  item.planDetails &&
                  item.planDetails.cktMsg1 &&
                  item.planDetails.cktMsg2 &&
                  !item.planDetails.cktMsg3
                "
              >
                <view class="btn" @click="toDetail(7, item)">
                  <image src="@/static/images/icon/review-img.png" class="image" />
                  <text>拆解审核</text>
                </view>
              </template>
            </template>
            <!-- 数据统计 -->
            <template v-if="item.planDetails">
              <view class="btn" @click.stop.prevent.self="toDetail(6, item)">
                <image src="@/static/images/icon/dismantle-img2.png" class="image" />
                <text>数据统计</text>
              </view>
            </template>

            <!-- 编辑按钮 -->
            <template v-if="isDLSGLY && item.parentId != '0'">
              <view class="btn" @click.stop.prevent.self="toEdit(item)">
                <text :class="{ disabled: editDisabled(item) }">编辑</text>
              </view>
            </template>
          </view>
        </view>
      </view>
    </view>
    <noData v-else />
    <!-- 选择承接对象 -->
    <uv-picker
      ref="pickerRef"
      :columns="csoList"
      keyName="gsmc"
      @confirm="pickerConfim"
    ></uv-picker>
    <!-- 月份范围 -->
    <KDatePicker v-model="show" type="month" is-range @change="getDate" formatter="YYYY-MM-DD" />
  </view>
</template>

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

const loginStore = useLoginStore()
let userInfo: any = loginStore.currentUserInfo
const roles: number[] = userInfo.roles

const customStyle = {
  backgroundColor: '#f6f6f6'
}

const searchInfoDetail = ref()

onLoad((e: any) => {
  const searchInfo = JSON.parse(e?.searchInfo)
  searchInfo.planId = e?.id
  searchInfoDetail.value = searchInfo
})

class Params {
  consigneeId = ''
  period = [] as string[]
  planName = ''
  total = -1
  current = 1
  size = 10
}

const searchParams = ref(new Params())

const hasInfo = ref(true)
const listArr = ref<any[]>([])

const getList = async (searchInfo: any) => {
  uni.showLoading()
  const res = await getPlanChildrenApi(searchInfo)
  if (res.code === 0 && res.data) {
    res.data?.forEach((item: any) => {
      if (typeof item.execScoreValue === 'number' && typeof item.planScore === 'number') {
        let value: any = (item.execScoreValue / item.planScore).toFixed(2)
        item.percentage = value * 100
      }
    })
    listArr.value = res.data
  }
  hasInfo.value = !!listArr.value.length
  uni.hideLoading()
}

onReachBottom(() => {
  if (listArr.value.length === searchParams.value.total) return
  searchParams.value.current++
  // getList()
})
const csoList = ref<any[]>([])
const implPlanStateList = ref<any[]>([])
const getDict = async () => {
  getDictByNameApi('impl_plan_state').then((res: any) => (implPlanStateList.value = res.data))
  getListCsoApi().then((res: any) => (csoList.value = [res.data]))
}
const getCsoName = (consigneeId: number) => {
  const curr = csoList.value[0]?.find((item: any) => item.deptId === consigneeId)
  return curr?.gsmc
}
const getStatusName = (planState: string) => {
  const curr = implPlanStateList.value?.find((item: any) => item.value === planState)
  return curr?.label
}

// 营销中心
const isYXZX = ref(false)
// 药企管理员
const isYQGLY = ref(false)
// 区域管理员
const isDLSGLY = ref(false)
// 商务组
const isSWZ = ref(false)
// 事业部分管领导
const isSYB = ref(false)

onShow(() => {
  // 营销中心
  if (roles.includes(38)) {
    isYXZX.value = true
  }
  // 药企管理员
  if (roles.includes(3)) {
    isYQGLY.value = true
  }
  // 区域管理员
  if (roles.includes(4)) {
    isDLSGLY.value = true
  }
  // 商务组
  if (roles.includes(40)) {
    isSWZ.value = true
  }
  // 事业部
  if (roles.includes(41)) {
    isSYB.value = true
  }
  listArr.value = []
  getDict()
  searchParams.value.current = 1
  getList(searchInfoDetail.value)
})

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

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

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

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

const getDate = (e: any[]) => {
  if (!e[1]) return
  searchParams.value.period = e
  show.value = false
  searchFn()
}

const toDetail = (type: number, row?: any) => {
  uni.navigateTo({
    url: `/pages-sub-admin/objectivesAdd/index?&type=${type}&planId=${row.planId}`
  })
}

const editDisabled = (item: any) => {
  // 下发的一级包状态
  if (item.parentId == 0) {
    if (item.planType === 'ANN') {
      let flag = item.planState === 'INIT' || item.planState === 'REJECTED'
      return !flag
    } else if (item.planType === 'QRT') {
      let flag = item.children && item.children.length > 0
      return flag
    }
  } else {
    let flag = item.planState === 'INIT' || item.planState === 'REJECTED'
    return !flag
  }
}
// 编辑
const toEdit = (item: any) => {
  const flag = editDisabled(item)
  if (flag) return

  const type = item.parentId == 0 ? 1 : 3
  uni.navigateTo({
    url: `/pages-sub-admin/objectivesAdd/index?&type=${type}&btnType=1&planId=${item?.planId}`
  })
}
</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;
            }
            .disabled {
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>
