<template>
  <div
    class="flex rightcontainer ai-c"
    :class="roleInfo.visible ? 'boxshow1' : 'boxhide1'"
  >
    <div class="btnbox cursor" @click="rightVisibleClick">
      <img
        v-if="roleInfo.visible"
        class="max-w max-h"
        src="/public/images/hide.png"
      />
      <img v-else class="max-w max-h" src="/public/images/show.png" />
    </div>
    <div class="rightbox">
        <div class="mb-2 fc-w fz-20">{{roleInfo.entityTitle}}</div>
        <div class="mb-1 max-w" v-if="roleInfo.cardImgArr.length>0">
            <el-carousel>
                <el-carousel-item v-for="item in roleInfo.cardImgArr" :key="item">
                    <img class="max-w max-h" :src="item" />
                </el-carousel-item>
            </el-carousel>
        </div>
      <div v-for="(item, index) in roleInfo.detailData">
        <div class="flex max-w libox ai-c jc-sb" v-if="item.name !='单位'">
          <div class="mr-3 fz-16 nowrap" style="color: #6d869a">
            {{ item.name }}
          </div>
          <div class="fz-16 fc-w ta-l">{{ item.label }}</div>
        </div>
      </div>
      <div class="flex mt-3 column ta-l" style="color: #6d869a">
        <div class="mb-2">监控视频</div>
        <div class="flex wrap">
          <div class="mb-2 montorbox" :class="roleInfo.monitorIndex==index?'active':''" v-for="(item,index) in roleInfo.monitorDataArr" @click="monitorClick(item,index)">{{ item.label }}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 监控 -->
  <div style="z-index:99;top:0;left:0;background:rgba(0,0,0,0.2)" class="flex max-w max-h ai-c jc-c pos-f" @click="monitorClose" v-if="roleInfo.monitorVisible">
    <video width="500" height="400" id="videoElement" controls autoplay></video>
  </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { postMethodCommon, getMethodCommon } from "../../../api/common";
import { BASE_API } from "/public/config/server.js";
export default defineComponent({
  props: ["id"],
  setup(props, context) {
    const data = reactive({
      flvPlayer: null,
      timeValue: null,
      roleInfo: {
        entityTitle: '',
        visible: false,
        entityId: props.id,
        detailData: [
          { name: "单位", label: "" },
          { name: "联系人", label: "" },
          { name: "联系方式", label: "" },
          { name: "地址", label: "" },
          { name: "主要农作物以及产量", label: "" },
          { name: "单位简介", label: "" },
          { name: "销售模式", label: "" },
          { name: "农机设备", label: "" },
        ],
        cardImgArr: [],
        monitorIndex: null,
        monitorDataArr: []
      },
    });
    watch(
      () => props.id,
      (newVal, oldVal) => {
        data.roleInfo.entityId = newVal;
        data.roleInfo.visible = true;
        methods.getCoopersData(newVal);
      }
    );
    const methods = {
      monitorClick(item,index){
        data.roleInfo.monitorIndex = index
        console.log('vvv', item)
        context.emit("sendSessiondId", item);
      },
      rightVisibleClick() {
        data.roleInfo.visible = !data.roleInfo.visible;
        context.emit("rightVisible", data.roleInfo.visible);
      },
      //获取合作社数据
      getCoopersData(id) {
        let param = {
          id: window.cooperId,
          mid: window.cooperMid,
          paginationInputDto: {
            page: 1,
            rows: 1000,
          },
        };
        postMethodCommon(
          "/FormScheme/GetFormDataPage?id=" + param.id + "&mid=" + param.mid,
          param
        ).then((res) => {
          data.roleInfo.monitorDataArr = [];
          data.roleInfo.cardImgArr = []
          let rel = res.data.result.items;
          console.log('rrrllllllll', rel)
          rel.forEach((item) => {
            if (item._input_guid_056977778c2643468aaae7a1c4606547 == id) {
              data.roleInfo.entityTitle = item._input_f3861411ceda40a8bfb6c6fa34fca4c4
              let imgsArr = item._image_upload_f382d911d82448c1a9fbddb976ed0ad1.split(',');
              if (imgsArr) {               
                imgsArr.forEach(item =>{
                    if(item){
                        data.roleInfo.cardImgArr.push(BASE_API + item)
                    }    
                })
              }else{
                data.roleInfo.cardImgArr = []
              }
              if(item._input_text_area_021885e01b5a4ade9a8fa77f207d8a8c){
                let monitorLabel = item._input_text_area_021885e01b5a4ade9a8fa77f207d8a8c.split(',');
                let monitorValue = item._input_text_area_2111029aacde474499b00a47183c2305.split(',');
                if(monitorLabel){
                  monitorLabel.forEach((val,index) =>{
                    data.roleInfo.monitorDataArr.push({
                      label: val,
                      value: monitorValue[index]
                    })
                  })
                }else{
                  data.roleInfo.monitorDataArr = [{
                      label: item._input_text_area_021885e01b5a4ade9a8fa77f207d8a8,
                      value: item._input_text_area_2111029aacde474499b00a47183c2305
                  }];
                }
              }else{
                data.roleInfo.monitorDataArr = [];
              }
              
              (data.roleInfo.detailData[0].label =
                item._input_f3861411ceda40a8bfb6c6fa34fca4c4),
                (data.roleInfo.detailData[1].label =
                  item._input_a2bf750610b44c259d365a2b8c6a6c1a),
                (data.roleInfo.detailData[2].label =
                  item._input_57834c2ba513446cb739080e64143bce),
                (data.roleInfo.detailData[3].label =
                  item._input_60b0e4f61ce7408fbc97b5615f36bda8),
                (data.roleInfo.detailData[4].label =
                  item._input_64c113bb53854b329bc1d61997b437cc),
                (data.roleInfo.detailData[5].label =
                  item._input_b898197292704032a5042a3f2b1e11c0),
                (data.roleInfo.detailData[6].label =
                  item._input_413a70dfb6934ade82c3d82c8bbef31b),
                (data.roleInfo.detailData[7].label =
                  item._input_332070954b314d2f815b4b1acc22abbe);
            }
          });
        });
      },
    };
    return {
      ...data,
      ...methods,
    };
  },
});
</script>
<style scoped>
.rightcontainer {
  width: 470px;
  height: calc(100% - 82px);
  position: fixed;
  top: 80px;
  right: 0;
  z-index: 9;
}
.rightbox {
  width: 410px;
  height: calc(100% - 50px);
  border-top: 4px solid #0b55e5;
  background: linear-gradient( 90deg, rgba(3,15,32,0.8) 0%,rgba(6,35,67,0.34)  100%);
  padding: 25px 15px;
  overflow: auto;
}
.btnbox {
  width: 30px;
  height: 74px;
}
.boxshow1 {
  animation: animalShow 1s 1;
  -webkit-animation: animalShow 1s 1;
  right: 0;
}
.boxhide1 {
  animation: animalHide 1s 1;
  -webkit-animation: animalHide 1s 1;
  right: -440px;
}
@keyframes animalShow {
  from {
    right: -440px;
  }
  to {
    right: 0;
  }
}

@-webkit-keyframes animalHide {
  from {
    right: 0;
  }
  to {
    right: -440px;
  }
}
.libox {
  padding: 10px 0;
  min-height: 30px;
  border-bottom: 1px dashed rgba(87, 112, 134, 0.3);
}
.montorbox{
  padding: 5px 15px;
  border: 1px solid rgba(20,134,234, 0.3);
  border-radius: 5px;
  margin-left: 15px;
  color: #fff;
  cursor: pointer;
}
.montorbox.active{
  background: rgba(20,134,234, 0.8);
}
</style>
