<template>
    <div class="set-merchant-page">
      <Card>
        <div class="save-content">
          <Button type="primary" @click="handleSave">+ 保 存</Button>
        </div>
        <tables
          ref="tables"
          editable
          v-model="tableData"
          :columns="columns"
          :loading="loading"
        />
      </Card>
    </div>
</template>
<script>
import { MerchantLevelObj } from '@/enums'
import Tables from '_c/tables'
export default {
  components: {
    Tables
  },
  data () {
    let vm = this
    return {
      loading: false,
      tableData: [],
      columns: [
        { title: 'ID', key: 'level', minWidth: 200, align: 'center' },
        { title: '名称',
          key: 'name',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            let obj = MerchantLevelObj[params.row.level]
            return h('div', obj.label)
          }
        },
        { title: '会员费（元）',
          key: 'membershipFee',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Input', {
                props: {
                  // type: 'number',
                  value: vm.tableData[params.index].membershipFee,
                  clearable: true
                },
                on: {
                  input: (val) => {
                    vm.tableData[params.index].membershipFee = val
                  }
                }
              })
            ])
          }
        },
        { title: '平台服务费（元/年）',
          key: 'serviceFee',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Input', {
                props: {
                  // type: 'text',
                  value: vm.tableData[params.index].serviceFee,
                  clearable: true
                },
                on: {
                  input: (val) => {
                    vm.tableData[params.index].serviceFee = val
                  }
                }
              })
            ])
          }
        },
        {
          title: '平台抽成比例（%）',
          key: 'drawProportion',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Input', {
                props: {
                  // type: 'number',
                  value: vm.tableData[params.index].drawProportion,
                  clearable: true
                },
                on: {
                  input: (val) => {
                    vm.tableData[params.index].drawProportion = val
                  }
                }
              })
            ])
          }
        },
        { title: '权限', key: 'bannerType', minWidth: 200, align: 'center' }
      ]
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getMerchantConfigList',
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data
        }
      })
    },
    checkForm () {
      let errMsg = ''
      this.tableData.forEach((row) => {
        if (row.membershipFee < 0 || row.membershipFee > 99999999) {
          errMsg = '请输入合法会员费（1--99999999）！'
        }
        if (!/^\d+$/.test(row.membershipFee)) {
          errMsg = '会员费格式输入有误！'
        }
        if (!row.membershipFee && row.membershipFee !== 0) {
          errMsg = '请输入会员费！'
        }
        if (!/^\d+$/.test(row.serviceFee)) {
          errMsg = '平台服务费格式输入有误！'
        }
        if (row.serviceFee < 0 || row.serviceFee > 99999999) {
          errMsg = '请输入合法平台服务费（1--99999999）！'
        }
        if (!row.serviceFee && row.serviceFee !== 0) {
          errMsg = '请输入平台服务费！'
        }
        if (row.drawProportion < 0 || row.drawProportion > 100) {
          errMsg = '请输入有效抽成比例数值'
        }
        if (!row.drawProportion && row.drawProportion !== 0) {
          errMsg = '请输入平台抽成比例！'
        }
      })
      return { errMsg }
    },
    handleSave () {
      let { errMsg } = this.checkForm()
      if (errMsg) {
        return this.$Notice.warning({ title: errMsg })
      }
      let tableData = this.tableData
      this.api({
        apiName: 'editMerchantConfig',
        postdata: tableData,
        success: (res) => {
          this.requestData()
          this.$Notice.success({ title: `保存成功！` })
        }
      })
    }
  },
  created () {
    this.requestData()
  }
}
</script>
<style scoped lang="less">
  .save-content {
    padding-bottom: 10px;
    text-align: right;
  }
</style>
