<template>
  <!-- 功能按钮 -->
  <el-row :gutter="10"
    class="mb8"
    justify="space-between">
    <el-col :span="1.5">
      <el-button type="danger"
        plain
        icon="Delete"
        :disabled="delMultipleBtnDis"
        @click="handleDelete">删除</el-button>
      <el-button type="success"
        plain
        icon="Plus"
        v-hasPermi="['promotion:plan:create']"
        @click="handleAdd">新增</el-button>
      <el-button type="primary"
        plain
        icon="Edit"
        :disabled="editMultipleBtnDis"
        @click="handleEditBelong">修改归属人</el-button>
      <a :href="planTemplateExcelUrl"
        download
        class="download-a">
        <el-button type="warning"
          plain
          icon="Download">
          下载计划模版
        </el-button>
      </a>
    </el-col>
    <el-col :span="1.5">
      <el-upload class="upload-demo"
        action="#"
        accept=".xls,.xlsx"
        :http-request="uploadPlanFile"
        :show-file-list="false"
        v-hasPermi="['promotion:plan:import_create_excel']">
        <template #trigger>
          <el-button type="primary">
            {{ isCityManager ? '城市经理' : '职能角色' }}
            {{ '新增计划上传' }}
          </el-button>
        </template>
      </el-upload>
      <el-upload class="upload-demo"
        action="#"
        accept=".xls,.xlsx"
        :http-request="uploadChangeFile"
        :show-file-list="false"
        v-hasPermi="['promotion:plan:import_change_excel']">
        <template #trigger>
          <el-button type="primary">修改计划上传</el-button>
        </template>
      </el-upload>
    </el-col>
  </el-row>
  <!-- 表格列表 -->
  <el-table :data="tableList"
    border
    style="width: 100%"
    show-overflow-tooltip
    @selection-change="handleSelectionChange"
    :row-class-name="tableRowTimeOutClassName">
    <el-table-column type="selection"
      width="55"
      :selectable="selectableFn">
    </el-table-column>
    <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"
      :show-overflow-tooltip="true" />
    <el-table-column label="操作"
      width="150"
      fixed="right">
      <template #default="scope">
        <el-button type="success"
          link
          :disabled="!selectableFn(scope.row) || !checkPlanChangeExpire(scope.row)"
          @click="editFn(scope.row)">
          变更
        </el-button>
        <el-button type="danger"
          link
          :disabled="!selectableFn(scope.row)"
          @click="deletePlane(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <pagination :total="total"
    v-model:page="pageNum"
    v-model:limit="pageSize"
    @pagination="getPlanList" />
  <!-- 弹窗确认上传计划表格 -->
  <el-dialog title="上传计划"
    v-model="uploadPlanDialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false">
    <div>
      <!-- 计划表格 -->
      <el-table :data="planTableList"
        border
        style="width: 100%"
        show-overflow-tooltip
        :row-class-name="tableRowClassName">
        <el-table-column v-for="item in confirmTableColumns"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="formatterConfirm" />
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <p style="color: red; float: left;">如果表格有红色行，请根据错误提示修改本地表格重新上传</p>
        <el-button @click="uploadPlanDialogVisible = false">取消上传</el-button>
        <el-button type="primary"
          :disabled="!confirmExcelUUID"
          @click="confirmPlanBtn">
          确定保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增/修改计划 -->
  <el-dialog class="add-edit-plan"
    :title="(addOrEditPlanForm.id ? '修改' : '新增') + '计划'"
    v-model="addOrEditPlanVisible"
    width="60%">
    <!-- 表单 -->
    <el-form :model="addOrEditPlanForm"
      label-width="150px"
      :rules="addOrEditPlanFormRules"
      ref="addOrEditPlanRef"
      inline>
      <el-row>
        <el-col :span="12">
          <!-- 选择门店 -->
          <el-form-item label="选择门店"
            prop="storeCode">
            <el-select v-model="addOrEditPlanForm.storeCode"
              placeholder="请选择门店"
              filterable
              clearable
              @change="selStoreInfo"
              remote
              :remote-method="remoteStoreMethod">
              <el-option v-for="item in storeList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
            <p class="info_p"
              :class="{ info_error: isInfoError }">{{ selecteStoreInfo }}
            </p>
            <div>
              <a class="link"
                v-show="isInfoError"
                target="_blank"
                href="https://cloud.region2.qince.com/sysapp/react/web/main.html#/home">跳转勤策系统</a>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 活动日期 -->
          <el-form-item label="活动日期"
            prop="date">
            <el-date-picker v-model="addOrEditPlanForm.date"
              :clearable="false"
              start-placeholder="活动日期"
              :disabled-date="disabledDateFn" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 活动模式 -->
        <el-col :span="12">
          <el-form-item label="活动模式"
            prop="pattern">
            <el-select v-model="addOrEditPlanForm.pattern"
              placeholder="请选择活动模式"
              filterable
              clearable
              @change="selPattern">
              <el-option v-for="item in activityModeList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 归属人 -->
          <el-form-item label="归属人"
            prop="employeeNo">
            <el-select v-model="addOrEditPlanForm.employeeNo"
              placeholder="请选择归属人"
              filterable
              clearable
              :disabled="isCityManager"
              @change="selEmployee">
              <el-option v-for="item in belongPerList"
                :key="item.employeeNo"
                :label="item.label"
                :value="item.employeeNo" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 上班打卡时间 -->
          <el-form-item label="上班打卡时间"
            prop="inTime">
            <el-time-picker v-model="addOrEditPlanForm.inTime"
              placeholder="选择时间"
              format="HH:mm"
              value-format="HH:mm:ss"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 下班打卡时间 -->
          <el-form-item label="下班打卡时间"
            prop="outTime">
            <el-time-picker v-model="addOrEditPlanForm.outTime"
              placeholder="选择时间"
              format="HH:mm"
              value-format="HH:mm:ss"
              :disabled="!addOrEditPlanForm.inTime"
              :disabled-hours="disabledHours"
              :disabled-minutes="disabledMinutes"
              :disabled-seconds="disabledSeconds" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 工资 -->
          <el-form-item label="工资"
            prop="salary">
            <el-input-number v-model="addOrEditPlanForm.salary"
              placeholder="请输入工资" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 杂费 -->
          <el-form-item label="杂费"
            prop="incidentals">
            <el-input-number v-model="addOrEditPlanForm.incidentals"
              placeholder="请输入杂费" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="default"
          @click="addOrEditPlanVisible = false">
          取消
        </el-button>
        <el-button type="primary"
          @click="handleAddOrEditPlan"
          :disabled="isInfoError">
          确定保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改计划归属人 -->
  <el-dialog title="修改计划归属人"
    v-model="editPlanEmpVisible"
    width="60%">
    <!-- 表单 -->
    <el-form :model="editPlanEmpForm"
      label-width="150px"
      :rules="editPlanEmpRules"
      ref="editPlanEmpRef"
      inline>
      <el-form-item label="归属人"
        prop="employeeId">
        <el-select v-model="editPlanEmpForm.employeeId"
          placeholder="请选择归属人(搜索)"
          filterable
          clearable>
          <el-option v-for="item in belongPerList"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 取消确定 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="default"
          @click="editPlanEmpVisible = false">
          取消
        </el-button>
        <el-button type="primary"
          @click="handleEditPlanEmp"
          :disabled="!editPlanEmpForm.employeeId">
          确定保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { v4 as uuidv4 } from 'uuid';
import { getPlanListAPI, uploadFileToOSSAPI, addPlanAPI, savePlanAPI, deletePlanAPI, addPlanByRoleAPI, getChargeListAPI, addPlanByWebAPI, updatePlanByWebAPI, getPlanStoreListAPI, updatePlanAPI, batchUpdatePlanAPI } from '@/api'
import { checkPlanExpire, checkPlanChangeExpire } from '@/hooks'
import userStore from '@/store/modules/user'
import { PROMOTION_ACTIVITY_MODE_LIST,getPromotionActiveStatus } from '@/dicts'
import { parseTime } from '@/utils'

const props = defineProps({
  queryParams: {
    type: Object,
  }
})

const { proxy } = getCurrentInstance();
const isCityManager = userStore().promotionIdentity
const empInfo = userStore().empInfo

const planTemplateExcelUrl = import.meta.env.VITE_APP_PLAN_TEMPLATE_EXCEL
const uploadPlanExcelPath = `planExcel/${new Date().getFullYear()}-${new Date().getMonth() + 1}/${empInfo.empNo}/${uuidv4()}.xlsx` // 上传计划表格路径

/*************** 删除计划 ***************/
// 批量
const delMultipleBtnDis = ref(true)
const handleDelete = async () => {
  await proxy.$modal.confirm('确认删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await deletePlanAPI({
    planIds: checkedRowList.value.map(o => o.id),
    employeeNo: empInfo.empNo
  })
  proxy.$modal.msgSuccess('删除成功')
  proxy.eventBus.emit('refreshPlanList') // 刷新计划列表
  getPlanList()
}
// 单条
const deletePlane = (row) => {
  checkedRowList.value = [row]
  handleDelete()
}

/*************** 新增计划 ***************/
// 批量
const uploadPlanFile = async (file) => { // 上传计划表格
  proxy.$modal.loading("正在上传数据，请稍后...");
  const excelUrl = await uploadFileToOSSAPI(uploadPlanExcelPath, file.file)
  const targetAPI = isCityManager ? addPlanAPI : addPlanByRoleAPI // 城市经理和职能角色上传接口不同
  try {
    const res = await targetAPI({
      "excelUrl": excelUrl,
      "employeeNo": empInfo.empNo
    })
    planTableList.value = res.data.table
    confirmExcelUUID.value = res.data.uuid
    uploadPlanDialogVisible.value = true
  } finally {
    proxy.$modal.closeLoading();
  }
  // 保证下次还能上传
  return true
}
// 单条
const handleAdd = () => {
  resetAddOrEditPlanForm()
  // 城市经理，默认填充归属人
  isCityManager && (addOrEditPlanForm.value.employeeNo = empInfo.empNo)
  addOrEditPlanVisible.value = true
}

/*************** 修改计划 ***************/
// 批量
const uploadChangeFile = async (file) => {
  proxy.$modal.loading("正在上传数据，请稍后...");
  const excelUrl = await uploadFileToOSSAPI(uploadPlanExcelPath, file.file)
  try {
    const res = await updatePlanAPI({
      "excelUrl": excelUrl,
      "employeeNo": empInfo.empNo
    })
    planTableList.value = res.data.table
    confirmExcelUUID.value = res.data.uuid
    uploadPlanDialogVisible.value = true
  } finally {
    proxy.$modal.closeLoading();
  }
  return true
}
// 单条
const editFn = (row) => {
  proxy.resetForm("addOrEditPlanRef");
  addOrEditPlanForm.value = {
    ...row,
    inTime: parseTime(row.clockInTime, "{h}:{i}:{s}"),
    outTime: parseTime(row.clockOutTime, "{h}:{i}:{s}")
  }
  editDealerId.value = row.dealerId
  getStoreList()
  addOrEditPlanVisible.value = true
}

/*************** 新增/修改计划弹框 ***************/
// 新增/变更计划表单弹框
const addOrEditPlanVisible = ref(false)
const addOrEditPlanForm = ref({})
const activityModeList = ref(PROMOTION_ACTIVITY_MODE_LIST) // 活动模式
const editDealerId = ref(null) // 经销商 ID
// 重置表单
const resetAddOrEditPlanForm = () => {
  addOrEditPlanForm.value = {}
  selecteStoreInfo.value = ''
  editDealerId.value = null
  isInfoError.value = false
}
// 表单验证（所有都是必填项）
const addOrEditPlanFormRules = reactive({
  storeCode: [
    {
      required: true,
      message: '请输入门店编码',
      trigger: 'blur'
    }
  ],
  date: [
    {
      required: true,
      message: '请选择活动日期',
      trigger: 'blur'
    }
  ],
  pattern: [
    {
      required: true,
      message: '请选择活动模式',
      trigger: 'blur'
    }
  ],
  employeeNo: [
    {
      required: true,
      message: '请选择归属人',
      trigger: 'blur'
    }
  ],
  inTime: [
    {
      required: true,
      message: '请选择上班打卡时间',
      trigger: 'blur'
    }
  ],
  outTime: [
    {
      required: true,
      message: '请选择下班打卡时间',
      trigger: 'blur'
    }
  ],
  salary: [
    {
      required: true,
      message: '请输入工资',
      trigger: 'blur'
    }
  ],
  incidentals: [
    {
      required: true,
      message: '请输入杂费',
      trigger: 'blur'
    }
  ]
})
// 获取门店列表
const storeList = ref([])
const allStoreList = ref([])
const selecteStoreInfo = ref('')
const isInfoError = ref(false)
const getStoreList = async () => {
  const { data } = await getPlanStoreListAPI({
    storeNameVague: addOrEditPlanForm.value.storeName,
    dealerId: editDealerId.value
  })
  allStoreList.value = data
  storeList.value = data.map(item => {
    return {
      label: item.storeName,
      value: item.storeCode
    }
  })
}
getStoreList()
// 选择门店
const selStoreInfo = (storeCode) => {
  // 从门店列表找到选中的对象
  const storeInfo = allStoreList.value.find(item => item.storeCode === storeCode)
  // 判断门店是否包含必要的三个信息（因为勤测那边的数据一致性不好，所以需要判断）
  if (storeInfo) {
    if (!storeInfo.dealersName || !storeInfo.dealerId || !storeInfo.lineName) {
      isInfoError.value = true
      // 门店系统名称、经销商不可为空，请到勤策中修改；
      selecteStoreInfo.value = "门店系统名称、经销商不可为空，请到勤策中修改:"
    } else {
      isInfoError.value = false
      // 门店系统名称、经销商不可为空，请到勤策中修改；
      selecteStoreInfo.value = storeInfo.storeAddr + "-" + storeInfo.storeCode
    }
  } else {
    isInfoError.value = false
    // 门店系统名称、经销商不可为空，请到勤策中修改；
    selecteStoreInfo.value = ''
  }
  // 清除表单验证提示
  proxy.$refs.addOrEditPlanRef.clearValidate('storeCode');
}
// 门店搜索
const remoteStoreMethod = (query) => {
  addOrEditPlanForm.value.storeName = query
  getStoreList()
}

// 定义禁用日期的函数
const disabledDateFn = (time) => {
  // 城市经理只能新增下个月一整个月的
  if (isCityManager) {
    const now = new Date();
    const start = new Date(now.getFullYear(), now.getMonth() + 1, 1);
    const end = new Date(now.getFullYear(), now.getMonth() + 2, 0);
    return time.getTime() < start.getTime() || time.getTime() > end.getTime()
  } else {
    // 职能角色能添加当月今天往后和下个月一整个月
    const now = new Date();
    // 变更计划时，只能选择明天以后的
    const thisMonthStart = new Date(now.getFullYear(), now.getMonth(), addOrEditPlanForm.value.id ? now.getDate() + 1 : now.getDate());
    const nextMonthEnd = new Date(now.getFullYear(), addOrEditPlanForm.value.id ? now.getMonth() + 1 : now.getMonth() + 2, 0);
    return time.getTime() < thisMonthStart.getTime() || time.getTime() > nextMonthEnd.getTime();
  }
}
// 根据选择的开始时间，禁用小时分钟秒只能选择之后的时间
const makeRange = (start, end) => {
  const result = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}
const disabledHours = (h) => {
  // 根据上班时间选择的结果，禁用小时
  const date = new Date(addOrEditPlanForm.value.nTime)
  return makeRange(0, date.getHours() - 1);
}
const disabledMinutes = (h, m) => {
  // 如果小时大于上班打卡时间小时，则不限制分钟
  const inDate = new Date(addOrEditPlanForm.value.inTime)
  if (h > inDate.getHours()) {
    return makeRange(0, -1);
  } else {
    const date = new Date(addOrEditPlanForm.value.inTime)
    return makeRange(0, date.getMinutes() - 1);
  }
}
const disabledSeconds = (h, m, s) => {
  const date = new Date(addOrEditPlanForm.value.inTime)
  return makeRange(0, date.getSeconds() - 1);
}

// 新增计划表单-选完以后去掉错误提示
const selPattern = () => {
  proxy.$refs.addOrEditPlanRef.clearValidate('pattern');
}
const selEmployee = () => {
  proxy.$refs.addOrEditPlanRef.clearValidate('employeeNo');
}

// 保存新增/变更计划
const handleAddOrEditPlan = async () => {
  // 表单校验
  await proxy.$refs.addOrEditPlanRef.validate()
  // 设置操作人参数给后台
  addOrEditPlanForm.value.operNo = empInfo.empNo
  addOrEditPlanForm.value.operName = empInfo.empName
  addOrEditPlanForm.value.operId = empInfo.empId

  const dataObj = {
    ...addOrEditPlanForm.value,
    // 格式是 xx:xx:xx，替换最后一对 xx 为 00
    inTime: addOrEditPlanForm.value.inTime.replace(/:\d{2}$/, ':00'),
    outTime: addOrEditPlanForm.value.outTime.replace(/:\d{2}$/, ':00')
  }

  if (dataObj.id) {
    // 根据归属人 employeeId 查询它的 id 和名字
    const employeeInfo = belongPerList.value.find(item => item.employeeNo === dataObj.employeeNo)
    dataObj.employeeId = employeeInfo.value
    dataObj.employeeName = employeeInfo.label
    await updatePlanByWebAPI(dataObj)
  } else {
    await addPlanByWebAPI(dataObj)
  }

  proxy.$modal.msgSuccess('保存成功')
  addOrEditPlanVisible.value = false
  getPlanList()
}

/*************** 修改归属人 ***************/
// 批量
const editMultipleBtnDis = ref(true)
const handleEditBelong = () => {
  editPlanEmpVisible.value = true
  nextTick(() => {
    editPlanEmpForm.value.employeeId = null
    proxy.resetForm("editPlanEmpRef");
  })
}
const editPlanEmpVisible = ref(false)
const editPlanEmpForm = ref({
  employeeId: null
})
const editPlanEmpRules = ref({
  employeeId: [{
    required: true,
    message: '请选择归属人',
    trigger: 'change'
  }]
})

// 确定批量修改计划人
const handleEditPlanEmp = async () => {
  const res = await batchUpdatePlanAPI({
    employeeId: editPlanEmpForm.value.employeeId,
    operName: empInfo.empName,
    planIds: checkedRowList.value.map(item => item.id)
  })
  proxy.$modal.msgSuccess(res.msg)
  editPlanEmpVisible.value = false
  getPlanList()
}

/*************** 计划表格 ***************/
const tableList = ref([])
const columns = ref([
  {
    label: '归属人',
    prop: 'employeeName',
    width: 150,
    fixed: true
  },
  {
    label: '战区',
    prop: 'orgName',
    width: 120
  },
  {
    label: '店铺名称',
    prop: 'storeName',
    width: 240
  },
  {
    label: '活动日期',
    prop: 'date',
    width: 120
  },
  {
    label: '星期',
    prop: 'week',
    width: 80
  },
  {
    label: '活动状态',
    prop: 'planStatus',
    width: 100
  },
  {
    label: '活动模式',
    prop: 'pattern',
    width: 100
  },
  {
    label: '系统名称',
    prop: 'lineName',
    width: 150
  },
  {
    label: '店铺编码',
    prop: 'storeCode',
    width: 160
  },
  {
    label: '经销商',
    prop: 'dealerName',
    width: 220
  },
  {
    label: '经销商 ID',
    prop: 'dealerId',
    width: 120
  },
  {
    label: '省份',
    prop: 'province',
    width: 100
  },
  {
    label: '地址',
    prop: 'addr',
    width: 200
  },
  {
    label: '上班时间',
    prop: 'clockInTime',
    width: 180
  },
  {
    label: '下班时间',
    prop: 'clockOutTime',
    width: 180
  },
  {
    label: '促销员薪资',
    prop: 'salary',
    width: 100
  },
  {
    label: '杂费',
    prop: 'incidentals',
    width: 100
  },
  {
    label: '创建人',
    prop: 'createBy',
    width: 120
  },
  {
    label: '最近修改人',
    prop: 'modifyBy',
    width: 100
  },
  {
    label: '最后修改时间',
    prop: 'modifyTime',
    width: 180
  },
  {
    label: '活动 ID',
    prop: 'id',
    width: 90
  }
])
// 格式化计划列表单元格内容
const formatter = (row, col, value) => {
  if (col.property === 'planStatus') {
    return getPromotionActiveStatus(value)?.label
  } else if (col.property === 'date') { // 活动日期
    return parseTime(value, '{y}-{m}-{d}')
  } else if (col.property === 'week') {
    return parseTime(row['date'], '周{a}')
  } else if (col.property === 'modifyTime') {
    return parseTime(value, '{y}-{m}-{d} {h}:{i}:{s}')
  } else if (col.property === 'clockInTime' || col.property === 'clockOutTime') {
    return parseTime(value)
  } else if (col.property === 'employeeName') {
    // 判断归属人名字小于 4 个字，少于几个就加几个空格
    if (value.length === 2) {
      return value + '　　' + '(' + row.employeeNo + ')'
    } else if (value.length === 3) {
      return value + '　' + '(' + row.employeeNo + ')'
    } else {
      return value + '(' + row.employeeNo + ')'
    }
  } else if (col.property === 'salary' || col.property === 'incidentals') {
    return '¥ ' + value + ' 元'
  } else {
    return value
  }
}
// 表格复选框的数据
const checkedRowList = ref([])
const handleSelectionChange = (val) => {
  checkedRowList.value = val
  delMultipleBtnDis.value = !(checkedRowList.value.length > 0)
  editMultipleBtnDis.value = !(checkedRowList.value.length > 0)
}
// 控制表格复选框是否可选
const selectableFn = (row) => {
  return checkPlanExpire(row)
}
// 计算当前行类名
const tableRowTimeOutClassName = ({ row }) => {
  // 检查计划是否能操作
  const isExpire = checkPlanExpire(row)
  if (!isExpire) {
    return 'timeout-row'
  } else {
    return ''
  }
}

/*************** 数据和分页 ***************/
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
// 任务列表
const getPlanList = async (arg) => {
  if (arg === 'resetPage') pageNum.value = 1
  const res = await getPlanListAPI({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    queryParams: {
      activityStartDate: props.queryParams.activityDate && props.queryParams.activityDate[0],
      activityEndDate: props.queryParams.activityDate && props.queryParams.activityDate[1],
      planStatus: props.queryParams.planStatus,
      region: props.queryParams.region,
      province: props.queryParams.provinceName,
      city: props.queryParams.cityName,
      dealerId: props.queryParams.dealerId,
      orgQcId: props.queryParams.warZoneId,
      employeeId: props.queryParams.employeeId,
      storeNameLike: props.queryParams.storeName
    }
  })
  tableList.value = res.data.records
  total.value = res.data.totalRecord
}

// 归属人列表
const belongPerList = ref([])
const getBelongPerList = async () => {
  const { data } = await getChargeListAPI()
  belongPerList.value = data.map(item => {
    return {
      label: item.name,
      value: item.id,
      employeeNo: item.employeeNo,
      deptQcName: item.deptQcName,
      deptQcId: item.deptQcId
    }
  })
}
getBelongPerList()

/*************** 弹窗上传计划表格（展示） ***************/
const uploadPlanDialogVisible = ref(false)
const planTableList = ref([])
const confirmExcelUUID = ref('')
const confirmTableColumns = [
  {
    label: '错误消息',
    prop: 'errorMsg',
    width: 450
  },
  {
    label: '归属人',
    prop: 'employeeName',
    width: 90,
    fixed: true
  },
  {
    label: '归属人工号',
    prop: 'employeeNo',
    width: 140
  },
  {
    label: '店铺名称',
    prop: 'storeName',
    width: 200
  },
  {
    label: '店铺编码',
    prop: 'storeCode',
    width: 160
  },
  {
    label: '活动模式',
    prop: 'pattern',
    width: 100
  },
  {
    label: '活动日期',
    prop: 'date',
    width: 180
  },
  {
    label: '上班时间',
    prop: 'clockInTime',
    width: 180
  },
  {
    label: '下班时间',
    prop: 'clockOutTime',
    width: 180
  },
  {
    label: '促销员薪资',
    prop: 'salary',
    width: 100
  },
  {
    label: '杂费',
    prop: 'incidentals',
    width: 100
  },
  // {
  //   label: '活动 ID',
  //   prop: 'id',
  //   width: 90,
  //   // fixed: true
  // },
  {
    label: '经销商 ID',
    prop: 'dealerId',
    width: 120
  },
  {
    label: '经销商',
    prop: 'dealerName',
    width: 220
  },
  {
    label: '系统名称',
    prop: 'lineName',
    width: 100
  },
  // {
  //   label: '活动状态',
  //   prop: 'planStatus',
  //   width: 100
  // },
  {
    label: '省份',
    prop: 'province',
    width: 100
  },
  {
    label: '地址',
    prop: 'addr',
    width: 200
  },
  {
    label: '战区',
    prop: 'orgName',
    width: 150
  },
  // {
  //   label: '城市',
  //   prop: 'city',
  //   width: 100
  // },
  {
    label: '创建人',
    prop: 'createBy',
    width: 100
  },
  {
    label: '最近修改人',
    prop: 'modifyBy',
    width: 100
  },
  {
    label: '最后修改时间',
    prop: 'modifyTime',
    width: 250
  }
]
const tableRowClassName = ({ row }) => {
  if (row.errorMsg) {
    return 'error-row'
  } else {
    return ''
  }
}
const formatterConfirm = (row, col, value) => {
  if (col.property === 'clockInTime' || col.property === 'clockOutTime' || col.property === 'date') {
    return parseTime(value)
  } else if (col.property === 'errorMsg') {
    // 把分号替换成 \n
    return value && value.replace(/；/g, '\n')
  } else {
    return value
  }
}
// 表格上传计划确认保存
const confirmPlanBtn = async () => {
  await savePlanAPI(confirmExcelUUID.value)
  proxy.$modal.msgSuccess('保存成功')
  uploadPlanDialogVisible.value = false
  getPlanList()
}

defineExpose({
  getPlanList
})
</script>

<style scoped
  lang="scss">
  .el-row {

    /* 下载计划模版 */
    .download-a {
      margin-left: 12px;
    }

    /* 上传计划 */
    .upload-demo {
      display: inline-block;
      margin: 0 5px;
    }
  }

  .el-table {

    ::v-deep(.error-row) {
      --el-table-tr-bg-color: var(--el-color-error-light-9);
    }

    /* 灰色过期行颜色 */
    ::v-deep(.timeout-row) {
      --el-table-tr-bg-color: var(--el-timeout-row);
    }
  }

  /* 新增修改计划表单 */
  .add-edit-plan {

    /* 门店列表选择后-下面的介绍信息 */
    .info_p {
      margin: 0;
      font-size: 12px;
      color: gray;
    }

    .info_error {
      color: rgb(167, 0, 0);
    }

    /* 工资和杂费输入框 */
    .el-input-number{
      width: 170px;
    }
  }
</style>