<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__zoomInDown">
        <el-col :span="24" class="zero one">
          <el-col :span="16" class="one_1">
            <el-carousel height="500px">
              <el-carousel-item v-for="(item, index) in bannerList" :key="index" @click.native="toView(item, 'banner')">
                <el-image class="image" :src="item.img_url && item.img_url.length > 0 ? item.img_url[0].url : ''"></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="8" class="one_2">
            <el-col :span="24" class="newsList" v-for="(item, index) in newsList" :key="index" @click.native="toView(item, 'news')">
              <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
              <el-col :span="24" class="date">{{ item.create_time }}</el-col>
              <el-col :span="24" class="brief">{{ item.brief }}</el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="zero two">
          <el-col :span="24" class="common_1">
            <span>联系我们</span>
            <span></span>
            <span></span>
          </el-col>
          <el-col :span="24" class="two_1">
            <div id="container"></div>
          </el-col>
          <el-col :span="24" class="two_2">
            <el-col :span="24" class="two_2_1"> 发表您的留言： </el-col>
            <el-col :span="24" class="two_2_2">
              <data-form :fields="fields" :form="form" :rules="rules" @save="toSave"> </data-form>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('leavemess');
const { mapActions: banner } = createNamespacedHelpers('banner');
const { mapActions: news } = createNamespacedHelpers('news');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      // 轮播图
      bannerList: [],
      // 新闻
      newsList: [],
      map: null,
      form: {},
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
        content: [{ required: true, message: '请输入留言内容', trigger: 'blur' }],
      },
      fields: [
        { label: '姓名', model: 'name' },
        { label: '联系电话', model: 'phone' },
        { label: '电子邮箱', model: 'email' },
        { label: '留言内容', model: 'content', type: 'textarea' },
      ],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...mapActions(['create']),
    ...banner({ bQuery: 'query' }),
    ...news({ nQuery: 'query' }),
    async search() {
      let res;
      // 轮播图
      res = await this.bQuery({ skip: 0, limit: 6, is_use: '0', place: this.$route.meta.place });
      if (this.$checkRes(res)) {
        this.$set(this, `bannerList`, res.data);
      }
      // 新闻
      res = await this.nQuery({ skip: 0, limit: 6, is_use: '0', place: this.$route.meta.place });
      if (this.$checkRes(res)) {
        this.$set(this, `newsList`, res.data);
      }
    },
    // 保存
    async toSave({ data }) {
      let res = await this.create(data);
      if (this.$checkRes(res, '留言成功', res.errmsg)) this.form = {};
    },
    // 详细信息
    toView(e, type) {
      this.$router.push({ path: '/detail/index', query: { id: e._id, type: type } });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  mounted() {
    AMapLoader.load({
      key: 'fddcef56a6deeb3c9e06989b80f99526',
      version: '',
      plugins: [''],
    })
      .then((AMap) => {
        map = new AMap.Map('container', { zoom: 12 });
      })
      .catch((e) => {});
  },

  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.main {
  .zero {
    margin: 0 0 2vw 0;
    .common_1 {
      margin: 0 0 20px 0;
      span:nth-child(1) {
        color: #ffc001;
        font-size: 18px;
      }
      span:nth-child(2) {
        display: inline-block;
        width: 8px;
        height: 10px;
        background-color: #ffc001;
        margin: 0 10px;
      }
      span:nth-child(3) {
        display: inline-block;
        width: 91%;
        height: 10px;
        background-color: #f1f1f1;
      }
    }
  }
  .one {
    .one_1 {
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .one_2 {
      padding: 0 10px;
      .newsList {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        border-bottom: 1px dashed #353535;
        .title {
          font-size: 20px;
          margin: 0 0 5px 0;
          font-weight: bold;
          font-family: cursive;
        }
        .date {
          font-size: 14px;
          margin: 0 0 5px 0;
        }
        .brief {
          font-size: 14px;
          color: #7e7e7e;
          line-height: 1.5;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .newsList:last-child {
        border-bottom: none;
        margin: 0;
        padding: 0;
      }
      .newsList:hover {
        cursor: pointer;
        .title {
          color: #ffc001;
        }
        .date {
          color: #ffc001;
        }
      }
    }
  }
  .two {
    .two_2 {
      .two_2_1 {
        margin: 20px 0;
        font-size: 14px;
        color: #7e7e7e;
      }
    }
  }
}
</style>
