import { defineComponent as b, computed as d, openBlock as s, createElementBlock as c, normalizeStyle as g, normalizeClass as a, renderSlot as o, createCommentVNode as i, createElementVNode as n, toDisplayString as r } from "vue";
import { useRouter as h } from "vue-router";
const $ = {
  key: 0,
  class: "cl-cell__left"
}, S = {
  key: 0,
  class: "cl-cell__icon-wrap"
}, _ = {
  key: 2,
  class: "cl-cell__title-wrap"
}, w = {
  key: 0,
  class: "cl-cell__required"
}, B = { class: "cl-cell__title" }, C = {
  key: 0,
  class: "cl-cell__label"
}, N = {
  key: 0,
  class: "cl-cell__value"
}, z = {
  key: 1,
  class: "cl-cell__extra"
}, q = {
  key: 2,
  class: "cl-cell__right-icon"
}, I = /* @__PURE__ */ b({
  name: "ClCell",
  __name: "Index",
  props: {
    className: String,
    // desc: 自定义 CSS 类名
    title: String,
    // desc: 左侧标题
    value: String,
    // desc: 右侧内容
    label: String,
    // desc: 标题下方的描述信息
    icon: String,
    // desc: 左侧图标类名（<i> 元素）
    size: {
      type: String,
      default: "default"
      // enum: default, large | desc: 单元格大小
    },
    url: String,
    // desc: 点击后跳转的链接地址
    to: [String, Object],
    // desc: 路由跳转目标，同 vue-router 的 to
    replace: Boolean,
    // desc: 跳转时是否替换当前页面历史
    border: {
      type: Boolean,
      default: !0
      // desc: 是否显示底部边框
    },
    clickable: Boolean,
    // desc: 是否开启点击反馈
    isLink: Boolean,
    // desc: 是否展示右侧箭头
    required: Boolean,
    // desc: 是否显示必填星号
    center: Boolean,
    // desc: 是否使内容垂直居中
    arrowDirection: {
      type: String,
      default: "right"
      // enum: left, right, up, down | desc: 箭头方向
    }
  },
  emits: ["click"],
  setup(l, { emit: m }) {
    const u = h(), t = l, k = m, y = d(() => {
      const e = {};
      return t.className && (e[t.className] = !0), t.border && (e["cl-cell--border"] = !0), (t.clickable || t.isLink || t.to || t.url) && (e["cl-cell--clickable"] = !0), t.size === "large" && (e["cl-cell--large"] = !0), e;
    }), f = d(() => ({})), v = (e) => {
      k("click", e), t.to ? t.replace ? u.replace(t.to) : u.push(t.to) : t.url && (window.location.href = t.url);
    };
    return (e, D) => (s(), c("div", {
      class: a(["cl-cell", y.value]),
      style: g(f.value),
      onClick: v
    }, [
      l.title || e.$slots.title || l.icon || e.$slots.icon ? (s(), c("div", $, [
        e.$slots.icon ? (s(), c("div", S, [
          o(e.$slots, "icon")
        ])) : l.icon ? (s(), c("i", {
          key: 1,
          class: a([l.icon, "cl-cell__icon"])
        }, null, 2)) : i("", !0),
        l.title || e.$slots.title ? (s(), c("div", _, [
          o(e.$slots, "title", {}, () => [
            l.required ? (s(), c("span", w, "*")) : i("", !0),
            n("span", B, r(l.title), 1)
          ]),
          l.label || e.$slots.label ? (s(), c("div", C, [
            o(e.$slots, "label", {}, () => [
              n("span", null, r(l.label), 1)
            ])
          ])) : i("", !0)
        ])) : i("", !0)
      ])) : i("", !0),
      n("div", {
        class: a(["cl-cell__body", { "cl-cell__body--center": l.center }])
      }, [
        o(e.$slots, "default", {}, () => [
          l.value || e.$slots.value ? (s(), c("div", N, [
            o(e.$slots, "value", {}, () => [
              n("span", null, r(l.value), 1)
            ])
          ])) : i("", !0)
        ])
      ], 2),
      e.$slots.extra ? (s(), c("div", z, [
        o(e.$slots, "extra")
      ])) : i("", !0),
      l.isLink ? (s(), c("div", q, [
        o(e.$slots, "rightIcon", {}, () => [
          n("i", {
            class: a(`cl-cell__arrow cl-cell__arrow--${l.arrowDirection}`)
          }, null, 2)
        ])
      ])) : i("", !0)
    ], 6));
  }
});
export {
  I as default
};
//# sourceMappingURL=ClCell.js.map
