<template>
  <div class="cjy-pages">
    <!-- 页面 头部 -->
    <VHeader></VHeader>
    <!-- 页面 广告条 -->
    <div class="cjy-banner m-t-100">
      <div class="cjy-banner-text">
        <div class="title">{{ banner_data.title }}</div>
        <div class="subtitle">{{ banner_data.subtitle }}</div>
      </div>
      <img :src="banner_data.logo" class="img" />
    </div>
    <!-- 页面 面包屑 -->
    <div class="v-container">
      <el-breadcrumb class="m-t-normal" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>关于我们</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="cjy-page-item1">
      <div class="v-container">
        <el-row :gutter="150" class=" cjy-about-brief">
          <el-col :span="12">
            <img src="@/assets/images/logo_red.svg" class="logo" />
            <div class="title">一家致力于文旅产业<br />软件研发及系统集成的服务商</div>
            <div class="row date">
              <div class="col-8">
                <div class="top">2006</div>
                <div class="bottom">公司成立(年)</div>
              </div>
              <div class="col-8">
                <div class="top">{{ company_data.honor }}</div>
                <div class="bottom">荣誉资质</div>
              </div>
              <div class="col-8">
                <div class="top">{{ company_data.product }}</div>
                <div class="bottom">研发产品</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="info" v-html="company_info.introduction"></el-col>
        </el-row>
      </div>
    </div>
    <!-- 案例 详情 -->
    <div class="v-container">
      <div class="cjy-about-title text-center m-t-large">企业文化</div>
      <div class="cjy-about-culture">
        <div class="culture-top">
          <el-row>
            <el-col :span="6">
              <div class="icon"></div>
              <div class="title">定位</div>
              <div class="info">文旅产业软件研发<br />及系统集成服务商</div>
            </el-col>
            <el-col :span="6">
              <div class="icon"></div>
              <div class="title">愿景</div>
              <div class="info">成为一家"小而美"<br />的科技型创新企业</div>
            </el-col>
            <el-col :span="6">
              <div class="icon"></div>
              <div class="title">使命</div>
              <div class="info">为文旅业态赋能<br />让文旅产业更智慧</div>
            </el-col>
            <el-col :span="6">
              <div class="icon"></div>
              <div class="title">精神</div>
              <div class="info">诚信守义<br />规矩方圆</div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="30" class="culture-bot">
          <el-col :span="12" v-for="(item, index) in company_culture.image" :key="index"><img :src="item" class="img" />
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="cjy-page-item3  m-t-large">
      <div>
        <div class="cjy-about-title">企业历程</div>
        <div class="cjy-about-step-info">投入资源提升技术，满足客户需求</div>
        <div class="cjy-about-step row">
          <div class="step-item" :class="index == 0 ? 'active' : ''" v-for="(item, index) in stage_data" :key="index">
            <div class="title">{{ item.title }}</div>
            <div class="info">{{ item.subtitle }}</div>
          </div>
        </div>
        <vue-seamless-scroll :data="step_data" :class-option="classOption" class="cjy-about-step-date">
          <ul class="ul-item">
            <li class="li-item" v-for="(item, index) in step_data" :key="index">
              <div class="date">{{ item.title }}</div>
              <div class="content" v-html="item.introduction ? item.introduction : ''"></div>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>

    <div class="v-container">
      <div class="cjy-about-title text-center m-t-large m-b-base">资质证书及相关软著</div>
      <el-carousel :interval="5000" arrow="always" class="certificate">
        <el-carousel-item v-for="group in groupedCertificates" :key="group">
          <div class="row cjy-about-certificate">
            <div class="col-77" v-for="(item, index) in group" :key="index">
              <div class="list-item flex-align-center">
                <el-image class="img" :src="item" :preview-src-list="[item]">
                </el-image>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

    </div>
    <div class="v-container">
      <div class="cjy-about-title text-center m-t-large">企业风采</div>
      <div class="cjy-about-demeanou-info" v-html="demeanour_data.introduction ? demeanour_data.introduction : ''"></div>
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in demeanour_data.image" :key="item" class="cjy-about-demeanour">
          <el-image class="img" :src="item" :preview-src-list="[item]">
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="v-container">
      <div class="cjy-page-item4 m-t-large m-b-large">
        <div class="cjy-about-box">
          <div class="title">联系我们</div>
          <div class="info">我们期待您的来信，一起携手建设智慧城市。</div>
          <div class="tel">{{ company_data.phone }}</div>
        </div>
      </div>
    </div>
    <!-- 页面 底部 -->
    <VBottom></VBottom>
  </div>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'
  import * as Api from "@/api/cjy/columninfo"
  import * as companyApi from '@/api/cjy/company';

  export default {
    name: "about-us",
    components: {
      vueSeamlessScroll
    },
    data() {
      return {
        banner_data: {
          subtitle: null,
          title: null
        },//广告图
        company_info: {
          content: null
        },//企业简介
        company_data: {
          honor: null,
          product: null,
          content: null,
        },//企业信息
        company_culture: {
          image: []
        },//企业文化
        stage_data: null,//发展阶段数据
        step_data: [],//发展历程数据
        certificates: [], // 假设这是从接口获取的原始数据
        groupedCertificates: [], // 新数组，用于存储分组后的数据
        demeanour_data: {
          introduction: null
        },//企业风采
        classOption: {
          limitMoveNum: 2,
          direction: 2,
        }
      }
    },
    mounted() {
      this.getCompany()//获取公司简介
      this.getStage()//获取发展阶段)
      this.getStep()//获取发展历程
      this.getCertificate()//资质证书及相关软著
      this.getDemeanour()//获取企业风采
    },
    methods: {
      //获取企业信息 函数
      async getCompany() {
        let res = await companyApi.getColumnInfo();
        this.company_data = res.data

        let info = await Api.getColumnInfoList({ type: 2 });
        this.company_info = info.data.list[0]

        let banner = await Api.getColumnInfoList({ type: 12 });
        this.banner_data = banner.data.list[0]

        let culture = await Api.getColumnInfoList({ type: 11 });
        this.company_culture = culture.data.list[0]
        this.company_culture.image = this.company_culture.image.split(',')
      },
      //获取发展阶段 函数
      async getStage() {
        let res = await Api.getColumnInfoList({ type: 9 })
        this.stage_data = res.data.list
      },
      //获取发展历程 函数
      async getStep() {
        let res = await Api.getColumnInfoList({ type: 8 })
        this.step_data = res.data.list
      },
      //获取资质证书及相关软著 函数
      async getCertificate() {
        let res = await Api.getDetail(31)
        if (res.data.image) {
          if (res.data.image.includes(',')) {
            this.certificates = res.data.image.split(',')
          } else {
            this.certificates = [res.data.image]
          }
        }

        this.groupCertificates(); // 调用分组方法
      },
      groupCertificates() {

        if (this.certificates && this.certificates.length > 0) {
          for (let i = 0; i < this.certificates.length; i += 14) {
            this.groupedCertificates.push(this.certificates.slice(i, i + 14));
          }
        } else {
          this.groupedCertificates = []
        }
      },
      //获取企业风采 函数
      async getDemeanour() {
        let res = await Api.getColumnInfoList({ type: 10 })
        this.demeanour_data = res.data.list[0]
        this.demeanour_data.image = this.demeanour_data.image.split(',')

      },
    }
  }
</script>

<style scoped lang="scss">

  .cjy-page-item1 {
    height: 600px;
    padding-top: 120px;
    margin-top: -30px;
    background: url("~@/assets/images/about-item1-bg.jpg");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
  }

  .cjy-page-item3 {
    padding: 70px 50px 50px 380px;
    height: 514px;
    background: url("~@/assets/images/about-step-bg.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
  }

  .cjy-page-item4 {
    padding: 50px;
    height: 360px;
    background: url("~@/assets/images/content-bg.jpg");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
  }
</style>
