<template>
  <div class="related-task">
    <div class="to-do">
      <div class="row bb pb10"
           style="padding:2px 10px">
        <div class="left">
          <span class="fs28 fb">相关任务</span>
          <span class="badge">{{ taskInfoList.length }}</span>
        </div>
        <div class="fc8CEE fs28">
          <span @click="collapse">{{ iscollapse ? '展开' : '收起' }}</span>
          <van-icon v-if="iscollapse"
                    name="arrow" />
          <van-icon v-if="!iscollapse"
                    name="arrow-up" />
        </div>
      </div>
      <div v-if="taskInfoList.length!==0">
        <div v-for="(item, i) in iscollapse ? [taskInfoList[0]] : taskInfoList"
             :key="i"
             @click="editTask(item)"
             style="padding:5px 10px">
          <van-swipe-cell>
            <div class="task-item">
              <div class="row">
                <div class="left">
                  <span class="status">{{ item.emergencyDegreeKey }}</span>
                  <span class="fb">{{ item.taskId }}</span>
                </div>
                <div class="right"
                     style="color:#008cee">{{ item.statusKey }}</div>
              </div>
              <div class="row">
                <div class="left">
                  <span>任务来源：</span>
                  <span class="fc666">{{ item.taskSourceKey }}</span>
                </div>
                <div class="right">
                  <span>客户：</span>
                  <span class="fc666">{{ item.customerName }}</span>
                </div>
              </div>
              <div class="row">
                <div class="left">
                  <span>截止时间：</span>
                  <span class="fc666">{{ item.taskRequestDateFormat }}</span>
                </div>
                <div class="right">
                  <span></span>
                  <span class="fc666">{{ item.creater }}</span>
                </div>
              </div>
            </div>
            <template #right>
              <div style="height:100%;background:#ff976a;margin-left:1px;display: flex;align-items: center;padding:0px 5px">
                <van-button v-if="item.status != 'draft' && item.ext1 != 'add'"
                            type="warning"
                            @click="removeTask(item)">解绑</van-button>
                <van-button v-else
                            type="warning"
                            @click="delTask(item)">删除</van-button>
              </div>
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <div v-if="oper=='edit'"
         style="padding:10px">
      <div class="new-task-btn">
        <van-button icon="plus"
                    @click="addTask">新建任务</van-button>
      </div>
      <div class="report-btn"
           v-if="moduleId==3103">
        <van-button icon="checked"
                    @click="importReport">引用任务</van-button>
      </div>
    </div>
    <!--新建任务-->
    <van-popup v-model="showNewTask"
               position="bottom"
               get-container="#app"
               :style="{ height: '100%' }">
      <newtask ref="newTask"
               v-if="showNewTask"
               :marginT="true"
               :isCallBack="true"
               :moduleId="moduleId"
               :task-data="initTaskDatas"
               @taskData="getTaskData" />
    </van-popup>

    <!--引用报告-->
    <van-popup v-model="showReport"
               position="bottom"
               :style="{ height: '100%', background: '#f9f9f9' }">
      <report-list @close="closeReport"
                   :init-report-ids="initReportIds" />
    </van-popup>

  </div>
</template>

<script>
import newtask from '../pages/task/new-task.vue'
import reportList from '../components/report-list.vue'
import util from '../common/util'
export default {
  name: 'related-task',
  components: { newtask, reportList },
  props: { moduleId: Number, oper: String, customer: String, customerId: String, resultTaskList: Array },
  data () {
    return {
      system: util.appSystem(),
      showNewTask: false,
      showReport: false,
      iscollapse: true,
      // 初始化任务数据
      initTaskDatas: null,
      initReportIds: [],
      param: {},
      // 任务列表
      taskInfoList: []
    }
  },
  created () {
    this.getResult()
  },
  methods: {
    addTask () {
      if (this.moduleId == 3102 && !this.customerId) {
        this.$toast.fail('请先添加拜访客户')
        return
      }
      this.initTaskDatas = {
        customerId: this.customerId,
        customerName: this.customer
      }
      this.showNewTask = true
    },
    getResult (val) {
      if (val != null && val.lengt !== 0) {
        this.taskInfoList = val
      } else {
        this.taskInfoList = this.resultTaskList
      }
    },
    // 关闭新增任务
    getTaskData (taskObject) {
      this.showNewTask = false
      if (taskObject) {
        if (!taskObject.textId) { // 用于判断重复
          taskObject.textId = Math.random()
        }
        let newTaskInfoList = this.taskInfoList
        if (taskObject.taskId !== '') {
          newTaskInfoList = newTaskInfoList.filter(v => v.taskId !== taskObject.taskId)
        }
        newTaskInfoList = newTaskInfoList.filter(v => v.textId !== taskObject.textId)
        newTaskInfoList.push(taskObject)
        this.taskInfoList = newTaskInfoList
        this.initTaskDatas = null
      }
      this.$emit('taskInfoList', this.taskInfoList)
    },
    // 解绑任务
    removeTask (row) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否解绑该数据?'
        })
        .then(() => {
          if (!row.ext1 || (row.ext1 === 'import' && (row.relevanceWorkNumber == null || row.relevanceWorkNumber === ''))) {
            this.taskInfoList = this.taskInfoList.filter(v => v.id !== row.id)
          } else {
            this.$axios.post({
              domain: 'crmUrl',
              url: 'work.unfastenWorkOrTaskBind',
              data: { id: row.id },
              requestType: 'body',
              success: function (res) {
                if (res.errorCode === 200) {
                  this.$toast.success('解绑成功！')
                  this.taskInfoList = this.taskInfoList.filter(v => v.id !== row.id)
                } else {
                  this.$toast.fail(res.data.msg)
                }
              }.bind(this)
            })
          }
        })
    },
    // 删除任务
    delTask (row) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否删除该数据?'
        })
        .then(() => {
          if (row.id == null || row.id === '') {
            this.taskInfoList = this.taskInfoList.filter(v => v.id !== row.id)
          } else {
            let param = [row.id]
            this.$axios.post({
              domain: 'crmUrl',
              url: 'task.deleteTasks',
              data: param,
              requestType: 'body',
              success: function (res) {
                if (res.errorCode === 200) {
                  this.$toast.success('删除成功！')
                  this.taskInfoList = this.taskInfoList.filter(v => v.id !== row.id)
                } else {
                  this.$toast.fail(res.data.msg)
                }
              }.bind(this)
            })
          }
        })
    },
    // 编辑任务
    editTask (row) {
      if (row.status === 'draft' || row.ext1 === 'add') {
        let data = {}
        for (let key in row) {
          data[key] = row[key]
        }
        this.initTaskDatas = data
        this.showNewTask = true
      } else {
        // 从工作报告中的拜访报告列表进来，不能评论，只能查看
        if (this.$route.query.from && this.$route.query.from === 'newWork') {
          this.$router.push({ name: 'taskDetail', query: { rowId: row.id, from: 'newWork' } })
        } else {
          this.$router.push({ name: 'taskDetail', query: { rowId: row.id } })
        }
      }
    },
    // 关闭引用报告
    closeReport (data) {
      this.showReport = false
      if (data.length !== 0) {
        this.taskInfoList = [...this.taskInfoList, ...data]
      }
    },
    // 引用报告
    importReport () {
      this.showReport = true
    },
    // 相关任务展开与收起
    collapse () {
      this.iscollapse = !this.iscollapse
    }
  }
}
</script>

<style lang="scss">
// .page-contain.related-task {
//   background: #fff;
//   label {
//     color: #646566;
//   }
//   .van-form {
//     .row-wrap {
//       padding: 10px 15px;
//       border-bottom: 1px solid #ddd;
//       label {
//         color: #646566;
//         margin-right: 15px;
//       }
//     }
//     .input-wrap {
//       padding: 10px 15px;
//       border-bottom: 1px solid #ddd;
//       .van-cell {
//         border-bottom: none;
//       }
//       .row {
//         display: flex;
//         justify-content: space-between;
//         border: none;
//       }
//     }
//     .new-task-edit-btn {
//       margin: 0 5px 0 auto;
//       text-align: right !important;
//       // display: flex;
//       .van-button {
//         height: 40px;
//         font-size: 12px;
//         background: #ecf5ff;
//         border: 1px solid #b3d8ff;
//         border-radius: 5px;
//         color: #008cee;
//       }
//     }
.new-task-btn {
  width: 90%;
  margin: 0 auto;
  > .van-button {
    height: 80px;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 5px;
    color: #008cee;
    width: 100%;
  }
}
.to-do {
  background-color: #fff;

  .left {
    display: flex;
    align-items: center;

    .badge {
      display: inline-block;
      background: #f7b64b;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      margin-left: 16px;
      color: #fff;
      text-align: center;
      line-height: 40px;
    }
  }
}
//     .report-btn {
//       width: 90%;
//       margin: 10px auto;
//       display: flex;

//       > .van-button {
//         flex: 1;
//         height: 80px;
//         background: #eef8f3;
//         border: 1px solid #a1d8bc;
//         border-radius: 5px;
//         color: #57b986;
//       }
//     }
//   }

//   .to-do {
//     padding: 20px 0px;
//     border-radius: 20px;
//     background-color: #fff;

//     .left {
//       display: flex;
//       align-items: center;

//       .badge {
//         display: inline-block;
//         background: #f7b64b;
//         border-radius: 50%;
//         width: 40px;
//         height: 40px;
//         margin-left: 16px;
//         color: #fff;
//         text-align: center;
//         line-height: 40px;
//       }
//     }
//   }

.task-item {
  margin-top: 10px;
  background: #f9f9f9;
  border-radius: 20px;
  padding: 10px;
  .row {
    padding-bottom: 20px;
    background: #f9f9f9;
  }
  .left {
    .status {
      background: #fef0f0;
      border: 1px solid #fbc4c4;
      border-radius: 5px;
      color: #f03d36;
      padding: 3px 16px;
      margin-right: 10px;
    }
  }
}
// }
.van-button--normal {
  padding: 0 !important;
}
</style>
