<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">已完成需求</div>
      <div class="contain-search">
        <el-input placeholder="搜索需求主题/需求内容/需求方" v-model="searchText" class="input-with-select" @keyup.enter.native="searchPageQuery">
          <el-button slot="append" icon="el-icon-search" @click="searchPageQuery"></el-button>
        </el-input>
      </div>
    </div>
    <div class="content-container">
      <el-table
        :data="tableData"
        height="630"
        v-loading="tableLoading"
        border>
        <el-table-column
          v-for="item in tableItem"
          :key="item.index"
          :prop="item.prop ? item.prop : ''"
          :label="item.tit ? item.tit : ''"
          :width="item.width ? item.width : ''"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" v-if="item.link" @click="handelView(scope.row.id)">{{scope.row[item.prop]}}</el-button>
            <span v-else>{{scope.row[item.prop]}}</span>
            <div class="operate-row" v-if="item.operate && typeof scope.row === 'object'">
              <el-button
                size="medium"
                type="primary"
                @click="handelViewReback(scope.row.id)">查看专家回复</el-button>
              <el-button
                size="medium"
                type="primary"
                @click="handelViewCoop(scope.row.id)">查看专家合作者</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <closeOperate ref="operateClose"></closeOperate>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import queryBase from '@/utils/queryBase'
  import comTable from '@/utils/comTable'
  import { pageDemandUrl, pqDemandNum, pqDemandPro, feedbackReason } from '@/api/demand'
  import { TimeTr, kexiuUrl } from '@/utils/index'

  import closeOperate from './closeOperate'

  export default {
    data() {
      return {
        searchText: '',
        pageSize: 10,
        pageNo: 1,
        total: 0,
        tableData: [],
        tableLoading: true,
        // curTime: (new Date()).toISOString().substring(0, 10).replace(/-/g, ''),
        tableItem: [
          {
            prop: 'title',
            tit: '需求主题',
            link: true
          },
          {
            prop: 'linkOrg',
            tit: '需求方'
          },
          {
            prop: 'creatorName',
            tit: '发布用户名'
          },
          {
            prop: 'linkPhone',
            tit: '联系电话',
            width: '160'
          },
          {
            prop: 'createTime',
            tit: '发布时间',
            width: '160'
          },
          {
            prop: 'countNum',
            tit: '回复者数量'
          },
          {
            prop: 'feedback',
            tit: '意见建议'
          },
          {
            prop: 'overTime',
            tit: '完成时间',
            width: '160'
          },
          {
            prop: 'proArr',
            tit: '专家合作者'
          },
          {
            operate: 'edit',
            width: '200'
          }
        ]
      }
    },
    components: {
      closeOperate
    },
    created() {
      this.pageQuery()
    },
    methods: {
      searchPageQuery() {
        this.pageNo = 1
        this.total = 0
        this.tableData = []
        this.pageQuery()
      },
      pageQuery() {
        var that = this
        this.$http.get(pageDemandUrl, {
          order: 'overTime',
          // invalidDay: that.curTime,
          key: that.searchText,
          actived: 1,
          state: 2,
          pageSize: that.pageSize,
          pageNo: that.pageNo
        }, function(res) {
          that.tableLoading = false
          if (res.success && res.data) {
            const obj = res.data.data
            if (obj.length > 0) {
              var hData = { num: 1, data: obj }
              for (let i = 0; i < obj.length; ++i) {
                if (obj[i].createTime) {
                  obj[i].createTime = TimeTr(obj[i].createTime)
                }
                if (obj[i].overTime) {
                  obj[i].overTime = TimeTr(obj[i].overTime)
                }
                (function(item, num) {
                  item.countNum = ''
                  item.creatorName = ''
                  item.feedback = ''
                  item.proArr = ''
                  that.turnOutProCount(item, num)
                  that.turnOutUserName(item, num)
                  that.turnOutProNames(item, num)
                })(obj[i], hData.num)
              }
              hData.num--
              that.total = res.data.total
              if (hData.num === 0) {
                that.tableData = obj
              }
              comTable.gapFilling(that.tableData)
            }
          } else {
            that.total = 0
            that.tableData = []
          }
        })
      },
      turnOutUserName(lmt, num) {
        var that = this
        num++
        queryBase.getNormalOne(lmt.creator, function(sc, value) {
          if (sc) {
            num--
            lmt.creatorName = value.account
            that.$http.get(feedbackReason, {
              target: lmt.id,
              type: 1,
              creator: lmt.creator
            }, function(res) {
              if (res.success && res.data) {
                lmt.feedback = res.data.cnt
                that.$forceUpdate()
              }
            })
            that.$forceUpdate()
          }
        })
      },
      turnOutProCount(lmt, num) {
        var that = this
        num++
        this.$http.get(pqDemandNum, {
          id: lmt.id
        }, function(res) {
          if (res.success) {
            num--
            lmt.countNum = res.data
            that.$forceUpdate()
          }
        })
      },
      turnOutProNames(lmt, num) {
        const proQmUrl = kexiuUrl + '/ajax/professor/qm'
        var that = this
        num++
        this.$http.get(pqDemandPro, {
          id: lmt.id,
          actived: 1,
          pageSize: 5,
          pageNo: 1
        }, function(res) {
          if (res.success) {
            const obj = res.data.data
            var arr = []
            if (obj.length > 0) {
              for (let i = 0; i < obj.length; ++i) {
                arr.push(obj[i].uid)
              }
              if (arr.length > 0) {
                axios({
                  method: 'get',
                  url: proQmUrl,
                  params: {
                    id: arr
                  },
                  paramsSerializer: params => {
                    return qs.stringify(params, { indices: false })
                  }
                }).then(data => {
                  if (data.data.success && data.data.data) {
                    num--
                    const $info = data.data.data
                    if ($info.length > 0) {
                      var names = []
                      for (let j = 0; j < $info.length; ++j) {
                        names.push($info[j].name)
                      }
                      if (names.length < 5) {
                        lmt.proArr = names.join('，')
                      } else {
                        names.splice(4, 1)
                        lmt.proArr = names.join('，') + ' ...'
                      }
                      that.$forceUpdate()
                    }
                  }
                })
              }
            }
          }
        })
      },
      handelView(id) {
        this.$router.push({
          name: 'preview',
          query: { id: id }
        })
      },
      handelViewReback(id) {
        this.$router.push({
          name: 'previewExp',
          query: { id: id }
        })
      },
      handelViewCoop(id) {
        this.$router.push({
          name: 'previewExp',
          query: { id: id, m: 1 }
        })
      },
      handleCurrentChange(val) {
        this.pageNo = val
        this.pageQuery()
      }
    }
  }
</script>