<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 ref="tableEle">
        <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>
            </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"
          v-if="total !== 0">
        </el-pagination>
      </div>
    </div>
    <closeOperate ref="operateClose"></closeOperate>
  </div>
</template>

<script>
  import queryBase from '@/utils/queryBase'
  import comTable from '@/utils/comTable'
  import { pageDemandUrl, pqDemandNum, pqDemandReason } from '@/api/demand'
  import { TimeTr } 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: 'closeTime',
            tit: '关闭时间',
            width: '160'
          },
          {
            prop: 'closeReason',
            tit: '关闭理由',
            width: '200'
          },
          {
            operate: 'edit',
            width: '200'
          }
        ]
      }
    },
    components: {
      closeOperate
    },
    created() {
      this.pageNo = sessionStorage.getItem('d-close-page') || 1
      this.pageQuery()
    },
    methods: {
      searchPageQuery() {
        this.pageNo = 1
        this.total = 0
        this.tableData = []
        this.pageQuery()
      },
      pageQuery() {
        var that = this
        this.$http.get(pageDemandUrl, {
          order: 'closeTime',
          // invalidDay: that.curTime,
          key: that.searchText,
          actived: 1,
          state: 3,
          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].closeTime) {
                  obj[i].closeTime = TimeTr(obj[i].closeTime)
                }
                (function(item, num) {
                  item.countNum = ''
                  item.creatorName = ''
                  item.closeReason = ''
                  that.turnOutProCount(item, num)
                  that.turnOutUserName(item, num)
                  that.turnCloseReason(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.$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()
          }
        })
      },
      turnCloseReason(lmt, num) {
        var that = this
        num++
        this.$http.get(pqDemandReason, {
          id: lmt.id
        }, function(res) {
          if (res.success && res.data) {
            num--
            var arr = []
            for (let i = 0; i < res.data.length; ++i) {
              arr.push(res.data[i].descp)
            }
            lmt.closeReason = arr.join('，')
            that.$forceUpdate()
          }
        })
      },
      handelView(id) {
        this.$router.push({
          name: 'preview',
          query: { id: id }
        })
      },
      handelViewReback(id) {
        this.$router.push({
          name: 'previewExp',
          query: { id: id }
        })
      },
      handleCurrentChange(val) {
        this.$refs.tableEle.bodyWrapper.scrollTop = 0
        this.pageNo = val
        sessionStorage.setItem('d-close-page', this.pageNo)
        this.pageQuery()
      }
    }
  }
</script>