<template>
  <div class="app-container">
    <div class="container">
      <!-- 查询表单 -->
      <el-form :model="queryParams"
        inline
        label-width="68px">
        <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" />
        </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-row>
          <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="province"
            v-show="queryParams.region !== '全国'">
            <el-select v-model="queryParams.provinceId"
              placeholder="请选择省"
              @change="getProCity">
              <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"
            v-show="queryParams.region === '省-市'">
            <el-select v-model="queryParams.cityId"
              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>
      <!-- 数据表格 -->
      <el-table :data="tableList"
        :cell-style="{ 'word-wrap': 'break-word', 'white-space': 'normal' }"
        border
        style="width: 100%"
        show-overflow-tooltip>
        <el-table-column v-for="item in columns"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="formatter"
          :fixed="item.fixed" />
      </el-table>
    </div>
  </div>
</template>

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

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

// 任务状态
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(queryParams)
  if (queryParams.provinceId) {
    queryParams.cityId = undefined
    cityList.value = data.map(item => ({
      label: item.name,
      value: item.num
    }))
  } else {
    provinceList.value = data.map(item => ({
      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 columns = ref([
  {
    label: 'ID',
    prop: 'id',
    width: 90,
    fixed: true
  },
  {
    label: '姓名',
    prop: 'temporaryName',
    width: 90,
    fixed: true
  },
  {
    label: '上报日期',
    prop: 'createDate',
    width: 120,
    fixed: true
  },
  {
    label: '省份',
    prop: 'province',
    width: 100
  },
  {
    label: '城市',
    prop: 'city',
    width: 100
  },
  {
    label: '经销商',
    prop: 'dealerName',
    width: 250
  },
  {
    label: '门店',
    prop: 'storeName',
    width: 250
  },
  {
    label: '活动模式',
    prop: 'activityPattern',
    width: 100
  },
  {
    label: '上班卡',
    prop: 'clockDto.clockInTime', // 拼接地址  clockInAddress, 经纬度 clockInCoordinates
    width: 300
  },
  {
    label: '午休下班卡',
    prop: 'clockDto.noonClockOutTime', // 拼接地址  noonClockOutAddress, 经纬度 noonClockOutCoordinates
    width: 300
  },
  {
    label: '午休上班卡',
    prop: 'clockDto.noonClockInTime', // 拼接地址  noonClockInAddress, 经纬度 noonClockInCoordinates
    width: 300
  },
  {
    label: '下班卡',
    prop: 'clockDto.clockOutTime', // 拼接地址  clockOutAddress, 经纬度 clockOutCoordinates
    width: 300
  },
  {
    label: '推广图片',
    prop: ''
  },
  {
    label: '打卡照片',
    prop: ''
  },
  {
    label: '战区',
    prop: 'deptQcOrgName',
    width: 150
  },
  {
    label: '城市经理',
    prop: 'approveName',
    width: 120
  },
  {
    label: '操作',
    prop: ''
  },
])
const getTaskList = async () => {
  const { data: { records } } = await getTaskListAPI(queryParams)
  tableList.value = records
}
getTaskList()
const formatter = (row, columns, value) => {
  // 判断有值再转换
  if (columns.property === 'clockDto.clockInTime' && value) {
    return parseTime(value, '{h}:{i}') + '\n' + row['clockDto']['clockInAddress']
  } else if (columns.property === 'clockDto.noonClockOutTime' && value) {
    return parseTime(value, '{h}:{i}') + '\n' + row['clockDto']['noonClockOutAddress']
  } else if (columns.property === 'clockDto.noonClockInTime' && value) {
    return parseTime(value, '{h}:{i}') + '\n' + row['clockDto']['noonClockInAddress']
  } else if (columns.property === 'clockDto.clockOutTime' && value) {
    return parseTime(value, '{h}:{i}') + '\n' + row['clockDto']['clockOutAddress']
  }
  return value
}

</script>


<style scoped
  lang="scss">
  ::v-deep(.el-form-item) {
    width: 350px !important;
  }

  /* 单元格支持 \n 换行 */
  .container .el-table ::v-deep(.cell) {
    /* white-space: pre-line; */
    /* 强制显示 2 行，超出的省略号 */
    /* overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; */

  }
</style>