<script>
export default {
  name: "AppMultipleStoreBoardFilter",
  label: "多店看板-筛选条",
  data() {
    return {
      form: {},
      options: [],
      dateOptions: Array(24).fill(0).map((v, i) => ({label: `${++i}:00`, value: i}))
    }
  },
  computed: {
    dicts: () => window.$dicts || {},
    changeWayOps: () => [
      {label: "手动", value: "0"},
      {label: "自动", value: "1"},
    ]
  },
  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}))
        }
      })
    },
  },
  watch: {
    'form.interval'(v) {
      this.$set(this.$multipleStoreBoard.search, 'interval', v)
    },
    'form.changeWay'(v) {
      this.$set(this.$multipleStoreBoard.search, 'changeWay', v)
      if (v == '0') {
        this.form.interval = null
      }
    }
  },
  created() {
    this.getOptions().then(() => {
      setTimeout(() => {
        const {dayjs} = window
        const hourNum = new Date().getHours()+1, groupCodeList = "", interval = 60000
        const currentDate = dayjs().subtract(7, 'day').format("YYYYMMDD")
        this.form = {hourNum, groupCodeList, type: "1", changeWay: "1", currentDate, interval}
        this.$set(this.$multipleStoreBoard, 'search', {hourNum, groupCodeList: [], type: "1", changeWay: "1", categoryId: "", currentDate, interval})
      }, 500)
    })
  },
}
</script>

<template>
  <el-form class="AppMultipleStoreBoardFilter flex" size="small" label-width="70px">
    <el-form-item label="品类">
      <el-select v-model="form.categoryId" @change="v=>$multipleStoreBoard.search.categoryId=v" clearable placeholder="全部">
        <el-option v-for="item in dicts.品类" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item label="类型">
      <el-select v-model="form.type" @change="v=>$multipleStoreBoard.search.type=v" clearable placeholder="全部">
        <el-option v-for="item in dicts.类型" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item label="特定日期" v-if="form.type==3">
      <el-date-picker v-model="form.compareDate" @change="v=>$set($multipleStoreBoard.search, 'compareDate', v)" clearable type="date" value-format="yyyyMMdd"/>
    </el-form-item>
    <div class="fill"/>
    <el-form-item label="当前日期">
      <el-date-picker v-model="form.currentDate" @change="v=>$set($multipleStoreBoard.search, 'currentDate', v)" clearable type="date" value-format="yyyyMMdd"/>
    </el-form-item>
    <el-form-item label="课长">
      <el-select v-model="form.groupCodeList" @change="v=>$multipleStoreBoard.search.groupCodeList=v?[v]:[]" clearable placeholder="全部">
        <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="时段">
      <el-select v-model="form.hourNum" size="small" @change="v=>$multipleStoreBoard.search.hourNum=v" clearable placeholder="全部">
        <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item label="切换方式">
      <el-select v-model="form.changeWay" clearable placeholder="全部">
        <el-option v-for="item in changeWayOps" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
    </el-form-item>
    <el-form-item label="切换间隔" v-if="form.changeWay==1">
      <el-input-number :controls="false" :min="0" v-model="form.interval" clearable placeholder="单位:毫秒"/>
    </el-form-item>
  </el-form>
</template>

<style>
.AppMultipleStoreBoardFilter {
  width: 100%;
}

.AppMultipleStoreBoardFilter .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;
  max-width: 140px;
}

.AppMultipleStoreBoardFilter .el-input {
  width: 100% !important;
}

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