<template>
  <div class="app-container">
    <div class="container">
      <!-- 查询表单 -->
      <el-form :model="queryParams"
        inline
        label-width="auto">
        <el-row>
          <el-form-item label="选择日期"
            prop="date">
            <el-date-picker v-model="queryParams.date"
              type="daterange"
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="pickerOptions"
              @change="queryChangeFn('date')" />
          </el-form-item>
          <el-form-item label="任务状态"
            prop="taskStatus">
            <el-radio-group v-model="queryParams.taskStatus">
              <el-radio-button v-for="item in taskStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="区域查询"
            prop="region">
            <el-radio-group v-model="queryParams.region">
              <el-radio-button label="全国"
                value="全国" />
              <el-radio-button label="省"
                value="省" />
              <el-radio-button label="省-市"
                value="省-市" />
            </el-radio-group>
          </el-form-item>
        </el-row>
        <!-- 省市 -->
        <el-row>
          <el-form-item label="省份"
            prop="province">
            <el-select v-model="queryParams.province"
              placeholder="请选择省"
              @change="getCityList">
              <el-option v-for="item in provinceList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="市"
            prop="city">
            <el-select v-model="queryParams.city"
              placeholder="请选择市">
              <el-option v-for="item in cityList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="战区查询"
            prop="zone">
            <el-select v-model="queryParams.zoneId"
              placeholder="请选择战区">
              <el-option v-for="item in zoneList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="负责人"
            prop="manager">
            <el-select v-model="queryParams.managerId"
              placeholder="请选择负责人">
              <el-option v-for="item in managerList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="门店"
            prop="store">
            <el-input v-model="queryParams.storeName"
              placeholder="请输入门店名称" />
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useDatePickerOptions } from '@/hooks'
import { getWarZoneListAPI, getChargeListAPI, getTaskListAPI, getProCityAPI } from '@/api'


const { pickerOptions, last7Date } = useDatePickerOptions(0)
const queryParams = reactive({
  date: last7Date,
  taskStatus: 'SUBMITTED',
  region: '全国',
  province: '',
  city: '',
  zoneId: undefined,
  managerId: undefined,
  storeName: undefined,
  page: 1,
  pageSize: 10
})

// 任务状态
const taskStatusList = ref([
  {
    label: '未审批',
    value: 'SUBMITTED'
  },
  {
    label: '已审批',
    value: 'APPROVED'
  },
  {
    label: '全部数据',
    value: 'ALL'
  }
])

// 区域查询
const provinceList = ref([])
const cityList = ref([])
const getProCity = async () => {
  const { data } = await getProCityAPI()
  console.log(data)
  provinceList.value = data.map(item => {
    return {
      label: item.name,
      value: item.num
    }
  })
}
getProCity()

// 战区列表
const zoneList = ref([])
const getZoneList = async () => {
  const { data } = await getWarZoneListAPI()
  zoneList.value = data.map(item => {
    return {
      label: item.orgName,
      value: item.qcId
    }
  })
}
getZoneList()

// 负责人列表
const managerList = ref([])
const getManagerList = async () => {
  const { data } = await getChargeListAPI()
  managerList.value = data.map(item => {
    return {
      label: item.empName,
      value: item.qcId
    }
  })
}
getManagerList()

// 任务列表
const tableList = ref([])
const getTaskList = async () => {
  const { data } = await getTaskListAPI(queryParams)
  tableList.value = data.map(item => {
    return {
      label: item.taskName,
      value: item.taskId
    }
  })
}
getTaskList()

</script>


<style scoped
  lang="scss"></style>