<template>
<div class="flex column" style="width: 1280px;">   
    <div class="flex jc-sb max-w">
      <div class="flex">
      </div>
      <div class="flex">
        <el-input
          v-model="roleInfo.inputValue"
          style="width: 200px"
          placeholder="请输入单位名称"
        />
        <el-button type="primary" @click="getGoodsData">搜索</el-button>
      </div>
    </div>
    <div class="mt-3 common-box">
      <div class="flex wrap">
        <div
          class="mb-2 goodsli-common"
          v-for="item in roleInfo.goodsData"
          @click="tabLiClick(item)"
        >
          <div class="img">
            <img class="max-w max-h" v-if="item.src" :src="item.src" />
            <img class="max-w max-h" v-else src="/public/images/serverno.png" />
          </div>
          <div class="flex label fz-14 ai-c">{{ item.name }}</div>
        </div>
      </div>
      <div class="flex mt-2 mb-2 jc-e">
        <el-pagination
          v-model:current-page="roleInfo.currentPage"
          v-model:page-size="roleInfo.pageSize"
          :page-sizes="[8, 16, 32, 64]"
          layout="sizes, prev, pager, next, total"
          :total="roleInfo.pageTotal"
          @size-change="getGoodsData"
          @current-change="getGoodsData"
        />
      </div>
    </div>
</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({
    name: "Index",
    components: {},
    setup(props, context) {
      let data = reactive({
        roleInfo: {
          goodsData: [],
          navsIndex: null,
          inputValue: "",
          currentPage: 1,
          pageSize: 8,
          pageTotal: "",
        },
      });
      onMounted(() => {
        methods.getGoodsData();
      });
      let methods = {
        navsClick(index) {
          data.roleInfo.navsIndex = index;
          methods.getGoodsData();
        },
        tabLiClick(e) {
          context.emit("liclick", e);
        },
        getGoodsData() {
          let serach = {
            name: data.roleInfo.inputValue
          };
          let param = {
            id: "cf16f568-4bb8-43b9-8e49-b23105e70bda",
            mid: "9c027ef9-cc04-4006-831d-e799982f6435",
            paginationInputDto: {
              page: data.roleInfo.currentPage,
              rows: data.roleInfo.pageSize,
            },
            queryJson: JSON.stringify(serach),
          };
          data.roleInfo.goodsData = [];
          postMethodCommon(
            "/FormScheme/GetFormDataPage?id=" + param.id + "&mid=" + param.mid,
            param
          ).then((res) => {
            let rel = res.data.result.items;
            data.roleInfo.pageTotal = res.data.result.total;
            rel.forEach(item =>{
                if (item.imgsrc) {
                    item.src = BASE_API + item.imgsrc.split(",")[0] || null,
                    item.srcArr = item.imgsrc.split(',')                         
                } 
  
                if (item.imgsrc1) {
                    item.src1 = BASE_API + item.imgsrc1.split(",")[0] || null,
                    item.srcArr1 = item.imgsrc1.split(',')                         
                }
  
                data.roleInfo.goodsData.push(item)
            })
          });
        },
      };
      return {
        ...methods,
        ...toRefs(data),
      };
    },
  });
  </script>
  
  <style scoped>
  .common-box {
    background: #ffffff;
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 34px 20px;
  }
  .goodsli-common {
    width: 23.5%;
    height: 230px;
    border: 1px solid #dee2e7;
    cursor: pointer;
    margin-right: 1.75%;
  }
  .goodsli-common:nth-child(4n){
    margin-right: 0
  }
  .goodsli-common .img {
    height: 169px;
    padding: 10px;
  }
  .goodsli-common .label {
    width: calc(100% - 15px);
    height: 40px;
    padding-left: 15px;
    background: #f4f5f9;
    border-top: 1px solid #dee2e7;
  }
  .navsactive {
    color: #0058ff;
    padding-bottom: 6px;
    border-bottom: 4px solid #0058ff;
  }
  </style>
  