import Vue from 'vue';
export default Vue.component('render-temp', {
  props: {
    item: Object
  },
  methods: {
    handler(val) {
      this.$emit('handler', val);
    }
  },
  render(h) {
    const { $getButtonLimit, $buttonCode } = this;
    const canEdit = this.item.canEdit !== false; // 只有canEdit === false 才证明不能使用   没有权限仅可以详情/报表
    // 当前卡券是否 是长期有效||在投放有效期内
    // putEffectiveMode 0：固定日期，1：长期
    const canGroupSend = this.item.putEffectiveMode == 1 ? true : new Date() > new Date(this.item.putBeginDate) && new Date() < new Date(this.item.putEndDate);
    const bind1 =
      $getButtonLimit($buttonCode.marketingSendEwash) && canEdit && canGroupSend ? (
        <a title="投放" limit-code={$buttonCode.marketingSendEwash} onClick={this.handler.bind(null, 1)}>
          <i class="iconfont icon-daohang-" />
        </a>
      ) : (
        ''
      );
    const bind2 = (
      <a title="报表" onClick={this.handler.bind(null, 2)}>
        <i class="el-icon-tickets" />
      </a>
    );
    const bind3 = $getButtonLimit($buttonCode.marketingEditEwash) ? (
      <a title="编辑" limit-code={$buttonCode.marketingEditEwash} onClick={this.handler.bind(null, 3)}>
        <i class="el-icon-edit" />
      </a>
    ) : (
      ''
    );
    const bind4 =
      $getButtonLimit($buttonCode.marketingDelEwash) && canEdit ? (
        <a title="删除" limit-code={$buttonCode.marketingDelEwash} onClick={this.handler.bind(null, 4)}>
          <i class="el-icon-delete" />
        </a>
      ) : (
        ''
      );
    const bind5 = (
      <a title="详情" onClick={this.handler.bind(null, 5)}>
        <i class="el-icon-document" />
      </a>
    );
    const bind6 =
      $getButtonLimit($buttonCode.marketingCopyEwash) && canEdit ? (
        <a title="复制" limit-code={$buttonCode.marketingCopyEwash} onClick={this.handler.bind(null, 6)}>
          <i class="iconfont icon-wxcard-copy" />
        </a>
      ) : (
        ''
      );

    const bind7 = canEdit ? (
      <a style="position:relative;top:1px" title="领取记录" onClick={this.handler.bind(null, 7)}>
        <i class="iconfont icon-tubiaozhizuomoban-" />
      </a>
    ) : (
      ''
    );

    const statushtml = (
      <span>
        {bind7}
        {bind6}
        {bind1}
        {bind2}
        {bind3}
        {bind4}
      </span>
    );
    const overDateHtml = (
      <span>
        <span class="danger">已过期</span>
        {bind7}
        {bind6}
        {bind2}
        {bind5}
        {bind4}
      </span>
    );
    const noputonStatushtml = (
      <span>
        {bind7}
        {bind6}
        {bind2}
        {bind3}
        {bind4}
      </span>
    );
    const statusNostockhtml = noputonStatushtml;
    const statusFaildhtml = (
      <span>
        {bind6}
        {bind3}
        {bind4}
      </span>
    );
    const _html = this.item.cardEffectiveMode == 0 && this.item.endDate < Date.now() ? overDateHtml : statushtml;
    let failMsg = '';
    if (this.item.autingFaildMsg) {
      failMsg = '：' + this.item.autingFaildMsg;
      if (this.item.autingFaildMsg.length > 8) {
        failMsg = (
          <el-popover placement="top-start" title="" width="200" trigger="hover" content={this.item.autingFaildMsg}>
            <span class="danger-color" slot="reference">
              ：{this.item.autingFaildMsg.substring(0, 8) + '...'}
            </span>
          </el-popover>
        );
      }
    }

    if (this.item.cardEffectiveMode == 0 && this.item.endDate < Date.now()) {
      return <div class="fr">{overDateHtml}</div>;
    }

    if (this.item.auditingStatus === 0) {
      return (
        <div class="fr">
          <span class="green">审核中</span>
        </div>
      );
    } else if (this.item.auditingStatus === -1) {
      return (
        <div class="fr">
          <span class="danger-color">
            审核失败{failMsg}
            {statusFaildhtml}
          </span>
        </div>
      );
    } else if (this.item.auditingStatus === -2) {
      return (
        <div class="fr">
          <span class="danger-color">
            更新失败{failMsg}
            {_html}
          </span>
        </div>
      );
    } else if (this.item.useCustomCode == 1 && this.item.customCodeSync == 1) {
      return (
        <div class="fr">
          <span class="danger-color">正在上传卡券Code</span>
        </div>
      );
    } else if (this.item.stock === 0) {
      return <div class="fr">{statusNostockhtml}</div>;
    } else if (this.item.cardLimit && this.item.cardLimit == 1) {
      return <div class="fr">{_html}</div>;
    } else {
      return <div class="fr">{noputonStatushtml}</div>;
    }
  }
});
