<template>
  <div class="good-list-con">
    <Card>
      <div class="search-con">
        <Input
          placeholder="请输入商品编号"
          class="search-input"
          v-model="searchContent.goodsId"
          style="width: 200px"
          clearable
        />
        <Input
          placeholder="请输入商品名称"
          class="search-input"
          v-model="searchContent.goodsName"
          style="width: 200px"
          clearable
        />
        <Select
          placeholder="请选择评价类型"
          class="search-input"
          v-model="searchContent.evaluateType"
          style="width: 200px"
        >
          <Option value>全部</Option>
          <Option
            v-for="(item, index) of IsAppendType"
            :value="item"
            :key="'series-option-' + index"
            >{{IsAppendTypeObj[item].label}}</Option
          >
        </Select>
        <Select
          placeholder="请选择回复状态"
          class="search-input"
          v-model="searchContent.replyStatus"
          style="width: 200px"
        >
          <Option value>全部</Option>
          <Option
            v-for="(item, index) of IsReplyType"
            :value="item"
            :key="'series-option-' + index"
            >{{IsReplyTypeObj[item].label}}</Option
          >
        </Select>
        <ButtonGroup class="search-btngroup">
          <Button @click="handleSearch" type="primary">搜索</Button>
          <Button type="primary" @click="handleRefresh">
            <Icon type="md-refresh" />
          </Button>
        </ButtonGroup>
      </div>
      <tables
        ref="tables"
        editable
        pagable
        v-model="tableData"
        :columns="columns"
        :currentPage="searchContent.pageNum"
        :pageSize="searchContent.pageSize"
        :totalSize="totalSize"
        :loading="loading"
        @on-change="handleCurrentChange"
      />
    </Card>
    <Modal
        title="消息回复"
        v-model="commentReplyPopup"
        class-name="vertical-center-modal"
        :closable = "false"
        @on-cancel = "cancelReply"
        @on-ok = "replyConfirm"
        >
        <Input v-model="replyContent" type="textarea" :rows="4" placeholder="请输入回复内容..." />
    </Modal>
    <Modal
        title="追评回复"
        v-model="appendReplyPopup"
        class-name="vertical-center-modal"
        :closable = "false"
        @on-cancel = "cancelAppendReply"
        @on-ok = "replyAppendConfirm"
        >
        <Input v-model="appendReplyContent" type="textarea" :rows="4" placeholder="请输入回复内容..." />
    </Modal>
    <Modal
        title="评价详情"
        v-model="evaDetailPopup"
        class-name="vertical-center-modal"
        footer-hide
        width="600"
        >
        <p v-if="evaInfo.userName==null" class="comment_info">匿名</p>
        <p v-else class="comment_info">{{evaInfo.userName}}</p>
        <Rate disabled v-model="evaInfo.evaluate" /> |
        <span class="comment_info">规格：</span>
        <span class="comment_info">{{evaInfo.sku}}</span>
        <p class="comment_info" style="margin-top:10px">{{evaInfo.content}}</p>
        <ul class="comment_img">
          <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc" @click="viewImg"></bigImg>
          <li v-for="(item,index) in evaInfo.imagesJson" :key="index">

            <img :src="item" style="widht:90px;height:100px;margin:10px" @click="clickImg($event)">
          </li>
          <li>
            <video
              v-if="evaInfo.video != ''"
              :src="evaInfo.video"
              webkit-playsinline
              playsinline
              x5-playsinline
              controls="controls"
              style="width: 90px;height: 100px;margin:10px"
            />
          </li>
        </ul>

    </Modal>
    <Modal
        title="追评详情"
        v-model="reviewDetailPopup"
        class-name="vertical-center-modal"
        footer-hide
        width="600"
        >
        <div v-if="reviewDetailInfo !=null">
          <div>
            <h3>追评内容：</h3>
            <p class="comment_info" style="margin:10px 0 0 10px">{{reviewDetailInfo.content}}</p>
            <ul class="comment_img">
              <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc" @click="viewImg"></bigImg>
              <li v-for="(item,index) in reviewDetailInfo.imagesJson" :key="index">
                <img :src="item" style="widht:90px;height:100px;margin:10px" @click="clickImg($event)">
              </li>
              <li>
                <video
                  v-if="reviewDetailInfo.video != ''"
                  :src="reviewDetailInfo.video"
                  webkit-playsinline
                  playsinline
                  x5-playsinline
                  controls="controls"
                  style="width: 90px;height: 100px;margin:10px"
                />
              </li>
            </ul>

          </div>
          <div v-if="reviewDetailInfo.sellerState==2">
            <h3>回复内容：</h3>
            <p class="comment_info" style="margin:10px 0 0 10px">{{reviewDetailInfo.replyContent}}</p>
          </div>
          <div style="text-align:right;">
            <Button type="primary" v-if="reviewDetailInfo.sellerState!=2" @click="appendGoodReplay">回复</Button>
            <Button type="error" @click="deleteAppendConfirm" style="margin-left:10px">删除</Button>
          </div>
        </div>
        <p v-else class="comment_info" style="height:200px;line-height:200px;text-align:center">追评已删除！</p>
    </Modal>
  </div>
</template>

<script>
import bigImg from './big-img.vue'
import Tables from '_c/tables'
import { formatTime } from '@/libs/tools'
import { IsAppendType, IsAppendTypeObj, IsReplyType, IsReplyTypeObj } from '@/enums'
export default {
  inject: ['reload'],
  components: {
    Tables,
    bigImg

  },
  computed: {
    isBrand () {
      return this.$store.getters.isBrand
    },
    platform () {
      return this.$store.state.admin.type == 1 || this.$store.state.admin.type == 4
    },
    newColumns () {
      if (!this.platform) {
        return this.columns.filter((item) => {
          return item.key !== 'enterpriseName'
        })
      } else {
        return this.columns
      }
    }
  },
  data () {
    return {
      showImg: false,
      imgSrc: '',
      IsAppendTypeObj,
      IsAppendType,
      IsReplyType,
      IsReplyTypeObj,
      searchContent: {
        goodsId: '',
        goodsName: '',
        evaluateType: '',
        replyStatus: '',
        pageNum: 1,
        pageSize: 10
      },
      createTime: [],
      seriesList: [],
      columns: [
        { title: '评论编号', key: 'commentId', minWidth: 180, align: 'left' },
        { title: '商品编号', key: 'goodsId', minWidth: 180, align: 'left' },
        { title: '商品名称', key: 'goodsName', width: 150, align: 'center' },
        {
          title: '商品图片',
          key: 'thumb',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.thumb
                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  }
                })
              ])
          }

        },
        { title: '评价类型',
          width: 100,
          align: 'center',
          render: (h, params) => {
            let obj = IsAppendTypeObj[params.row.evaluate]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          }
        },
        { title: '评价详情',
          width: 90,
          align: 'center',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.evaDetail(params.row)
                }
              },
              '详情'
            )
          }
        },
        { title: '追评详情',
          width: 90,
          align: 'center',
          render: (h, params) => {
            let appendDetail = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.reviewDetail(params.row)
                }
              },
              '详情'
            )
            return h('div', params.row.buyerState == 2 ? [appendDetail] : '--')
          }
        },
        { title: '回复详情',
          key: 'replyContent',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            // let replayDetail = h(
            //   'span'
            // )
            return h('div', params.row.replyContent != '' ? params.row.replyContent : '--')
          }
        },
        { title: '用户',
          width: 100,
          align: 'center',
          render: (h, params) => {
            let x
            switch (params.row.userName) {
              case null:
                x = h('span', `匿名`)
                break
              default:
                x = h('span', `${params.row.userName}`)
            }
            return x
          } },
        { title: '状态',
          key: 'isReply',
          width: 160,
          align: 'center',
          render: (h, params) => {
            let obj = IsReplyTypeObj[params.row.sellerState]
            return h(
              'Tag',
              {
                props: {
                  color: obj.color
                }
              },
              obj.label
            )
          } },
        {
          title: '入库时间',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('span', formatTime(params.row.createTime))
          }
        },
        {
          title: '操作',
          align: 'left',
          minWidth: 180,
          fixed: 'right',
          render: (h, params) => {
            // let status = params.row.status
            let detailBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  display: params.row.sellerState == 0 ? 'inline-block' : 'none'
                },
                on: {
                  click: this.handleReplay(params.row)
                }
              },
              '回 复'
            )
            let delBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDel(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [detailBtn, delBtn])
          }
        }
      ],
      tableData: [],
      totalSize: 0,
      loading: false,
      selectList: [],
      selectCount: 0,
      commentReplyPopup: false,
      appendReplyPopup: false,
      replyContent: '',
      appendReplyContent: '',
      evaDetailPopup: false,
      reviewDetailPopup: false,
      evaInfo: {
        evaluate: 2
      },
      reviewDetailInfo: {

      },
      commentId: '',
      appendComment: {}
    }
  },
  methods: {
    clickImg (e) {
      this.showImg = true
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src
    },
    viewImg () {
      this.showImg = false
    },
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getGoodsCommentList',
        postdata: this.searchContent,
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data.records
          this.totalSize = res.data.total
        }
      })
    },
    handleReplay (row) {
      return () => {
        // console.log('11111')
        this.commentId = row.commentId
        this.commentReplyPopup = true
      }
    },
    // 取消回复
    cancelReply () {
      this.replyContent = ''
    },
    // 确定回复
    replyConfirm () {
      let title = '回复成功'
      if (this.replyContent == '') {
        this.$Notice.warning({ title: '请您输入回复内容' })
        return
      }
      this.api({
        apiName: 'reply',
        postdata: { commentId: this.commentId, replyContent: this.replyContent },
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.replyContent = ''
          this.$Notice.success({ title })
          this.commentReplyPopup = false
          this.requestData()
        }
      })
    },
    // 评价详情
    evaDetail (row) {
      return () => {
        this.evaDetailPopup = true
        this.api({
          apiName: 'commentDetail',
          postdata: { commentId: row.commentId },
          complete: () => {
            this.loading = false
          },
          success: (res) => {
            this.evaInfo = res.data
            this.evaInfo.imagesJson = JSON.parse(this.evaInfo.imagesJson)
          }
        })
      }
    },
    appendGoodReplay () {
      this.appendReplyPopup = true
    },
    // 取消追评回复
    cancelAppendReply () {
      this.appendReplyContent = ''
    },
    // 确定追评回复
    replyAppendConfirm () {
      let title = '回复成功'
      if (this.appendReplyContent == '') {
        return this.$Notice.warning({ title: '请您输入回复内容' })
      }
      this.api({
        apiName: 'appendReply',
        postdata: { commentId: this.appendComment.commentId, replyContent: this.appendReplyContent },
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.appendReplyContent = ''
          this.$Notice.success({ title })
          this.appendReplyPopup = false
          this.reviewDetail(this.appendComment)()
        }
      })
    },
    // 追评删除
    deleteAppendConfirm () {
      this.$Modal.confirm({
        title: '删除',
        content: `您确认要删除追评嘛？`,
        onOk: () => {
          this.api({
            apiName: 'appendDelete',
            postdata: [this.appendComment.commentId],
            success: () => {
              this.reviewDetail(this.appendComment)()
              this.$Notice.success({ title: `操作成功！` })
            }
          })
        }
      })
    },
    // 追评详情
    reviewDetail (row) {
      return () => {
        // console.log('1111111', row)
        this.appendComment = row
        this.reviewDetailPopup = true
        this.api({
          apiName: 'appendCommentDetail',
          postdata: { commentId: row.commentId },
          complete: () => {
            this.loading = false
          },
          success: (res) => {
            this.reviewDetailInfo = res.data
            if (this.reviewDetailInfo != null) {
              this.reviewDetailInfo.imagesJson = JSON.parse(this.reviewDetailInfo.imagesJson)
            }
          }
        })
      }
    },
    handleSearch () {
      this.searchContent.pageNum = 1
      this.requestData()
    },
    handleRefresh () {
      this.reload()
    },
    handleDel (row) {
      return () => {
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除名称为${row.goodsName} 的评论？`,
          onOk: () => {
            this.api({
              apiName: 'deleteReply',
              postdata: [row.commentId],
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `操作成功！` })
              }
            })
          }
        })
      }
    },
    handleCurrentChange (pageNum) {
      this.searchContent.pageNum = pageNum
      this.requestData()
    },
    handleRecommend (row) {
    //   return () => {}
    }
  },
  created () {
    this.requestData()
  }
}
</script>

<style lang="less">
.good-list-con .search-con {
  padding: 10px 0;
  .search {
    &-col {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-input {
      display: inline-block;
      width: 150px;
      margin-right: 5px;
    }
    &-date {
      margin-right: 5px;
    }
    &-btngroup {
      margin-right: 5px;
    }
  }
}
.comment_info{
  font-size:14px;
  margin-bottom:10px
}
.comment_img{
  width: 100%;
  display: flex;
  flex-wrap: wrap ;
  // flex: 1;
  list-style:none
}
</style>
