<template>
  <Search></Search>
  <div>
    <div class="datacenter-right">
      <div class="resource_list" id="map_list">
        <div v-for="(j, key, index) in list" :sjl="key" v-show="(actionName == key || !actionName)" :key="index"
          style="clear: both;">
          <p class="itemName" :id="key" v-if="j && j.length">{{ key }}</p>
          <div v-for="(i, n) in j" :key="n" class="item">
            <div><img :src="i.url" srcset=""></div>
            <b>{{ i.servicename }}</b>
            <p class="bottomBut">
              <span><a :href="[`./mapview.html?onlineIde_${i.servicealiasname}`]" target="_blank"
                  rel="noopener noreferrer">浏览</a></span>
              <!-- <span @click="showDrawer(i)">详细</span> -->
              <span @click="handleDetailInfo(i)">详细</span>
              <span @click="applyWay(i)" v-if="i.SFJRSQK == '未加入'">加入申请库</span>
              <!-- <span @click="applyWay(i)" v-if="i.SFJRSQK == '未加入'">{{ i.SFJRSQK }}</span> -->
              <!-- <span v-else style="cursor: not-allowed;background: rgb(232, 232, 232) !important;">{{ i.SFJRSQK }}申请库</span> -->
              <span v-else style="cursor: not-allowed;background: rgb(232, 232, 232) !important;">{{ i.SFJRSQK == '已加入' ?
                '已加入申请库' : i.SFJRSQK }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <a-modal title="组件详情" width="400px" placement="right" :closable="false" v-model:visible="visible"
      :after-visible-change="afterVisibleChange">
      <div class="assemblyModal">
        <p><b>资源名称:</b>&nbsp;&nbsp;<span>{{ action.servicename }}</span></p>
        <p><b>资源别名:</b>&nbsp;&nbsp;<span>{{ action.servicealiasname }}</span></p>
        <p><b>资源类型:</b>&nbsp;&nbsp;<span>{{ action.source }}</span></p>
        <p><b>浏览资源:</b>&nbsp;&nbsp;<span><a :href="[`../../mapview.html?onlineIde_${action.servicealiasname}`]"
              target="_blank" rel="noopener noreferrer">查看组件</a></span></p>
        <p><b>资源描述:</b>&nbsp;&nbsp;<span>{{ action.description }}</span></p>
      </div>
      <template v-slot:footer>
        <a-button type='primary' @click="onClose">取消</a-button>
      </template>
    </a-modal>
    <AssemblyDrawer @register="registerModal" />
    <!-- 弹出框 -->
    <DetailModal v-if="showResDeatil" :nowAss="nowAss" @closeModal="showResDeatil = false" :resId="detailResId" />
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, ref, defineProps, watch, reactive, getCurrentInstance } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Popconfirm, Tooltip } from 'ant-design-vue';
import { Authority } from '/@/components/Authority';
import { platList, img, apply } from '/@/api/resource/plat';
import { message } from 'ant-design-vue';
// 加载自定义侧边弹出框 组件
import { useDrawer } from '/@/components/Drawer';
// 导入子页面【新增、修改】
import AssemblyDrawer from './AssemblyDrawer.vue';
import Search from './child/Search.vue';
import { session } from '/@/utils/Memory';
import { getImgUrl } from '/@/api/dataAdmin/assembly';
import interfaceImg from '/@/assets/images/interface.jpg';
// 导入子页面【详情】
import DetailModal from './child/DetailModal.vue';
import eventBus from '/@/utils/eventBus';


export default defineComponent({
  name: 'SmsLog',
  components: { BasicTable, DetailModal, TableAction, Authority, Search, Popconfirm, Tooltip, AssemblyDrawer },
  props: {
    list: { type: Array, default: ref([]) }
  },
  setup(props, { emit }) {
    const [registerModal, { openDrawer }] = useDrawer(); //使用右侧弹出框
    const currentInstance = getCurrentInstance();
    const parentSetup = currentInstance.parent.setupState;
    const showResDeatil = ref(false)
    const nowAss = ref({});
    const detailResId = ref('')

    // const list = reactive(props.list);
    // watch(() => props.list, (obj) => {
    //   list.values = obj;
    //   console.log(list.values);
    // });
    const list = ref([]);
    const actionName = ref('');
    eventBus.on('assemblylist', async (i) => {
      for (var j in i) {
        if (i[j]) {
          for (var k = 0, len = i[j].length; k < len; k++) {
            var item = i[j][k];
            item.url = await getImg(item.mapingurl, item.publiccurl);
          }
          //组内排序
          i[j].sort(function (a, b) {
            if (!a.crs) return 1;
            if (!b.crs) return -1;
            return Number(a.crs) - Number(b.crs);
          });
        }
      }
      list.value = i;
    })

    eventBus.on('actionName', (i) => actionName.value = i);


    function handleQuery(record: Recordable) {
      openDrawer(true, {
        record,
      });
    }

    async function getImg(i) {
      var url = null;
      if (i) {
        var arr = i.split(',')
        if (arr.length > 1) url = await getImgUrl(arr[0], arr[1]);
      }
      return url ? url : interfaceImg;
    }

    const visible = ref<boolean>(false);
    const action = ref({});
    const afterVisibleChange = (bool: boolean) => {
      console.log('visible', bool);
    };

    const showDrawer = (i) => {
      action.value = i;
      visible.value = true;
    };
    const onClose = () => {
      visible.value = false;
    };

    function getDataList(o) {
      parentSetup.getDataList(o)
    }

    function applyWay(i) {
      console.log(i)
      apply({
        addRes: [{
          resDataType: "2",
          resId: i.serviceid,
          resName: `${i.servicename}`,
          resType: 0,
          workflowType: "ASSEMBLY",
        }],
        userId: session.getItem('userId'),
      }).then((r) => {
        if (r.datas && r.resp_code == 0) {
          message.success('申请成功');
          parentSetup.getDataList("")
          eventBus.emit("getAssemblyLibsTotal");

          // searchRef.value.getResData();
          // eventBus.emit('addResToCarEventBus')
          // emit('resAddToCar')
        }
      })
    }

    function handleDetailInfo(record) {
      //打开详情弹窗
      detailResId.value = record.serviceid;
      showResDeatil.value = true;
      nowAss.value = record;
    }


    return {
      nowAss,
      handleDetailInfo,
      detailResId,
      showResDeatil,
      applyWay,
      getDataList,
      actionName,
      onClose,
      action,
      visible,
      afterVisibleChange,
      showDrawer,
      getImg,
      registerModal,
      list,
      handleQuery,
    };
  },
});
</script>

<style scoped>
div.assemblyModal {
  padding: 20px !important;
}

.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid rgb(232, 232, 232);
  padding: 10px 16px;
  text-align: right;
  left: 0px;
  background: rgb(255, 255, 255);
  border-radius: 0px 0px 4px 4px;
}

.bottomBut span:first-child,
.bottomBut span:nth-child(2) {
  float: left;
}

.bottomBut span:nth-child(3),
.bottomBut span:nth-child(4) {
  float: right;
  color: #fff;
  background: #05B069;
}

.bottomBut span:nth-child(3) {
  margin-right: 0px;
}

.itemName {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 20px;
  letter-spacing: 0em;
  color: #333333;
  border-left: solid 4px #0671DD;
  padding-left: 20px;
  margin-left: 12px;
}

.item p span {
  display: inline-block;
  min-width: 50px;
  height: 34px;
  line-height: 34px;
  margin-right: 20px;
  padding: 0 10px;
  background: #E8E8E8;
  cursor: pointer;
}

.item b {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  margin: 10px 0;
}

.item {
  width: 378px;
  height: 299px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid #DEDEDE;
  padding: 15px;
  float: left;
  margin: 0px 20px 20px 0px;
}

.item img {
  width: 354px;
  height: 190px;
}
</style>
