<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhouyh
 * @Date: 2021-11-08 11:16:21
 * @LastEditors: zhouyh
 * @LastEditTime: 2021-11-08 18:40:51
-->
<template>
  <div class="convenience">
    <img src="../../assets/conven.png" alt="" />
    <van-cell>
      <template #title>
        <div class="title">
          <div>身份证明</div>
        </div>
      </template>
      <template #label>
        <van-row gutter="20">
          <van-col
            span="12"
            v-for="(item, index) in prove"
            :key="index"
            class="cell"
            @click="jumpIntroduce(item.url)"
          >
            <!--  如果要打开新的标签页的话 加 这个属性 target="_blank" -->
            {{ item.name }}</van-col
          >
        </van-row>
      </template>
    </van-cell>
    <van-cell style="margin:20px 0 ">
      <template #title>
        <div class="title">
          <div>户口管理</div>
        </div>
      </template>
      <template #label>
        <van-row gutter="20">
          <van-col
            span="12"
            v-for="(item, index) in house"
            :key="index"
            class="cell"
            @click="jumpIntroduce(item.url)"
          >
            {{ item.name }}
          </van-col>
        </van-row>
      </template>
    </van-cell>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup, Col, Row } from "vant";

Vue.use(Cell)
  .use(CellGroup)
  .use(Col)
  .use(Row);
export default {
  name: "Convenience",
  data() {
    return {
      // 身份证明
      prove: [
        {
          name: "出具临时身份证明",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/8bb8164fc3b04216a4cf545efa79f39a/CJLSSFZM/index.html#/taskapply/know"
        },
        {
          name: "出具违法犯罪记录查询证明（个人）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/5c7cc445af0f4273b06653b099a1e851/GRWFFZZM/index.html#/taskapply/know"
        },
        {
          name: "人口信息证明",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/14a1188f037045e6894895c7e674a56d/WJWRKXXZM/index.html#/taskapply/know"
        },
        {
          name: "亲属关系证明",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/71fc21081f7e4107a7263c281984a3d5/WJWQSGXZM/index.html#/taskapplyjzz/list"
        },
        {
          name: "居住证办理",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/0778372dab4b49d4b90d26e083acf5e5/WJWJZZBL/index.html#/taskapplyjzz/list"
        },
        {
          name: "死亡注销证明",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/6f1391400ba542b7ad0af253465811ec/SWZXZM/index.html#/taskapply/know"
        },
        {
          name: "其他注销证明",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/d006bbd04fe343bca09cc160be0299c4/QTZXZM/index.html#/taskapply/know"
        },
        {
          name: "迁出注销证明",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/ae3ae6e750c74bc6ab1581d444b806ea/QCZXZM/index.html#/taskapply/know"
        },
        {
          name: "出国（境）定居注销证明",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/9a7236402bde4a4aba39817f9c07e663/CGJDJZXZM/index.html#/taskapply/know"
        }
      ],
      // 户口管理
      house: [
        {
          name: "户口信息变更（变更性别）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/464c54f0cb2a49ab9428ba76a89d2e36/HKBGXB/index.html#/taskapply/know"
        },
        {
          name: "户口信息变更（变更户主）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/039faf8fb8dd46e38d5ffccc542c971c/HKBGHZ/index.html#/taskapply/know"
        },
        {
          name: "户口市内迁移（市内夫妻投靠）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/9a9307bcfad445e1b97fe56799056c04/HKSNQY/index.html#/taskapply/know"
        },
        {
          name: "大中专院校学生户口迁移（自主创业）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/37097742f4164d6d9399a57680dbb3cc/DZZXSHKQY/index.html#/taskapply/know"
        },
        {
          name: "户口市外迁移（户口迁出市外）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/4f253c268f5f41579a5a1060986a2933/HKQCSW/index.html#/taskapply/know"
        },
        {
          name: "立户与分户（家庭户立户登记）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/f192d9319f2d47efb109ba0fac8651d7/JTHLHDJ/index.html#/taskapply/know"
        },
        {
          name: "立户与分户（家庭户分户登记）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/c58f9f8d28c0456faf46bc09f7dec2da/JTHFHDJ/index.html#/taskapply/know"
        },
        {
          name: "户口注销（定居台湾注销）",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/1f4834ce502b4b79b6437f496b36d720/WJWDJTWZX/index.html#/taskapply/know"
        },
        {
          name: "江苏籍华侨及出国（境）人员恢复户口",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/e41c6605bc904b9cbc9bc40635b66f42/WJWHFSB1/index.html#/taskapply/know"
        },
        {
          name: "军人退伍、复员等移交地方的申报恢复户口",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/e811f6abca464970beb0128e77894ac4/WJWHFSB/index.html#/taskapply/know"
        },
        {
          name: "收养申报",
          url:
            "http://www.jszwfw.gov.cn/jmopen/webapp/html5/unZip/17716393ba52407a952f4122b1d15346/WJWSYSB/index.html#/taskapply/know"
        }
      ]
    };
  },
  methods: {
    jumpIntroduce(url) {
      window.location.href = `${url}?showType=1`;
    }
  }
};
</script>

<style lang="stylus" scoped>
.convenience {
  overflow: auto;
  height: 100vh;
  margin-bottom: 20px;

  img {
    width: 100%;
  }

  .title {
    font-weight: bold;
    padding: 10px 20px;
    background-color: #28b6f4;
    font-size: 32px;
    box-shadow: 0 2px 1px 1px #ccc;
  }

  .van-cell {
    padding: 0;
  }

  .van-cell__label {
    margin-top: 0;
    padding: 0 20px;
    background-color: #F5F5F5;
    font-size: 28px;
  }

  .cell {
    margin: 20px 0;
    display: flex;
    align-items: center;
    height: 70px;
  }

  .cell:nth-of-type(even) {
    border-left: 1px solid #ccc;
    overflow: hidden;
  }

  .van-col, a {
    color: #333;
  }
}
</style>