<template>
   <sail-page type="subscribeHouse" title="预约看房" isHead>
	    <div slot="content" class="subscribe-house">
	    	<statusModal type="subscribe" title="预约看房" isButton isHead desc="预约成功" @jumpCallback="jumpCallback" btxt="查看预约">
	    	   <div slot="up-content">
	    	      <p>恭喜您，预约成功。</p>
	    	      <p>请准时前往赛嶺公寓看房。</p>
	    	   </div>
	    	   <div slot="down-content">
	    	   		<p>预约时间：{{selectedTime}}</p>
	    	   		<p>预约项目：{{selectedRegionOnly}}</p>
	    	   		<p>看房地址：{{address}}</p>
	    	      <!-- <p>订单编号：29389173918273 </p>
	    	      <p>报名人数：2人 金额：200.00元</p> -->
	    	   </div>
	    	</statusModal>
	      	<p class="subscribe-desc">请认真填写您的真实信息，以便我们的服务人员尽快与您取得联系</p>
	      	<div class="subscribe-form">
	      		<div class="weui-cells zero-top one-form">
	      			<div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
		                <div class="weui-cell__bd">
		                    <input v-model="subscribeForm.name" class="weui-input" type="text" placeholder="请输入姓名">
		                </div>
		            </div>
		            <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">联系方式</label></div>
                        <div class="weui-cell__bd">
                            <input v-model="subscribeForm.phone" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入联系方式">
                        </div>
                    </div>
	      		    <div @click="sexClick">
	      		    	<van-cell-group class="spec-placeholder">
	      		    	  <van-field :value="selectedSex" disabled center label="性别" placeholder="请选择">
	      		    	  	<van-icon slot="icon" name="arrow" />
	      		    	  </van-field>
	      		    	</van-cell-group>
	      		    </div>
	      		    <div @click="ageClick">
	      		    	<van-cell-group class="spec-placeholder">
		      		      <van-field :value="selectedAge" disabled center label="年龄" placeholder="请选择">
		      		      	<van-icon slot="icon" name="arrow" />
		      		      </van-field>
		      		    </van-cell-group>
	      		    </div>
	      		    <div @click="occupationClick">
	      		    	<van-cell-group class="spec-placeholder">
	      		    	  <van-field :value="selectedOccupation" disabled center label="职业" placeholder="请选择">
	      		    	  	<van-icon slot="icon" name="arrow" />
	      		    	  </van-field>
	      		    	</van-cell-group>
	      		    </div>
	      		    <div class="weui-cell">
		                <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
		                <div class="weui-cell__bd">
		                    <input v-model="subscribeForm.remark" class="weui-input" type="text" placeholder="请输入备注信息">
		                </div>
		            </div>
	      		</div>
	      		<div @click="showDateSegmentPicker">
		      		<van-cell-group class="spec-placeholder subscribe-part">
		      		  <van-field :value="selectedTime" disabled center label="预约时间" placeholder="请选择">
		      		  	<van-icon slot="icon" name="arrow" />
		      		  </van-field>
		      		</van-cell-group>
	      		</div>
	      		<div @click="subscribeRegionClick">
	      			<van-cell-group class="spec-placeholder">
	      			  <van-field :value="selectedRegionOnly" disabled center label="预约看房项目" placeholder="请选择">
	      			  	<van-icon slot="icon" name="arrow" />
	      			  </van-field>
	      			</van-cell-group>
	      		</div>
	      		<div @click="subscribeMulRegionClick">
	      			<van-cell-group class="spec-placeholder subscribe-part">
	      			  <van-field type="textarea" rows="1" disabled autosize v-model="selectedRegion" center label="意向项目" placeholder="请选择">
	      			  	<van-icon slot="icon" name="arrow" />
	      			  </van-field>
	      			</van-cell-group>
	      		</div>
	      		<div @click="layoutClick">
		      		<van-cell-group class="spec-placeholder">
		      		  <van-field type="textarea" rows="1" disabled autosize v-model="selectedLayout" disabled center label="意向户型" placeholder="请选择">
		      		  	<van-icon slot="icon" name="arrow" />
		      		  </van-field>
		      		</van-cell-group>
	      		</div>
	      		<div @click="priceClick">
	      			<van-cell-group class="spec-placeholder">
	      			  <van-field :value="selectedPrice" disabled center label="意向价格" placeholder="请选择">
	      			  	<van-icon slot="icon" name="arrow" />
	      			  </van-field>
	      			</van-cell-group>
	      		</div>
	      		<div @click="cycleClick">
	      			<van-cell-group class="spec-placeholder">
	      			  <van-field :value="selectedCycle" disabled center label="计划租期" placeholder="请选择">
	      			  	<van-icon slot="icon" name="arrow" />
	      			  </van-field>
	      			</van-cell-group>
	      		</div>
	      		<div @click="needClick">
	      			<van-cell-group class="spec-placeholder">
	      			  <van-field :value="selectedNeed" disabled center label="需求状态" placeholder="请选择">
	      			  	<van-icon slot="icon" name="arrow" />
	      			  </van-field>
	      			</van-cell-group>
	      		</div>
	      	</div>
	    	<van-button :loading="loading" @click="submit" size="large" class="submit-btn">确定</van-button>
	    	<van-popup v-model="sexShow" position="bottom" :overlay="true">
              <van-picker
                show-toolbar
                title="选择性别"
                :columns="sexColums"
                @confirm="onSexConfirm"
                @cancel="onSexCancel"
              />
            </van-popup>
            <van-popup v-model="ageShow" position="bottom" :overlay="true">
              <van-picker
                show-toolbar
                title="选择所在的年龄段"
                :columns="ageColums"
                @confirm="onAgeConfirm"
                @cancel="onAgeCancel"
              />
            </van-popup>
            <van-popup v-model="occupationShow" position="bottom" :overlay="true">
              <van-picker
                show-toolbar
                title="选择职业"
                :columns="occupationColums"
                @confirm="onOccupationConfirm"
                @cancel="onOccupationCancel"
              />
            </van-popup>
            <van-popup v-model="subscribeRegionShow" position="bottom" :overlay="true">
              <van-picker
                show-toolbar
                title="选择预约项目"
                :loading="loading"
                :columns="subscribeRegionColums"
                @confirm="onsubscribeRegionConfirm"
                @cancel="onsubscribeRegionCancel"
              />
            </van-popup>
            <van-popup v-model="subscribeMulRegionShow" position="bottom" :overlay="true">
               <van-nav-bar
                 title="选择意向项目"
                 left-text="取消"
                 right-text="确认"
                 @click-right="onsubscribeMulRegionConfirm"
                 @click-left="onsubscribeMulRegionCancel"
               />
               <van-list>
               		<van-checkbox-group v-model="selectedRegionResult">
               		  <van-cell-group>
               		    <van-cell v-for="item in subscribeRegionColums" :title="item.text" :key="item.id">
               		      <van-checkbox :name="item" />
               		    </van-cell>
               		  </van-cell-group>
               		</van-checkbox-group>
               </van-list>
            </van-popup>
            <van-popup v-model="layoutShow" position="bottom" :overlay="true">
               <van-nav-bar
                 title="选择意向户型"
                 left-text="取消"
                 right-text="确认"
                 @click-right="onLayoutConfirm"
                 @click-left="onLayoutCancel"
               />
               <van-list>
               		<van-checkbox-group v-model="selectedLayoutResult">
               		  <van-cell-group>
               		    <van-cell v-for="item in subscribeLayoutColums" :title="item.text" :key="item.value">
               		      <van-checkbox :name="item" />
               		    </van-cell>
               		  </van-cell-group>
               		</van-checkbox-group>
               </van-list>
            </van-popup>
            <van-popup v-model="priceShow" position="bottom" :overlay="true">
              <van-picker
                show-toolbar
                title="选择意向价格"
                :columns="priceColums"
                @confirm="onPriceConfirm"
                @cancel="onPriceCancel"
              />
            </van-popup>
            <van-popup v-model="cycleShow" position="bottom" :overlay="true">
              <van-picker
                show-toolbar
                title="选择计划租期"
                :columns="cycleColums"
                @confirm="onCycleConfirm"
                @cancel="onCycleCancel"
              />
            </van-popup>
            <van-popup v-model="needShow" position="bottom" :overlay="true">
              <van-picker
                show-toolbar
                title="选择需求状态"
                :columns="needColums"
                @confirm="onNeedConfirm"
                @cancel="onNeedCancel"
              />
            </van-popup>
	    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import statusModal from "@/components/statusModal.vue";
import sailPage from "@/components/sail-page.vue";
import { Toast } from "vant";

const expressData = [
  { text: "上午", value: 1 },
  { text: "下午", value: 2 },
  /*{ text: "晚上", value: 3 }*/
];
const dateSegmentData = [
  {
    is: "cube-date-picker",
    title: "预约日期",
    min: new Date(),
    max: new Date(2030, 11, 31),
    format: {
      year: "YYYY",
      month: "MM",
      date: "DD"
    }
  },
  {
    title: "预约时间段",
    data: [expressData]
  }
];
export default {
  name: "subscribeHouse",
  components: {
    //addPane
    sailPage,
    statusModal
  },
  computed: {
    ...mapState({
      occupationColums: state => state.Occupation,
      needColums: state => state.CustomerState,
      subscribeLayoutColums: state => state.LayoutIntent,
      subscribeForm: state =>
        state.subscribeModule.subscribeForm,
      subscribeRegionColums: state =>
        state.subscribeModule.subscribeRegionColums
    })
  },
  mounted() {
    this.$store.dispatch("fetchSelectDataType", "Occupation");
    this.$store.dispatch("fetchSelectDataType", "CustomerState");
    //this.$store.dispatch("fetchSelectDataType", "LayoutIntent");
    this.dateSegmentPicker = this.$createSegmentPicker({
      data: dateSegmentData,
      onSelect: (selectedValue, selectedIndex, selectedTexts) => {
        
        this.selectedTime =
            selectedTexts[0].join("-") +
            " " +
            selectedTexts[1].join("");
        this.$store.commit("subscribeModule/SET_SUBSCRIBE_TIME", {
          seeTime: selectedTexts[0].join("-"),
          seeTimeInterval: selectedValue[1][0]
        });
      }
    });
  },
  data: function() {
    return {
      name: "subscribeHouse",
      subId: null,
      needShow: false,
      cycleShow: false,
      sexShow: false,
      ageShow: false,
      loading: false,
      layoutShow: false,
      priceShow: false,
      subscribeMulRegionShow: false,
      subscribeRegionShow: false,
      occupationShow: false,
      selectedLayout: "",
      selectedLayoutResult: [],
      selectedRegionResult: [],
      selectedRegion: "",
      selectedOccupation: null,
      selectedRegionOnly: null,
      selectedSex: null,
      selectedAge: null,
      selectedTime: null,
      selectedPrice: null,
      selectedCycle: null,
      selectedNeed: null,
      address:null,
      sexColums: [
        {
          text: "男",
          value: 1
        },
        {
          text: "女",
          value: 2
        }
      ],
      //ageColums: [65, 70, 75, 80, 85, 90, 95, "00", "其他"],
      ageColums:[
        { value: "00", text: "00后" },
        { value: 95, text: "95后" },
        { value: 90, text: "90后" },
        { value: 85, text: "85后" },
        { value: 80, text: "80后" },
        { value: 75, text: "75后" },
        { value: 70, text: "70后" },
        { value: 65, text: "65后" },
        { value: "其他", text: "其他" }
      ],
      priceColums: [
        { value: "1000", text: "1000元以下/月" },
        { value: "1000-1500", text: "1000-1500元/月" },
        { value: "1500-2000", text: "1500-2000元/月" },
        { value: "2000元以上", text: "2000元以上/月" }
      ],
      cycleColums: [				
        { value: 12, text: "12个月" },
        { value: 18, text: "18个月" },
        { value: 24, text: "24个月" }
      ]
      // needColums: [
      // 	{ value: "正常", text: "正常" },
      // 	{ value: "急求", text: "急求" },
      // 	{ value: "暂缓", text: "暂缓" },
      // 	{ value: "无效", text: "无效" }
      // ]
    };
  },
  methods: {
    jumpCallback() {
      this.$router.push({path: `/subscribeDetail/${this.subId}`});
    },
    submit() {
      if(!this.subscribeForm.name) {
        Toast.fail({
          duration: 1000,
          message: "请填写姓名！"
        });
        return false; 
      }
      if(!this.subscribeForm.phone) {
        Toast.fail({
          duration: 1000,
          message: "请填写联系方式！"
        });
        return false; 
      }
      if(!this.selectedSex ) {
        Toast.fail({
          duration: 1000,
          message: "请选择性别！"
        });
        return false; 
      }
      if(!this.selectedAge ) {
        Toast.fail({
          duration: 1000,
          message: "请选择年龄！"
        });
        return false; 
      }
      if(!this.selectedOccupation) {
        Toast.fail({
          duration: 1000,
          message: "请选择职业！"
        });
        return false; 
      }
      if(!this.selectedRegionOnly) {
        Toast.fail({
          duration: 1000,
          message: "请选择预约看房项目！"
        });
        return false; 
      }if(!this.selectedTime) {
        Toast.fail({
          duration: 1000,
          message: "请选择预约时间！"
        });
        return false; 
      }
      if(!this.selectedRegion) {
        Toast.fail({
          duration: 1000,
          message: "请选择意向项目！"
        });
        return false; 
      }
      if(!this.selectedLayout) {
        Toast.fail({
          duration: 1000,
          message: "请选择意向户型！"
        });
        return false; 
      }if(!this.selectedPrice) {
        Toast.fail({
          duration: 1000,
          message: "请选择意向价格！"
        });
        return false; 
      }
      if(!this.selectedCycle) {
        Toast.fail({
          duration: 1000,
          message: "请选择计划周期！"
        });
        return false; 
      }
      if(!this.selectedNeed) {
        Toast.fail({
          duration: 1000,
          message: "请选择需求状态！"
        });
        return false; 
      }
      this.loading = true;
      this.$store.dispatch("subscribeModule/sendSubscribe").then(res => {
        if(res) {
          
          this.address = res.data.data.address;
          this.subId = res.data.data.wellId;
          this.$store.commit("UPDATE_STATUS_VISIBLE", "subscribe");
        }
        this.loading = false;
      });
    },
    layoutClick() {
      this.layoutShow = true;
    },
    needClick() {
      this.needShow = true;
    },
    priceClick() {
      this.priceShow = true;
    },
    cycleClick() {
      this.cycleShow = true;
    },
    showDateSegmentPicker() {
      this.dateSegmentPicker.show();
    },
    subscribeMulRegionClick() {
      this.loading = true;
      this.subscribeMulRegionShow = true;
      this.$store
        .dispatch("onlineHouseModule/selectListRegion",{publishStatus:1,num:10000})
        .then(res => {
          this.loading = false;
          this.$store.commit(
            "subscribeModule/SET_REGION_COLUMS",
            res.data.data
          );
          //
        });
    },
    subscribeRegionClick() {
      this.loading = true;
      this.subscribeRegionShow = true;
      this.$store
        .dispatch("onlineHouseModule/selectListRegion",{publishStatus:1})
        .then(res => {
          this.loading = false;
          this.$store.commit(
            "subscribeModule/SET_REGION_COLUMS",
            res.data.data
          );					
          //
        });
    },
    ageClick() {
      this.ageShow = true;
    },
    sexClick() {
      this.sexShow = true;
    },
    occupationClick() {
      this.occupationShow = true;
    },
    onSexCancel() {
      this.sexShow = false;
    },
    onSexConfirm(value, index) {
      this.$store.commit("subscribeModule/SET_SUBSCRIBE_SEX", value.value);
      this.sexShow = false;
      this.selectedSex = value.text;
    },
    onAgeConfirm(value, index) {
      this.$store.commit("subscribeModule/SET_SUBSCRIBE_AGE", value);
      this.selectedAge = value.text;
      this.ageShow = false;
    },
    onAgeCancel(value, index) {
      this.ageShow = false;
    },
    onOccupationConfirm(value, index) {
      this.selectedOccupation = value.text;
      this.$store.commit("subscribeModule/SET_SUBSCRIBE_OCCUPATION", value.value);
      this.occupationShow = false;
    },
    onOccupationCancel(value, index) {
      this.occupationShow = false;
    },
    onsubscribeRegionConfirm(value, index) {
      this.subscribeRegionShow = false;
      this.selectedRegionOnly = value.text;
      this.$store.dispatch("fetchSelectDataType", "LayoutIntent").then(res => {
        if(this.selectedRegionOnly.indexOf("渔安新城") !== -1){
          this.subscribeLayoutColums.splice(0,1);
        }
      });			
			
      
      this.$store.commit("subscribeModule/SET_SUBSCRIBE_REGION", {
        propCode: "book_region",
        propName: "预约看房",
        propValue: value.id,
        propValueDesc: "预约看房",
        propValueInt: value.id,
      });
    },
    onsubscribeRegionCancel(value, index) {
      this.subscribeRegionShow = false;
    },
    onsubscribeMulRegionConfirm(value, index) {
      //
      this.subscribeMulRegionShow = false;
      this.selectedRegion = "";
      this.$store.commit("subscribeModule/CLEAR_REGION_LIST");
      this.selectedRegionResult.map((item, index) => {
        
        if (index === this.selectedRegionResult.length - 1) {
          this.selectedRegion += item.text + ".";
        } else {
          this.selectedRegion += (item.text || "") + ", ";
        }
        this.$store.commit("subscribeModule/SET_SUBSCRIBE_REGION_LIST", {
          propCode: "region",
          propName: item.text,
          propValue: item.id,
          propValueDesc: "意向项目",
          propValueInt: item.id,
        });
      });
      //this.selectedRegion
    },
    onsubscribeMulRegionCancel(value, index) {
      this.subscribeMulRegionShow = false;
    },
    onLayoutConfirm() {
      this.layoutShow = false;
      this.selectedLayout = "";
      this.$store.commit("subscribeModule/CLEAR_LAYOUT_LIST");
      this.selectedLayoutResult.map((item, index) => {
        if (index === this.selectedLayoutResult.length - 1) {
          this.selectedLayout += item.text + ".";
        } else {
          this.selectedLayout += (item.text || "") + ", ";
        }
        this.$store.commit("subscribeModule/SET_SUBSCRIBE_LAYOUT_LIST", {
          propCode: "layout",
          propName: item.text,
          propValue: item.value,
          propValueDesc: "意向户型",
          propValueInt: 0,
        });
      });
    },
    onLayoutCancel() {
      this.layoutShow = false;
    },
    onPriceConfirm(value, index) {
      this.selectedPrice = value.text;
      this.$store.commit("subscribeModule/SET_SUBSCRIBE_PRICE", value.value);
      this.priceShow = false;
    },
    onPriceCancel() {
      this.priceShow = false;
    },
    onCycleConfirm(value, index) {
      this.selectedCycle = value.text;
      this.$store.commit("subscribeModule/SET_SUBSCRIBE_CYCLE", value.value);
      this.cycleShow = false;
    },
    onCycleCancel() {
      this.cycleShow = false;
    },
    onNeedConfirm(value) {
      this.$store.commit("subscribeModule/SET_SUBSCRIBE_NEED", value.value);
      this.selectedNeed = value.text;
      this.needShow = false;
    },
    onNeedCancel() {
      this.needShow = false;
    },
  }
};
</script>
<style lang='less'>
.subscribe-house {
	.van-popup {
		.van-list {
			height: 80vh;
			overflow: scroll;
		}
		.van-cell__title {
			text-align: left;
		}
	}
}
.subscribe-form {
	.one-form {
		.van-field .van-cell__title {
			max-width: 76px;
		}
	}
}
.subscribe-form .van-hairline--top-bottom::after {
	border-width: 1px 0 0 0;
}
.spec-placeholder .van-field__control::-webkit-input-placeholder {
	text-align: right;
	color: #808080;
}
</style>
<style scoped lang='less'>
.subscribe-part {
	margin-top: 13px;
}
.subscribe-desc {
	font-size: 11px;
	margin-top: 11.5px;
	margin-bottom: 11.5px;
}
</style>
