<template>
  <div class="app-container">
    <el-alert title="设置各服务类型的平台成本价，代理分佣按每日总利润（租户消费 - 平台成本）× 分成比例计算" type="info" :closable="false" show-icon class="mb16" />

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editing = !editing">
          {{ editing ? '取消编辑' : '编辑模式' }}
        </el-button>
      </el-col>
      <el-col :span="1.5" v-if="editing">
        <el-button type="success" icon="el-icon-check" size="mini" @click="submitAll">批量保存</el-button>
      </el-col>
    </el-row>

    <el-table border v-loading="loading" :data="costList" style="width:100%">
      <el-table-column label="服务类型ID" prop="serviceType" width="100" align="center" />
      <el-table-column label="服务类型" prop="configName" min-width="140" />
      <el-table-column label="收费单位" prop="feeUnit" width="120" align="center" />
      <el-table-column label="租户售价（元）" align="center" width="160">
        <template slot-scope="s">
          <el-input-number v-if="editing" v-model="s.row.feeStandard" :min="0" :precision="4" size="small" controls-position="right" style="width:130px" />
          <span v-else>¥{{ s.row.feeStandard || '0' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平台成本价（元）" align="center" width="160">
        <template slot-scope="s">
          <el-input-number v-if="editing" v-model="s.row.platformCost" :min="0" :precision="4" size="small" controls-position="right" style="width:130px" />
          <span v-else style="color:#fa8c16;font-weight:bold">¥{{ s.row.platformCost || '0' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预计利润（售价-成本）" align="center" width="160">
        <template slot-scope="s">
          <span style="color:#52c41a;font-weight:bold">
            ¥{{ ((s.row.feeStandard || 0) - (s.row.platformCost || 0)).toFixed(4) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" min-width="150" show-overflow-tooltip />
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="s">
          <el-tag v-if="s.row.enabled === 1" type="success" size="small">启用</el-tag>
          <el-tag v-else type="info" size="small">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" v-if="editing">
        <template slot-scope="s">
          <el-button size="mini" type="text" icon="el-icon-check" @click="submitOne(s.row)">保存</el-button>
          <el-button size="mini" type="text" icon="el-icon-switch-button" @click="toggleEnabled(s.row)">
            {{ s.row.enabled === 1 ? '禁用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { listServiceCost, updateServiceCost } from '@/api/admin/serviceCost'

export default {
  name: 'AdminServiceCost',
  data() {
    return {
      loading: false,
      editing: false,
      costList: []
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    loadList() {
      this.loading = true
      listServiceCost().then(res => {
        this.costList = (res.data || []).filter(c => c.serviceType !== 6)
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    submitOne(row) {
      updateServiceCost(row).then(() => {
        this.$message.success(`${row.configName} 更新成功`)
      })
    },
    submitAll() {
      let count = 0
      const promises = this.costList.map(row => updateServiceCost(row).then(() => count++))
      Promise.all(promises).then(() => {
        this.$message.success(`批量保存成功，共更新 ${count} 条`)
        this.editing = false
        this.loadList()
      })
    },
    toggleEnabled(row) {
      row.enabled = row.enabled === 1 ? 0 : 1
      this.submitOne(row)
    }
  }
}
</script>

<style scoped>
.mb16 { margin-bottom: 16px; }
.mb8 { margin-bottom: 8px; }
</style>
