<template>
  <view>
    <view class="work_order_header">
      <view class="work_order_header_left">
        <view class="work_label"> 工单处理中心 </view>
      </view>
      <view class="work_order_header_right">
        <image class=""
          src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K84SMTFV295N6Z0QXRKBHNNN.png"
          mode="heightFix" />
      </view>
    </view>
    <view class="work_order_jinganqu">
      <view class="item" @click="handleSubmissionRecord('/WORKORDER/list_log/index')">
        <image
          src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K8ACQRC49CWV4PXS4ABP8SW0.png" />
        <text> 提报记录 </text>
      </view>
      <view class="item" @click="handleSubmissionRecord('/WORKORDER/list/index')">
        <image
          src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K8ACVE1SA2XBJ3QWK6DWZWZA.png" />
        <text> 工单任务 </text>
      </view>
    </view>

    <view class="work_order_type_title"> 选择新增工单类型 </view>

    <view class="work_order_item_content">
      <view v-for="(i, index) in list" :key="`item_${index}`" class="work_order_item" @click="handleToPage(i)">
        <view class="icon">
          <image :src="i.icon" mode="heightFix" />
        </view>
        <view class="info">
          <view class="label">
            {{ i.label }}
          </view>
          <view class="des">
            {{ i.des }}
          </view>
        </view>
        <view>
          <uni-icons type="right" color="#999" size="16"></uni-icons>
        </view>
      </view>
    </view>

    <view class="work_order_footer">
      点击联系<button open-type="contact"><text>在线客服</text></button>及时沟通
    </view>

    <hs-popup :show="showPopup" @close="handleClose" mode="bottom" :closeable="true" :round="20">
      <view class="report_repair_popup">
        <view class="title"> 选择报修区域 </view>
        <view class="report_repair_body">
          <view v-for="(i, index) in typeList" :key="`item_${index}`" class="report_repair_item"
            @click="handleSelectType(i)">
            <view class="icon">
              <image :src="i.icon" mode="heightFix" />
            </view>
            <view class="des">
              {{ i.label }}
            </view>
            <uni-icons type="right" color="#999" size="16"></uni-icons>
          </view>
        </view>
      </view>
    </hs-popup>
  </view>
</template>

<script setup lang="ts">
import { onHide } from '@dcloudio/uni-app'
import { ref } from 'vue'

const showPopup = ref(false)
const selectType = ref('')

const handleSubmissionRecord = (url: string) => {
  uni.navigateTo({
    url
  })
}


const handleClose = () => {
  showPopup.value = false
}
const list = [
  {
    label: '报修类',
    des: '设备、设施等出现故障，需维修处理',
    type: 'Repair',
    icon: 'https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K84V91E3TZ6BPP6VH3MV0A2C.png'
  },
  {
    label: '报事类',
    des: '噪音/公共卫生等事件需物业处理',
    type: 'Incident',
    icon: 'https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K84V9RGS3HS1G43RWFFTC4FZ.png'
  }
]

const typeList = [
  {
    label: '公共区域报修',
    type: 'CommonArea',
    icon: 'https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K84WNKS9GNHQEV2EQ3N3HWW8.png'
  },
  {
    label: '房屋区域报修',
    type: 'MyHome',
    icon: 'https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K84XQQGNN7B30Q8S6RJMJGPS.png'
  }
]

const handleToPage = (res: { label?: string; type?: string }) => {
  selectType.value = res?.type || ''
  if (res?.label === '报修类') {
    showPopup.value = true
    return
  }
  uni.navigateTo({
    url: `/WORKORDER/add/index?type=${res?.type}&location=CommonArea`
  })
}

const handleSelectType = (res: { type?: string }) => {
  uni.navigateTo({
    url: `/WORKORDER/add/index?type=${selectType.value}&location=${res?.type}`
  })
}

onHide(() => {
  showPopup.value = false
})
</script>

<style lang="scss">
@import './style.scss';
</style>
