<template>
  <div class="browse-main">
    <div class="block-wrapper">
      <div class="wrapper-left left-main">
        <div class="content-wrapper">
          <div class="inner-wrapper">
            <div class="headcon-box detail-box">
              <div class="show-info">
                <div class="info-tit info-tit-big">{{demandInfo.title}}</div>
                <div class="info-operate">
                    <span>需求方：{{demandInfo.linkOrg}}</span>
                    <span>当前状态：{{stateShow}}</span>
                    <span>发布时间：{{TimeTr(demandInfo.createTime)}}</span>
                    <span v-if="demandInfo.state===2">完成时间：{{TimeTr(demandInfo.overTime)}}</span>
                    <span v-if="demandInfo.state===3">关闭时间：{{TimeTr(demandInfo.closeTime)}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="inner-wrapper">
            <div class="content">
              <el-row :gutter="10" class="rel-detail">
                <el-col :span="24" v-html="demandInfo.descp" style="margin-bottom: 10px"></el-col>
                <el-col :span="6" v-if="demandInfo.city">
                  所在城市：{{cityRange[demandInfo.city]}}
                </el-col>
                <el-col :span="6" v-if="demandInfo.duration">
                  预计周期：{{longTime[demandInfo.duration]}}
                </el-col>
                <el-col :span="6" v-if="demandInfo.cost">
                  费用预算：{{costRange[demandInfo.cost]}}
                </el-col>
                <el-col :span="6" v-if="demandInfo.invalidDay">
                  有效期至：{{TimeTr(demandInfo.invalidDay)}}
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="inner-wrapper" v-if="cooperateExperts && cooperateExperts.length>0">
            <div class="content-title">
              <span>合作方</span>
            </div>
            <div>
              <div class="con-item" v-for="item in cooperateExperts" :key="item.index">
                <baseExpert v-if="item.owner" :itemSingle="item.owner"></baseExpert>
                <div class="dele">
                  <contactChat :contactOptions="{oid: item.uid}"></contactChat>
                  <collectCo :watchOptions="{oid: item.uid, type: 1}"></collectCo>
                </div>
              </div>
            </div>
          </div>
          <div class="inner-wrapper">
            <el-collapse v-model="collapseName" v-if="demandButtExperts && demandButtExperts.length>0">
              <el-collapse-item :title="`已为您对接${buttCount}位专家`" name="1">
                <div class="con-item" v-for="item in demandButtExperts" :key="item.index">
                  <baseExpert v-if="item.owner" :itemSingle="item.owner"></baseExpert>
                  <div class="dele">
                    <contactChat :contactOptions="{oid: item.uid}"></contactChat>
                    <collectCo :watchOptions="{oid: item.uid, type: 1}"></collectCo>
                  </div>
                  <div class="leavemsg">
                    <div>留言：{{item.descp}}</div>
                    <span>{{item.assTime}}</span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
            <div v-else class="content-title">正在为您对接专家...</div>
          </div>
          <div class="inner-wrapper" v-if="buttonShow">
            <div class="btn-need">
              <el-button type="primary" :disabled="completeDisable" @click="completeOper">需求已完成</el-button>
              <el-button type="info" class="close-btn" @click="closeOper">关闭该需求</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <completeOperate ref="operateComplete"></completeOperate>
    <closeOperate ref="operateClose"></closeOperate>
    <BackTop></BackTop>
  </div>
</template>

<script>
  import { urlParse, commenTime, TimeTr } from '@/libs/util'
  import queryDict from '@/libs/queryDict'
  import queryBase from '@/libs/queryBase'

  import baseExpert from '@/components/subTemplate/BaseExpert'
  import contactChat from '@/components/ContactChat'
  import collectCo from '@/components/CollectCo'

  import completeOperate from './completeOperate'
  import closeOperate from './closeOperate'
  export default {
    data() {
      return {
        collapseName: ['1'],
        completeDisable: false,
        demandInfo: '',
        demandId: '',
        TimeTr: TimeTr,
        costRange: [],
        longTime: [],
        cityRange: [],
        demandButtExperts: '',
        cooperateExperts: '',
        buttCount: 0
      };
    },
    created() {
      this.getDictoryData()
      this.demandId = urlParse('id')
      if (this.demandId) {
        this.getdemandInfo()
        this.buttExpert()
        this.cooperateExpert()
        this.rebackCount()
      }
    },
    computed: {
      stateShow() {
        let state = this.demandInfo.state
        let curTime = this.curTime
        let msg = '发布中'
        if (state === 1) {
          msg = '发布中'
          if (curTime > this.demandInfo.invalidDay) {
            msg = '已过期'
          }
        } else if (state === 2) {
          msg = '已完成'
        } else if (state === 3) {
          msg = '已关闭'
        }
        return msg
      },
      buttonShow() {
        let state = this.demandInfo.state
        return state === 1
      }
    },
    components: {
      baseExpert,
      collectCo,
      contactChat,
      completeOperate,
      closeOperate
    },
    methods: {
      getDictoryData() {
        const that = this
        queryDict.applyDict('XZQH', function(dictData) {
          dictData.map(item => {
            that.cityRange[item.code] = item.caption
          })
        }) // 城市
        queryDict.applyDict('FYYS', function(dictData) {
          dictData.map(item => {
            that.costRange[item.code] = item.caption
          })
        }) // 费用预算
        queryDict.applyDict('HZZQ', function(dictData) {
          dictData.map(item => {
            that.longTime[item.code] = item.caption
          })
        }) // 合作周期
      },
      getdemandInfo() {
        this.$axios.get('/ajax/demand/qo', {
          id: this.demandId
        }, (res) => {
          if (res.success) {
            var $info = res.data;
            document.title = $info.title + '-' + PLAT.info.title
            this.demandInfo = $info;
          };
        });
      },
      completeOper() {
        this.$refs.operateComplete.openDiag(this.demandId)
      },
      closeOper() {
        this.$refs.operateClose.openDiag(this.demandId)
      },
      buttExpert() {
        var that = this
        this.$axios.get('/ajax/demand/pro', {
          id: this.demandId
        }, (res) => {
          if (res.success) {
            var $info = res.data;
            for (let i = 0; i < $info.length; ++i) {
              if ($info[i].assTime){
                $info[i].assTime = commenTime($info[i].assTime)
              }
              (function(item) {
                queryBase.getProfessor(item.uid, function(sc, value) {
                  if (sc) {
                    item.owner = value
                    that.$forceUpdate()
                  }
                })
              })($info[i])
            }
            this.demandButtExperts = $info;
          }
        })
      },
      rebackCount() {
        var that = this
        this.$axios.get('/ajax/demand/pro/count', {
          id: that.demandId
        }, function(res) {
          if (res.success) {
            if (res.data > 0) {
              that.buttCount = res.data
            } else {
              that.completeDisable = true
            }
          }
        })
      },
      cooperateExpert() {
        var that = this
        this.$axios.get('/ajax/demand/pro', {
          id: that.demandId,
          actived: 1
        }, (res) => {
          if (res.success) {
            var $info = res.data;
            var arr = []
            for (let i = 0; i < $info.length; ++i) {
              queryBase.getProfessor($info[i].uid, function(sc, value) {
                if (sc) {
                  $info[i].owner = value
                  that.$forceUpdate()
                }
              })
            }
            that.cooperateExperts = $info
          }
        })
      },
    }
  };
</script>

<style lang="scss">
.browse-main .block-wrapper .left-main .inner-wrapper{
  .detail-box{
    .info-operate{
      font-size: 14px;
      justify-content: space-between;
    }
  }
  .con-item{
    position:relative;
    cursor: pointer;
    border: 1px solid #eaeaea;
    margin-bottom: 10px;
    .list-item{
      border: none;
      &::after{
        content: none;
      }
      .list-head{
        @include center-items(60px,60px);
        border-radius: 50%;
      }
    }
    .dele{
      position: absolute;
      display: flex;
      right: 10px;
      z-index: 20;
      top: 30px;
    }
    .leavemsg{
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
      background: #eaeaea;
      padding: 8px 10px;
      position: relative;
      div {
        padding-right: 170px;
      }
      span{
        position: absolute;
        right: 10px;
        top: 8px;
        z-index: 2;
      }
    }
  }
  .btn-need {
    position:relative;
    padding: 20px;
    text-align: center;
    .el-button{
      padding:12px 60px;
    }
    .close-btn{
      position: absolute;
      right: 0;
      padding:12px 20px;
      top: 20px;
    }
  }
  .el-collapse{
    border:none;
  }
  .el-collapse-item__header{
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    color: #303133;
    border:none;
  }
  .el-collapse-item__wrap{
    border: none;
  }
}
</style>
