<template>

      <li style="list-style-type:none;">
        <div class="operation-main-title">
          <h3 class="info-title">{{infoDetail.title}}</h3>
          <div class="btn"  >
            <Button type="primary" @click="updateHelp(infoDetail.infoId)"  v-if="platform" style="margin-right:10px;">编辑</Button>
            <Button type="error" @click="detaleHelp(infoDetail.infoId)" v-if="platform"> 删除</Button>
          </div>
        </div>
        <div
        :class="[isHide ? 'operation-main-info' : '']">
          <p v-html="infoDetail.detail"></p>
        </div>
        <div style="text-align:right;margin:20px 0">
          <Button v-if="isHide" @click="isOpen()">展开</Button>
          <Button v-if="!isHide" @click="isPutaway()">收起</Button>
        </div>
      </li>
</template>
<script>
export default {
  props: {
    infoDetail: {
      type: Object
    }
    // isHide: {
    //   type: Boolean,
    //   default: true
    // }
  },
  data () {
    return {
      isHide: true
    }
  },
  computed:{
    platform () {
      return this.$store.state.admin.type == 1 ||this.$store.state.admin.type == 4
    }
  },
  methods: {
    isOpen () {
      this.isHide = false
    },
    isPutaway () {
      this.isHide = true
    },
    updateHelp (infoId) {
      let query = { infoId: infoId }
      this.$router.push({ name: 'edit_help', query })
    },
    detaleHelp (infoId) {
      // this.api({
      //   apiName: 'deleteInfoId',
      //   postdata: infoId,
      //   complete: () => {
      //     // this.loading = false
      //   },
      //   success: (res) => {
      //     this.listInfo()
      //   }
      // })
      this.$Modal.confirm({
        title: '提示',
        content: `您确定删除 “${this.infoDetail.title}” 吗？`,
        onOk: () => {
          this.api({
            apiName: 'deleteInfoId',
            postdata: infoId,
            success: (res) => {
              console.log('res', res)
              this.$Message.info('删除成功')
              this.$emit('listInfo')
            }
          })
        },
        onCancel: () => {
          this.$Message.info('取消')
        }
      })
    }
  }
}
</script>
<style scoped lang="less">

    .operation-main-title{
      margin: 20px 0;
      width: 100%;
      display: flex;
      justify-content:space-between;
      .info-title{
        font-size: 25px;
        line-height: 30px;
        font-weight:800;
      }
      // .btn{
      //   width: 28%;
      //   display: flex;
      //   justify-content:space-between;
      // }
    }

  .operation-main-info{
    width: 100%;
    word-break: break-all;
    overflow: hidden;
    white-space:normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    height: 80px;
  }
</style>
