<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center;">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox" :style="{ height: treeHeight }">
          <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable :searchType="'03'"
            @getdeptData="getdeptData" />
        </div>
      </div>
      <div class="right">
        <div class="headBox" style="justify-content: start">
          <el-input style="width: 300px" v-model="listQuery.placename" placeholder="请输入场所名称进行查询" />
          <el-button type="primary" @click="addUserHander" style="margin-left: 20px">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
          <el-button type="primary" @click="handleAdd">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>管理</span>
          </el-button>
        </div>
        <div class="top_ul">
          <ul>
            <li v-for="(it, index) in countlist" @click="getmain(it.value)" style="background: #F1F7FF " :key="index">
              <MOSTY.Account :item="it" />
            </li>
          </ul>
        </div>
        <div class='tubiao'>
          <img v-if='!showlab' :src="getImgUrl('img/cd1.png')" style='width:24px;height:24px;'
            :class='showlab ? "showcolor" : ""' @click='showlab = true'>
          <img v-if='showlab' :src="getImgUrl('img/icon_tup.png')" style='width:24px;height:24px;'
            :class='showlab ? "showcolor" : ""' @click='showlab = true'>
          <img :src="getImgUrl('img/icon_liebiao.png')" style='width:21px;height:21px;'
            :class='showlab ? "" : "showcolor"' @click='showlab = false'>
        </div>
        <div v-loading="tableloading" element-loading-text="数据加载中..." v-if='showlab'>
          <ul class="con_ul">
            <li class="con_li" v-for="item in data.listData" :key="item" @click="showxq(item)">
              <div class="ralebox">
                <img class="imgbox" :src="item.img" />
                <span v-if="item.ynxzf == '1'" style="background-color: #f54336">使用</span>
                <span v-if="item.ynxzf == '2'" style="background-color: #fb8734">出租</span>
                <span v-if="item.ynxzf == '3'" style="background-color: #fbcc02">租用</span>
                <span v-if="item.ynxzf == '4'" style="background-color: #bce081">闲置</span>
                <span v-if="item.ynxzf == '9'" style="background-color: #64e595">其他</span>
              </div>
              <div class="cont_bot">
                <div :title="item.placename" class="title_con">{{ item.placename && item.placename.length > 12 ?
                  item.placename.substring(0, 12) + '...' : item.placename }}</div>
                <div :title="item.address" class="dz_con">{{ item.address && item.address.length > 12 ?
                  item.address.substring(0, 12) + '...' : item.address }}</div>
              </div>
            </li>
          </ul>
        </div>
        <div v-if='!showlab'>
          <el-table ref="multipleTableRef" stripe :data="data.listData" height='57vh' style="width: 100%"
            v-loading="tableloading" row-style="height:32px" element-loading-text="数据加载中..."
            @selection-change="handleSelectionChange" border>
            <el-table-column label="场所信息">
              <template #default="{ row }">
                <div class='tablist'>
                  <div class='lef_img'>
                    <img class="imgbox" :src="row.img" alt="" />
                  </div>
                  <div class='rig_fon'>
                    <div class='rig_titl'>{{ row.placename && row.placename.length > 12 ? row.placename.substring(0, 12)
                      + '...' : row.placename }}</div>
                    <div class='rig_lab'>{{ row.address && row.address.length > 12 ? row.address.substring(0, 12) +
                      '...' : row.address }}</div>
                    <span v-if="row.ynxzf == '1'" class='sycs'>使用场所</span>
                    <span v-if="row.ynxzf == '2'" class='czcs'>出租场所</span>
                    <span v-if="row.ynxzf == '3'" class='zycs'>租用场所</span>
                    <span v-if="row.ynxzf == '4'" class='xzcs'>闲置场所</span>
                    <span v-if="row.ynxzf == '9'" class='qrcs'>其他场所</span>
                  </div>

                </div>
              </template>
            </el-table-column>
            <el-table-column label="所属单位" show-overflow-tooltip property="orgname"></el-table-column>
            <el-table-column label="场所类型" show-overflow-tooltip>
              <template #default="{ row }">
                <dict-tag :options="D_TB_CSLX" :value="row.sitetype" :tag="false"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column label="责任人" show-overflow-tooltip prop="postusername"></el-table-column>
            <el-table-column label="修建时间" show-overflow-tooltip property="builddate	"></el-table-column>

          </el-table>
        </div>
        <div class="fenye">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" background :page-sizes="[7, 14, 24]" :page-size="listQuery.pageSize"
            layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
        </div>
      </div>
      <div v-if="dialogVisible" class="dialog-box">
        <PlaceDialog :formData="formData" @saveSuccess="saveSuccess" :type="'1'" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import PlaceDialog from "@/components/dialog/placeindex.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter } from "vue-router";
const router = useRouter();
const showlab = ref(true)
const { proxy } = getCurrentInstance();
const { D_ORG_ORGLEVEL, D_TB_CSZT, D_TB_CSLX } = proxy.$dict("D_ORG_ORGLEVEL", "D_TB_CSZT", "D_TB_CSLX");
// 数据
const bigHeight = ref(); //整个高度
const dialogVisible = ref(false);
const formData = ref({})
//查询条件
const data = reactive({
  headData: [],
  listData: [],
  title: ""
});
const countlist = ref([
  { title: '场所总数', num: 0, value: '', icon: getImgUrl('img/icon_cszs.png'), background: '#F1F7FF' },
  { title: '使用场所数量', num: 0, value: '1', icon: getImgUrl('img/icon-sycssl.png'), background: '#FFF7E0' },
  { title: '出租场所数量', num: 0, value: '2', icon: getImgUrl('img/icon-czcssl.png'), background: '#FFEFE2' },
  { title: '闲置场所数量', num: 0, value: '4', icon: getImgUrl('img/icon-xzcssl.png'), background: '#DBF4EA' },
  { title: '租用场所数量', num: 0, value: '3', icon: getImgUrl('img/icon-zycssl.png'), background: '#FADEE0' },
  { title: '其他场所数量', num: 0, value: '9', icon: getImgUrl('img/icon_qtcssl.png'), background: '#F1F7FF' }
])
const total = ref(0);
// 初始化
onMounted(() => {
  bigHeightFn();
  // getTableData()
});
//获取部门数据
const getdeptData = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};

const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 24
});
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("330px");
const rgBoxWid = ref("calc(100% - 330px)");
const treeHeight = ref(""); // 树高度
// 分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getTableData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getTableData();
};
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
  treeHeight.value = window.innerHeight - 187 + "px";
};
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 330px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
const getmain = (val) => {
  if (val) {
    listQuery.ynxzf = val;
    getTableData();
  } else {
    listQuery.ynxzf = ''
    getTableData();
  }
};
const addUserHander = () => {
  getTableData();
};
const handleAdd = () => {
  router.push("/yxkzgl/csbwgl/csgl");
};
const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  getApi({ orgid: listQuery.orgid }, `/mosty-jcgl/site/querySceneCount`).then((res) => {
    if (res) {
      data.headData = res;
      countlist.value[0].num = res.sceneOfAllNum
      countlist.value[1].num = res.sceneOfUseNum
      countlist.value[2].num = res.sceneOfRentNum
      countlist.value[3].num = res.sceneOfIdleNum
      countlist.value[4].num = res.sceneOfHireNum
      countlist.value[5].num = res.sceneOfOtherNum
    } else {
      data.headData = [];
    }
  });
  postApi(listQuery, `/mosty-jcgl/site/querySceneList`).then((res) => {
    if (res.records) {
      total.value = res.total;
      data.listData = res.records;
      data.listData.forEach((item) => {
        if (item.venuefile) {
          let arr = item.venuefile.split(',');
          let firstImg = arr[0];
          getApi({}, `/mosty-base/minio/file/download/${firstImg}`).then(
            (res) => {
              if (res) {
                item.img = res.url; // 只展示第一张
              }
            }
          );
        } else {
          item.img = getImgUrl('img/emptyImg.jpg')
        }
      });
      tableloading.value = false;
    } else {
      data.listData = [];
      tableloading.value = false;
    }
  });
}
//详情
function showxq(val) {
  formData.value = val
  formData.value.saveBtnShow = false
  formData.value.title = "场所详情" + '(' + val.placename + '）'
  dialogVisible.value = true;
}
function saveSuccess() {
  dialogVisible.value = false;
  formData.value = {}
}
</script>

<style lang="scss" scoped>
.left {
  width: 300px;
  // height: 1030px;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;

  .treeBox {
    overflow: auto;
  }
}

.right {
  padding: 0 10px;
  margin: 0px 14px;
  background: #fff;

  // width: calc(100% - 300px);
  .headBox {
    height: 60px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;

    .el-select {
      width: 150px;
    }

    .btnBox {
      display: flex;
      width: 500px;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.bzxbox {
  padding: 10px 20px;
}

.tubiao {
  text-align: right;

  >img {
    margin: 0 10px;
  }

  .fonycolol {
    color: val(--el-color-primary);
  }

  .showcolor {
    background-color: var(--el-color-primary);
  }
}

.tablist {
  width: 500px;
  display: flex;
  justify-content: start;

  .lef_img {
    width: 114px;
    height: 79px;
    margin-left: 10px;
    border-radius: 6px;

    >img {
      width: 114px;
      height: 79px;
    }
  }

  .rig_fon {
    margin-left: 20px;

    .rig_titl {
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      text-align: left;
    }

    .rig_lab {
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      text-align: left;
      margin: 10px 0;
    }

    >span {
      display: black;
      width: 53px;
      height: 22px;
      font-weight: 400;
      font-size: 12px;
      text-align: center;
      line-height: 20px;
    }
  }
}

.sycs {
  background-color: #ebb9b5;
  color: #f54336;
  border: 1px solid #f54336;
}

.czcs {
  background-color: #fd9f2933;
  color: #fd9f29;
  border: 1px solid #fd9f29;
}

.zycs {
  background-color: #f9d3a333;
  color: #fbcc02;
  border: 1px solid #fbcc02;
}

.xzcs {
  background-color: #d0ecce33;
  color: #bce081;
  border: 1px solid #bce081;
}

.qrcs {
  background-color: #c2f5dd33;
  color: #64e595;
  border: 1px solid #64e595;
}

.from_box {
  display: flex;
  justify-content: space-between;

  .from_left {
    width: 25%;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .right {
    width: 83%;
    padding: 10px;
    height: calc(100vh - 137px);
    box-sizing: border-box;
    background-color: #fff;

    .headBox {
      display: flex;
      color: #000;
    }

    .btnBox {
      .el-select {
        width: 150px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 90%;
  }
}

.fenye {
  top: 90%;
}

.csnum {
  font-weight: 400;
  font-size: 24px;
  color: #282d30;
  height: 39px;
  line-height: 39px;
  display: flex;
  align-items: center;

  >span {
    display: inline-block;
    margin-left: 10px;
  }
}

.csname {
  height: 22px;
  line-height: 18px;
  color: #666;
  font-size: 14px;
}

.top_ul {
  height: 100px;

  >ul {
    display: flex;
    justify-content: space-between;

    >li {
      width: 15%;
      height: 83px;
      border-radius: 5%;
    }
  }
}

.con_ul {
  height: calc(100vh - 392px);
  overflow-y: scroll;
  text-align: left;
}

.con_li {
  vertical-align: middle;
  display: inline-block;
  width: 14%;
  height: 166px;
  // width: 230px;
  // height: 209px;
  margin-bottom: 20px;
  margin-left: 25px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #e7e8e7;
  text-align: center;
  overflow: hidden;

  .imgbox {
    width: 100%;
    height: 120px;
    // width: 230px;
    // height: 154px;
    margin: 0;
    padding: 0;
  }

  .ralebox {
    position: relative;
  }

  .ralebox span {
    display: inline-block;
    width: 57px;
    color: white;
    font-size: 12px;
    padding: 0 4px;
    height: 30px;
    line-height: 34px;
    position: absolute;
    right: -26px;
    border-radius: 41%;
    top: -9px;
    text-align: left;
  }
}

.cont_bot {
  background-color: #e7e8e7;
  border-radius: 0 0 4px 4px;
  height: 50px;
  margin: 0;
  padding: 0;

  div {
    display: block;
    text-align: left;
    margin-left: 10px;
  }

  .title_con {
    color: #44a48c;
    text-align: left;
    font-weight: bold;
    overflow: hidden;
  }

  .dz_con {
    color: #666;
    font-size: 14px;
  }
}
</style>
