<template>
  <check-dialog
    :show.sync="dialogVisible"
    :title="title"
    :columns="columns"
    :selected-ids="selectedIds"
    :list-api="listApi"
    :load-api="loadApi"
    :query="queryParams"
    :custom-query="query"
    prop="userId"
    @confirm="handleConfirm"
    :multiple="multiple"
    ref="checkDialog"
  >
    <template #search-form>
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="账号" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入登录账号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="用户状态"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="dict in dict.type.user_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="实名状态" prop="isReal">
        <el-select
          v-model="queryParams.isReal"
          placeholder="实名状态"
          clearable
          @change="handleQuery"
        >
          <el-option label="已实名" :value="true" />
          <el-option label="未实名" :value="false" />
        </el-select>
      </el-form-item>
    </template>

    <template #nickName="{row}">
      {{row.nickName | dv}}
      <dict-tag :options="dict.type.user_status" :value="row.status" size="mini" style="margin-left: 4px"/>
      <boolean-tag :value="row.isReal" size="mini" true-text="已实名" false-text="未实名" style="margin-left: 4px"/>
    </template>
    <template #point="{row}">
      {{ row.point | fix2 | dv }} %
    </template>
    <template #roles="{row}">
      <template v-for="(role, index) in row.roles">
        <el-tag :key="index" v-if="!isEmpty(role.roleName)" size="small" style="margin-right: 4px;">{{role.roleName}}</el-tag>
      </template>
    </template>

  </check-dialog>
</template>

<script>
import { listUser, listUserByIds } from "@/api/system/user";
import CheckDialog from "@/components/CheckDialog/index.vue";
import BooleanTag from '@/components/BooleanTag/index.vue'
import { isEmpty } from '@/utils/index'
import { UserType } from '@/utils/enums';

export default {
  name: "CustomerDialog",
  dicts: ['user_status', 'sys_user_sex', 'user_employ_status'],
  components: {
    CheckDialog,
    BooleanTag
  },
  props: {
    // 弹窗标题
    title: {
      type: String,
      default: "选择用户"
    },
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false
    },
    // 默认选中的ID列表
    selectedIds: {
      type: [String, Array],
      default: null,
    },
    // 列表API
    listApi: {
      type: Function,
      default: listUser
    },
    // 加载API
    loadApi: {
      type: Function,
      default: listUserByIds
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 查询参数
    query: {
      type: Object,
      default: () => ({})
    },
    userType: {
      type: String,
      default: UserType.USER
    }
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null,
        status: null,
        intentLevel: null,
        mobile: null,
        wechat: null,
        followId: null
      },
      // 列信息
      columns: [
        {key: 'userId', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
        {key: 'nickName', visible: true, label: '昵称', minWidth: "200", sortable: true, overflow: false, align: 'left', width: null},
        {key: 'userName', visible: true, label: '账号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'roles', visible: true, label: '角色', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        //{key: 'point', visible: true, label: '分成比例', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        // {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        // {key: 'isReal', visible: true, label: '实名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null}
      ],
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      }
    }
  },
  created() {
    this.queryParams.userType = this.userType;
  },
  methods: {
    isEmpty,
    // 确认选择
    handleConfirm(selection) {
      this.$emit('select', selection);
    },
    // 处理查询
    handleQuery() {
      this.$refs.checkDialog.handleQuery();
    }
  }
}
</script>
