<template>
  <el-card class="setting-card" shadow="never">
    <div slot="header" class="card-header">
      <div class="card-header__left">
        <span>公休时间设置</span>
        <el-select v-model="selectedYear" size="mini" class="year-select" placeholder="选择年份">
          <el-option v-for="item in yearOptions" :key="item" :label="`${item}年`" :value="item" />
        </el-select>
      </div>
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="addRow">新增日期</el-button>
    </div>
    <NCC-table :data="filteredRows" border size="mini" height="260">
      <el-table-column label="公休日期" min-width="160" align="left">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.holidayDate"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width: 100%"
          />
        </template>
      </el-table-column>
      <el-table-column label="节假日名称" min-width="180" align="left">
        <template slot-scope="scope">
          <el-input v-model="scope.row.holidayName" placeholder="例如：春节公休" />
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="220" align="left">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" placeholder="无" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="110" align="left">
        <template slot-scope="scope">
          <el-popconfirm
            title="确认删除当前配置吗？"
            confirm-button-text="确认删除"
            cancel-button-text="取消"
            @confirm="removeRow(scope.row)"
          >
            <el-button slot="reference" type="text" class="danger-text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </NCC-table>
    <el-empty v-if="!filteredRows.length" :image-size="56" description="当前年份暂无公休时间配置" />
  </el-card>
</template>

<script>
export default {
  name: 'HolidayTable',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedYear: String(new Date().getFullYear())
    }
  },
  computed: {
    yearOptions() {
      const yearSet = new Set([String(new Date().getFullYear())])
      ;(this.value || []).forEach(item => {
        if (item.holidayDate) {
          yearSet.add(String(item.holidayDate).slice(0, 4))
        }
      })
      return Array.from(yearSet).filter(Boolean).sort((a, b) => Number(b) - Number(a))
    },
    filteredRows() {
      return (this.value || []).filter(item => {
        if (!item.holidayDate) return this.selectedYear === String(new Date().getFullYear())
        return String(item.holidayDate).slice(0, 4) === this.selectedYear
      })
    }
  },
  watch: {
    yearOptions: {
      handler(options) {
        if (!options.includes(this.selectedYear)) {
          this.selectedYear = options[0] || String(new Date().getFullYear())
        }
      },
      immediate: true
    }
  },
  methods: {
    addRow() {
      this.$emit('input', [
        ...this.value,
        {
          holidayDate: `${this.selectedYear}-01-01`,
          holidayName: '',
          remark: ''
        }
      ])
    },
    removeRow(row) {
      const list = this.value.slice()
      const index = list.indexOf(row)
      if (index > -1) {
        list.splice(index, 1)
        this.$emit('input', list)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-card {
  border-radius: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.card-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.year-select {
  width: 110px;
}

.danger-text {
  color: #f56c6c;
}

::v-deep .el-card__header {
  padding: 12px 16px;
}

::v-deep .el-card__body {
  padding: 12px 14px;
}
</style>
