<template>
  <div style="padding: 0 10px">

    <div class="first-header-class">
      <swiper  height="150px" dots-position="center" :loop="true" :auto="true" :show-dots="false">
        <swiper-item v-for="(item,index) in  companyData.imgList" :key="index" >
          <img :src="item" class="img-class-all" />
        </swiper-item>
      </swiper>
    </div>


    <!--<flexbox>-->
      <!--<flexbox-item v-for="i in companyData.imgList">-->
        <!--<div class="flex-demo">-->
          <!--<img :src="i" alt="">-->
        <!--</div>-->
      <!--</flexbox-item>-->
      <!--&lt;!&ndash;<flexbox-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="flex-demo">&ndash;&gt;-->
          <!--&lt;!&ndash;<img src="../../assets/images/service/insure2.png" alt="">&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--&lt;!&ndash;</flexbox-item>&ndash;&gt;-->
      <!--&lt;!&ndash;<flexbox-item>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="flex-demo">&ndash;&gt;-->
          <!--&lt;!&ndash;<img src="../../assets/images/service/insure3.png" alt="">&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--&lt;!&ndash;</flexbox-item>&ndash;&gt;-->
    <!--</flexbox>-->


    <p style="margin-top: 15px;">{{companyData.companyName}}</p>
    <p>{{companyData.serviceCommitment}}</p>
    <p>公司地址:{{companyData.companyAddress}}</p>
    <p>电话:{{companyData.contactTel}}</p>


    <p style="margin: 40px 0 20px;color: red;text-align: center">
      若有业务咨询,请预留电话,客服人员会尽快联系到您
    </p>

    <!--<x-input title="手机号码格式化" mask="999 9999 9999" v-model="maskValue" :max="13" is-type="china-mobile"></x-input>-->

    <group title=" ">
      <x-input v-model="phoneValue" title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number"
               is-type="china-mobile"></x-input>
    </group>

    <x-button type="primary" style="margin-top: 20px" @click.native="submitPhone">确定</x-button>
  </div>
</template>

<script>
import { queryInsuranceCompanyInfo, saveInsuranceCompanyInfo } from "@/api/service/service.js";
import { Toast } from "mint-ui";
export default {
  name: "insureDetail",
  data() {
    return {
      phoneValue: "",
      companyData: {}
    };
  },
  created() {
    let id = this.$route.query.id;
    console.log(id);
    this.queryInsuranceCompanyInfo(id);
  },
  methods: {
    queryInsuranceCompanyInfo: function(_id) {
      let salt = this.$utils.myCommonSalt(32);
      let jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        orgId: this.$utils.myOrgId,
        id: _id
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      queryInsuranceCompanyInfo(jsondata).then(response => {
        console.log(response);
        this.companyData = response.data;
      });
    },
    submitPhone: function() {
      console.log(this.phoneValue);
      // console.log(this.$utils.testPhone(this.phoneValue))
      let reg = /^1[0-9]{10}$/;
      if (this.phoneValue == "" || this.phoneValue.length <= 10 || !reg.test(this.phoneValue)) {
        Toast("请输入正确的手机号");
        return false;
      }
      let salt = this.$utils.myCommonSalt(32);
      let jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        orgId: this.$utils.myOrgId,
        companyNo: this.companyData.companyNo,
        companyName: this.companyData.companyName,
        userTel: this.phoneValue
      };
      jsondata.sign = this.$utils.signObject(jsondata);
      saveInsuranceCompanyInfo(jsondata).then(response => {
        console.log(response);
        if(response.code == 0){
          Toast("联系方式提交成功");
        }

      });
    }
  }
};
</script>

<style scoped lang="scss">
  .first-header-class{
    img{
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
