<template>
  <div class="feedback-message-body" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="order-management-body">
      <div class="feedback-message_bottom">
        <div class="order-management-table">
          <div class="feedback-message_tab">
            <el-select @change="selectChange" v-model="search_value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <el-table ref="order_table" class='e-table' :data="feedBack" style="width: 100%">
            <el-table-column width="130" prop="idx" label="序号">
            </el-table-column>
            <el-table-column width="400" label="场景链接">
              <template slot-scope="scope">
                <a :href="scope.row.url" target="_blank">{{scope.row.url}}</a>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系电话">
            </el-table-column>
            <el-table-column  label="留言内容">
              <template slot-scope="scope">
                <div class="feed_message">{{scope.row.message}}</div>
              </template>
            </el-table-column>
            <el-table-column label="反馈时间">
              <template slot-scope="scope">
                <div>{{new Date(scope.row.submitTime).format('yyyy-MM-dd hh:mm:ss')}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="solve" label="状态">
              <template slot-scope="scope">
                <span class="edit_btn" v-show="scope.row.solve">已解决</span>
                <span class=" error_btn" v-show="!scope.row.solve">待解决</span>
              </template>
            </el-table-column>
            <el-table-column type="expand" prop="operation" label="操作" width="150">
              <template slot-scope="scope">
                <div class="order_check_row">
                  <div class="product_info">
                    <div class="product_info_title">
                      留言内容
                    </div>
                    <div class="product_info_body">
                      {{scope.row.message}}
                    </div>
                  </div>
                  <div class="order_info">
                    <div class="order_info_title">
                      详细信息
                    </div>
                    <div class="order_info_body">
                      <div class="order_info_body_info">
                        <div class="order_info_body_info_item">
                          <span class="order_info_body_info_item_title">场景链接</span>
                          <a :href="scope.row.url" target="_blank">{{scope.row.url}}</a>
                          <span class="order_info_body_info_item_content"></span>
                        </div>
                        <div class="order_info_body_info_item">
                          <span class="order_info_body_info_item_title">联系电话</span>
                          <span class="order_info_body_info_item_content">{{scope.row.phone}}</span>
                        </div>
                        <div class="order_info_body_info_item">
                          <span class="order_info_body_info_item_title">反馈时间</span>
                          <span class="order_info_body_info_item_content">{{new Date(scope.row.submitTime).format('yyyy-MM-dd hh:mm:ss')}}</span>
                        </div>
                        <div class="order_info_body_info_item">
                          <span class="order_info_body_info_item_title">反馈状态</span>
                          <span class="order_info_body_info_item_content">
                            <el-checkbox v-model="scope.row.hasSolve"  v-if="!scope.row.solve">已解决</el-checkbox>
                            <span v-if="scope.row.solve">已解决</span>
                          </span>
                        </div>
                        <div class="order_info_body_info_item" v-if="!scope.row.solve">
                          <span class="order_info_body_info_item_title"></span>
                          <span class="order_info_body_info_item_content"><el-button @click="saveRow(scope.row)" type="primary">保存</el-button><el-button @click="hideRow(scope.row)">取消</el-button></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div v-if="">暂无数据</div> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="order-management-pagination">
          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      getRowKeys (row) {
        return row.number
      },
      hasSolve: false,
      options: [{
        value: -1,
        label: '全部消息'
      }, {
        value: 0,
        label: '待解决'
      }, {
        value: 1,
        label: '已解决'
      }],

      expands: [],
      expandedArr: [],
      feedBack: [],
      currentPage: 1,
      key_input: '',
      fullscreenLoading: false,
      product: {
        'name': '',
        'packageName': '',
        'count': '',
        'amount': '',
        'url': ''
      },
      receive: {
        'name': '',
        'phone': '',
        'address': '',
        'invoice': '',
        'expressNum': ''
      },
      total: 0,
      searchDate: [],
      searchOrderNumber: '',
      searchPhone: '',
      searchExpressNum: '',
      hasClickSearch: false,
      tabIndex: 0,
      pageSize: 10,
      search_value: -1
    }
  },
  methods: {
    async saveRow (row) {
      let isSelect = row.hasSolve
      let feedBackId = row.id
      console.log(isSelect)
      if (isSelect) {
        let res = await this.$http.post('/manager/scene/updateFeedBackStatus', {
          feedBackId,
          solveType: 1
        })

        if (res.data.code === 0) {
          this.$notify({
            title: '成功',
            message: '保存成功！',
            type: 'success'
          })
          row.solve = 1
        } else {
          this.$alert('保存失败', '提示', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      }
    },
    hideRow (row) {
      this.$refs.order_table.toggleRowExpansion(row, false)
    },
    handleCurrentChange (val) {
      let page = val
      this._getFeedBackData(page)
    },
    selectChange () {
      this.currentPage = 1
      this.total = 0
      this._getFeedBackData(1)
    },

    async _getFeedBackData (page) {
      let solveType = this.search_value === -1 ? null : this.search_value

      this.fullscreenLoading = true

      let res = await this.$http.post('/manager/scene/feedBackList', {
        pageNum: page,
        solveType,
        pageSize: this.pageSize
      })
      this.fullscreenLoading = false
      if (res.code === 0) {
        let temp = res.data.list
        for (var i = 0; i < temp.length; i++) {
          let tempUrl = 'http://www.4dkankan.com/show.html?m=' + temp[i].sceneCode
          let solveStatus = temp[i].solve === 1

          temp[i].idx = i + 1
          temp[i].url = tempUrl
          temp[i].hasSolve = false

          temp[i].solve = solveStatus
        }

        this.feedBack = temp
        this.total = res.data.total ? res.data.total : this.total
      }
    }

  },
  mounted () {
    this._getFeedBackData(1)
  }
}

</script>
<style lang="css" scoped>
@import './style.css';
</style>
<style type="text/css">
.el-table__expand-icon>i {
  display: none !important;
}

.error_btn {
  color: #999
}

</style>
