<template>
  <check-dialog
    :show.sync="dialogVisible"
    :title="title"
    :columns="columns"
    :selected-ids="selectedIds"
    :list-api="listApi"
    :load-api="loadApi"
    :query="queryParams"
    @confirm="handleConfirm"
    ref="checkDialog"
  >
    <template #search-form>
      <el-form-item label="客户编号" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入客户编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户名称" prop="name">
        <el-input
          v-model="queryParams.name"
          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.customer_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="微信号" prop="wechat">
        <el-input
          v-model="queryParams.wechat"
          placeholder="请输入微信号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="跟进人" prop="followId">
        <user-select v-model="queryParams.followId" @change="handleQuery"/>
      </el-form-item>
    </template>

    <template #status="{row}">
      <dict-tag :options="dict.type.customer_status" :value="row.status" />
    </template>

  </check-dialog>
</template>

<script>
import { listCustomer, listCustomerByIds } from "@/api/bst/customer";
import CheckDialog from "@/components/CheckDialog/index.vue";
import UserSelect from "@/components/Business/User/UserSelect.vue";

export default {
  name: "CustomerDialog",
  components: {
    CheckDialog,
    UserSelect
  },
  dicts: ['customer_status'],
  props: {
    // 弹窗标题
    title: {
      type: String,
      default: "选择客户"
    },
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false
    },
    // 默认选中的ID列表
    selectedIds: {
      type: [String, Array],
      default: null,
    },
    // 列表API
    listApi: {  
      type: Function,
      default: listCustomer
    },
    // 加载API
    loadApi: {
      type: Function,
      default: listCustomerByIds
    }
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null,
        status: null,
        intentLevel: null,
        mobile: null,
        wechat: null,
        followId: null
      },
      // 字段列表
      columns: [
        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
        {key: 'code', visible: true, label: '编号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'name', 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: 'mobile', visible: true, label: '手机号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'wechat', visible: true, label: '微信号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'followName', visible: true, label: '跟进人', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'remark', visible: true, label: '备注', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: "100"},
      ],
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      }
    }
  },
  methods: {
    // 确认选择
    handleConfirm(selection) {
      this.$emit('confirm', selection);
    },
    // 处理查询
    handleQuery() {
      this.$refs.checkDialog.handleQuery();
    }
  }
}
</script>
