<template>
  <div>
    <menu-modal></menu-modal>
    <div class="main-container">
      <div class="wrap">
        <div class="bread-menu" style="margin-top: 20px;padding: 0;">
          <nuxt-link to="/">首页></nuxt-link>
          <span>联系我们</span>
          <div class="clearfix" style="margin-top:22px">
            <div style="float:left;width:526px;margin-right:69px;">
              <div
                style="font-size:20px;font-weight:Bold;text-align:center;margin-bottom:30px"
              >欣新房车全国分布图</div>

              <viewer>
                <img id="image" src="https://mgmt.dfangche.com/xxfccn/image/contact/map.jpg"  alt style="width:526px;height:430px" />

              </viewer>
            </div>
            <div style="float:left;width:500px">
              <div
                style="font-size:20px;font-weight:Bold;text-align:center;margin-bottom:30px"
              >欣新房车集团总部</div>
              <img
                src="https://mgmt.dfangche.com/xxfccn/image/contact/xxfc.jpg"
                alt
                style="width:500px;height:320px"
              />
              <p style="font-size:20px;margin-top:24px;color:#333333">欣新房车控股集团股份有限公司</p>
              <div style="margin-top:25px;color:#666666">
                <i class="el-icon-phone"></i>
                4000-369-369
              </div>
              <div style="margin-top:13px;color:#666666">
                <i class="el-icon-location"></i>
                广东省 东莞市 松山湖 高新技术产院工业西路12号
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="background-color: #fff">
        <div class="wrap-list">
          <div style="font-weight:600;font-size:20px;text-align: center;">
            <span>全国子公司</span>
          </div>
          <!-- 省份 -->
          <div class="province-city" >
            <span style="margin-right:14px">省份</span>
            <el-select v-model="province" placeholder="请选择省份" @change="provinceChanged">
              <el-option :key="''" :label="'全部'" :value="''"></el-option>
              <el-option
                v-for="item in provinces"
                :key="item.code+100"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <span style="margin:0 14px 0 35px">城市</span>
            <el-select
              v-model="city"
              :loading="loadingCity"
              @change="cityChanged"
              placeholder="请选择城市"
            >
              <el-option :key="''" :label="'全部'" :value="''"></el-option>
              <el-option
                v-for="item in cities"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-button plain @click="chooseCity()" style="margin-left:35px;width:104px;height:38px" icon="el-icon-search">筛选</el-button>
          </div>
          <!-- 公司 -->
          <div style="margin-top: 31px;" v-if="this.visibility">该城市暂时没有分公司信息</div>
          <div v-if="!this.visibility">
          <ul class="v-ul clearfix">
            <li v-for="item in childDetail" :key="item.comnpanyBaseId" style="text-align: left;">
              <h2 style="font-size:18px;margin-bottom:24px">{{item.name}}</h2>
              <h2 style="font-size:12px;color:#999;margin-bottom:7px">
                <i class="el-icon-phone"></i>
                电话:{{item.leaderContactInfo}}
              </h2>
              <h2 style="font-size:12px;color:#999">
                <i class="el-icon-location"></i>
                {{item.provinceName}} {{item.cityName}} {{item.townName}} {{item.address}}
              </h2>
            </li>
          </ul>
          <div class="pagination-container">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="listQuery.page"
              @size-change="handleSizeChange"
              :page-sizes="[10,20,30, 50]"
              :page-size="listQuery.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
            ></el-pagination>
          </div>
          </div>
        </div>
      </div>
    </div>

    <go-top></go-top>
    <footer-modal></footer-modal>
  </div>
</template>

<script>
// new Viewer(image, {
//     url(image) {
//       return image.src.replace('thumb_', '');
//     },
//   });
import axios from "../plugins/axios";
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import vehicleBanner from "../components/vehicleBanner";
import GoTop from "../components/goTop";
import provinceCity from "../assets/code.json";
// import Viewer from 'viewerjs';
export default {
  transition: "bounce",
  components: {
    GoTop,
    menuModal,
    footerModal,
    vehicleBanner
  },
  created() {
    this.getAll();
    this.provinces = provinceCity.provinces;
  },
  mounted() {
    this.province = this.provinceCode;
    this.provinceChanged(this.provinceCode);
    this.city = this.cityCode;
  },
  data() {
    return {
      visibility:false,
      childDetail: [],
      listQuery: {
        addrCity: "",
        addrProvince: "",
        page: 1,
        limit: 10
      },
      totalCount: 0,
      loadingCity: false,
      province: "",
      city: "",
      provinces: [],
      cities: []
    };
  },
  methods: {
    async getAll() {
      let {
        data: { data }
      } = await axios.post("api/uccn/app/unauth/branch_company/page", {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        addrCity:this.listQuery.addrCity,
        addrProvince:this.listQuery.addrProvince
      });

      this.childDetail = data.data;
      if(this.childDetail == undefined){
        this.visibility = true
      }else{
        this.visibility = false
      }
      this.totalCount = data.totalCount;
      console.log(this.childDetail);
      this.listQuery.addrCity = "";
      this.listQuery.addrProvince = ""
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getAll();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.listQuery.page = 1;
      this.getAll();
    },
    provinceChanged(value) {
      if (value !== "") {
        this.loadingCity = true;
        for (var item of this.provinces) {
          if (item.code === value) {
            this.cities = item.cities;
            this.city = "";
            this.loadingCity = false;
            break;
          } else {
            continue;
          }
        }
      } else {
        this.cities = [];
        this.city = "";
      }
      this.$emit("selectChange", this.province, this.city);
    },
    cityChanged(value) {
      this.$emit("selectChange", this.province, this.city);
    },
    chooseCity(){
      if(this.city == undefined && this.province == undefined){ // 没选
       console.log(1);
        return
      }if(this.city == "" && this.province == ""){   //全选
        this.getAll();
        console.log(2);
      }if(this.city == "" && this.province != ""){    //选省没选市
        this.listQuery.addrProvince = this.province+'00';
        this.getAll();
        console.log(3);
      }if(this.city != "" && this.province != ""){   //选省选市
        this.listQuery.addrProvince = this.province+'00';
        this.listQuery.addrCity = this.city+'00';
        this.getAll();
        console.log(4);
      }

    }
  },
  head() {
    return {
      title: this.headList.title,
      meta: [
        { hid: "keywords", name: "keywords", content: this.headList.keywords },
        {
          hid: "description",
          name: "description",
          content: this.headList.description
        }
      ]
    };
  },
  async asyncData() {
    const { data } = await axios.get(
      "/api/app/banner/app/unauth/findBannerlist?type=1&platform=1"
    );
    let cc = data.data;
    let headData = await axios.get(
      "/api/uccn/seo/app/unauth/officialWebsite/3"
    );
    let head = headData.data.data;
    return { bannerList: cc, headList: head };
  }
};
</script>

<style scoped>
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.wrap-list {
  width: 1120px;
  margin: 0 auto 0px auto;
  padding-top: 49px;
  padding-bottom: 40px;
}
.v-ul {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 31px;
}
.v-ul li {
  margin: 0;
  padding: 20px;
  list-style: none;
  float: left;
  width: 540px;
  height: 140px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
  margin-bottom: 30px;
  /* border:1px solid #eee */
  /* font-size: 22px;
  padding-right: 30px; */
}
.v-ul li:nth-child(odd) {
  margin-right: 40px;
}
.province-city{
  text-align: center;
  margin-top:40px
}
</style>
