<template>
  <view class="service-reviewed">
    <view class="reviewed-header">
      <view class="search-content">
        <view
          class="search-list"
          :class="{ current: searchParams.year }"
          @click="searchClick('year')"
        >
          <text>执行包年度</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.year ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.quarter }"
          @click="searchClick('quarter')"
        >
          <text>执行包季度</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.quarter ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.createTime }"
          @click="searchClick('createTime')"
        >
          <text>服务提交时间</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.createTime ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.taskTypeId }"
          @click="searchClick('taskTypeId')"
        >
          <text>服务类型</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.taskTypeId ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.vendorId }"
          @click="searchClick('vendorId')"
        >
          <text>服务供应商</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.vendorId ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.salesId }"
          @click="searchClick('salesId')"
        >
          <text>代表姓名</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.salesId ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.mahName }"
          @click="searchClick('mahName')"
        >
          <text>产品所属生产企业</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.mahName ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.skuId }"
          @click="searchClick('skuId')"
        >
          <text>关联产品名称</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.skuId ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.provAbbr }"
          @click="searchClick('provAbbr')"
        >
          <text>执行包所属省份</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.provAbbr ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
        <view
          class="search-list"
          :class="{ current: searchParams.pkgIds }"
          @click="searchClick('pkgIds')"
        >
          <text>上游服务部名称</text>
          <uv-icon
            name="arrow-down-fill"
            :color="searchParams.pkgIds ? '#6eb657' : '#000'"
            size="12"
          ></uv-icon>
        </view>
      </view>
      <view class="clear" @click="clearSearch">
        <uv-icon name="close-circle" color="#000" size="24"></uv-icon>
      </view>
    </view>
    <view class="list" v-if="hasInfo" :class="{ hidden: showRef }">
      <view class="item" v-for="item in dataList" :key="item.id" @click="onDetail(item)">
        <view class="top">
          <view class="top-l">
            <image src="@/static/images/icon/review.png" class="image" />
            <text>{{ item.createTime }}</text>
          </view>
          <view class="top-r">
            <text></text>
            <view class="status">{{
              item.taskStatus === '2'
                ? '待服务商审核'
                : item.taskStatus === '3'
                  ? '审核通过'
                  : item.taskStatus === '4'
                    ? '审核拒绝'
                    : ''
            }}</view>
          </view>
        </view>
        <view class="content">
          <view class="title">
            <view class="task-name">{{ getTaskName(item) }}</view>
            <view class="score">+{{ item.taskScore }}积分</view>
          </view>
          <view class="item-detail">
            <view class="num"> 任务编号：{{ item.taskNumber }} </view>
            <view class="detail" @click.stop.self="getDetail(item)">
              <uv-icon size="16" name="eye" color="#999"></uv-icon>
              <text>审核详情</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <noData v-else />
    <!-- 展示历史审核信息 -->
    <uv-popup ref="popupRef" round="15" closeable @change="popupChange">
      <view class="history">
        <view class="header">
          <view class="title">审核详情</view>
        </view>
        <view class="his-list">
          <view class="his-item" v-for="(item, index) in hisList" :key="index">
            <view class="his-text">
              <text class="label">审核人：</text>
              <text>{{ item.checker }}</text>
            </view>
            <view class="his-text">
              <text class="label">审核时间：</text>
              <text>{{ item.checkTime }}</text>
            </view>
            <view class="his-text">
              <text class="label">审核状态：</text>
              <text>{{ item.checkResult }}</text>
            </view>
            <view class="his-text">
              <text class="label">审核原因：</text>
              <text>{{ item.checkMessage }}</text>
            </view>
          </view>
        </view>
      </view>
    </uv-popup>
    <!-- 选择器内容 -->
    <uv-datetime-picker
      ref="datetimeRef"
      :mode="datetimePickerMode"
      @confirm="confirm"
    ></uv-datetime-picker>
    <!-- 内容选择器 -->
    <uv-action-sheet ref="actionSheetRef" :actions="list" @select="confirm"> </uv-action-sheet>

    <!--  -->
    <uv-picker
      ref="pickerRef"
      :columns="[pickerColumns]"
      :keyName="pickerLabel"
      @confirm="confirm"
    ></uv-picker>
  </view>
</template>

<script setup lang="ts">
import {
  getTaskV2PageCheckedApi,
  getTaskTypeAvailApi,
  getDeptv2Avail,
  getTaskV2CheckHisApi,
  getUserV2Avail,
  getDrug2Avail,
  getPkgV2Api
} from '@/service/modules/serviceReviewed'

import abbreviationsProvinces from '@/utils/abbreviationsProvinces'
import { getDictByNameApi } from '@/service/modules/getDict'
import dayjs from 'dayjs'
import { ref, reactive, onMounted } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import noData from '@/components/noData/index.vue'
const params = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

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

const dict = reactive({
  taskTypeAvailArr: [],
  deptListArr: [],
  userListArr: [],
  mahNameArr: [],
  drugListArr: [],
  currDrugList: [],
  relPkgNameArr: [] as any[]
})

const showRef = ref(false)
const popupChange = (e) => {
  showRef.value = e.show
}

const getDictFn = () => {
  getTaskTypeAvailApi().then((res) => (dict.taskTypeAvailArr = res.data))
  getDeptv2Avail().then((res) => (dict.deptListArr = res.data))
  getUserV2Avail().then((res) => (dict.userListArr = res.data))
  getDictByNameApi('mah_name').then((res: any) => (dict.mahNameArr = res.data))
  getDrug2Avail().then((res: any) => (dict.drugListArr = res.data))
  getPkgV2Api().then((res) => {
    let arr: any[] = []
    let data = res.data
    for (let key in data) {
      let obj = {
        label: key,
        value: data[key]
      }
      arr.push(obj)
    }
    dict.relPkgNameArr = arr
  })
}
const getDatalist = async () => {
  const obj = Object.assign({
    current: params.currentPage,
    size: params.pageSize,
    taskStatus: 3,
    ...searchParams.value
  })
  uni.showLoading({
    title: '正在获取数据'
  })
  const res = await getTaskV2PageCheckedApi(obj)
  if (res.code === 0) {
    params.total = res.data.total
    dataList.value = dataList.value.concat(res.data.records)
    hasInfo.value = !!dataList.value.length
    uni.hideLoading()
  }
  uni.hideLoading()
}

const onDetail = (row: any) => {
  console.log('rwo', row)

  uni.navigateTo({
    url: `/pages-sub-service-mangement/taskAuditDetail/index?id=${row.taskId}&type=1&show=false`
  })
}
const getTaskName = (row: any) => {
  const taskTypeId = row.taskTypeId
  const curr: any = dict.taskTypeAvailArr.find((iten: any) => iten.id === taskTypeId)
  return curr ? curr.name : ''
}
const hisList = ref<any[]>([])
const popupRef = ref()

const getDetail = async (item: any) => {
  hisList.value = []
  const res = await getTaskV2CheckHisApi({ taskId: item.taskId })
  if (res.code === 0) {
    hisList.value = res.data
    popupRef.value.open()
  }
}

class SearchParams {
  year = ''
  quarter = ''
  createTime = ''
  taskTypeId = ''
  vendorId = ''
  salesId = ''
  mahName = ''
  skuId = ''
  provAbbr = ''
  pkgIds = ''
}

const searchParams = ref(new SearchParams())

const clearSearch = () => {
  searchParams.value = new SearchParams()
  const lastYear = dayjs().subtract(1, 'year').format('YYYY')
  searchParams.value.year = lastYear
  init()
}

const currType = ref('')
const datetimeRef = ref()
const datetimePickerMode = ref('')

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

let quarterList = [
  { name: '第一季度', value: '1' },
  { name: '第二季度', value: '2' },
  { name: '第三季度', value: '3' },
  { name: '第四季度', value: '4' }
]

const actionSheetRef = ref()

const pickerRef = ref()
const pickerColumns = ref<any[]>([])
const pickerLabel = ref('')
const searchClick = (type: string) => {
  currType.value = type
  switch (type) {
    case 'year':
      datetimePickerMode.value = 'year'
      datetimeRef.value.open()
      break
    case 'quarter':
      list.value = quarterList
      actionSheetRef.value.open()
      break
    case 'createTime':
      datetimePickerMode.value = 'date'
      datetimeRef.value.open()
      break
    case 'taskTypeId':
      pickerColumns.value = dict.taskTypeAvailArr
      pickerLabel.value = 'name'
      pickerRef.value.open()
      break
    case 'vendorId':
      pickerColumns.value = dict.deptListArr
      pickerLabel.value = 'name'
      pickerRef.value.open()
      break
    case 'salesId':
      pickerColumns.value = dict.userListArr
      pickerLabel.value = 'realName'
      pickerRef.value.open()
      break
    case 'mahName':
      pickerColumns.value = dict.mahNameArr
      pickerLabel.value = 'label'
      pickerRef.value.open()
      break

    case 'skuId':
      // 选择关联产品 需要先选择生产企业
      const name = searchParams.value.mahName
      if (!name) {
        return uni.showToast({
          title: '请先选择生产企业',
          icon: 'none'
        })
      }
      const currList = dict.drugListArr[name]
      dict.currDrugList = currList
      pickerColumns.value = dict.currDrugList
      pickerLabel.value = 'drugName'
      pickerRef.value.open()
      break
    case 'provAbbr':
      pickerColumns.value = abbreviationsProvinces
      pickerRef.value.open()
      break
    case 'pkgIds':
      pickerColumns.value = dict.relPkgNameArr
      pickerLabel.value = 'label'
      pickerRef.value.open()
      break

    default:
      break
  }
}
const confirm = (e: any) => {
  switch (currType.value) {
    case 'year':
      searchParams.value.year = dayjs(e.value).format('YYYY')
      break
    case 'quarter':
      searchParams.value.quarter = e.value
      break
    case 'createTime':
      searchParams.value.createTime = dayjs(e.value).format('YYYY-MM-DD')
      break
    case 'taskTypeId':
      searchParams.value.taskTypeId = e?.value[0]?.id
      break
    case 'vendorId':
      searchParams.value.vendorId = e?.value[0]?.entId
      break
    case 'salesId':
      searchParams.value.salesId = e?.value[0]?.userId
      break
    case 'mahName':
      searchParams.value.mahName = e?.value[0]?.value
      break
    case 'skuId':
      searchParams.value.skuId = e?.value[0]?.id
      break
    case 'provAbbr':
      searchParams.value.provAbbr = e?.value[0]
      break
    case 'pkgIds':
      searchParams.value.pkgIds = e?.value[0]
      break
    default:
      break
  }
  init()
}

const init = () => {
  params.currentPage = 1
  params.total = 0
  dataList.value = []
  getDatalist()
}

onReachBottom(() => {
  if (dataList.value.length === params.total) return
  params.currentPage++
  getDatalist()
})

onMounted(async () => {
  const lastYear = dayjs().subtract(1, 'year').format('YYYY')
  searchParams.value.year = lastYear
  await getDictFn()
  getDatalist()
})
</script>

<style lang="scss" scoped>
.service-reviewed {
  padding: 0 30rpx;
  .reviewed-header {
    width: 690rpx;
    height: 80rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 999;

    .search-content {
      width: 630rpx;
      overflow-x: auto;
      display: flex;
      flex-wrap: nowrap;

      .search-list {
        flex: none;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding-right: 20rpx;
        line-height: 80rpx;
        text {
          margin-right: 6rpx;
          font-weight: 600;
        }
      }
      .current {
        color: #6eb657;
      }
    }
    .clear {
      display: flex;
      justify-content: right;
    }
  }
  .list {
    margin-top: 100rpx;
    .item {
      box-shadow: 0px 4rpx 4rpx 0px rgba(0, 0, 0, 0.05);
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      .top {
        padding: 0 30rpx;
        box-sizing: border-box;
        height: 100rpx;
        background-color: #6eb657;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top-l {
          display: flex;
          align-items: center;

          .image {
            width: 28rpx;
            height: 28rpx;
          }
          text {
            font-size: 26rpx;
            color: #fff;
            line-height: 36rpx;
            margin-left: 20rpx;
          }
        }
        .top-r {
          display: flex;
          align-items: center;
          text {
            display: block;
            width: 10rpx;
            height: 10rpx;
            background-color: #fff;
            border-radius: 50%;
            margin-right: 10rpx;
          }
          .status {
            color: #fff;
            font-size: 28rpx;
            line-height: 40rpx;
          }
        }
      }
      .content {
        background-color: #fff;
        padding: 30rpx;
        box-sizing: border-box;
        .title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;
          align-items: center;
          .task-name {
            font-size: 32rpx;
            line-height: 45rpx;
            color: #313131;
          }
          .score {
            font-size: 28rpx;
            color: #72b25b;
          }
        }
        .item-detail {
          display: flex;
          justify-content: space-between;
          .num {
            font-weight: 400;
            font-size: 20rpx;
            line-height: 32rpx;
            color: #999999;
          }
          .detail {
            display: flex;
            align-items: center;
            font-size: 20rpx;
            color: #999;
            text {
              margin-left: 6rpx;
            }
          }
        }
      }
    }
  }
}

.hidden {
  height: 90vh;
  overflow-y: hidden;
}

.history {
  width: 630rpx;
  margin: 0 auto;
  padding: 0 30rpx;

  .header {
    text-align: center;
    line-height: 105rpx;
    font-size: 36rpx;
    font-weight: 600;
  }
  .his-list {
    height: 70vh;
    overflow-y: auto;

    .his-item {
      padding: 15rpx 0;
      border-bottom: 1px solid #eee;
      .his-text {
        line-height: 36rpx;
        font-size: 22rpx;
        text {
          color: #333;
        }
        .label {
          color: #000;
          font-weight: 6000;
        }
      }
    }
  }
}
</style>
