<template>
  <div class="current">
    <van-form>
      <van-cell-group>
        <van-field v-if="history" label="定位信息" v-model="location" type="textarea" rows="1" autosize readonly required
          placeholder="请选择定位信息" @click="goMap">
          <template #right-icon>
            <van-icon style="display: flex; align-items: center" color="#eb4e3f" name="location" />
          </template>
        </van-field>
        <van-field label="辖市区" :value="area" @click="showPicker = true" required readonly placeholder="请选择当前所在地辖市区" />
        <van-popup v-model="showPicker" position="bottom" round>
          <van-picker show-toolbar :columns="
            columns.map((item) => {
              return item.label;
            })
          " title="辖市区" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
        <van-field v-if="area" :value="street" label="街道(乡镇)" @click="showPicker2 = true" readonly required
          placeholder="请选择当前所在街道(乡镇)">
        </van-field>
        <van-popup v-model="showPicker2" position="bottom" round>
          <van-picker show-toolbar :columns="
            columns2.map((item) => {
              return item.label;
            })
          " title="街道(乡镇)" @cancel="showPicker2 = false" @confirm="onConfirm2" />
        </van-popup>
        <van-field v-model="address" name="详细地址" label="详细地址" clearable required placeholder="示例：xx路xx号">
        </van-field>
        <van-field label="场所类型" :value="place" @click="showPicker1 = true" required readonly placeholder="请选择场所类型" />
        <van-popup v-model="showPicker1" position="bottom" round>
          <van-picker show-toolbar :columns="
            columns1.map((item) => {
              return item.label;
            })
          " title="场所类型" @cancel="showPicker1 = false" @confirm="onConfirm1" />
        </van-popup>
        <van-field v-if="place" v-model="placeName" name="场所名称" label="场所名称" clearable required placeholder="示例：xx酒店">
        </van-field>
        <van-field v-if="place == '酒店房间'" v-model="placeNum" name="房间号" label="房间号" clearable required placeholder="示例：xx房间">
        </van-field>
      </van-cell-group>
    </van-form>

    <div class="describe">
      <div class="requirement">
        1. 根据疫情防控工作要求，各类公共场所经营者应使用本功能生成“镇江通行码”;
      </div>
      <div class="requirement">
        2.
        场所经营者在生成镇江通行码时，请保证您定位的位置信息与您填写的店面详细地址以及通行码张贴位置保持一致！
      </div>
      <div class="requirement">
        3.
        个人用户无需生成通行码，请在出行时，使用首页右上角“扫一扫”功能，扫描公共场所张贴的“镇江通行码”提交出行信息。
      </div>
    </div>
    <div class="button">
      <!-- <van-button v-if="history" type="info" size="normal" block @click="tohistory">历史数据查询</van-button> -->
      <van-button type="primary" size="normal" block @click="upload">生成通行码</van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { permitCode } from "@/api/epidemic";
import { Field, Button, CellGroup, Form, Popup, Picker, Icon } from "vant";
Vue.use(Field)
  .use(Button)
  .use(CellGroup)
  .use(Form)
  .use(Popup)
  .use(Picker)
  .use(Icon);
export default {
  data() {
    return {
      showPicker: false,
      showPicker1: false,
      showPicker2: false,
      columns: [
        {
          id: "10001",
          label: "京口区",
        },
        {
          id: "10002",
          label: "润州区",
        },
        {
          id: "10003",
          label: "丹徒区",
        },
        {
          id: "10004",
          label: "镇江新区",
        },
        {
          id: "10005",
          label: "镇江高新区",
        },
        {
          id: "10006",
          label: "扬中市",
        },
        {
          id: "10007",
          label: "丹阳市",
        },
        {
          id: "10008",
          label: "句容市",
        },
      ],
      columns1: [
        {
          id: "1",
          label: "发热门诊",
        },
        {
          id: "2",
          label: "药店",
        },
        {
          id: "3",
          label: "核酸采样点",
        },
        {
          id: "4",
          label: "娱乐场所",
        },
        {
          id: "5",
          label: "餐饮场所",
        },
        {
          id: "6",
          label: "体育健身场所",
        },
        {
          id: "7",
          label: "商场超市",
        },
        {
          id: "8",
          label: "文化旅游景区",
        },
        {
          id: "9",
          label: "宗教场所",
        },
        {
          id: "10",
          label: "培训场所",
        },
        {
          id: "11",
          label: "办公场所",
        },
        {
          id: "12",
          label: "大型活动场所",
        },
        {
          id: "13",
          label: "会展会议",
        },
        {
          id: "14",
          label: "公共交通工具",
        },
        {
          id: "15",
          label: "交通卡口",
        },
        {
          id: "16",
          label: "卫生服务中心",
        },
        {
          id: "17",
          label: "医院",
        },
        {
          id: "18",
          label: "酒店房间",
        },
        {
          id: "19",
          label: "其他场所",
        },
      ],
      columns2: [],
      place: "",
      area: "",
      areaCode: "",
      street: "",
      address: "",
      placeName: "",
      placeNum: "",
      userInfo: {},
      permitCode: "",
      location: "",
      lat: "",
      lng: "",
      history: true,
    };
  },
  methods: {
    goMap() {
      this.$router.push({ name: "CurrentMap" });
    },
    // 当前所在地市辖区列表
    onConfirm(value, index) {
      this.value = value;
      this.areaCode = this.columns[index].id;
      this.area = this.columns[index].label;
      this.showPicker = false;
      this.street = "";
      if (this.area == "京口区") {
        this.columns2 = [
          { label: "正东路街道" },
          { label: "健康路街道" },
          { label: "大市口街道" },
          { label: "四牌楼街道" },
          { label: "象山街道" },
          { label: "谏壁街道" },
          { label: "京口工业园区" },
          { label: "新民洲临港产业园" },
          
        ];
      } else if (this.area == "润州区") {
        this.columns2 = [
          { label: "宝塔路街道" },
          { label: "和平路街道" },
          { label: "金山街道" },
          { label: "七里甸街道" },
          { label: "官塘桥街道" },
          { label: "韦岗街道" },
          { label: "南山街道" },
          
        ];
      } else if (this.area == "丹徒区") {
        this.columns2 = [
          { label: "高资街道" },
          { label: "高桥镇" },
          { label: "辛丰镇" },
          { label: "谷阳镇" },
          { label: "上党镇" },
          { label: "宝堰镇" },
          { label: "世业镇" },
          { label: "宜城街道" },
          { label: "江心洲生态农业园区" },
          { label: "荣炳盐资源区" },
          
        ];
      } else if (this.area == "镇江新区") {
        this.columns2 = [
          { label: "丁卯街道" },
          { label: "大港街道" },
          { label: "姚桥镇" },
          { label: "大路镇" },
          { label: "丁岗镇" },
          
        ];
      } else if (this.area == "镇江高新区") {
        this.columns2 = [{ label: "蒋乔街道" },];
      } else if (this.area == "扬中市") {
        this.columns2 = [
          { label: "三茅街道" },
          { label: "新坝镇" },
          { label: "油坊镇" },
          { label: "八桥镇" },
          { label: "西来桥镇" },
          { label: "兴隆街道（经开区）" },
          
        ];
      } else if (this.area == "丹阳市") {
        this.columns2 = [
          { label: "云阳街道" },
          { label: "曲阿街道" },
          { label: "司徒镇" },
          { label: "延陵镇" },
          { label: "珥陵镇" },
          { label: "导墅镇" },
          { label: "皇塘镇" },
          { label: "吕城镇" },
          { label: "陵口镇" },
          { label: "访仙镇" },
          { label: "界牌镇" },
          { label: "丹北镇" },
          
        ];
      } else if (this.area == "句容市") {
        this.columns2 = [
          { label: "华阳街道" },
          { label: "崇明街道" },
          { label: "黄梅街道" },
          { label: "下蜀镇" },
          { label: "白兔镇" },
          { label: "茅山镇" },
          { label: "后白镇" },
          { label: "郭庄镇" },
          { label: "天王镇" },
          { label: "宝华镇" },
          { label: "边城镇" },
          { label: "赤山湖风景区" },
          { label: "茅山风景区" },
          
        ];
      }
      console.log(this.columns2);
    },
    // 场所类型列表
    onConfirm1(value, index) {
      this.value = value;
      this.placeCode = this.columns1[index].id;
      this.place = this.columns1[index].label;
      this.showPicker1 = false;
      this.placeNum = "";
    },
    onConfirm2(value, index) {
      this.value = value;
      this.street = this.columns2[index].label;
      this.showPicker2 = false;
    },
    // 历史数据查询
    tohistory() {
      this.$router.push({ name: "CurrentHistory" });
    },
    // 上传通行码
    upload() {
      if (
        this.area &&
        this.street &&
        this.address &&
        this.place &&
        this.location &&
        this.placeName
      ) {
        let params = {
          appId: "1234",
          areaName: this.area,
          address: this.address,
          areaCode: this.areaCode,
          placeType: this.place,
          placeName: this.placeNum ? this.placeName + '|' + this.placeNum : this.placeName,
          street: this.street,
          userId: this.userInfo.userId ? this.userInfo.userId : null,
          mobile: this.userInfo.mobileNo ? this.userInfo.mobileNo : null,
          locationInfo: this.location,
          lng: this.lng,
          lat: this.lat,
        };
        permitCode(params).then((res) => {
          this.permitCode = res.data;
          this.$toast.clear();
          this.jump();
        });
      } else {
        this.$toast("请将信息填写完整");
      }
    },
    // 跳转镇江通行码页面
    jump() {
      this.$router.push({
        name: "CurrentDetails",
        query: {
          area: this.area,
          street: this.street,
          address: this.address,
          place: this.place,
          permitCode: this.permitCode,
          placeName: this.placeNum ? this.placeName + '|' + this.placeNum : this.placeName,
        },
      });
    },
    // 返回首页
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
    // 初始化获取userInfo
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo(); // 这是一个json字符串
        sessionStorage.setItem("ZJCD-UserInfo", res);
        this.userInfo = JSON.parse(res);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        window.receiveLocation(
          JSON.stringify({ code: 0, data: { lat: 39.983744, lng: 116.276063 } })
        );
        this.$toast("请先登录镇合意app");
      }
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
    },
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("location"))) {
      this.location = JSON.parse(sessionStorage.getItem("location")).address;
      this.lat = JSON.parse(sessionStorage.getItem("location")).location.lat;
      this.lng = JSON.parse(sessionStorage.getItem("location")).location.lng;
    }
    if (JSON.parse(sessionStorage.getItem("location")).ad_info.district) {
      switch (JSON.parse(sessionStorage.getItem("location")).ad_info.district) {
        case "京口区":
          this.area = "京口区";
          this.areaCode = "10001";
          this.columns2 = [
            { label: "正东路街道" },
            { label: "健康路街道" },
            { label: "大市口街道" },
            { label: "四牌楼街道" },
            { label: "象山街道" },
            { label: "谏壁街道" },
            { label: "京口工业园区" },
            { label: "新民洲临港产业园" },
            
          ];
          break;
        case "润州区":
          this.area = "润州区";
          this.areaCode = "10002";
          this.columns2 = [
            { label: "宝塔路街道" },
            { label: "和平路街道" },
            { label: "金山街道" },
            { label: "七里甸街道" },
            { label: "官塘桥街道" },
            { label: "韦岗街道" },
            { label: "南山街道" },
            
          ];
          break;
        case "丹徒区":
          this.area = "丹徒区";
          this.areaCode = "10003";
          this.columns2 = [
            { label: "高资街道" },
            { label: "高桥镇" },
            { label: "辛丰镇" },
            { label: "谷阳镇" },
            { label: "上党镇" },
            { label: "宝堰镇" },
            { label: "世业镇" },
            { label: "宜城街道" },
            { label: "江心洲生态农业园区" },
            { label: "荣炳盐资源区" },
            
          ];
          break;
        case "镇江新区":
          this.area = "镇江新区";
          this.areaCode = "10004";
          this.columns2 = [
            { label: "丁卯街道" },
            { label: "大港街道" },
            { label: "姚桥镇" },
            { label: "大路镇" },
            { label: "丁岗镇" },
            
          ];
          break;
        case "镇江高新区":
          this.area = "镇江高新区";
          this.areaCode = "10005";
          this.columns2 = [{ label: "蒋乔街道" },];
          break;
        case "扬中市":
          this.area = "扬中市";
          this.areaCode = "10006";
          this.columns2 = [
            { label: "三茅街道" },
            { label: "新坝镇" },
            { label: "油坊镇" },
            { label: "八桥镇" },
            { label: "西来桥镇" },
            { label: "兴隆街道（经开区）" },
            
          ];
          break;
        case "丹阳市":
          this.area = "丹阳市";
          this.areaCode = "10007";
          this.columns2 = [
            { label: "云阳街道" },
            { label: "曲阿街道" },
            { label: "司徒镇" },
            { label: "延陵镇" },
            { label: "珥陵镇" },
            { label: "导墅镇" },
            { label: "皇塘镇" },
            { label: "吕城镇" },
            { label: "陵口镇" },
            { label: "访仙镇" },
            { label: "界牌镇" },
            { label: "丹北镇" },
            
          ];
          break;
        case "句容市":
          this.area = "句容市";
          this.areaCode = "10008";
          this.columns2 = [
            { label: "华阳街道" },
            { label: "崇明街道" },
            { label: "黄梅街道" },
            { label: "下蜀镇" },
            { label: "白兔镇" },
            { label: "茅山镇" },
            { label: "后白镇" },
            { label: "郭庄镇" },
            { label: "天王镇" },
            { label: "宝华镇" },
            { label: "边城镇" },
            { label: "赤山湖风景区" },
            { label: "茅山风景区" },
            
          ];
          break;
      }
    }
    this.JSBgetUserInfo();
  },
  mounted() {
    let that = this;
    window.getUserInfo = this.getUserInfo;
    this.$eventBus.$on("getAddress", (res, msg) => {
      // alert(JSON.stringify(res))
      // A发送来的消息
      if (res) {
        that.location = res.address;
        that.lat = res.lat;
        that.lng = res.lng;
        that.$toast.clear();
      } else {
        that.$toast(msg);
      }
    });
  },
  beforeDestroy() {
    this.$eventBus.$off("getAddress", null);
  },
};
</script>

<style lang="stylus" scoped>
.current{
  .button{
    display: flex;
  }
}
.describe {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;

  .requirement {
    font-size: 30px;
    color: red;
    line-height: 40px;
  }
}
</style>