<template>
  <div class="flex jc-sb">
    <div class="flex">
      <div
        class="mr-2 fz-18 cursor"
        :class="roleInfo.navsIndex == index ? 'navsactive' : ''"
        @click="navsClick(index)"
        v-for="(item, index) in roleInfo.navsArr"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="flex">
      <el-input
        v-model="roleInfo.inputValue"
        style="width: 200px"
        placeholder="请输入物资/服务名称"
      />
      <el-select
        v-model="roleInfo.navsTypeValue"
        placeholder="请选择"
        clearable
        style="width: 180px; margin: 0 15px"
      >
        <el-option
          v-for="item in roleInfo.navsTypeOption"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="getGoodsData">搜索</el-button>
      <el-button type="success" @click="reload">重置</el-button>
    </div>
  </div>
  <div class="mt-3 common-box">
    <div class="flex wrap jc-sb">
      <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>
</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: "",
        navsValue: "",
        navsArr: [
          { name: "物资供需", value: "1" },
          { name: "服务供需", value: "2" },
        ],
        navsTypeValue: null,
        navsTypeOption: [
          { name: "提供", value: "1" },
          { name: "需求", value: "2" },
        ],
        currentPage: 1,
        pageSize: 8,
        pageTotal: "",
        areasOption:[]
      },
    });
    onMounted(() => {
      methods.getAreaCode();
      methods.getGoodsData();
    });
    let methods = {
      navsClick(index) {
        data.roleInfo.navsIndex = index;
        data.roleInfo.navsValue = data.roleInfo.navsArr[index].value;
        methods.getGoodsData();
      },
      tabLiClick(e) {
        let emitData = e;
        data.roleInfo.navsArr.forEach(item =>{
          if(item.value == e.type){
            emitData.TypeName = item.name
          }
        })
        data.roleInfo.navsTypeOption.forEach(item =>{
          if(item.value == e.type1){
            emitData.Type1Name = item.name
          }
        })
        context.emit("liclick", emitData);
      },
      //获取地区
      getAreaCode() {
        let param = {
          page: 1,
          limit: 100,
          code: "AREA_CODE",
        };
        data.roleInfo.areasOption = [];
        getMethodCommon("/SysDataItemDetail/Load", param).then((res) => {
          let rel = res.data.result;
          rel.forEach((item) => {
            data.roleInfo.areasOption.push({
              label: item.itemName,
              value: item.itemValue,
            });
          });
        });
      },
      reload() {
        data.roleInfo.navsIndex = null;
        data.roleInfo.navsValue = "";
        data.roleInfo.inputValue = "";
        data.roleInfo.navsTypeValue = null;
        data.roleInfo.currentPage = 1;
        data.roleInfo.pageSize = 8;
        methods.getGoodsData();
      },
      getGoodsData() {
        let serach = {
          _select_58acbd1176e64cc1829fc15beae082e5: data.roleInfo.navsValue,
          _radio_group_d4dc9d5ca439493db18d34a4c95d24dd: data.roleInfo.navsTypeValue,
          _input_3892f6e0bb6146aaad369b9e7fb74c25: data.roleInfo.inputValue
        };
        let param = {
          id: window.supplyId || "c3f59b58-168d-4663-9dbc-3b6616e46f08",
          mid: window.supplyMid || "196514f9-ba78-47f3-b4ce-31e4ed04f488",
          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;
          console.log('rrrrrrrr', rel)
          rel.forEach((item) => {
            if (item._image_upload_6ef4229fad0f4d4ba56561d26d71c357) {
              data.roleInfo.goodsData.push({
                name: item._input_3892f6e0bb6146aaad369b9e7fb74c25,
                src:
                  BASE_API +
                    item._image_upload_6ef4229fad0f4d4ba56561d26d71c357.split(
                      ","
                    )[0] || null,
                time: item._modify_time_68d02ed08d66492ba116fb8e682f29cd,
                owerhzs: item._input_30c6c60ea8c040efa8b16190a89c83db,
                details: item._input_text_area_41db31bf108a4cca909e498a59bfb26d,
                county: item.county,
                town: item.town,
                type: item._select_58acbd1176e64cc1829fc15beae082e5,
                type1: item._radio_group_d4dc9d5ca439493db18d34a4c95d24dd,
              });
            } else {
              data.roleInfo.goodsData.push({
                name: item._input_3892f6e0bb6146aaad369b9e7fb74c25,
                src: null,
                time: item._modify_time_68d02ed08d66492ba116fb8e682f29cd,
                owerhzs: item._input_30c6c60ea8c040efa8b16190a89c83db,
                details: item._input_text_area_41db31bf108a4cca909e498a59bfb26d,
                county: item.county,
                town: item.town,
                type: item._select_58acbd1176e64cc1829fc15beae082e5,
                type1: item._radio_group_d4dc9d5ca439493db18d34a4c95d24dd,
              });
            }
          });
        });
      },
    };
    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;
}
.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>
