<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.areasValue"
          placeholder="请选择"
          clearable
          style="width: 180px;margin: 0 15px;"
        >
          <el-option
            v-for="item in roleInfo.areasOption"
            :key="item.value"
            :label="item.label"
            :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/goodsno.png" />
            </div>
            <div class="flex label fz-16 ai-c">{{item.label}}</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: '',
        areasValue: '',
        navsValue: '',
        navsArr: [],
        areasOption:[
          { label: '市总平台', value: '1'},
          { label: '兰山区', value: '2'},
          { label: '罗庄区', value: '3'},
          { label: '河东区', value: '4'},
          { label: '郯城县', value: '5'},
          { label: '兰陵县', value: '6'},
          { label: '莒南县', value: '7'},
          { label: '沂水县', value: '8'},
          { label: '蒙阴县', value: '9'},
          { label: '平邑县', value: '10'},
          { label: '费县', value: '11'},
          { label: '沂南县', value: '12'},
          { label: '临沭县', value: '13'},
          { label: '高新区', value: '14'},
          { label: '沂河新区', value: '15'}
        ],
        currentPage: 1,
        pageSize: 8,
        pageTotal: ''
      }
      
    });
    onMounted(() => {
      methods.getCodeType()
      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
          }
        })
        context.emit('liclick', emitData)
      },
      // 获取字典
      getCodeType(){
        let param = {
          page: 1,
          limit: 100,
          code: "PRODUCT_TYPE"
        }
        data.roleInfo.navsArr = []
        getMethodCommon("/SysDataItemDetail/Load", param).then(res =>{
          let rel = res.data.result
          rel.forEach(item =>{
            data.roleInfo.navsArr.push({
              name: item.itemName,
              value: item.itemValue
            })
          })
        })
      },
      //获取地区
      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.areasValue = ''
        data.roleInfo.navsValue = ''
        data.roleInfo.inputValue = ''
        data.roleInfo.currentPage = 1
        data.roleInfo.pageSize = 8
        methods.getGoodsData()
      },
      getGoodsData(){
          let serach = {
            county: data.roleInfo.areasValue,
            _select_8f4db93a317145c788c978c1365523c5: data.roleInfo.navsValue,
            _input_83f2bb43d50d4f8facb3c8d046acfcf9: data.roleInfo.inputValue,
          }
          let param = {
              id: window.goodsId || "64bf1a9b-528f-4337-91e0-81a95f6524f0",
              mid: window.goodsMid || "074d0217-2c28-4c32-be54-24dbe010b9b6",
              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._image_upload_6dac9b2e6816498bafdafdc2afc0dc53){
                      data.roleInfo.goodsData.push({
                          name: item._input_80b4fa2f7f7546fab7ef300e2efeaa7a,
                          src: BASE_API + item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53.split(',')[0] || null,
                          time: item._modify_time_9fbd11b18c9d41629a55f8ff37b5109d,
                          label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
                          details: item._input_text_area_be9296152c444608ae874a808c242d63,
                          county: item.county,
                          town: item.town,
                          type: item._select_8f4db93a317145c788c978c1365523c5,
                          greatName: item.greatName,
                          value: item.value
                      })
                  }else{
                      data.roleInfo.goodsData.push({
                          name: item._input_80b4fa2f7f7546fab7ef300e2efeaa7a,
                          src: null,
                          time: item._modify_time_9fbd11b18c9d41629a55f8ff37b5109d,
                          label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
                          details: item._input_text_area_be9296152c444608ae874a808c242d63,
                          county: item.county,
                          type: item._select_8f4db93a317145c788c978c1365523c5,
                          greatName: item.greatName,
                          value: item.value
                      })
                  }  
              })
          })
      },
    };
    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>
