import { h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';

var style = ":host {\n}\n\n.inline-raise {\n  display: flex;\n  align-items: center;\n}\n\n.split-line {\n  margin: 0 4px;\n}\n\n.series-img {\n  width:101px;\n  height:134px;\n  background:rgba(49,164,255,1);\n  border-radius:10px;\n}\n\n.series-item-container {\n  padding: 12px 20px;\n  display: flex;\n  justify-content: space-between;\n}\n\n.series-item-left {\n  display: flex;\n  flex-direction: row;\n}\n\n.series-detail {\n  margin-left: 8px;\n}\n\n.series-title {\n  font-size:23px;\n  font-weight:800;\n  color:rgba(28,29,32,1);\n  line-height:31px;\n}\n\n.description {\n  color:rgba(185,185,185,1);\n}\n\n.series-tags {\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.series-tag {\n  margin-right: 4px;\n  height: 28px;\n  display: block;\n  overflow: hidden;\n  background:rgba(255,148,52,0.07);\n  border-radius:6px;\n  padding: 0 10px ;\n  color:rgba(255,148,52,1);\n  font-size:13px;\n  line-height: 28px;\n}\n\n.learn-plan-setting {\n  display: flex;\n  width: 200px;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-end;\n}\n\n.learn-by-day-text {\n  width: 100px;\n}\n\n.learn-by-day {\n  align-items: center;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-end;\n}\n\n.edit-area {\n  padding: 10px 20px 10px 20px;\n  border-bottom-color: #eeeeee;\n  border-bottom-style: solid;\n  border-bottom-width: 1px;\n  display: flex;\n  justify-content: space-between;\n}\n\n.edit-series-item-buttons {\n  display: flex;\n  align-content: center;\n}\n\n.edit-series-item-button:not(:last-child) {\n  margin-right: 10px ;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-list-series/kun-list-series.tsx";
function KunListSeries(props) {
  // const ref = useHost();

  // const [state] = useState({
  //   needleInPlan: props.needleInPlan,
  //   needleDailyCount: props.needleDailyCount,
  // });

  // const chaneValue = (data) => {
  //   console.log("data", data);
  //   const r = data.detail.selectedOption;
  //   const newState = {
  //     ...state,
  //     needleDailyCount: parseInt(r.value, 10),
  //   };
  //   ref.current.dispatchEvent(new CustomEvent("handleChange", { detail: newState }));
  // };

  return (
    h('host', { shadowDom: true, __self: this, __source: {fileName: _jsxFileName, lineNumber: 24}}
      , h('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 25}}, style)

      , h('div', { className: "series-item-container", __self: this, __source: {fileName: _jsxFileName, lineNumber: 27}}
        , h('div', { className: "series-item-left", __self: this, __source: {fileName: _jsxFileName, lineNumber: 28}}
          , h('div', { className: "series-img", __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
            , h('deckgo-lazy-img', {
              'deckgo-lazy-img-border-radius': "50%",
              'img-src': props.needleSeriesCover || "https://upload.jianshu.io/book/image/d6c850c6-13f5-408a-ba3c-fb3b4ef631c3?imageMogr2/auto-orient/strip|imageView2/1/w/214/h/286", __self: this, __source: {fileName: _jsxFileName, lineNumber: 30}}
            )
          )

          , h('div', { className: "series-detail", __self: this, __source: {fileName: _jsxFileName, lineNumber: 36}}
            , h('div', { className: "series-title", __self: this, __source: {fileName: _jsxFileName, lineNumber: 37}}
              , props.needleSeriesName
            )
            , h('div', { className: "series-needleTags", __self: this, __source: {fileName: _jsxFileName, lineNumber: 40}}
              , 
                  (props.needleTags || []).map((r) => h('span', { className: "series-tag", __self: this, __source: {fileName: _jsxFileName, lineNumber: 42}}, r))
                
            )

            , h('span', { className: "description", __self: this, __source: {fileName: _jsxFileName, lineNumber: 46}}
              , props.needleCardCount, "个卡片|"

              , props.needleSubscriptionCount, "已学"

            )
          )
        )
      )
    )
  );
}

KunListSeries.props = {
  needleSeriesName: {
    type: String,
  },
  needleSeriesId: {
    type: Number,
  },
  needleSeriesCover: {
    type: String,
  },
  needleCardCount: {
    type: Number,
  },
  needleSubscriptionCount: {
    type: Number,
  },
};

var kunListSeries = getComponentOrDefine("kun-list-series", KunListSeries);

export default kunListSeries;
export { KunListSeries };
