<template>
  <div style="background-color: #fafafa;">
    <div class="mb10">
      <div class="common_con w80">
        <div class="search_bar">
          <el-row>
            <el-col :span="20">
              <el-input placeholder="Symantec" v-model="state.queryParams.name" class="search_input">
                <template #prepend>
                  <!--                <el-select v-model="state.country" placeholder="请选择国家" class="country_select" filterable>
                                    <el-option label="中国" value="中国"></el-option>
                                  </el-select>-->
                  <div class="cur_country">
                    <div class="select_country" @click="handleShowCountry">
                      <span>{{state.country}}</span>
                      <el-icon style="vertical-align: middle" class="ml5"><ArrowDown :class="{ 'rotate': state.isShowAllCountry }" class="rotatable"/></el-icon>
                    </div>
                    <div class="all_country" v-if="state.isShowAllCountry">
                      <el-input class="mb20" @input="handleChangeCountry" v-model="state.countryName" placeholder="请输入国家/地区名称搜索"></el-input>
                      <div class="country_level1">
                        <div class="country_list">
                          <template v-for="item in state.countryList" :key="item.jcCode">
                            <div v-if="item.isShow"
                                 class="country_name"
                                 @click="handleSelectCountry(item.gj, item.jcCode)">{{item.gj}}</div>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <template #prefix>
                  <el-icon class="el-input__icon"><Search /></el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :span="4">
              <el-button @click="getList" type="primary" style="height: 60px; width: 100%;font-size: 24px">
                <span>马上查</span>
              </el-button>
            </el-col>
          </el-row>
          <div class="search_title">
            <span>若您在系统中未找到所需企业信息，请
              <el-button type="primary" link @click="handleFeedback('feedback')">点击此处</el-button>
              向我们反馈，我们承诺在2个工作日内与您联系！</span>
          </div>
        </div>
      </div>
    </div>
    <div style="padding-bottom: 50px; min-height: 300px">
      <div class="common_con w80 table_wrap">
        <div class="loader_warp" v-if="state.isLoading">
          <div class="loader"></div>
        </div>
        <template v-for="(item, index) in state.tableList" v-if="state.tableList.length < 150">
          <el-row :gutter="40">
            <el-col :span="24">
              <el-descriptions>
                <template #title>
                  <!--              <el-link :underline="false" :href="'/enterpriseDetail?name=' + item.name" :style="{'font-size': '22px'}">{{item.name}}</el-link>-->
                  <span :style="{'font-size': '22px', cursor: 'pointer'}" @click="toDetail(item)">{{item.name}}</span>
                  <el-tag class="ml20" type="primary">{{item.status}}</el-tag>
                </template>
                <template v-for="col in state.columnsList">
                  <el-descriptions-item v-if="col.prop != 'regStatus'" :label="col.label+ ':'" width="300px">
                    <template v-if="col.type === 'date'">
                      {{item[col.prop] && item[col.prop].substring(0, 10)}}
                    </template>
                    <template v-else-if="col.type === 'labels'">
                      {{(col.prop.map((label: any)=> {
                      return item[label]
                    })).filter(a=> {return a !== ""}).join('，')}}
                    </template>
                    <template v-else>
                      {{item[col.prop]}}
                    </template>
                  </el-descriptions-item>
                </template>

                <template #extra>
                  <el-button type="primary" icon="Download" link size="large" v-if="isHaveButton('front:reportOrder') && item.pdfUrl" @click="handleDownload('reportDownloadOpen', item)">下载报告</el-button>
                  <el-button type="primary" icon="Position" link size="large" v-if="isHaveButton('front:reportOrder')" @click="handleSubmit('reportOrderOpen', item)">报告下单</el-button>
                </template>
              </el-descriptions>
            </el-col>
          </el-row>
          <el-divider />
        </template>
        <div class="no_data" v-if="state.tableList.length === 0 && !state.isLoading && !state.isSoMore">
<!--          <img src="./../assets/images/noData.png" alt="noData.png">-->
          <el-image :src="getImage('noData.png','/home')" style="width: 260px"></el-image>
          <div>暂未查询到相关企业！</div>
          <div>
            <el-button type="primary" link @click="handleFeedback('feedback')">点击此处</el-button>
            可联系我们核实企业信息。
          </div>
        </div>

        <div class="more_data" v-if="state.isSoMore">
          <el-image :src="getImage('moreData.png','/home')" style="width: 260px"></el-image>
          <div>您提供的信息不足以匹配到相关企业，请增加详细信息后重新尝试。</div>
        </div>

        <pagination
          v-show="state.total > 0"
          :total="state.total"
          :page.sync="state.queryParams.pageNum"
          :limit.sync="state.queryParams.pageSize"
          @pagination="getList"
        />

        <other-report-order title="海外报告下单"
          :open="state.reportOrderOpen"
          open-name="reportOrderOpen"
          :is-show-footer="true"
          :entryType="1"
          @handleClose="handleClose"
        >
        </other-report-order>

        <add-enterprise
          title="海外企业信息核实"
          :open="state.feedback"
          open-name="feedback"
          :is-show-footer="true"
          @handleClose="handleClose"
        >
        </add-enterprise>

        <report-download
          title="报告下载"
          :open="state.reportDownloadOpen"
          open-name="reportDownloadOpen"
          :is-show-footer="false"
          @handleClose="handleClose"
          :enterprise-name="state.curEnterpriseName"
        >
        </report-download>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import * as api from './../interface/api'
  import OtherReportOrder from "../components/reportOrder/otherReportOrder.vue";
  import AddEnterprise from "../components/reportOrder/addEnterprise.vue";
  import ReportDownload from "../components/reportOrder/reportDownload.vue";

  import { orderInfo } from './../store/index'
  let orderInfoAct = orderInfo()

  import router from "./../router/index"
  import {isHaveButton} from "../utils/until.ts";
  import {getToken} from "../utils/auth.ts";
  import getImage from "../assets/getImage.ts";

  const route = useRoute();

  let state = reactive({
    tableList: [],
    columnsList: [
      {
        label: "城市",
        prop: "city"
      }, {
        label: "法律形式",
        prop: "legalform"
      }, {
        label: "公司注册号码",
        prop: "regnr",
        type: 'date'
      }, {
        label: "公司地址",
        prop: ["postcode", "street", "county"],
        type: "labels"
      }
    ],
    total: 0,
    queryParams: {
      name: "",
      countrycode: "",
    },
    reportOrderOpen: false,
    isLoading: false,
    feedback: false,
    reportDownloadOpen: false,
    curEnterpriseName: "",
    country: "",
    isShowAllCountry: false,
    countryList: [],
    countryName: "",
    isSoMore: false,
  }) as any;

  let getList = () => {
    state.isLoading = true
    state.tableList = []
    state.isSoMore = false
    api.getInfoList(state.queryParams, "/web/worldBox/search").then((res: any)=> {
      if (res.code == 2000) {
        state.tableList = res.data
      } else if (res.code == 3001){
        state.isSoMore = true
      }
    }).finally(()=> {
      state.isLoading = false
    })
  }

  let toDetail = (item: Object) => {
    // orderInfoAct.setProjectInfo(item)
    localStorage.setItem('projectInfo', JSON.stringify(item))
    router.push('/otherEnterpriseDetail?name=' + item.name)
  }

  // 立即下单
  let handleSubmit = (name: string, row: object) => {
    state[name] = true
    orderInfoAct.setProjectInfo(row)
  }

  let handleDownload = (name: string, row: object) => {
    state[name] = true
    state.curEnterpriseName = row.name
  }

  let getIndex = (index: number) => {
    if (index < 10) {
      return index
    } else if (index < 20) {
      return index - 10
    } else if (index < 30) {
      return index - 20
    }
  }

  let handleClose = (name: string, value: boolean, isRefresh: boolean) => {
    state[name] = value
  }

  let handleFeedback = (name: string) => {
    state[name] = true
  }

  let handleShowCountry = () => {
    state.isShowAllCountry = !state.isShowAllCountry
  }

  let getCountryList = () => {
    api.getInfoList({},'/web/worldBox/getAllCountry').then((res: any)=> {
      state.countryList = res.data
      state.countryList.forEach((item: any)=> {
        item.isShow = true
        if (item.jcCode === state.queryParams.countrycode) {
          state.country = item.gj
        }
        if (item.jcCode === "CN") {
          state.countryList.splice(state.countryList.indexOf(item), 1)
        }
      })
    })
  }

  let handleChangeCountry = (val: string) => {
    state.countryList.forEach((item: any)=> {
      if (item.gj.includes(val)) {
        item.isShow = true
      } else {
        item.isShow = false
      }
    })
  }

  let handleSelectCountry = (name: string, jcCode: string) => {
    state.isShowAllCountry = !state.isShowAllCountry
    state.country = name
    state.queryParams.countrycode = jcCode
  }

  onMounted(()=> {
    state.queryParams.name = route.query.name
    state.queryParams.countrycode = route.query.country
    getList()
    getCountryList()
  })
</script>

<style scoped lang="scss">
  .el-main {
    background-color: #fafafa;
  }
  .search_bar {
    width: 80%;
    margin: 30px auto;

    .search_input {
      height: 60px;
      font-size: 18px;
      margin-bottom: 20px;
    }

    .search_title {
      color: #999999;
    }
  }
  .no_data, .more_data {
    padding-top: 50px;
    text-align: center;
    color: #999999;
  }
  .center_col {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .col_title {
    text-align: center;
    border-radius: 10px;
    color: #ffffff;
    font-size: 22px;
    padding: 5px;
    position: absolute;
    right: 0;
    div {
      letter-spacing: 10px;
      padding-left: 10px;
    }
    &.title_color_0, &.title_color_5 {
      background-color: #93BBF2;
    }
    &.title_color_1, &.title_color_6 {
      background-color: #93DDF2;
    }
    &.title_color_2, &.title_color_7 {
      background-color: #B693F2;
    }
    &.title_color_3, &.title_color_8 {
      background-color: #F6AEAE;
    }
    &.title_color_4, &.title_color_9 {
      background-color: #EEC5AB;
    }
  }
  .all_country {
    position: absolute;
    top: 60px;
    left: 0;
    background: #f8f8f8;
    z-index: 1;
    padding: 20px;

    .country_level1 {
      display: flex;

      .level1_name {
        width: 100px;
        padding: 10px 0;
      }
      .country_list {
        width: 1100px;
        height: 300px;
        overflow-y: scroll;
        .country_name {
          float: left;
          width: 20%;
          cursor: pointer;
          padding: 10px 0;
        }
      }
    }
  }
</style>