<template>
  <div class="scenic-wrap table-box">
    <div
      class="btn"
      style="margin-bottom: 20px;">
      <el-button
        type="primary"
        size="mini"
        @click="showDialog('add')">
        新增景点
      </el-button>
    </div>

    <!-- <div class="block-title">
      景点管理
    </div> -->
    <el-table
      v-loading="loading"
      border
      stripe
      :data="tableData">
      <el-table-column
        prop="name"
        label="名称"></el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          {{ scope.row.isOpen | scenicStatus }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        width="300"
        label="开放时间">
        <template slot-scope="scope">
          <p class="thin-margin">
            <span>工作日</span>{{ scope.row.open_starttime }} - {{ scope.row.open_endtime }}
          </p>
          <p class="thin-margin">
            <span>周末</span>{{ scope.row.open_starttime_weekend }} - {{ scope.row.open_endtime_weekend }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="day_check_limit"
        label="景点容量"></el-table-column> -->
      <el-table-column
        prop="dayEnter"
        label="今日已检次数"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="showDialog('edit', scope.row)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="removeScenic(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <ElDialog
      :title="dialogType === 'edit' ? '编辑景点' : '新增景点'"
      v-model="dialogVisible"
      width="540px">
      <EditDialog
        :dialog-type="dialogType"
        :current-data="currentData"
        @updateList="getScenic"
      ></EditDialog>
    </ElDialog>
  </div>
</template>

<script>
import { getScenic, delScenic } from '@/api/ticketType'
import ElDialog from '@/components/Dialog'
import EditDialog from './scenic/editDialog'

export default {
  components: {
    ElDialog,
    EditDialog
  },
  data () {
    return {
      loading: false,
      dialogType: 'add',
      dialogVisible: false,
      tableData: [],
      currentData: {}
    }
  },
  filters: {
    scenicStatus (input) {
      switch (+input) {
        case 1:
          return '开放'
        case 0:
          return '关闭'
      }
    }
  },
  mounted () {
    this.getScenic()
  },
  methods: {
    // 获取景点
    getScenic () {
      this.loading = true
      getScenic().then(res => {
        this.tableData = res?.data?.records || []
      }).finally(() => {
        this.loading = false
      })
    },
    // 编辑或新增
    showDialog (type, data) {
      this.dialogType = type
      this.currentData = data
      this.dialogVisible = true
    },
    // 移除景点
    removeScenic (data) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delScenic(data).then(res => {
          this.$message.success('删除成功')
          this.getScenic()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.thin-margin {
  width: 220px;
  margin: 2px 0;
  display: flex;
  justify-content: space-between;
}
.green{
  color: #67C23A;
}
.gray{
  color: #909399;
}
</style>
