<template>
  <view class="container">
    <page-title>年度计划查询</page-title>

    <view class="cards-list">
      <view class="card only-card">
        <!-- 年度 -->
        <view class="card-item one-card-item" @click="yearShowChoose()">
          <view class="card-item-name">年度</view>
          <view class="card-item-description">
            <view v-if="pageForm.year">{{pageForm.year}}</view>
            <view v-else class="remind-text">请选择年度</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 项目类型 -->
        <view class="card-item one-card-item" @click="xmlxShowChoose()">
          <view class="card-item-name">项目类型</view>
          <view class="card-item-description">
            <view v-if="pageForm.xmlx">{{pageForm.xmlx}}</view>
            <view v-else class="remind-text">请选择类型</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 项目性质 -->
        <view class="card-item one-card-item" @click="xmxzShowChoose()">
          <view class="card-item-name">项目性质</view>
          <view class="card-item-description">
            <view v-if="pageForm.xmxz">{{pageForm.xmxz}}</view>
            <view v-else class="remind-text">请选择性质</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 行业分类 -->
        <view class="card-item one-card-item" @click="hyflShowChoose()">
          <view class="card-item-name">行业分类</view>
          <view class="card-item-description">
            <view v-if="pageForm.hyfl">{{pageForm.hyfl}}</view>
            <view v-else class="remind-text">请选择分类</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 建设地点 -->
        <view class="card-item one-card-item" @click="jsddShowChoose()">
          <view class="card-item-name">建设地点</view>
          <view class="card-item-description">
            <view v-if="pageForm.jsdd">{{pageForm.jsdd}}</view>
            <view v-else class="remind-text">请选择地点</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 申报单位 -->
        <view class="card-item one-card-item">
          <view class="card-item-name">申报单位</view>
          <input v-model="pageForm.unitName" class="card-item-input center-input"
            placeholder="请填写申报单位&nbsp;&nbsp;&nbsp;&nbsp;" placeholder-style="color: #D8D8D8;text-align:right;"
            maxlength="20" />
        </view>

        <!-- 金额范围 -->
        <view class="card-item one-card-item">
          <view class="card-item-name " style="min-width: 256rpx;">金额范围（万元）</view>
          <view class="card-item-range">
            <input v-model="pageForm.startAmt" class="card-item-input center-input" placeholder="最小值"
              placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
            ~
            <input v-model="pageForm.endAmt" class="card-item-input center-input" placeholder="最大值"
              placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
          </view>
        </view>

        <!-- 录入状态 -->
        <view class="card-item one-card-item" @click="statusShowChoose()">
          <view class="card-item-name">录入状态</view>
          <view class="card-item-description">
            <view v-if="pageForm.status">{{pageForm.status}}</view>
            <view v-else class="remind-text">请选择状态</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 锁定状态 -->
        <view class="card-item one-card-item" @click="isLockNameShowChoose()">
          <view class="card-item-name">锁定状态</view>
          <view class="card-item-description">
            <view v-if="pageForm.isLockName">{{pageForm.isLockName}}</view>
            <view v-else class="remind-text">请选择状态</view>
            <u-icon name="arrow-right" color="#D2D2D2" size="14" customStyle="margin-left:10rpx"></u-icon>
          </view>
        </view>

        <!-- 项目名称 -->
        <view class="card-item one-card-item">
          <view class="card-item-name">项目名称</view>
          <input v-model="pageForm.subName" class="card-item-input center-input"
            placeholder="请填写项目名称&nbsp;&nbsp;&nbsp;&nbsp;" placeholder-style="color: #D8D8D8;text-align:right;"
            maxlength="20" />
        </view>
      </view>
      <view class="" style="display: flex;justify-content: center;">
        <view class="confirm-btn" @click="confirmParams()">确定</view>
      </view>
    </view>

    <!-- 年度选择 -->
    <u-picker :show="yearShow" :defaultIndex="defaultIndex" :columns="yearColumns" @confirm="yearClose"
      @cancel="yearClose" @close="yearClose" closeOnClickOverlay></u-picker>

    <!-- 项目类型选择 -->
    <u-picker :show="xmlxShow" :columns="xmlxColumns" @confirm="xmlxClose" @cancel="xmlxClose" @close="xmlxClose"
      closeOnClickOverlay></u-picker>

    <!-- 项目性质选择 -->
    <u-picker :show="xmxzShow" :columns="xmxzColumns" @confirm="xmxzClose" @cancel="xmxzClose" @close="xmxzClose"
      closeOnClickOverlay></u-picker>

    <!-- 行业分类选择 -->
    <u-picker :show="hyflShow" :columns="hyflColumns" @confirm="hyflClose" @cancel="hyflClose" @close="hyflClose"
      closeOnClickOverlay></u-picker>

    <!-- 建设地点选择 -->
    <u-picker :show="jsddShow" :columns="jsddColumns" @confirm="jsddClose" @cancel="jsddClose" @close="jsddClose"
      closeOnClickOverlay></u-picker>

    <!-- 录入状态选择 -->
    <u-picker :show="statusShow" :columns="statusColumns" @confirm="statusClose" @cancel="statusClose"
      @close="statusClose" closeOnClickOverlay></u-picker>

    <!-- 锁定状态选择 -->
    <u-picker :show="isLockNameShow" :columns="isLockNameColumns" @confirm="isLockNameClose" @cancel="isLockNameClose"
      @close="isLockNameClose" closeOnClickOverlay></u-picker>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'

  import {
    onLoad
  } from "@dcloudio/uni-app"

  import {
    getYearlyCondition
  } from "@/api/work/weeklyAndMonthly.js"

  function getCondition() {
    getYearlyCondition().then(res => {
      // 项目类型
      xmlxOrginal = res.data?.XMLX
      let xmlxTemp = res.data?.XMLX.map(item => item.title)
      xmlxTemp.unshift('请选择')
      xmlxColumns.value.push(xmlxTemp)
      // 项目性质
      xmxzOrginal = res.data?.JSXZ
      let xmxzTemp = res.data?.JSXZ.map(item => item.title)
      xmxzTemp.unshift('请选择')
      xmxzColumns.value.push(xmxzTemp)
      // 行业分类
      hyflOrginal = res.data?.HYFL
      let hyflTemp = res.data?.HYFL.map(item => item.title)
      hyflTemp.unshift('请选择')
      hyflColumns.value.push(hyflTemp)
      // 建设地点
      jsddOrginal = res.data?.JSDD
      let jsddTemp = res.data?.JSDD.map(item => item.title)
      jsddTemp.unshift('请选择')
      jsddColumns.value.push(jsddTemp)
    })
  }

  let pageForm = ref({
    year: null,
    xmlx: null,
    xmxz: null,
    hyfl: null,
    jsdd: null,
    unitName: null,
    minMoney: null,
    maxMoney: null,
    status: "所有",
    subName: null,
    // isLockName: null,
    isLock: null
  })

  // ====================================选择年
  let defaultIndex = ref([0])
  let yearShow = ref(false);

  let yearColumns = ref([
    ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013",
      "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
      "2027", "2028", "2029", "2030", "2031", "2032", "2033"
    ]
  ])

  function yearShowChoose() {
    yearShow.value = true;
  }

  function yearClose(e) {
    if (e) pageForm.value.year = e.value[0];
    yearShow.value = false
  }

  // ====================================选择项目类型
  let xmlxOrginal = []
  let xmlxShow = ref(false)

  let xmlxColumns = ref([])

  function xmlxShowChoose() {
    xmlxShow.value = true;
  }

  function xmlxClose(e) {
    if (e) pageForm.value.xmlx = e.value[0];
    xmlxShow.value = false
  }

  // ====================================选择项目性质
  let xmxzOrginal = []
  let xmxzShow = ref(false)

  let xmxzColumns = ref([])

  function xmxzShowChoose() {
    xmxzShow.value = true;
  }

  function xmxzClose(e) {
    if (e) pageForm.value.xmxz = e.value[0];
    xmxzShow.value = false
  }

  // ====================================选择行业分类
  let hyflOrginal = []
  let hyflShow = ref(false)

  let hyflColumns = ref([])

  function hyflShowChoose() {
    hyflShow.value = true;
  }

  function hyflClose(e) {
    if (e) pageForm.value.hyfl = e.value[0];
    hyflShow.value = false
  }

  // ====================================选择建设地点
  let jsddOrginal = []
  let jsddShow = ref(false)

  let jsddColumns = ref([])

  function jsddShowChoose() {
    jsddShow.value = true;
  }

  function jsddClose(e) {
    if (e) pageForm.value.jsdd = e.value[0];
    jsddShow.value = false
  }

  // ====================================选择录入状态
  let statusShow = ref(false)

  let statusColumns = ref([
    ["所有", "已录入", "未录入"]
  ])

  function statusShowChoose() {
    statusShow.value = true;
  }

  function statusClose(e) {
    if (e) pageForm.value.status = e.value[0];
    statusShow.value = false
  }

  // ====================================选择锁定状态
  let isLockNameShow = ref(false)

  let isLockNameColumns = ref([
    ["所有", "正常", "锁定"]
  ])

  function isLockNameShowChoose() {
    isLockNameShow.value = true;
  }

  function isLockNameClose(e) {
    if (e) pageForm.value.isLockName = e.value[0];
    isLockNameShow.value = false
  }

  // 确认选择
  function confirmParams() {
    let sendParams = Object.assign({}, pageForm.value)
    sendParams.xmlx = findChooseId('xmlx', sendParams.xmlx)
    sendParams.xmxz = findChooseId('xmxz', sendParams.xmxz)
    sendParams.hyfl = findChooseId('hyfl', sendParams.hyfl)
    sendParams.jsdd = findChooseId('jsdd', sendParams.jsdd)
    let statusOrginal = {
      "所有": "0",
      "已录入": "1",
      "未录入": "2"
    }
    let isLockOrginal = {
      "所有": "",
      "正常": "0",
      "锁定": "1"
    }
    sendParams.status = statusOrginal[sendParams.status] ? statusOrginal[sendParams.status] : null
    sendParams.isLock = isLockOrginal[sendParams.isLockName] ? isLockOrginal[sendParams.isLockName] : null

    let url = "/pages/yearly/list/index?"
    for (let i in sendParams) {
      let item = null
      if (sendParams[i]) {
        item = `${i}=${sendParams[i]}&`
      } else {
        item = `${i}=&`
      }

      url = url += item
    }
    url = url.substr(0, url.length - 1);

    uni.navigateTo({
      url
    })
  }

  function findChooseId(list, value) {
    let defaultList = {
      xmlx: xmlxOrginal,
      xmxz: xmxzOrginal,
      hyfl: hyflOrginal,
      jsdd: jsddOrginal,
    }
    let item = defaultList[list].find(item => item.title === value)
    if (list === 'xmxz') return item ? item.code : null
    if (list === 'jsdd') return item ? item.code : null
    return item ? item.id : null
  }


  onLoad(() => {
    // 默认年
    let now = new Date()
    let nowYear = now.getFullYear()

    pageForm.value.year = nowYear
    defaultIndex.value = [Number(nowYear) - 2000]

    getCondition()
  })
</script>

<style lang="scss" scoped>
  .one-card-item {
    justify-content: space-between;
  }

  .card .card-item .card-item-description {
    font-size: 28rpx !important;
  }

  .card .card-item .card-item-name {
    white-space: nowrap;
  }

  .confirm-btn {
    width: 328rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: #002F69;
    border-radius: 38rpx;
    font-weight: 500;
    font-size: 36rpx;
    color: #FFFFFF;
  }
</style>