<template>
  <div>
    <div style="display: flex;justify-content: space-around;background: #fff;margin:16px 16px 16px;border-radius: 8px;">
      <div>
        <div style="line-height: 50px;">底分</div>
        <div v-show="!edit" v-for="item in formData.base_score" :key="item" class="text-ya-ma">{{ item }}</div>
        <div v-show="edit" v-for="(item,i) in formData.base_score" :key="item"
             style="margin-bottom:10px;display: flex ;align-items: center"
        >
          <el-input-number v-show="edit" v-model="formData.base_score[i]" style="margin-right: 10px"></el-input-number>
          <i class="el-icon-remove" v-if="formData.base_score.length>=1" style="font-size: 28px;cursor: pointer"
             @click="formData.base_score.splice(i,1)"
          ></i>
          <i class="el-icon-circle-plus" v-if="i==formData.base_score.length-1" style="font-size: 28px;cursor: pointer"
             @click="formData.base_score.push(0)"
          ></i>
        </div>
      </div>
      <div>
        <div style="line-height: 50px;">佣金</div>
        <div class="text-ya-ma" v-if="!edit">
          {{ formData.brokerage }}
        </div>
        <el-input-number :max="1" :min="0.01" :step="0.1" v-else v-model="formData.brokerage"></el-input-number>
      </div>
      <div>
        <div style="line-height: 50px;">服务账户</div>
        <div class="text-ya-ma" v-if="!edit">
          {{ formData.service_account }}
        </div>
        <el-input v-else v-model="formData.service_account"></el-input>
      </div>
      <div>
        <div style="line-height: 50px;">服务_费用</div>
        <div class="text-ya-ma" v-if="!edit">
          {{ formData.service_charge }}
        </div>
        <el-input v-else v-model="formData.service_charge"></el-input>
      </div>
      <div>
        <div style="line-height: 50px;">收款地址</div>
        <div class="text-ya-ma" v-if="!edit">
          {{ formData.receiving_address }}
        </div>
        <el-input v-else v-model="formData.receiving_address"></el-input>
      </div>
      <div>
        <div style="line-height: 50px;">房间群通知</div>
        <div class="text-ya-ma" v-if="!edit">
          {{ formData.group_notice }}
        </div>
        <el-input v-else v-model="formData.group_notice"></el-input>
      </div>
      <div>
        <div style="line-height: 50px;">类型</div>
        <div class="text-ya-ma" v-if="!edit">
          {{ formData.receiving_type === '1' ? '自动' : '手动' }}
        </div>
        <el-select v-else v-model="formData.receiving_type">
          <el-option value="1" label="自动"></el-option>
          <el-option value="2" label="手动"></el-option>
        </el-select>
      </div>
    </div>
    <div style="width: 100%;text-align: center" v-if="show">
      <el-button style="" v-if="!edit" @click="edit=true">修改</el-button>
      <el-button style="" v-else @click="onSubmit">保存</el-button>
      <el-button style="" v-if="edit" @click="edit=false">返回</el-button>
    </div>

  </div>
</template>

<script>
import { configgetAll, configset, menucheck } from '@/api/data'

export default {
  data() {
    return {
      loading: false,
      formData: {},
      edit: false,
      show: true
    }
  },
  mounted() {
    this.getData()
    menucheck('getAll')
      .then(({ code }) => {
        this.show = code === 0
      })
  },
  methods: {
    getData() {
      configgetAll()
        .then((res) => {
          this.formData = res.data
        })
    },
    onValueChange(val) {

    },
    onSubmit() {
      configset(this.formData)
        .then((res) => {
          this.$message({
            message: '提交成功！',
            type: 'success'
          })
          this.edit = false
        })
        .catch(() => {
          this.getData()
          this.edit = false
        })
    }
  }
}

</script>
<style scoped>
.text-ya-ma {
  height: 50px;
  color: #666;
  font-size: 18px;
}

</style>
