<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="id"
    @confirm="handleConfirm"
    :multiple="multiple"
    ref="checkDialog"
  >
    <template #search-form>
      <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="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.suit_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="租赁单位" prop="rentalUnit">
        <el-select
          v-model="queryParams.rentalUnit"
          placeholder="请选择租赁单位"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="dict in dict.type.suit_rental_unit"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </template>

    <template #status="{row}">
      <dict-tag :options="dict.type.suit_status" :value="row.status" />
    </template>
    <template #rentalUnit="{row}">
      <dict-tag :options="dict.type.suit_rental_unit" :value="row.rentalUnit" />
    </template>
    <template #depositAmount="{row}">
      {{ row.depositAmount | fix2 | dv }} 元
    </template>
    <template #freeRideTime="{row}">
      {{ row.freeRideTime | dv }} 分钟
    </template>

  </check-dialog>
</template>

<script>
import { listSuit, listSuitByIds } from "@/api/bst/suit";
import CheckDialog from "@/components/CheckDialog/index.vue";
import { isEmpty } from '@/utils/index'

export default {
  name: "SuitDialog",
  dicts: ['suit_status', 'suit_rental_unit', 'suit_riding_rule'],
  components: {
    CheckDialog
  },
  props: {
    // 弹窗标题
    title: {
      type: String,
      default: "选择套餐"
    },
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false
    },
    // 默认选中的ID列表
    selectedIds: {
      type: [String, Array],
      default: null,
    },
    // 列表API
    listApi: {  
      type: Function,
      default: listSuit
    },
    // 加载API
    loadApi: {
      type: Function,
      default: listSuitByIds
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 查询参数
    query: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        userName: null,
        status: null,
        rentalUnit: null
      },
      // 列信息
      columns: [
        {key: 'id', visible: false, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: "80"},
        {key: 'name', 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: 'depositAmount', visible: true, label: '预存', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'rentalUnit', visible: true, label: '租赁单位', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
        {key: 'freeRideTime', 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: 'createTime', 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);
      }
    }
  },
  methods: {
    isEmpty,
    // 确认选择
    handleConfirm(selection) {
      this.$emit('confirm', selection);
    },
    // 处理查询
    handleQuery() {
      this.$refs.checkDialog.handleQuery();
    }
  }
}
</script>
