<template>
  <div style="height:100%">
    <div class="title">
      <img src="../../assets/returnArrow.png" alt="" @click="brank" />
      红色专窗
    </div>
    <div class="banger">
      <van-field
        readonly
        clickable
        :value="value"
        placeholder="镇江市"
        @click="showPicker = true"
        class="field"
        right-icon="play"
      >
        <!-- <template #div>
          <img src="../../assets/bottomArrow.png" alt="" />
        </template> -->
      </van-field>

      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <div class="windowBox">
        <div>窗口党员</div>
        <div>{{ this.userName }}</div>
      </div>
      <div class="serviceTitle">
        <img src="../../assets/service.png" />
        <div>服务清单</div>
      </div>
    </div>
    <div class="content">
      <ul>
        <li class="content_li" v-for="item in arrList" :key="item.index">
          {{ item.value }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Picker, Field, Popup } from "vant";
Vue.use(Picker)
  .use(Field)
  .use(Popup);

export default {
  data() {
    return {
      value: "",
      userName: "浦  军",
      showPicker: false,
      columns: [
        "镇江市",
        "丹阳市",
        "句容市",
        "扬中市",
        "丹徒区",
        "京口区",
        "润州区",
        "镇江新区",
        "镇江高新区",
      ],
      arrList: [],
    };
  },
  methods: {
    brank() {
      if (window.android !== undefined) {
        window.android.backHome();
      } else if (window.webkit) {
        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
      }
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
      switch (value) {
        case "镇江市":
          return (
            (this.userName = "浦  军"),
            (this.arrList = [
              {
                value:
                  "1.提供本市免费政务服务高效审批、组织牵头、协调推进、帮办代办等工作。",
              },
              {
                value:
                  "2.提供企业开办、社会事业、建设项目领域的政策咨询、申报指导、专人服务等全流程代办服务。",
              },
              {
                value:
                  "3.提供市级行政审批（含供电、供水、供气等公共服务）事项的帮办服务。",
              },
              {
                value: "4.提供县（市、区）项目中涉及市级行政审批的联办服务。",
              },
            ])
          );
        case "丹阳市":
          return (
            (this.userName = "魏  唯"),
            (this.arrList = [
              {
                value:
                  "1.企业登记、特种设备、对外贸易经营者备案事项的咨询服务。",
              },
              {
                value:
                  "2.提供企业开办全流程帮办服务，实现企业登记、公章刻制、银行开户、税票申领等企业开办事项“一网通办”，压缩企业开办时间至1个工作日内。",
              },
              {
                value:
                  "3.提供出版物批发单位设立审批、印刷企业设立审批、公共场所卫生许可帮办服务。",
              },
              {
                value:
                  "4.立项规划许可，工程建设许可，施工许可各阶段审批帮办代办服务。",
              },
            ])
          );
        case "句容市":
          return (
            (this.userName = "李  玮"),
            (this.arrList = [
              {
                value:
                  "1.提供公共场所和生活饮用水卫生许可、电影放映、文艺演出、新闻出版和歌舞娱乐场所等文化经营行动、商务、特种设备等事项的行政审批。",
              },
              {
                value:
                  "2.全面推行名称自主申报、全程电子化登记，办理企业设立、刻章、银行预约开户、税务套餐等业务，办理食品、药品经营许可的行政审批，提供企业注册登记相关业务的帮办代办服务。",
              },
              {
                value:
                  "3.为工程建设项目提供项目立项、水土保持、抗震设防要求确认、质量监督（人防质监）、安全监督、施工许可、竣工备案全流程行政审批的帮办代办服务。",
              },
            ])
          );
        case "扬中市":
          return (
            (this.userName = "陈  晨"),
            (this.arrList = [
              {
                value:
                  "1.提供饮用水供水单位卫生许可、印刷企业设立、出版物零售单位设立、营业性演出和娱乐场所等文化经营行动、商务、特种设备等事项的行政审批。",
              },
              {
                value:
                  "2.提供企业开办领域政策咨询、申报指导，并提供全流程免费帮办代办服务。",
              },
              {
                value:
                  "3.提供公司设立、变更、注销、备案、迁移等事项的材料准备和网上申报帮办服务，推进企业简易注销登记，开通简易注销登记绿色通道。",
              },
            ])
          );
        case "丹徒区":
          return (
            (this.userName = "蒋  颖"),
            (this.arrList = [
              {
                value:
                  "1.市场准入：全面推行企业名称网上自主申报、企业开办全程电子化登记帮办服务；全面推行企业开办“全链通”服务，强化“政银联办”，开展印章刻制、银行开户、税务套餐并联帮办服务；提供公司设立、变更、注销、备案、迁移等事项的材料准备和网上申报帮办服务。",
              },
              {
                value:
                  "2.建设工程：推行工程建设项目模拟审批，提供项目备案、节能审查、土地报批、用地规划、工程规划、消防设计、环评登记、施工许可等环节审批帮办服务；推行工程建设项目联合竣工验收，开展工程质量、消防、排水、人防、防雷、规划核实、档案验收等环节的联合竣工验收帮办服务。",
              },
            ])
          );
        case "京口区":
          return (
            (this.userName = "凌  榕"),
            (this.arrList = [
              {
                value:
                  "1.市场准入：企业设立、刻章、银行预约开户、税务套餐等企业开办“全链通”业务帮办服务；办理食品经营许可、食品小作坊登记、特种设备的审批业务；提供企业注册登记材料准备和网上申报帮办服务。",
              },
              {
                value:
                  "2.社会事业：文化体育体类许可事项审核；新闻出版类许可事项审核；公共场所卫生许可帮办服务。",
              },
              {
                value:
                  "3.工程建设：企业投资建设固定资产投资项目核准与备案；固定资产投资项目节能审查；企业技术改造项目备案及后续施工改造各阶段帮办服务。 ",
              },
            ])
          );
        case "润州区":
          return (
            (this.userName = "胡  悦"),
            (this.arrList = [
              {
                value:
                  "1.企业或个体设立、变更、注销、备案、迁移全过程帮办服务。",
              },
              {
                value: "2.企业、个体营业执照材料准备和网上申请等帮办服务。",
              },
              {
                value:
                  "3.《食品经营许可证》网上申请、新办、变更和注销等帮办代办服务。",
              },
              {
                value:
                  "4.企业固定资产投资项目核准与备案、固定资产投资项目节能审查等帮办代办服务。",
              },
              {
                value: "5.内资娱乐场所经营活动许可的帮办代办服务。",
              },
            ])
          );
        case "镇江新区":
          return (
            (this.userName = "董  梁"),
            (this.arrList = [
              {
                value:
                  "1.快速审批项目的立项、环评、规划、土地、消防、施工等有关审批手续，全过程服务，直至项目竣工验收投产。",
              },
              {
                value:
                  "2.一般工业企业签订土地出让合同并缴清费用后1日内取得建设用地规划许可证、不动产登记证、建设工程规划许可证、施工图审查合格证和建筑工程施工许可证，实现“五证齐发”。",
              },
              {
                value:
                  "3.对水土保持、社会风险稳定性、文物、地震安全性、水资源论证、能评实行区域评估，进一步简化审查程序。",
              },
              {
                value:
                  "4.开展供电、供水企业在工程建设期间提前提供接电、接水预装服务，对低压电力市政接入涉及的工程规划许可、占用挖掘城市道路许可等实行并联办理。",
              },
            ])
          );
        case "镇江高新区":
          return (
            (this.userName = "管  政"),
            (this.arrList = [
              {
                value:
                  "1.提供企业开办“全链通”全程帮办代办服务，包括企业设立、银行开户、税务服务、社保、公积金登记开户6个环节，0.5个工作日全流程办结。",
              },
              {
                value:
                  "2.提供食品经营许可、户外广告设置、特种设备使用登记等事项的行政审批。",
              },
              {
                value:
                  "3.进门专人引导，“一窗”综合受理，减少办事流程，节约办事时间。",
              },
              {
                value:
                  "4.提供“限时服务、预约服务、上门服务、延时服务”等特色服务。",
              },
              {
                value:
                  "5.提供“一次性告知”、“一条龙服务、“一表制登记”、“一分钱不花”和“一次性通过”帮办代办服务。",
              },
              {
                value: "6.提供窗口前移，“面对面”集中办理服务。",
              },
            ])
          );
      }
    },
  },
  created() {
    this.onConfirm("镇江市");
  },
};
</script>

<style lang="stylus" scoped>
.field {
  padding: 0;
  margin: 0;
  border-radius: 50px;
  width: 229.7px;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  margin-left: 30px;
}
.banger {
  background-image: url("../../assets/Layer.png");
  background-size: cover;

  width: 100%;
  height: 375px;
}
.windowBox {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  width: 420px;
  height: 80px;
  background: #320000;
  box-shadow: 0px 0px 5px 0px rgba(4, 134, 171, 0.18);
  /* opacity: 0.38; */
  background-color: #000;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  margin-left: 260px;
  margin-top: 130px;
  font-size: 34px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 20px;
}
.serviceTitle {
  margin-left: 30px;
  margin-top: 75px;
  position: absolute;
  background-color: #fff;
  width: 230px;
  height: 80px;
  display: flex;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #b0001e;
  align-items: center;
  padding-left: 20px;
}
.serviceTitle img {
  margin-right: 16px;
  width: 44px;
  height: 44px;
  /* display: block; */
}
.content {
  margin-top: 72px;
  padding: 0 30px;
  height: 900px;
  overflow: auto;
}
.content ul {
  overflow-y: auto;
}
.content_li {
  margin-top: 20px;
  box-sizing: border-box;
  color: #666;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 26px;
  line-height: 38px;
  background-color: #fff;
  padding: 53px 28px;
}
.content_li:last-child {
  margin-bottom: 50px;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 88px;
  background-color: #b0001e;
  font-size: 34px;
  color: #fff;
  position: relative;
}
.title img {
  width: 16px;
  height: 28px;
  position: absolute;
  left: 30px;
}
/deep/.van-icon {
  transform: rotate(90deg) !important;
  margin-right: 20px;
}
</style>
