<template>
  <div class="m-pop">
    <div class="wrap">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>需求内容</span>
        </div>

        <div class="btn-close" @click="handleClose">
          <img src="@/assets/img/shuju/people/close.png" />
        </div>
        <div class="list-wr info-h">
          <div class="list-left info-scroll">
            <div v-for="(item, index) in list" :key="item.id" class="left-item" 
            :class="current == index &&'left-item-on'" @click="handleTabs(item, index)">
              <div class="item-title">{{ item.content }}</div>
              <div class="item-time">{{ item.reportTime }}</div>
            </div>
          </div>
          <div class="list-right list-wr info-scroll">
            <div class="list">
            
              <div class="item">
                <span class="item-field">所属网格：</span>
                <span v-if="info.gridName">{{ info.gridName }}</span>
              </div>
              <div class="item">
                <span class="item-field">需求类型：</span>
                <span v-if="info.categoryName">{{ info.categoryName }}</span>
              </div>
              <div class="item">
                <span class="item-field">上报人：</span>
                <span v-if="info.reportUserName">{{ info.reportUserName }}</span>
              </div>
              <div class="item">
                <span class="item-field">上报人手机：</span>
                <span v-if="info.reportUserMobile">{{ info.reportUserMobile }}</span>
              </div>
              <div class="item">
                <span class="item-field">上报时间：</span>
                <span v-if="info.reportTime">{{ info.reportTime }}</span>
              </div>
              <div class="item">
                <span class="item-field">需求人：</span>
                <span v-if="info.demandUserName">{{ info.demandUserName }}</span>
              </div>
              <div class="item">
                <span class="item-field">服务时间：</span>
                <span v-if="info.wantServiceTime">{{ info.wantServiceTime }}</span>
              </div>
              <div class="item">
                <span class="item-field">需求内容：</span>
                <span v-if="info.content">{{ info.content }}</span>
              </div>
              <div class="item">
                <span class="item-field">服务方：</span>
                <span v-if="info.serviceShowName">{{ info.serviceShowName }}</span>
              </div>
              <div class="item">
                <span class="item-field">实际服务时间：</span>
                <span v-if="info.categoryName">{{ info.serviceStartTime }} 至 {{ info.serviceEndTime }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="tabs">
          <div
            class="tab-btn"
          >
            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
          </div>
          <div
            class="tab z-on"
          >
            研判分析
          </div>
          <div
            class="tab-btn"
          >
            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
          </div>
        </div>

        <div style="padding: 30px 0;">
          <analyse :single-list="demandList" :single-title="'需求上报'" :more-title="'事件上报'" :user-list="userLists" 
            :user-name="userName" :has-event="false" :more-list="eventList" />
        </div> -->
        
        
      </cpt-card>
    </div>
  </div>
</template>

<script>
import cptCard from "@/views/modules/visual/cpts/card";
import analyse from '../cpts/analyse.vue'
import { requestPost } from "@/js/dai/request";

export default {
  name: "dialogInfo",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "",
    },
    agencyId: {
      type: String,
      default: "",
    },
  },

  components: {
    cptCard,
    analyse
  },

  data() {
    return {
      list: [],
      current: 0,
      info: {}
    };
  },

  
  mounted() {
  },

  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleTabs(item, index) {
      this.current = index
      this.getDetail(item.demandRecId)
    },
    async getDetail (id) {
      this.info = {}
      const _id = this.list[0].id
      const url = "/heart/userdemand/demandDetail"
      let params = {
        demandRecId: id || _id
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.info = data
        // this.info.serviceMatterNameShow = data.serviceMatterNameList.join(',')
        // this.info.unitNameShow = data.unitNameList.join(',')
      } else {
        this.$message.error(msg)
      }
    },
    
  }
};
</script>

<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
<style lang="scss" scoped>
.m-pop {
  .wrap {
    margin-bottom: 0;
    .list {
      display: block;
      width: 50%;
      .item {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 16px;
        cursor: pointer;
        .item-field {
          // width: 100px;
          flex-shrink: 0;
        }
        .item-content {
          width: 100%;
          max-height: 420px;
          overflow-y: auto;
          
        }
        ::v-deep p {
          margin: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .item-desc {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 24px;
      }
    }
  }
  .list-title {
      width: 100%;
      box-sizing: border-box;
      padding: 20px 0 10px 62px;
      font-size: 20px;
      cursor: pointer;
    }
}
.list-wr {
  display: flex;
  padding: 0 32px;
  
}
.list-left {
  width: 180px;
  height: 100%;
  box-sizing: border-box;
  padding-right: 20px;
  flex-shrink: 0;
  border-right: 1px dashed  #1257c9;
  overflow: auto;
  .left-item {
    padding: 10px 0;
    cursor: pointer;
    .item-title {
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 5px;
    }
  }
  .left-item-on {
    color: #0095FF;
  }
}
.list-right {
  flex: 1;
  height: 100%;
  overflow: auto;
}


</style>
