<template>
  <div style="width: 100%; max-height: 600px; overflow: auto;padding-bottom: 10px;" class="content">
    <div v-for="(item, index) in Json" :key="index" class="bigBox">
      <div v-for="(item2, index2) in item.chapterInfo[0].taskJson" :key="index + '-' + index2" class="taskBox">
        <div class="rwBox">
          <div class="rwTop">
            <div class="rwTouImg"></div>
            <div>{{ getMan(item2.people) }}</div>
          </div>
          <div class="rwTop" v-if="item2.tcMember && item2.tcMember.length">
            <div class="rwTouImg" style="background:#ff9219"></div>
            <!-- <div class="xtBox"><span class="tcMember" v-for="(mam, mIndex) in item2.tcMember" :key="mIndex">{{ getMan(mam) }}</span>
            </div> -->
            <el-tooltip :content="getMen(item2.tcMember)" placement="top" effect="dark">
              <div class="xtBox"><span class="tcMember" v-for="(mam, mIndex) in getMan2(item2.tcMember)" :key="mIndex">{{
                mam
              }}</span>
              </div>
            </el-tooltip>
          </div>
          <div class="rwTop" v-else>
            <div class="rwTouImg" style="background:#ff9219"></div>
            <div><span class="tcMember">无</span></div>
          </div>
          <div class="rwMidBox">
            <div>{{ item2.task }}</div>
            <div class="rwMessage">
              <div class="rwBoxMessage">
                <div class="rwIcon">
                  <img src="../../../assets/icon/startTime.png" alt="" />
                </div>
                <div>开始时间：{{ timeB(item2.time ? item2.time[0] : '') }} </div>
              </div>
              <div class="rwBoxMessage">
                <div class="rwIcon">
                  <img src="../../../assets/icon/endTime.png" alt="" />
                </div>
                <div>完成时间：{{ timeB(item2.time ? item2.time[1] : '') }} </div>
              </div>
              <div class="rwBoxMessage">
                <div class="rwIcon">
                  <img src="../../../assets/icon/allTime.png" alt="" />
                </div>
                <div>所需时长：{{ timeA(item2.time ? item2.time[0] : '', item2.time ? item2.time[1] : '') }}天</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['Json', 'ManAarray'],
  data() {
    return {
      ManAarray2: []
    };
  },
  computed: {
    timeA() { //此处不需要携带参数
      return function (startTime, endTime) {
        var day =
          new Date(endTime).getTime() - new Date(startTime).getTime(); //日期转时间戳
        var time = Math.floor(day / 86400000);
        return time ? time : '0'
      }
    },
    timeB() {
      return function (timeA) {
        var time = new Date(timeA);
        time.setTime(time.getTime());
        var s2 = time.getFullYear() + "-" + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + "-"
          + ((time.getDate()) < 10 ? '0' + (time.getDate()) : (time.getDate()));
        return time.getFullYear() ? s2 : '无'
      }
    },
    getMen() {
      return function (people) {
        let _people = people
        let kp = []
        if (this.ManAarray.length) {
          for (var k = 0; k < _people.length; k++) {
            let person = _people[k]
            for (var i = 0; i < this.ManAarray.length; i++) {
              if (this.ManAarray[i].userid == person) {
                // _people = this.ManAarray[i].name;
                kp.push(this.ManAarray[i].name)
                break;
              }
            }
          }
        }
        return this.ManAarray.length ? (kp.length ? kp.join('、') : '') : ''
      }
    },
    getMan() {
      return function (people) {
        let _people = ''
        if (this.ManAarray2.length) {
          for (var i = 0; i < this.ManAarray2.length; i++) {
            if (this.ManAarray2[i].userid == people) {
              _people = this.ManAarray2[i].name;
              break;
            }
          }
        }
        return _people ? _people : '无'
      }
    },
    getMan2() {
      return function (people) {
        let _people = people
        let kp = []
        if (this.ManAarray.length) {
          for (var k = 0; k < _people.length; k++) {
            let person = _people[k]
            for (var i = 0; i < this.ManAarray.length; i++) {
              if (this.ManAarray[i].userid == person) {
                // _people = this.ManAarray[i].name;
                kp.push(this.ManAarray[i].name)
                break;
              }
            }
          }
        }
        return kp.length ? kp : ['无']
      }
    },
  },
  watch: {
    ManAarray: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.ManAarray2 = newValue
      }
    }
  },
  methods: {
  },
  created() {
  },
};
</script>

<style scoped>
.content {
  display: flex;
}

.bigBox {
  padding-bottom: 11px;
  height: 100%;
}

.bigBox+.bigBox {
  margin-left: 10px;
}

.taskBox+.taskBox {
  margin-top: 10px;
}

.rwBox {
  width: 280px;
  background: #fff;
}

.rwTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: top;
}

.rwTop+.rwTop {
  margin-top: 5px;
}

.rwTouImg {
  min-width: 13px;
  height: 13px;
  background: #0258f1 100%;
  border-radius: 50%;
  margin: 5px 10px 0;
}

.rwMidBox {
  border: 2px solid #e3e6e8;
  width: 270px;
  margin-top: 10px;
  border-radius: 15px;
  background: #f6f6f640;
}

.rwMidBox>div:nth-child(1) {
  font-weight: bold;
  margin: 15px 0 0 0;
  padding: 0 10px;
}

.rwMessage {
  margin-top: 5px;
  padding: 0 10px 10px 10px;
}

.rwBoxMessage {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 10px 0;
}

.rwIcon {
  width: 20px;
  height: 20px;
  /* background: #000;
  border-radius: 50%; */
  margin-right: 5px;
}

.rwIcon>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rwBoxMessage>div:nth-child(2) {
  font-size: 12px;
}

.tcMember+.tcMember::before {
  content: '、';
}

.xtBox {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>