<template>
  <div class="app-container">
    <div class="container">
      <el-form :model="queryParams"
        inline
        label-width="auto">
        <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-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-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useDatePickerOptions } from '@/hooks'
import { getWarZoneListAPI, getChargeListAPI, getTaskListAPI } 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 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>