<template>
  <div class="page-contain list-contain">
    <top-nav title="项目任务"  :showQuery="false"  ></top-nav>
    <div v-if="dataList.length"  class="data-list">
      <div v-for="(item, index) in dataList"
           :key="index"
           class="collapse-box">
        <div class="top">
          <div class="row title">
            <span class="fb">{{item.taskId}}</span>
            <div @click="handleExtend(index)"
                 class="fc8CEE">
              <span v-if="item.isExtend">收起</span>
              <span v-else>更多</span>
              <van-icon :name="item.isExtend?'arrow-up':'arrow-down' " />
            </div>
          </div>
          <div class="row pt10">
            <span>任务来源：{{item.taskSourceKey}}</span>
          </div>
          <div class="row ptb20">
            <span>客户：{{item.customerName}}</span>
          </div>
          <div class="row">
            <span>事项类型：{{item.itemTypeKey}}</span>
          </div>
        </div>
        <div v-show="item.isExtend"
             class="info-box">
          <div class="info-item">
            <span class="left">事项简述</span>
            <span class="right">{{item.taskContent}}</span>
          </div>
          <div class="info-item">
            <span class="left">责任人</span>
            <span class="right">{{item.taskUser}}</span>
          </div>
          <div class="info-item">
            <span class="left">协同人员</span>
            <span class="right ">{{item.userNamesStr}}</span>
          </div>
          <div class="info-item">
            <span class="left">紧要程度</span>
            <span class="right">{{item.emergencyDegreeKey}}</span>
          </div>
          <div class="info-item">
            <span class="left">状态</span>
            <span class="right fc8CEE">{{item.statusKey}}</span>
          </div>
          <div class="info-item">
            <span class="left">要求时间</span>
            <span class="right">{{item.taskRequestDate}}</span>
          </div>
          <div class="info-item">
            <span class="left">关联拜访报告</span>
            <span class="right">{{item.visitReportCode}}</span>
          </div>
          <div class="info-item">
            <span class="left">关联项目</span>
            <span class="right">{{item.projectCode}}</span>
          </div>

        </div>
      </div>
    </div>

    <van-empty v-if="!dataList.length && showNoData" description="暂无数据！" />
  </div>
</template>

<script>

export default {
  name: 'project-task',

  created(){
    this.projectId = this.$route.params.projectId;
    this.getTaskList();
  },
  methods: {

    getTaskList () {
      let param = {
        relevance: this.projectId,
        moduleId: 3101
      }
      this.$axios.post({
        domain: 'crmUrl',
        url: 'task.listWorkCiteTaskInfo',
        data: param,
        requestType: 'body',
        isShow: true,
        success: function (res) {
          if (res.errorCode === 200) {
            this.dataList = res.data || []
            this.dataList.forEach(item => {
              this.$set(item, 'isExtend', true)
            })
          } else {
            this.$toast({ type: 'fail', message: res.msg })
          }
        }.bind(this),
        error: function (err) {
          this.$toast({ type: 'fail', message: err, duration: 3000 })
        }.bind(this),
        complete: function () {
          this.showNoData = true;
        }.bind(this)
      })
    },
    handleExtend (index) {
      this.dataList[index].isExtend = !this.dataList[index].isExtend
    },


  },
  data () {
    return {
      projectId: '',
      showNoData: false,
      dataList: []
    }
  }
}
</script>

<style scoped  lang="scss">
</style>
