<template>
  <el-dialog :title="title" :visible.sync="visible" width="700px" append-to-body @close="onClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <form-col :span="span" label="用户头像" prop="avatar">
          <image-upload v-model="form.avatar" :limit="1"/>
        </form-col>
        <form-col :span="span" label="用户角色" prop="type">
          <el-select v-model="form.type" placeholder="请选择用户角色" style="width: 100%">
            <el-option v-for="item of dict.type.sm_user_type" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </form-col>
        <form-col :span="span" label="用户名称" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名称" :maxlength="20" ></el-input>
        </form-col>
        <form-col :span="span" label="手机号" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号" :maxlength="11" show-word-limit
                    clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
        </form-col>
        <form-col :span="span" label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码，为空则不修改" type="password" :maxlength="32" show-word-limit show-password/>
        </form-col>
      </el-row>
      <el-row>
        <form-col :span="span" label="商户服务费" prop="serviceRate"  label-width="8em" tip="平台收取商户的服务费">
          <el-input v-model="form.serviceRate" placeholder="请输入平台收取商户服务费" type="number">
            <template #append>%</template>
          </el-input>
        </form-col>
        <form-col :span="span" label="代理服务费" prop="agentServiceRate" label-width="9em" v-if="form.type === SmUserType.AGENT" tip="平台收取代理商的服务费">
          <el-input v-model="form.agentServiceRate" placeholder="请输入平台收取代理商服务费" type="number">
            <template #append>%</template>
          </el-input>
        </form-col>
        <form-col :span="span * 2" label="提现服务费" prop="withdrawServiceRate" label-width="6em">
          <el-input v-model="form.withdrawServiceRate" placeholder="请输入提现服务费" type="number">
            <template #prepend>
              <el-select v-model="form.withdrawServiceType" placeholder="请选择提现服务费收取方式" style="width: 10em">
                <el-option
                  v-for="dict in dict.type.withdraw_service_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </template>
            <template #append>{{withdrawServiceUnit(form.withdrawServiceType)}}</template>
          </el-input>
        </form-col>
        <form-col :span="span * 2" label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" :maxlength="500" show-word-limit type="textarea"/>
        </form-col>
        <form-col :span="24" label="所属应用" prop="appId">
          <app-input v-model="form.appId" @change="onChangeApp"/>
        </form-col>
        <form-col :span="24" label="专属渠道" prop="channelIds">
          <channel-input v-model="form.channelIds" :multiple="true" :query="{appId: form.appId}"/>
        </form-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addSmUser, getSmUser, updateSmUser } from '@/api/system/smUser'
import { SmUserType } from '@/utils/constants'
import { $withdrawServiceType } from '@/utils/mixins'
import ChannelInput from '@/components/Business/Channel/ChannelInput.vue'
import AppInput from '@/components/Business/App/AppInput.vue'
export default {
  name: "UserFormDialog",
  mixins: [$withdrawServiceType],
  dicts: ['sm_user_status', 'sm_user_type', 'sys_user_sex', 'service_type', 'withdraw_service_type'],
  components: { ChannelInput, AppInput },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    userId: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      visible: false,
      span: 12,
      title: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择用户角色', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    SmUserType() {
      return SmUserType
    }
  },
  watch: {
    show: {
      handler(val) {
        this.visible = val
        if (val) {
          this.reset()
          if (this.userId) {
            this.getDetail()
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    reset() {
      this.form = {
        userId: null,
        userName: null,
        nickName: null,
        phonenumber: null,
        sex: "2",
        avatar: null,
        type: '1',
        deviceAdmin: false,
        serviceType: '1',
        withdrawServiceType: "1",
        channelIds: []
      }
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    getDetail() {
      getSmUser(this.userId).then(response => {
        this.form = response.data
        this.title = "修改用户信息"
      })
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.userId != null) {
            updateSmUser(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.visible = false
              this.$emit('success')
            })
          } else {
            addSmUser(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.visible = false
              this.$emit('success')
            })
          }
        }
      })
    },
    onClose() {
      this.$emit('update:show', false)
    },
    onChangeApp(app) {
      this.form.channelIds = []
    }
  }
}
</script> 