<template>
  <sail-page type="loading-view" title="常见问题" isHead>
    <div slot="content" class="hello__house_keeper">
         <div class="common__problems_box">
         	  <h2 class="problems_title">常见问题</h2>
         	  <p v-for="(item,index) in list" :key="index" class="problems" @click="onClick(item.id)">
         	  	 <span class="green_point">
                 </span>
                 <span>{{item.title}}</span>
         	  	 
         	  </p>
         	 <!--  <p class="problems">
                  <span class="green_point"></span>
                  如何申请维保？
             </p>
             <p class="problems">
                  <span class="green_point"></span>
                  如何绑定我的车辆？
             </p>
             <p class="problems">
                  <span class="green_point"></span>
                  如何办理退租？
             </p> -->
             <p class="spacing_bottom"></p>
         </div>
         <!-- <div class="common_dialog">
            <van-actionsheet v-model="show" title="标题">
                <p>一些内容</p>
                <p>一些内容</p>
                <p>一些内容</p>
            </van-actionsheet>
         </div> -->
    </div>
  </sail-page>
</template>

<script>
import { Dialog } from "vant";
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
import { Actionsheet } from "vant";
export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      list: state => state.commonproblemModule.commonProblemList
    })
  },
  asyncData({store, route}) {
    return store.dispatch("commonproblemModule/findpage",{
      pn:1,
      pageSize:10,
      keyWords:"",
      status: 1
    });
  },
  data: function(){
    return {
      show: false,
      title:"",
    }; 
  },
  methods: {
    onClick(id) {
      this.$store.dispatch("commonproblemModule/getDetails",id).then(res=>{
        this.$dialog.alert({
          title: res.data.data.title,
          message: res.data.data.solveWay,
          closeOnClickOverlay: true
        });
      });
            
    }
  }
};
</script>
<style lang="less">
  .van-actionsheet.van-actionsheet--withtitle {
    margin: 200px auto !important;
  }
  .van-modal {
    background-color: rgba(0,0,0,.4);
  } 
</style>
<style lang="less" scoped>
     @import "~@/common/less/variable.less";
     @nice-title-black:#222222;
     @nice-problem-black:#585858;
     .hello__house_keeper {
     	width: 375px;
     	min-height: 100vh;
     	background:@nice-bgwhite; 
     	.common__problems_box {
     		width: 348px;
     		overflow: hidden;
     		background: @nice-white;
     		box-shadow: 0 0 3px rgba(0,0,0,.16);
     		margin: 14px;
     		float: left;
            .problems_title {
            	width: 348px;
            	height: 21px;
            	font-size: 15px;
            	color: @nice-title-black;
            	line-height: 21px;
            	text-align: center;
            	padding-top: 15px;
            }
            .problems {           	
            	position: relative;
            	width: 310px;
            	font-size: 14px;
            	line-height: 20px;
            	color: @nice-problem-black;
            	text-align: left;
            	padding-left: 32px;
            	margin-top: 10px;
            	.green_point {
            		width: 7px;
            		height: 7px;
            		background: @nice-green;
            		position: absolute;
            		left: 16px;
            		top: 7px;
            		border-radius: 50%;
            	}
            }
            .spacing_bottom {
            	width: 348px;
            	height: 30px;
            }
            .common_dialog {

            }
     	} 
     }
</style>