<template>
  <el-dialog
    title="查看新店设置"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
    @close="close"
  >
    <div v-loading="loading">
      <el-table :data="list" border stripe>
        <el-table-column label="保护开始时间" width="150">
          <template slot-scope="scope">
            {{ formatTime(scope.row.bhkssj) }}
          </template>
        </el-table-column>
        <el-table-column label="保护结束时间" width="150">
          <template slot-scope="scope">
            {{ formatTime(scope.row.bhjssj) }}
          </template>
        </el-table-column>
        <el-table-column prop="sm" label="说明" />
        <el-table-column label="创建时间" width="150">
          <template slot-scope="scope">
            {{ formatTime(scope.row.cjsj) }}
          </template>
        </el-table-column>
        <el-table-column label="是否启用" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.sfqy === 1 ? 'success' : 'danger'" size="small">
              {{ scope.row.sfqy === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="阶段" width="80">
          <template slot-scope="scope">
            {{ scope.row.stage==1 ? '第一阶段' : scope.row.stage==2 ? '第二阶段' : scope.row.stage == 3 ? '第三阶段' : '无' }}
          </template>
        </el-table-column>
      </el-table>
      
      <div v-if="list.length === 0" class="empty-data">
        <i class="el-icon-info"></i>
        <p>暂无新店设置数据</p>
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'ViewNewStoreDialog',
  data() {
    return {
      visible: false,
      loading: false,
      list: [],
      storeId: null
    }
  },
  methods: {
    init(storeId) {
      this.storeId = storeId
      this.visible = true
      this.loadData()
    },
    loadData() {
      this.loading = true
      request({
        url: '/api/Extend/lqmdxdbhsj',
        method: 'GET',
        data: {
          mdid: this.storeId
        }
      }).then(res => {
        this.list = res.data.list || []
        this.loading = false
      }).catch(err => {
        this.$message.error('获取数据失败')
        this.loading = false
      })
    },
    formatTime(timestamp) {
      if (!timestamp) return '无'
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    close() {
      this.visible = false
      this.list = []
      this.storeId = null
    }
  }
}
</script>

<style scoped>
.empty-data {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.empty-data i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.empty-data p {
  margin: 0;
  font-size: 14px;
}
</style>
