<script>
export default {
  name: "AppMarketBoardFilter",
  label: "市场看板-筛选条",
  data() {
    return {
      form: {},
      options: [],
      dateOptions: Array(24).fill(0).map((v, i) => ({label: `${++i}:00`, value: i}))
    }
  },
  methods: {
    getOptions() {
      return $http.get("/data-boot/ca/screen/scStoreInfo/listGroup").then(res => {
        if (res?.data) {
          return this.options = res.data.map(e => ({label: e.supervisorName, value: e.groupCode}))
        }
      })
    },
  },
  created() {
    this.getOptions().then(() => {
      const {dayjs} = window
      setTimeout(() => {
        const compareDate = dayjs().subtract(7, "day").format("YYYYMMDD"),
            currentDate = dayjs().format("YYYYMMDD"),
            hourNum = new Date().getHours()+1,
            groupCodeList = ""
        this.form = {compareDate, currentDate, hourNum, groupCodeList}
        this.$set(this.$marketBoard, 'search', {compareDate, currentDate, hourNum, groupCodeList: []})
      }, 500)
    })
  },
}
</script>

<template>
  <el-form class="AppMarketBoardFilter flex" size="small" label-width="60px">
    <el-form-item label="课长" class="fill">
      <el-select v-model="form.groupCodeList" @change="v=>$marketBoard.search.groupCodeList=v?[v]:[]" placeholder="全部" clearable>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item label="对比时间" class="fill">
      <el-date-picker v-model="form.compareDate" value-format="yyyyMMdd" @change="v=>$marketBoard.search.compareDate=v"/>
    </el-form-item>
    <el-form-item label="当前时间" class="fill">
      <el-date-picker v-model="form.currentDate" value-format="yyyyMMdd" @change="v=>$marketBoard.search.currentDate=v"/>
    </el-form-item>
    <el-form-item label="时段" class="fill">
      <el-select v-model="form.hourNum" :picker-options="options" size="small" format="HH:mm" value-format="H" @change="v=>$marketBoard.search.hourNum=v">
        <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<style>
.AppMarketBoardFilter .el-input__inner {
  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
  border: 1px solid #1760AE;
  border-radius: 0;
  color: #fff;
  min-width: 100px;
}

.AppMarketBoardFilter .el-input {
  width: 100%;
}

.AppMarketBoardFilter .el-form-item__label {
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
}
</style>
