<template>
  <div class="analyse-container">
    <div class="analyse-wr list-wr">

      <div class="analys-col">
        <div class="analys-family">
          <div class="family-title">(家属)</div>
          <div v-for="(item, index) in userList" :key="index" class="family-item" @click="handleUser(item)">{{item.icUserName}}</div>
          <!-- <div class="family-item">王亚男哈</div>
          <div class="family-item">王亚男</div>
          <div class="family-item">王亚男哈</div>
          <div class="family-item">王亚</div> -->
        </div>
      </div>

      <div class="analys-col">
        <img class="analys-arrow" src="../../../../assets/img/shuju/measure/zuo@2x.png" />
      </div>

      <div class="analys-col">
        <div class="analys-person">
          <div class="personal-name">{{userName}}</div>
          <div class="personal-tips">(案件居民)</div>
        </div>
      </div>

      
      <template v-if="hasEvent">
        <div class="analys-col analys-col-posi">
          <img class="analys-up" src="../../../../assets/img/shuju/measure/up-right.png" />
          <img class="analys-up analys-down" src="../../../../assets/img/shuju/measure/down-right.png" />
        </div>
        <div class="analys-col">
          <div class="cate-list cate-list-more">
            <div class="cate-row">

              <div class="analys-col">
                <div class="analys-cate" @click="handleTabs('group')">
                  <div class="label">{{ singleTitle }}</div>
                  <div class="tips">(反应渠道)</div>
                  <div class="icon">
                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
                  </div>
                </div>
              </div>

              <div v-if="sourceTab === 'group'" class="analys-col">
                <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
              </div>

            </div>

            <div class="cate-row">

              <div class="analys-col">
                <div class="analys-cate" @click="handleTabs('event')">
                  <div class="label">{{ moreTitle }}</div>
                  <div class="tips">(反应渠道)</div>
                  <div class="icon">
                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
                  </div>
                </div>
              </div>

              <div v-if="sourceTab === 'event'" class="analys-col">
                <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
              </div>

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


        <div class="analys-col analys-col-wr analys-col-more list-wr" id="scroll-wr">
          <div class="cate-list cate-list-child">
            <div v-for="(item, index) in tempList" :key="index" class="cate-row">

              <div class="cate-col">
                <div class="analys-cate">
                  <div class="label">{{item.categoryName}}</div>
                  <div class="tips">(同类案件)</div>
                  <div class="icon" @click="handleShow(item)">
                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
                  </div>
                </div>
              </div>

               <div class="cate-col cate-col-arrow">
                <img v-show="item.showItem" class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
              </div>

              <div class="cate-col cate-col-w100">
                <div class="cate-list-w0" :class="item.showItem && 'cate-list-w100'">
                  <div class="list list-wr">
                    <div v-for="(n, i) in item.projectList" :key="i" class="item" @click="handleProject(n)">
                      <div class="item-status" :class="'item-status-'+n.status">{{filterStatus(n.status)}}</div>
                      <div class="item-content">{{n.title}}</div>
                    </div>
                    <!-- <div class="item">
                      <div class="item-status">已结案</div>
                      <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
                    </div> -->
                    
                  </div>
                </div>
              </div>

            </div>

          </div>
        </div>
      </template>
      <template v-else>
        <div class="analys-col">
          <img class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
        </div>

        

        <div class="analys-col">
          <div class="analys-cate">
            <div class="label">{{ singleTitle }}</div>
            <div class="tips">(反应渠道)</div>
            <!-- <div class="icon">
              <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
            </div> -->
          </div>
        </div>

        <div class="analys-col">
          <img v-if="tempList.length > 1" class="analys-up" src="../../../../assets/img/shuju/measure/up-right.png" />
          <img v-if="tempList.length != 2" class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
          <img v-if="tempList.length > 1" 
          class="analys-up analys-down" src="../../../../assets/img/shuju/measure/down-right.png" />
        </div>

        <div class="analys-col list-wr" :class="tempList.length > 2 && 'analys-col-wr' || 'analys-single'">
          <div class="cate-list">
            <div v-for="(item, index) in tempList" :key="index" class="cate-row">

              <div class="cate-col">
                <div class="analys-cate">
                  <div class="label">{{item.categoryName}}</div>
                  <div class="tips">(同类案件)</div>
                  <div class="icon" @click="handleShow(item)">
                    <img src="../../../../assets/img/shuju/measure/gantanhao.png" />
                  </div>
                </div>
              </div>
              <div class="cate-col cate-col-arrow">
                <img v-show="item.showItem" class="analys-arrow" src="../../../../assets/img/shuju/measure/you@2x.png" />
              </div>

              <div class="cate-col cate-col-w100">
                <div class="cate-list-w0" :class="item.showItem && 'cate-list-w100'">
                  <div class="list list-wr">
                    <div v-for="(n, i) in item.projectList" :key="i" class="item" @click="handleProject(n)">
                      <div class="item-status" :class="'item-status-'+n.status">
                        {{ n.statusName || filterStatus(n.status)}}
                      </div>
                      <div class="item-content">{{n.title}}</div>
                    </div>
                    <!-- <div class="item">
                      <div class="item-status">已结案</div>
                      <div class="item-content">合肥路与安宁路交合肥路与安宁路交</div>
                    </div> -->
                    
                  </div>
                </div>
                
              </div>

            </div>

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

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

<script>
// singleList: [
//   {
//     categoryName: '辨明服务',
//     categoryCode: '1',
//     showItem: true,
//     projectList: [
//       {
//         title: '不知道写了什么哈哈哈',
//         status: 'closed',
//         statusName: '',
//         projectId: '1'
//       }
//     ]
//   }
// ]
export default {
  name: 'Analyse',
  props: {
    hasEvent: {
      type: Boolean, // 楼院小组和事件上报同时存在时  为 true
      default: false
    },
    moreTitle: String, // hasEvent 为true 时 传入
    moreList: Array, // hasEvent 为true 时 传入
    singleTitle: { // 默认，必传
      type: String,
      default: '楼院小组'
    },
    userList: Array, // 默认，必传
    userName: String, // 默认，必传
    singleList: Array, // 默认，必传
    
  },
  data () {
    return {
      sourceTab: 'group',
      tempList: []
    }
  },
  created() {
    this.tempList = [...this.singleList]
  },
  methods: {
    filterStatus(status) {
      const statusObj =  {
        pending: '待处理',
        closed: '已结案'
      }
      return statusObj[status]
    },
    handleTabs(type) {
      if (type === 'group') this.tempList = [ ...this.singleList ]
      else if (type === 'event') this.tempList = [ ...this.moreList ]
      this.sourceTab = type
      const _dom = document.getElementById('scroll-wr')
      _dom.scrollTop = 0
    },
    handleProject(item) {
      this.$emit('project', item)
    },
    handleUser(item) {
      this.$emit('user', item)
    },
    handleShow(item) {
      item.showItem = !item.showItem
    }
  }
}
</script>

<style lang="scss" scoped>
.analyse-container {
  .analyse-wr {
    display: flex;
    align-items: center;
    width: 100%;
    max-height: 560px;
    box-sizing: border-box;
    overflow: auto;

    .analys-col {
      position: relative;
      cursor: pointer;
      .analys-family {
        text-align: center;
        .family-title {
          margin-bottom: 8px;
        }
        .family-item {
          width: 76px;
          box-sizing: border-box;
          margin-bottom: 28px;
          padding: 8px 0;
          font-size: 14px;
          color: #fff;
          text-align: center;
          background: rgba(255, 255, 255, 0);
          border: 1px solid #1257C9;
          border-radius: 2px;
          box-shadow: 0 0 5px 2px rgba(18, 87, 201, 1) inset;
        }
      }
      .analys-up {
        display: block;
        width: 64px;
        height: 99px;
        box-sizing: border-box;
        margin-bottom: 85px;
      }
      .analys-down {
        margin-top: 85px;
        margin-bottom: 0;
      }
      .analys-arrow {
        display: block;
        width: 32px;
        height: 18px;
        box-sizing: border-box;
        margin: 0 6px;
      }

      .analys-person {
        width: 154px;
        height: 152px;
        box-sizing: border-box;
        padding-top: 60px;
        color: #fff;
        text-align: center;
        background: url('../../../../assets/img/shuju/measure/zhuhu@2x.png') no-repeat center;
        background-size: cover;
        .personal-name {
          font-size: 18px;
          font-weight: 500;
        }
        .personal-tips {
          margin-top: 6px;
          font-size: 14px;
        }
      }

      .analys-cate {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 120px;
        min-height: 64px;
        box-sizing: border-box;
        padding: 14px 20px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        background: rgba(255, 255, 255, 0);
        border: 1px solid #1257C9;
        border-radius: 4px;
        box-shadow: 1px 1px 10px 5px rgba(18, 87, 201, 1) inset;
        .label {
          font-size: 18px;
          font-weight: 500;
        }
        .tips {
          margin-top: 6px;
          font-size: 14px;
        }
        .icon {
          position: absolute;
          right: 4px;
          bottom: 4px;
          width: 12px;
          height: 12px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }

      .cate-list {
        // padding-top: 200px;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        .cate-row {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          // margin-top: 0;
          .cate-col-arrow {
            width: 32px;
            height: 18px;
            // box-sizing: border-box;
            margin: 0 6px;
            .analys-arrow {
              display: block;
              width: 32px;
              height: 100%;
              box-sizing: border-box;
              margin: 0 auto;
            }
          }
          .cate-col-w100 {
            width: 230px;
            .cate-list-w0 {
              width: 0;
              transition: width .2s;
              overflow: hidden;
              // border: 0;
              // padding: 0;
            }
            .cate-list-w100 {
              width: 230px;
              // padding: 4px 14px 10px;
              // // background: rgba(255, 255, 255, 0);
              // border: 1px solid #1257C9;
              // overflow: auto;
              transition: width .2s;
            }
          }
        }
      }
      .cate-list-more {
        // padding-top: 300px;
        .cate-row {
          margin-bottom: 200px;
          // margin-top: 0;
        }
        .cate-row:last-child {
          margin-bottom: 0;
        }
      }
      .cate-list-child {
        padding-top: 60px;
      }

      .list {
        width: 230px;
        height: 165px;
        box-sizing: border-box;
        padding: 4px 14px 10px;
        background: rgba(255, 255, 255, 0);
        border: 1px solid #1257C9;
        overflow: auto;
        border-radius: 4px;
        box-shadow: 1px 1px 10px 5px rgba(18, 87, 201, 1) inset;
        .item {
          display: flex;
          align-items: center;
          width: 100%;
          box-sizing: border-box;
          padding: 8px 0;
          color: #fff;
          border-bottom: 1px dashed rgba(131, 152, 217, 1);
          .item-status {
            min-width: 50px;
            // height: 15px;
            box-sizing: border-box;
            margin-right: 8px;
            padding: 4px 0 2px;
            font-size: 10px;
            text-align: center;
            // line-height: 15px;
            background: #0C5CFE;
            border-radius: 2px;
            &-pending {
              background: rgba(224, 84, 0, 1);
            }
          }
          .item-content {
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
      

    }
    .analys-col-wr {
      height: 100%;
      box-sizing: border-box;
      padding-right: 30px;
      overflow: auto;
    }
    .analys-col-more {
      height: 560px;
    }
    .analys-single {
      .list {
        height: 235px;
      }
    }
    .analys-col-posi {
      // .analys-up, .analys-down {
      //   position: absolute;
      // }
      .analys-up {
        // top: -200px;
        // left: -30px;
        // margin-bottom: 160px;
      }
      .analys-down {
        // margin-top: 160px;
        // margin-bottom: 0;
        // top: unset;
        // bottom: -200px;
        // left: -30px;
      }
    }

  }
}
.pad10 {
  padding-top: 10px;
}
.list-wr::-webkit-scrollbar {
  width: 8px;
  // background: linear-gradient(270deg, #0063FE, #0095FF);
}

.list-wr::-webkit-scrollbar-corner,
  /* 滚动条角落 */
.list::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-track {      /*滚动条的轨道*/
  border-radius: 4px;
}

.list-wr::-webkit-scrollbar-corner,
.list-wr::-webkit-scrollbar-track {
  /* 滚动条轨道 */
  
  background: rgba(12, 129, 254, .24);
  // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}

.list-wr::-webkit-scrollbar-thumb {
  /* 滚动条手柄 */
  background: linear-gradient(270deg, #0063FE, #0095FF);
}
</style>
