<template>
  <div class="ability-to-apply-for" :class="{ all: falg }">
    <div class="title">
      <span>申请能力</span>
      <div
        class="btnBox"
        v-show="!falg"
        v-if="dataForm[0].arr.length > 1 || dataForm.length > 1"
      >
        <svg
          t="1659419933164"
          class="btn"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5926"
          width="20"
          height="20"
          @click="falg = !falg"
        >
          <path
            d="M512 565.12a45.44 45.44 0 0 1-32.64-13.44l-448-451.84a45.44 45.44 0 0 1 64-64L512 454.4 931.84 35.2a46.08 46.08 0 0 1 64 0 45.44 45.44 0 0 1 0 64L545.28 551.68a45.44 45.44 0 0 1-33.28 13.44z"
            fill="#13227a"
            p-id="5927"
          ></path>
          <path
            d="M512 1016.96a45.44 45.44 0 0 1-32.64-13.44l-448-451.84a45.44 45.44 0 0 1 64-64L512 906.24l419.2-419.2a46.08 46.08 0 0 1 64 0 45.44 45.44 0 0 1 0 64l-449.92 452.48a45.44 45.44 0 0 1-33.28 13.44z"
            fill="#13227a"
            p-id="5928"
          ></path>
        </svg>
        <span class="btn" style="font-weight:600" @click="falg = !falg">展开</span>
        <span class="btn" @click="falg = !falg">(共{{totalDataNum}}条数据)</span>
      </div>
      <div class="btnBox" v-show="falg">
        <svg
          t="1659420014519"
          class="btn"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9781"
          width="20"
          height="20"
          @click="falg = !falg"
        >
          <path
            d="M498.095 146.134l403.416 403.415c17.387 17.387 45.576 17.387 62.963 0s17.387-45.576 0-62.963L499.888 22 35.302 486.586c-17.388 17.387-17.388 45.575 0 62.963 17.387 17.387 45.576 17.387 62.964 0L498.095 146.134zM498.817 592.073l402.693 402.693c17.387 17.387 45.576 17.387 62.963 0s17.387-45.576 0-62.963L499.888 467.219 35.302 931.804c-17.388 17.387-17.388 45.576 0 62.963 17.387 17.387 45.576 17.387 62.964 0L498.817 592.073z"
            p-id="9782"
            fill="#13227a"
          ></path>
        </svg>
        <span class="btn" style="font-weight:600" @click="falg = !falg">收起</span>
      </div>
    </div>
    <div
      v-for="(item, index) in dataForm"
      :key="index"
      class="ability-to-apply-for-content"
    >
      <div class="dep-name">
        <span></span>
        {{ item.deptName }}
      </div>
      <template v-for="val in item.arr" :key="val.resourceId">
        <div class="item">
          <div
            class="tx"
            :class="
              val.type == '基础设施'
                ? 'sxt'
                : val.type == '应用资源'
                ? 'yyzy'
                : val.componentType == '智能算法'
                ? 'znsf'
                : val.componentType == '图层服务'
                ? 'tcfw'
                : val.componentType == '开发组件'
                ? 'kfzj'
                : val.componentType == '业务组件'
                ? 'ywzj'
                : 'znsf'
            "
          ></div>
          <div class="text">
            <div class="name">
              <span
                @click="
                  showItem(val.resourceId, val.type, val.delFlag, val.note1)
                "
                style="cursor: pointer"
              >
                {{ val.resourceName }}
              </span>
              <span>{{ val.type }}</span>
            </div>
            <!-- (item.note1 && JSON.parse(item.note1) &&
                      JSON.parse(item.note1)[0] &&
                      JSON.parse(item.note1)[0].channelName -->

            <div class="description">
              {{
                val.description ||
                ((val.note1 || '') &&
                  ((JSON.parse(val.note1) &&
                    JSON.parse(val.note1)[0] &&
                    JSON.parse(val.note1)[0].channelName) ||
                    '--') +
                    '等' +
                    JSON.parse(val.note1).length +
                    '个摄像头') ||
                '--'
              }}
            </div>
          </div>
          <div
            class="remove"
            v-if="item.arr.length > 1"
            @click="removeFunction(val)"
          ></div>
        </div>
      </template>
    </div>
  </div>
  <a-modal
    v-model:visible="videoVisible"
    title="已申请摄像头列表"
    @ok="videoVisible = false"
  >
  <a-select placeholder="请选择归属部门" 
                  style="width: 200px" 
                  v-model:value="deptName" 
                   :getPopupContainer="(triggerNode) => triggerNode.parentNode" 
                     show-search 
                     :filterOption="true"  
                     @change="deptIdChangeFunction">
                    <a-select-option v-for="(item, index) in deptNameAll" :key="`${index}-${item}`" :value="item.name">
                      {{ item.name }}
                    </a-select-option>
    </a-select>
    <a-table
      :columns="columns"
      :data-source="xVideoList"
      bordered
      :pagination="{ defaultPageSize: 6 }"
      style="margin-top:10px"
    >
      <template #bodyCell="{ column, text }">
        <!-- <template>
        <a>{{ text }}</a>
      </template> -->
      </template>
    </a-table>
  </a-modal>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import { ref, defineProps } from 'vue'
  import mybus from '@/myplugins/mybus'
  import { getDeptAll } from '@/api/user'
  const router = useRouter()
  const props = defineProps({
    dataList: { type: Array, default: null },
  })
  const falg = ref(false)
  let dataForm = ref([])
  let totalDataNum = ref(0);
  const videoVisible = ref(false)
  const xVideoList = ref([])
  const xVideoListAll = ref([])
  const deptNameAll = ref([]) //所有部门名称
  const deptFlage = ref(true) //判断是否存在默认部门名称
  const deptName = ref(null)
  const columns = ref([
    {
      title: '摄像头名称',
      dataIndex: 'name',
    },
     {
      title: '归属部门',
      dataIndex: 'managementUnitName',
    }
  ])
  // eslint-disable-next-line vue/no-setup-props-destructure
  dataForm.value = props.dataList
  console.log('============dataList=============>', dataForm.value)
  // const router = useRouter()
  // const arr =
  //   router.currentRoute.value.query.name instanceof Array
  //     ? router.currentRoute.value.query.name
  //     : [router.currentRoute.value.query.name]
  // const dataResourceId = router.currentRoute.value.query.resourceId

  // const depList = ref({
  //   Name: [],
  //   depID: [],
  // })
  //移除方法
  const removeFunction = (data) => {
    dataForm.value.map((val) => {
      if (val.arr.length > 1) {
        val.arr = val.arr.filter((item) => item.id !== data.id)
      } else {
        message.error('至少需要提交一条能力申请!')
      }
    })
    dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
  }
  // 详情
  const showItem = (id, type, delFlag, note1) => {
    if (type == '基础设施') {
      let arr = JSON.parse(note1);
      //console.log('arrarr====',arr);
      xVideoList.value = []
      arr.map((val) => {
        xVideoList.value.push({
          name: val.channelName || '',
          key: val.channelId,
          managementUnitName:val.managementUnitName || '',
        })
      })
      xVideoListAll.value = xVideoList.value;
      videoVisible.value = true
    } else {
      if (delFlag == 0) {
        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
        mybus.emit('tabsChange', { flag: id })
        router.push({
          path: '/details',
          query: {
            id: id,
          },
        })
      }
    }
  }
    //归属部门选中改变事件
    const deptIdChangeFunction = (name) => {
      //console.log('nnnndddd',name);
      //console.log('过滤前xVideoList',xVideoList);
      //通过name过滤xVideoList
        xVideoList.value =  xVideoListAll.value.filter((item) => {
        if (name && item.managementUnitName.indexOf(name) < 0) return false
        return true
      });
    }
    //获取所有的归属部门列表
     const getDeptAllData = () =>{
      getDeptAll().then((res) => {
       deptNameAll.value = res.data.data
        })
    } 
      getDeptAllData(); 
      const getDataTotalNum = () =>{
        let totalNum  =0;
       dataForm.value.forEach((item)=>{
        totalNum = totalNum +item.arr.length;
     });
     totalDataNum.value = totalNum;
    } 
    getDataTotalNum();
    //获取数据的总条数
    
</script> 

<style scoped lang="less">
  .ability-to-apply-for {
    height: 2.9rem;
    overflow: hidden;

    .title {
      font-size: 0.16rem;
      color: #212121;
      border-bottom: 0.01rem #dddee1 solid;
      padding-bottom: 0.1rem;
      margin-bottom: 0.2rem;
      display: flex;
      justify-content: space-between;
    }

    .ability-to-apply-for-content {
      padding-right: 0.5rem;
      position: relative;

      .dep-name {
        color: #0558e1;
        font-size: 0.22rem;
        display: flex;
        align-items: center;
        line-height: 0.22rem;
        margin-bottom: 0.2rem;

        span {
          display: inline-block;
          width: 0.05rem;
          height: 0.05rem;
          background: #0558e1;
          border-radius: 0.05rem;
          margin-right: 0.05rem;
        }
      }

      .item {
        padding-bottom: 0.1rem;
        margin-bottom: 0.1rem;
        border-bottom: 1px solid #dddee1;
        display: flex;
        align-items: center;

        .text {
          margin-left: 0.2rem;
          width: 8.8rem;
        }
      }

      .name {
        margin-bottom: 0.2rem;

        span:first-child {
          display: inline-block;
          margin-right: 0.08rem;
          font-size: 0.18rem;
          color: #000000;
        }

        span:last-child {
          display: inline-block;
          padding: 0 0.05rem;
          background: #00b8e6;
          color: #fff;
        }
      }

      .description {
        width: 8.8rem;
        color: rgba(0, 0, 0, 0.45);
      }

      .remove {
        margin-left: 0.1rem;
        width: 0.32rem;
        height: 0.32rem;
        background: url('~@/assets/home/remove.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }

      .remove:hover {
        background: url('~@/assets/home/remove-hover.png') no-repeat;
        background-size: cover;
      }
    }
  }

  .all {
    height: unset;
    min-height: 2.9rem;
  }

  .btn {
    cursor: pointer;
    margin-left: 10px;
  }

  .tx {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.1rem;
  }

  .sxt {
    background: url('~@/assets/home/sxt_square.png') no-repeat;
    background-size: 100%;
  }
  .yyzy {
    background: url('~@/assets/home/yyzy_square.png') no-repeat;
    background-size: 100%;
  }

  .znsf {
    background: url('~@/assets/home/znsf_square.png') no-repeat;
    background-size: 100%;
  }

  .tcfw {
    background: url('~@/assets/home/tcfw_square.png') no-repeat;
    background-size: 100%;
  }

  .kfzj {
    background: url('~@/assets/home/kfzj_square.png') no-repeat;
    background-size: 100%;
  }

  .ywzj {
    background: url('~@/assets/home/ywzj_square.png') no-repeat;
    background-size: 100%;
  }
  .btnBox {
    display: flex;
    align-items: center;
  }
  ::v-deep .ant-table-thead > tr > th {
  //padding-left: px;
  font-size: 18px;
  font-weight: bold;
  color:#000000 ;
  //background: # !important;
}
</style>