<template>
  <el-dialog :visible.sync="visible" width="700px" title="用户配置" @open="onOpen">
    <el-form ref="form" :model="form" :rules="rules" label-width="5em" v-loading="loading">
      <el-row v-if="showCurrent">
        <form-col :span="span" label="当前用户" label-width="5em">
          {{form.realOrUserName | defaultValue}}
        </form-col>
      </el-row>
      <el-row>
        <group-title title="订单显示用户手机号"/>
        <form-col :span="10" label="是否开启" label-width="5em">
          <el-switch v-model="form.showBillMobile" active-text="开启" inactive-text="不开启"/>
        </form-col>
        <form-col :span="14" label="单价" prop="showBillMobilePrice" v-if="form.showBillMobile">
          <el-input v-model="form.showBillMobilePrice" :min="0" type="number" placeholder="请输入单价">
            <template #append>元 / 单</template>
          </el-input>
        </form-col>
      </el-row>

      <el-row>
        <group-title title="风控配置"/>
        <form-col :span="span" label="充值延迟到账" prop="arrivalDelay" label-width="7em">
          <el-input v-model="form.arrivalDelay" placeholder="请输入到账延迟时长">
            <template #append>小时</template>
          </el-input>
        </form-col>
      </el-row>
<!--      <el-row>-->
<!--        <form-col :span="10" label="限制提现" prop="limitWithdraw">-->
<!--          <el-switch v-model="form.limitWithdraw" active-text="限制" inactive-text="不限制"/>-->
<!--        </form-col>-->
<!--        <template v-if="form.limitWithdraw">-->
<!--          <form-col :span="14" label="限制提现至" prop="limitWithdrawTime" label-width="6em">-->
<!--            <el-date-picker type="datetime" v-model="form.limitWithdrawTime" placeholder="请选择限制提现时间（为空则为永久）" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" style="width: 100%"/>-->
<!--          </form-col>-->
<!--          <form-col :span="24" label="限制原因" prop="limitWithdraw" label-width="5em">-->
<!--            <el-input v-model="form.limitWithdrawReason" type="textarea" placeholder="请输入限制提现的原因（展示给用户查看）" show-word-limit maxlength="200"/>-->
<!--          </form-col>-->
<!--        </template>-->
<!--      </el-row>-->
<!--      <el-row>-->
<!--        <form-col :span="10" label="限制退款" prop="limitRefund" label-width="5em">-->
<!--          <el-switch v-model="form.limitRefund" active-text="限制" inactive-text="不限制"/>-->
<!--        </form-col>-->
<!--        <template v-if="form.limitRefund">-->
<!--          <form-col :span="14" label="限制退款至" prop="limitRefundTime" label-width="6em">-->
<!--            <el-date-picker type="datetime" v-model="form.limitRefundTime" placeholder="请选择限制退款时间（为空则为永久）" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" style="width: 100%"/>-->
<!--          </form-col>-->
<!--          <form-col :span="24" label="限制原因" prop="limitRefundReason">-->
<!--            <el-input v-model="form.limitRefundReason" type="textarea" placeholder="请输入限制退款的原因（展示给用户查看）" show-word-limit maxlength="200"/>-->
<!--          </form-col>-->
<!--        </template>-->
<!--      </el-row>-->

      <el-row v-if="form.type === SmUserType.AGENT">
        <group-title title="代理商配置"/>
        <form-col :span="span" label="默认设备服务费" label-width="8em" prop="agentDeviceService">
          <el-input v-model="form.agentDeviceService" type="number" :min="0" placeholder="请输入默认设备服务费">
            <template #append>%</template>
          </el-input>
        </form-col>
        <form-col :span="span" label="商户开关/充值设备" label-width="10em" prop="agentDeviceService">
          <el-switch v-model="form.agentAllowMchSwitch" active-text="允许" inactive-text="不允许"/>
        </form-col>
      </el-row>

      <el-row>
        <group-title title="其他设置"/>
        <form-col :span="8" label="是否为设备管理员" label-width="9em" prop="deviceAdmin">
          <el-switch v-model="form.deviceAdmin" active-text="是" inactive-text="否" @change="onChangeDeviceAdmin"/>
        </form-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSmUser, updateSmUser } from '@/api/system/smUser'
import LineField from '@/components/LineField/index.vue'
import GroupTitle from '@/components/GroupTitle/index.vue'
import { SmUserType } from '@/utils/constants'

export default {
  name: "UserConfigDialog",
  components: { GroupTitle, LineField },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: String,
      default: null,
    },
    showCurrent: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    SmUserType() {
      return SmUserType
    },
    visible: {
      set(val) {
        this.$emit('update:show', val);
      },
      get() {
        return this.show;
      }
    }
  },
  data() {
    return {
      span: 12,
      form: {},
      rules: {
        showBillMobilePrice: [
          { required: true, message: '请输入单价', trigger: 'blur' }
        ]
      },
      loading: false,
      submitLoading: false,
    }
  },
  methods: {
    onOpen() {
      if (this.userId != null) {
        this.loading = true;
        getSmUser(this.userId).then(response => {
          this.form = response.data;
        }).finally(() => {
          this.loading = false;
        })
      } else {
        this.reset();
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId != null) {
            this.submitLoading = true;
            updateSmUser(this.form).then(res => {
              this.$modal.msgSuccess("修改成功");
              this.visible = false;
              this.$emit('success');
            }).finally(() => {
              this.submitLoading = false;
            })
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 重置
    reset() {
      this.form = {
        userId: this.userId,
      };
      this.resetForm("form");
    },
    // 修改为设备管理员
    onChangeDeviceAdmin(val) {
      if (val) {
        this.$confirm('【高危操作】是否确认设置用户为设备管理员？<br/>用户将可以通过微信小程序注册设备！', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }).then(() => {
          this.form.deviceAdmin = true;
        }).catch((e) => {
          this.form.deviceAdmin = false;
        });
      }
    },
  }
}
</script>
