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

var style = ":host {\n}\n\n.avatar {\n  --deckgo-lazy-img-border-radius: 50%;\n  --deckgo-lazy-img-height: 71px;\n  --deckgo-lazy-img-width: 71px;\n}\n\n.author-name {\n  height:28px;\n  font-size:20px;\n  color:rgba(0,0,0,0.85);\n  line-height:28px;\n}\n\n.section-title {\n  font-size:20px;\n  color:rgba(0,0,0,0.85);\n  line-height:28px;\n  margin-bottom: 12px;\n}\n\n.flex-row {\n  display: flex;\n  flex-direction: row;\n}\n\n.flex-column {\n  display: flex;\n  flex-direction: column;\n}\n\n.author-location {\n  margin-top: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.author-content {\n  margin-top: 12px;\n  font-size: 18px;\n  color:rgba(0,0,0,0.85);\n  line-height:33px;\n}\n\n.author-description {\n  margin-left: 8px;\n}\n\n.location {\n  color:rgba(136,136,136,0.85);\n  font-size: 18px;\n  line-height:25px;\n}\n";

const _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-series-author-profile/kun-series-author-profile.tsx";
const KunSeriesAuthorProfile = (props) => {
  const ref = useRef();

  if (ref != null && ref.current != null) {
    (ref.current ).innerHTML = props.needleDescription || "OK";
  }

  return (
    h('host', { shadowDom: true, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 16}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 17}}, style)
      , h('div', { className: "series-content", ref: ref, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 18}} )

      , h('div', { className: "section-title", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 20}}, "简介")
      , 
          props.needleDescription && (
          h('div', { className: "series-content", ref: ref, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 23}} )
          )
        
      , h('div', { className: "section-title", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 26}}, "主讲老师")
      , h('div', { className: "flex-row", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}
        , h('deckgo-lazy-img', {
          className: "avatar",
          'deckgo-lazy-img-border-radius': "50%",
          'img-src': props.needleAvatar || "https://pic1.zhimg.com/54b1d8754321c3d42c67bc3e9ab0f3c2_m.jpg", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}
        )
        , h('div', { className: "flex-column author-description" , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 33}}
          , h('span', { className: "author-name", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 34}}, props.needleAuthorName)
          , h('span', { className: "author-location", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 35}}
            , h('span', { className: "location", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 36}}, props.needleAuthorLocation || "暂未填写位置")
          )
        )
      )
      , h('div', { className: "author-content", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 40}}
        , props.needleContent
      )
    )
  );
};

KunSeriesAuthorProfile.props = {
  needleAvatar: {
    type: String,
  },
  needleAvatarName: {
    type: String,
  },
  needleAuthorLocation: {
    type: String,
  },
  needleContent: {
    type: String,
  },
  needleDescription: {
    value: "<h1>dd</h1>",
    type: String,
    reflect: true,
    event: true,
  },
};

var kunSeriesAuthorProfile = getComponentOrDefine("kun-series-author-profile", KunSeriesAuthorProfile);

export default kunSeriesAuthorProfile;
