<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ __('积分资源启用设置') }}</span>
          </div>
          <div>
            <el-form
              ref="pointForm"
              label-width="100px"
              :model="pointForm"
              :rules="pointRules"
              size="medium"
            >
              <el-form-item
                :label="__('积分资源启用设置')"
                label-width="150px"
                prop="pointList"
              >
                <el-checkbox-group v-model="pointForm.pointList">
                  <el-checkbox label="point_enable">
                    {{ __('积分') }}
                  </el-checkbox>
                  <el-checkbox v-if="false" label="point_sp_enable">
                    {{ __('众宝') }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-button class="form-sub-btn" icon="el-icon-s-tools" type="primary" @click="pointEdit">
              {{ __('修改') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-card class="box-card">
            <div>
              <el-form
                ref="manageForm"
                label-width="100px"
                :model="manageForm"
                :rules="manageRules"
                size="medium"
              >
                <el-form-item
                  :label="__('会员注册')"
                  label-width="150px"
                  prop="points_reg"
                >
                  <el-input
                    v-model="manageForm.points_reg"
                    clearable
                    :placeholder="__('请输入单行文本会员注册')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('订单商品评论')"
                  label-width="150px"
                  prop="points_evaluate_good"
                >
                  <el-input
                    v-model="manageForm.points_evaluate_good"
                    clearable
                    :placeholder="__('请输入订单商品评论')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('会员每天签到')"
                  label-width="150px"
                  prop="points_login"
                >
                  <el-input
                    v-model="manageForm.points_login"
                    clearable
                    :placeholder="__('请输入会员每天签到赠送积分数')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('消费赠送积分比例')"
                  label-width="150px"
                  prop="points_consume_rate"
                >
                  <el-tooltip class="item" effect="dark" content="消费额与赠送积分比例。 获得积分额度 = 消费额度 * 赠送比例。 如果填写100， 用户消费1元，则赠送100积分！" placement="top-start">
                    <el-input
                      v-model="manageForm.points_consume_rate"
                      clearable
                      :placeholder="__('请输入消费赠送积分比例')"
                      :style="{ width: '100%' }"
                    />
                  </el-tooltip>
                </el-form-item>
                <el-form-item
                  :label="__('每订单最多赠送积分')"
                  label-width="150px"
                  prop="points_consume_max"
                >
                  <el-input
                    v-model="manageForm.points_consume_max"
                    clearable
                    :placeholder="__('请输入每订单最多赠送积分')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
                <el-form-item
                  :label="__('积分价值')"
                  label-width="150px"
                  prop="points_vaue_rate"
                >
                  <el-tooltip class="item" effect="dark" content="如果填写0.01， 则1积分价值为1分钱，即0.01元！" placement="top-start">
                    <el-input
                      v-model="manageForm.points_vaue_rate"
                      clearable
                      :placeholder="__('1 积分 = N 元人民币')"
                      :style="{ width: '100%' }"
                    />
                  </el-tooltip>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button
                class="form-sub-btn"
                icon="el-icon-s-tools"
                type="primary"
                @click="manageFormEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ __('签到阶梯奖励') }}</span>
            </div>
            <div>
              <el-form ref="pointStepForm" :model="pointStepForm" size="small">
                <el-table
                  border
                  :data="pointStepForm.sign_point_step"
                  style="width: 100%"
                  @cell-click="tabClick"
                >
                  <el-table-column
                    align="center"
                    :label="__('操作')"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <el-button type="text" @click="addParamsSetting">
                        {{ __('新增') }}
                      </el-button>
                      <el-button type="text" @click="deleteRow(scope.$index)">
                        {{ __('删除') }}
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :label="__('天数')"
                    prop="days"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <span
                        v-if="
                          scope.row.times === tabClickIndex &&
                          scope.column.id === columnId
                        "
                      >
                        <el-input
                          ref="editInput"
                          v-model="scope.row.days"
                          @blur.stop="inputBlur(scope.row)"
                        />
                      </span>
                      <span v-else>{{ scope.row.days }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :label="__('膨胀倍数')"
                    prop="multiples"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <span
                        v-if="
                          scope.row.times === tabClickIndex &&
                          scope.column.id === columnId
                        "
                      >
                        <el-input
                          ref="editInput"
                          v-model="scope.row.multiples"
                          @blur.stop="inputBlur(scope.row)"
                        />
                      </span>
                      <span v-else>{{ scope.row.multiples }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
            <div class="mt15">
              <el-button
                icon="el-icon-s-tools"
                type="primary"
                @click="pointStepEdit"
              >
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row v-if="false">
      <el-col :span="24">
        <div>
          <el-card class="box-card">
            <div>
              <el-form
                ref="spForm"
                label-width="100px"
                :model="spForm"
                :rules="spRules"
                size="medium"
              >
                <el-form-item
                  :label="__('众宝价值')"
                  label-width="150px"
                  prop="sp_vaue_rate"
                >
                  <el-input
                    v-model="spForm.sp_vaue_rate"
                    clearable
                    :placeholder="__('请输入众宝价值')"
                    :style="{ width: '100%' }"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button icon="el-icon-s-tools" type="primary" @click="SpEdit">
                {{ __('修改') }}
              </el-button>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { doEdit, getList } from '@/api/base/config'

  export default {
    name: 'Points',
    components: {},
    data() {
      return {
        tabClickIndex: null, // 点击的行
        columnId: null, // 点击的列
        pointStepForm: {
          sign_point_step: [],
          // sign_point_step: [{
          //   row_id: 0,
          //   days: 1,
          //   multiples: 1
          // },{
          //   row_id: 1,
          //   days: 2,
          //   multiples: 2
          // }]
        },
        pointForm: {
          pointList: [],
        },
        manageForm: {},
        spForm: {
          sp_vaue_rate: undefined,
        },
        pointRules: {
          pointList: [
            {
              required: true,
              message: this.__('积分资源启用设置不能为空'),
              trigger: 'blur',
            },
          ],
        },
        manageRules: {
          points_reg: [
            {
              required: true,
              message: this.__('请输入单行文本会员注册'),
              trigger: 'blur',
            },
          ],
          points_evaluate_good: [
            {
              required: true,
              message: this.__('请输入订单商品评论'),
              trigger: 'blur',
            },
          ],
          points_login: [
            {
              required: true,
              message: this.__('请输入会员每天签到'),
              trigger: 'blur',
            },
          ],
          points_consume_rate: [
            {
              required: true,
              message: this.__('请输入消费赠送积分比例'),
              trigger: 'blur',
            },
          ],
          points_consume_max: [
            {
              required: true,
              message: this.__('请输入每订单最多赠送积分'),
              trigger: 'blur',
            },
          ],
          points_vaue_rate: [
            {
              required: true,
              message: this.__('请输入积分价值'),
              trigger: 'blur',
            },
          ],
        },
        spRules: {
          sp_vaue_rate: [
            {
              required: true,
              message: this.__('请输入众宝价值'),
              trigger: 'blur',
            },
          ],
        },
        point_enableOptions: [
          {
            label: this.__('积分'),
            value: '1',
          },
          {
            label: this.__('众宝'),
            value: '2',
          },
        ],
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      __,
      tabClick(row, column) {
        this.tabClickIndex = row.times
        this.columnId = column.id
        // input 获取焦点
        this.$nextTick(() => {
          if (!this.$refs['editInput']) return
          this.$refs['editInput'].focus()
        })
      },
      // 失去焦点初始化
      async inputBlur(row) {
        this.tabClickIndex = null
        this.columnId = null
      },
      async fetchData() {
        const { data } = await getList()
        this.initPointForm(data)
        this.initManageForm(data)
        this.initPointStepForm(data)
        this.spForm.sp_vaue_rate = data.sp_vaue_rate
      },
      initPointForm(data) {
        let pointEnable = data.point_enable
        if (pointEnable && pointEnable === '1') {
          this.pointForm.pointList.push('point_enable')
        }
        let pointSpEnable = data.point_sp_enable
        if (pointSpEnable && pointSpEnable === '1') {
          this.pointForm.pointList.push('point_sp_enable')
        }
      },
      initManageForm(data) {
        this.manageForm = {
          points_reg: data.points_reg,
          points_evaluate_good: data.points_evaluate_good,
          points_login: data.points_login,
          points_consume_rate: data.points_consume_rate,
          points_consume_max: data.points_consume_max,
          points_vaue_rate: data.points_vaue_rate,
        }
      },
      initPointStepForm(data) {
        this.pointStepForm.sign_point_step = JSON.parse(data.sign_point_step)
      },
      pointEdit() {
        this.$refs['pointForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.getPointParams()),
            })

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      getPointParams() {
        let pointList = this.pointForm.pointList
        let params = {}
        if (pointList.indexOf('point_enable') !== -1) {
          params.point_enable = 1
        } else {
          params.point_enable = ''
        }
        if (pointList.indexOf('point_sp_enable') !== -1) {
          params.point_sp_enable = 1
        } else {
          params.point_sp_enable = ''
        }
        return params
      },
      manageFormEdit() {
        this.$refs['manageForm'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit({
              param: JSON.stringify(this.manageForm),
            })

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

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

            if (status == 200) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
          } else {
            return false
          }
        })
      },
      addList() {
        this.pointStepForm.sign_point_step.push({
          row_id: this.pointStepForm.sign_point_step.length,
          days: '',
          multiples: '',
        })
      },
      // 新增行
      addParamsSetting() {
        this.addList()
      },
      // 删除当前行
      deleteRow(index) {
        if (this.pointStepForm.sign_point_step.length === 1) {
          this.$baseAlert('这已是最后一行，请不要全部删除！')
          return
        }
        this.pointStepForm.sign_point_step.splice(index, 1)
      },
    },
  }
</script>
