<template>
  <div>
    <div class="cell">
      <div class="icon"></div>
      <p class="label">辖区</p>
      <div class="divide"></div>
      <div class="select" @click="showArea = true">{{ areaName }}</div>
      <img class="open_icon" src="@/assets/govservice/open_icon.png" alt="" />
      <van-popup v-model="showArea" position="bottom">
        <van-picker
          show-toolbar
          :columns="
            areaList.map((item) => {
              return item.areaName;
            })
          "
          @confirm="onAreaConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
    </div>
    <div class="cell">
      <div class="icon"></div>
      <p class="label">部门</p>
      <div class="divide"></div>
      <div class="select" @click="showOu = true">{{ ouname }}</div>
      <img class="open_icon" src="@/assets/govservice/open_icon.png" alt="" />
      <van-popup v-model="showOu" position="bottom">
        <van-picker
          show-toolbar
          :columns="
            ouList.map((item) => {
              return item.ouname;
            })
          "
          @confirm="onOuConfirm"
          @cancel="showOu = false"
        />
      </van-popup>
    </div>
    <div class="cell">
      <div class="icon"></div>
      <p class="label">关键字</p>
      <div class="divide"></div>
      <input v-model="keyword" class="input" placeholder="输入关键字" type="text" />
    </div>
    <van-button class="button" round block @click="submit">开始查询</van-button>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup, Picker, Button } from "vant";
import { decryptByDES } from "@/utils/utils";
import { getDepartment } from "@/api/govservice";

Vue.use(Popup).use(Picker).use(Button);

export default {
  name: "GovServiceOrder",
  data() {
    return {
      userInfo: {},
      areaList: [
        {
          areaName: "镇江市",
          areacode: "321100",
        },
        {
          areaName: "京口区",
          areacode: "321102",
        },
        {
          areaName: "润州区",
          areacode: "321111",
        },
        {
          areaName: "丹徒区",
          areacode: "321112",
        },
        {
          areaName: "丹阳市",
          areacode: "321181",
        },
        {
          areaName: "扬中市",
          areacode: "321182",
        },
        {
          areaName: "句容市",
          areacode: "321183",
        },
        {
          areaName: "镇江高新区",
          areacode: "321192",
        },
        {
          areaName: "新区",
          areacode: "321113",
        },
      ],
      showArea: false,
      areaName: "镇江市",
      areacode: "321100",
      ouList: [],
      showOu: false,
      ouguid: "", // 部门唯一标识
      ouname: "", // 部门名称
      keyword: "",
    };
  },
  methods: {
    init() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getDepartment({ areacode: this.areacode }).then((res) => {
        this.$toast.clear();
        let arr = [];
        res.custom.categorylist.map((item) => {
          item.oulist.map((ou) => {
            ou.categoryvalue = item.categoryvalue;
            ou.categoryname = item.categoryname;
            arr.push(ou);
          });
        });
        this.ouList = arr;
      });
    },
    onAreaConfirm(value, index) {
      this.areaName = value;
      this.areacode = this.areaList[index].areacode;
      this.ouguid = "";
      this.ouname = "";
      this.init();
      this.showArea = false;
    },
    onOuConfirm(value, index) {
      this.ouname = value;
      this.ouguid = this.ouList[index].ouguid;
      this.showOu = false;
    },
    submit() {
      const { areacode, ouList, ouguid, keyword } = this;
      if (!ouguid) {
        this.$toast("请选择部门");
        return;
      } else {
        let categoryvalue = ouList.filter((item) => {
          return item.ouguid === ouguid;
        })[0].categoryvalue;
        this.$router.push({
          name: "GovServiceTask",
          query: {
            categoryvalue,
            ouguid,
            keyword,
            areacode,
          },
        });
      }
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo();
        this.verify(res);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录镇合意app");
        // let userInfo = {
        //   mobileNo: 17372670270,
        //   userId: 37393,
        //   userName: "孙辉",
        //   realName: "孙涵",
        //   idCardNo: "K6btm7WPGZj8eLFjTy1a1+P7Z0zFoM/r",
        // };
        // this.verify(JSON.stringify(userInfo));
      }
    },
    getUserInfo(res) {
      this.verify(res);
    },
    verify(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      let userInfo = JSON.parse(res);
      if (!userInfo.idCardNo) {
        this.$dialog
          .confirm({
            message: "请进入“我的”完成实名认证！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      userInfo.idCard = decryptByDES(userInfo.idCardNo, "MnuYbhGv");
      this.userInfo = userInfo;
      this.init();
    },
    back() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    let userInfo = JSON.parse(res);
    if (userInfo) {
      if (!userInfo.idCardNo) {
        this.$dialog
          .confirm({
            message: "请进入“我的”完成实名认证！",
            showCancelButton: false,
          })
          .then(() => {
            this.back();
          });
        return;
      }
      userInfo.idCard = decryptByDES(userInfo.idCardNo, "MnuYbhGv");
      this.userInfo = userInfo;
      this.init();
    } else {
      this.JSBgetUserInfo();
    }
  },
};
</script>

<style lang="stylus" scoped>
.cell {
  margin 30px
  padding 30px
  display flex;
  align-items center;
  background: #FFFFFF;

  .icon {
    width: 10px;
    height: 10px;
    margin-left 10px;
    border-radius 50%
    background: #EB4E3F;
  }
  .label {
    width 120px;
    margin-left 10px;
    font-size: 28px;
    color: #666666;
  }
  .divide {
    width: 4px;
    height: 30px;
    background: #D8D8D8;
  }
  .select {
    width calc(100% - 250px)
    height 50px;
    margin-left 80px;
    line-height 50px
    font-size: 28px;
    color: #333333;
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
  }
  .open_icon {
    width 24px;
    height 24px;
  }
  .input {
    width calc(100% - 250px)
    height 50px;
    margin-left 80px;
    line-height 50px;
    font-size: 28px;
    color: #333333;
  }
}
.button {
  width 600px
  margin 50px 75px 0
  background: #EB4E3F;
  font-size: 36px;
  font-weight: 500;
  color: #FFFFFF;
}
</style>
