<template>
  <el-dialog
    append-to-body
    title="选择区域类型"
    :visible.sync="areaVisible"
    width="30%"
    @close="areaVisible=false">
    <div style="padding:20px">
      <el-select
        v-model="area"
        placeholder="">
        <el-option
          v-for="item in areaList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>

    <span slot="footer">
      <el-button @click="areaVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="handleSubmitArea">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addSeat,
  updateSeat
} from '@/api/seat'

export default {
  props: {
    selectedChart: {
      type: Number,
      default: 0
    },
    selectedArea: {
      type: Number,
      default: 0
    },
    areaList: {
      type: Array,
      default: () => []
    },
    getSelectedSeats: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      area: 0,
      areaVisible: false
    }
  },
  methods: {
    show (type) {
      if (!this.areaList.length) return this.$message.error('请先添加区域')

      // 区域操作类型：新增还是更新
      this.type = type

      this.selected = this.getSelectedSeats()

      // 添加座位 还是 更新座位
      this.selected = this.selected.filter(item => {
        return this.type === 'add' ? !item.id : item.id
      })

      if (!this.selected.length) return this.$message.error(`请选择${this.type === 'add' ? '空位' : '座位'}`)

      this.areaVisible = true
    },
    handleSubmitArea () {
      if (!this.selectedArea) return this.$message.error('请选择区域')

      if (this.type === 'add') {
        addSeat({
          config_id: this.selectedChart,
          area_id: this.area,
          seatList: this.selected
        }).then(res => {
          this.$message.success('添加成功')

          this.areaVisible = false

          this.$emit('update')
        })
      } else {
        this.selected.forEach(item => {
          item.area_id = this.area
        })

        updateSeat({
          seats: this.selected
        }).then(res => {
          this.$message.success('操作成功')

          this.areaVisible = false

          this.$emit('update')
        })
      }
    }
  },
  watch: {
    selectedArea (val) {
      this.area = val
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
