<template>
  <div>
    <el-row>
      <el-card class="box-card">
        <div slot="header">
          {{ __('分销参数设置') }}
        </div>
        <el-form ref="form" :model="form">
          <el-table  :data="list"  @cell-click="tabClick">
            <el-table-column :label="__('等级名称')" prop="user_level_id">
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.user_level_name"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.user_level_name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="__('一级消费')"
              prop="plantform_fx_cps_rate_1"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.plantform_fx_cps_rate_1"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.plantform_fx_cps_rate_1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="__('二级消费')"
              prop="plantform_fx_cps_rate_2"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.plantform_fx_cps_rate_2"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.plantform_fx_cps_rate_2 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="__('三级消费')"
              prop="plantform_fx_cps_rate_3"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.plantform_fx_cps_rate_3"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.plantform_fx_cps_rate_3 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('一级销售')"
              prop="sale_prize_sp_rate_1"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.sale_prize_sp_rate_1"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.sale_prize_sp_rate_1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('二级销售')"
              prop="sale_prize_sp_rate_2"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.sale_prize_sp_rate_2"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.sale_prize_sp_rate_2 }}</span>
              </template>
            </el-table-column>

            <el-table-column
              v-if="false"
              :label="__('市代理消费')"
              prop="buy_prize_ca_rate"
              width="100"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.buy_prize_ca_rate"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.buy_prize_ca_rate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('区代理消费')"
              prop="buy_prize_da_rate"
              width="100"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.buy_prize_da_rate"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.buy_prize_da_rate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('市代理销售')"
              prop="sale_prize_ca_rate"
              width="100"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.sale_prize_ca_rate"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.sale_prize_ca_rate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('区代理销售')"
              prop="sale_prize_da_rate"
              width="100"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.sale_prize_da_rate"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.sale_prize_da_rate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('合伙消费')"
              prop="buy_prize_pt_rate"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.buy_prize_pt_rate"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.buy_prize_pt_rate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('合伙销售')"
              prop="sale_prize_pt_rate"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.sale_prize_pt_rate"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.sale_prize_pt_rate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('店主')"
              prop="sale_prize_distributor_rate"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.sale_prize_distributor_rate"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.sale_prize_distributor_rate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="false"
              :label="__('店员')"
              prop="sale_prize_salesperson_rate"
            >
              <template slot-scope="scope">
                <span
                  v-if="
                    scope.row.user_level_id === tabClickIndex &&
                    scope.column.id === columnId
                  "
                >
                  <el-input
                    ref="editInput"
                    v-model="scope.row.sale_prize_salesperson_rate"
                    @blur.stop="inputBlur(scope.row)"
                  />
                </span>
                <span v-else>{{ scope.row.sale_prize_salesperson_rate }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-button
            icon="el-icon-s-tools"
            style="margin-top: 10px;"
            type="primary"
            @click="handleEdit"
          >
            {{ __('修改') }}
          </el-button>
        </el-form>
      </el-card>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header">
              {{ __('平台推广设置') }}
            </div>
            <el-form ref="promotionForm" :model="promotionForm">
              <el-form-item
                :label="__('提现最低金额')"
                label-width="150px"
                prop="plantform_fx_withdraw_min_amount"
              >
                <el-input
                  v-model="promotionForm.plantform_fx_withdraw_min_amount"
                  :placeholder="__('小于此金额不可提现')"
                />
              </el-form-item>
              <el-form-item
                :label="__('全民分销')"
                label-width="150px"
                prop="distribution_user_auto_active"
              >
                <el-switch
                  v-model="promotionForm.distribution_user_auto_active"

                  :active-text="__('开启')"
                  active-value="1"

                  :inactive-text="__('关闭')"
                  inactive-value="0"
                  style="display: block; margin-top: 5px"
                />
              </el-form-item>
              <el-form-item
                :label="__('佣金提现审核')"
                label-width="150px"
                prop="plantform_fx_auto_withdraw"
              >
                <el-switch
                  v-model="promotionForm.plantform_fx_auto_withdraw"

                  :active-text="__('开启')"
                  active-value="1"

                  :inactive-text="__('关闭')"
                  inactive-value="0"
                  style="display: block; margin-top: 5px"
                />
              </el-form-item>
              <el-form-item
                :label="__('消费奖是否开启')"
                label-width="150px"
                prop="plantform_fx_cps_enable"
              >
                <el-switch
                  v-model="promotionForm.plantform_fx_cps_enable"

                  :active-text="__('开启')"
                  active-value="1"

                  :inactive-text="__('关闭')"
                  inactive-value="0"
                  style="display: block; margin-top: 5px"
                />
              </el-form-item>
              <el-form-item
                v-if="false"
                :label="__('销售奖是否开启')"
                label-width="150px"
                prop="sale_prize_sp_enable"
              >
                <el-switch
                  v-model="promotionForm.sale_prize_sp_enable"

                  :active-text="__('开启')"
                  active-value="1"

                  :inactive-text="__('关闭')"
                  inactive-value="0"
                  style="display: block; margin-top: 5px"
                />
              </el-form-item>
              <el-form-item
                v-if="false"
                :label="__('消费返利')"
                label-width="150px"
                prop="plantform_rebate_enable"
              >
                <el-switch
                  v-model="promotionForm.plantform_rebate_enable"

                  :active-text="__('开启')"
                  active-value="1"

                  :inactive-text="__('关闭')"
                  inactive-value="0"
                  style="display: block; margin-top: 5px"
                />
              </el-form-item>
              <el-form-item
                :label="__('佣金结算')"
                label-width="150px"
                prop="plantform_rebate_enable"
              >
                <el-radio-group v-model="promotionForm.fx_settle_type">
                  <el-radio label="paid">{{ __('支付完成') }}</el-radio>
                  <el-radio label="receive">{{ __('确认收货') }}</el-radio>
                  <el-radio v-if="false" label="settle">
                    {{ __('订单结算') }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                :label="__('佣金结算方式')"
                label-width="150px"
                prop="plantform_commission_withdraw_mode"
              >
                <el-switch
                  v-model="promotionForm.plantform_commission_withdraw_mode"

                  :active-text="__('佣金提现')"
                  active-value="1"

                  :inactive-text="__('佣金到余额')"
                  inactive-value="0"
                  style="display: block; margin-top: 5px"
                />
              </el-form-item>
            </el-form>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="promotionFormEdit"
            >
              {{ __('修改') }}
            </el-button>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
            <div slot="header">
              {{ __('推广粉丝赠送积分') }}
            </div>
            <el-form ref="setForm" :model="setForm">
              <el-form-item
                :label="__('赠送积分')"
                label-width="150px"
                prop="plantform_fx_gift_point"
              >
                <el-input
                  v-model="setForm.plantform_fx_gift_point"
                  :placeholder="__('赠送积分')"
                  style="width: 150px"
                />
              </el-form-item>
            </el-form>
            <el-button
              class="form-sub-btn"
              icon="el-icon-s-tools"
              type="primary"
              @click="setFormEdit"
            >
              {{ __('修改') }}
            </el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { doEdit, getList } from '@/api/base/config'
  import VabQuill from '@/extra/VabQuill'
  import { isJson } from 'vue-plugin-utils'

  import { getList as getUserLevelList } from '@/api/base/user/level'

  export default {
    name: 'Site',
    // eslint-disable-next-line vue/no-unused-components
    components: { VabQuill },

    data() {
      return {
        list: [],
        radio: 3,
        tabClickIndex: null, // 点击的行
        columnId: null,
        form: {
          fx_level_config: '',
        },
        setForm: {
          plantform_fx_gift_point: '',
        },
        promotionForm: {
          plantform_fx_withdraw_min_amount: '',
          plantform_fx_auto_withdraw: 0,
          distribution_user_auto_active: 0,
          plantform_fx_cps_enable: 0,
          sale_prize_sp_enable: 0,
          plantform_rebate_enable: 0,
          plantform_commission_withdraw_mode: 0,
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      fetchData: async function () {
        let config_data = await getList()
        let data = config_data.data

        let config_obj = {}

        try {
          if (isJson(data.fx_level_config)) {
            let level_list = JSON.parse(data.fx_level_config)
            console.info(level_list)

            for (let i = 0; i < level_list.length; i++) {
              config_obj[level_list[i].user_level_id] = level_list[i]
            }
          } else {
            //初始化数据
          }
        } catch (e) {
          //数据从未初始化过
        }

        //需要读取平台等级，平台等级会被更改，根据平台等级修正数。

        //形成最终 this.list
        this.list = []
        let user_level_obj = await getUserLevelList()
        const level_itmes = user_level_obj.data.items

        for (let i = 0; i < level_itmes.length; i++) {
          if (typeof config_obj[level_itmes[i].user_level_id] !== 'undefined') {
            this.list.push(config_obj[level_itmes[i].user_level_id])
          } else {
            this.list.push(level_itmes[i])
          }
        }

        /*
        this.list = [
          {"user_level_id":"1001","user_level_name":"v1","plantform_fx_cps_rate_1":"10","plantform_fx_cps_rate_2":"5","plantform_fx_cps_rate_3":"5","sale_prize_sp_rate_1":"0","sale_prize_sp_rate_2":"0","buy_prize_ca_rate":"10","buy_prize_da_rate":"10","sale_prize_ca_rate":"0","sale_prize_da_rate":"0","buy_prize_pt_rate":"20","sale_prize_pt_rate":"0","plantform_fx_rebate":"","sale_prize_distributor_rate":"0","sale_prize_salesperson_rate":"0"},
          {"user_level_id":"1002","user_level_name":"v2","plantform_fx_cps_rate_1":"20","plantform_fx_cps_rate_2":"10","plantform_fx_cps_rate_3":"5","sale_prize_sp_rate_1":"0","sale_prize_sp_rate_2":"0","buy_prize_ca_rate":"10","buy_prize_da_rate":"10","sale_prize_ca_rate":"0","sale_prize_da_rate":"0","buy_prize_pt_rate":"20","sale_prize_pt_rate":"0","plantform_fx_rebate":"","sale_prize_distributor_rate":"0","sale_prize_salesperson_rate":"0"}
        ];

         */

        this.promotionForm = {
          distribution_user_auto_active: data.distribution_user_auto_active,
          plantform_fx_withdraw_min_amount:
            data.plantform_fx_withdraw_min_amount,
          plantform_fx_cps_enable: data.plantform_fx_cps_enable,
          sale_prize_sp_enable: data.sale_prize_sp_enable,
          plantform_rebate_enable: data.plantform_rebate_enable,
          plantform_commission_withdraw_mode:
            data.plantform_commission_withdraw_mode || 0,
          plantform_fx_auto_withdraw: data.plantform_fx_auto_withdraw,
          fx_settle_type: data.fx_settle_type,
        }
        this.setForm.plantform_fx_gift_point = data.plantform_fx_gift_point

        this.inputBlur()
      },
      inputBlur: async function () {
        this.tabClickIndex = null
        this.columnId = null
        // 保存数据
        this.form.fx_level_config = JSON.stringify(this.list)
      },
      tabClick(row, column) {
        this.tabClickIndex = row.user_level_id
        this.columnId = column.id
        // inout 获取焦点
        this.$nextTick(() => {
          if (!this.$refs['editInput']) return
          this.$refs['editInput'].focus()
        })
      },
      setFormEdit() {
        this.$refs['setForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.setForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            this.fetchData()
          } else {
            return false
          }
        })
      },
      promotionFormEdit() {
        this.$refs['promotionForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.promotionForm),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            this.fetchData()
          } else {
            return false
          }
        })
      },
      handleEdit() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.form),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            this.fetchData()
          } else {
            return false
          }
        })
      },
    },
  }
</script>
