<script>
export default {
  name: "AppStoreBoardFilter",
  label: "单店看板-筛选条",
  data() {
    return {
      form: {},
      options: [],
      dateOptions: Array(24).fill(0).map((v, i) => ({label: `${++i}:00`, value: i}))
    }
  },
  computed: {
    dicts: v => window.$dicts || {},
    storeName: v => v.options.find(e => e.storeCode == v.form.storeCode)?.storeName
  },
  methods: {
    getOptions() {
      return $http.get(`/data-boot/ca/screen/scStoreInfo/listStore`).then(res => {
        if (res?.data) {
          return this.options = res.data
        }
      })
    },
  },
  created() {
    this.getOptions().then(() => {
      setTimeout(() => {
        const {dayjs} = window
        const hourNum = new Date().getHours()+1,
            storeCode = this.$storeBoard.search.storeCode || this.options?.[0].storeCode
        const currentDate = dayjs().format("YYYYMMDD")
        this.form = {hourNum, storeCode, type: "1", currentDate}
        this.$set(this.$storeBoard, 'search', {hourNum, storeCode, type: "1", categoryId: '', currentDate})
      }, 500)
    })
  },
}
</script>

<template>
  <el-form class="AppStoreBoardFilter flex" size="small" label-width="70px">
    <el-form-item label="品类">
      <el-select v-model="form.categoryId" @change="v=>$storeBoard.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=>$storeBoard.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($storeBoard.search, 'compareDate', v)" clearable type="date" value-format="yyyyMMdd"/>
    </el-form-item>
    <div class="fill" v-text="storeName"/>
    <el-form-item label="门店">
      <el-select v-model="form.storeCode" @change="v=>$storeBoard.search.storeCode=v" clearable placeholder="全部" class="storeSelect" filterable>
        <el-option v-for="item in options" :key="item.storeCode" :label="item.storeName" :value="item.storeCode"/>
      </el-select>
    </el-form-item>
    <el-form-item label="当前日期">
      <el-date-picker v-model="form.currentDate" @change="v=>$set($storeBoard.search, 'currentDate', v)" clearable type="date" value-format="yyyyMMdd"/>
    </el-form-item>
    <el-form-item label="时段">
      <el-select v-model="form.hourNum" size="small" format="HH:mm" value-format="H" @change="v=>$storeBoard.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>
</template>

<style>
.AppStoreBoardFilter {
  width: 100%;
  color: #fff;
  align-items: center;
  height: 60px;
}

.AppStoreBoardFilter .el-form-item {
  margin-bottom: 0 !important;
}

.AppStoreBoardFilter .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;
  width: 130px;
}

.storeSelect .el-input__inner {
  width: 210px;
}

.AppStoreBoardFilter > .fill {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}

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

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