<template>
  <div class="page_createOrganization">
    <div class="createOrganizationTitle">
      <i class="iconfont icon-zuojiantou jiantou"></i>
      <span class="titleName">创建医院/组织/团队</span>
    </div>
    <div class="tips">填写真实信息，获取更精准服务</div>
    <div class="infoBox">
      <div class="infoOne">
        <p class="infoTitle">机构名称</p>
        <van-field v-model="value" placeholder="请填写机构名称" />
      </div>
      <div class="infoOne">
        <p class="infoTitle">机构名称</p>
        <van-cell is-link @click="show = true">请选择机构类型</van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
          <van-picker :columns="columns" @change="onChange" />
        </van-popup>
      </div>
      <div class="infoOne">
        <p class="infoTitle">机构地区</p>
        <van-cell is-link @click="show = true">请选择地区</van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
          <van-picker :columns="columns" @change="onChange" />
        </van-popup>
      </div>
      <div class="infoOne">
        <p class="infoTitle">详细地址</p>
        <van-field v-model="value" placeholder="请填写" />
      </div>
      <div class="infoOne">
        <p class="infoTitle">联系人</p>
        <van-field v-model="value" placeholder="请填写" />
      </div>
      <div class="infoOne">
        <p class="infoTitle">联系电话</p>
        <van-field v-model="value" placeholder="请填写" />
      </div>
    </div>
    <div class="create">创建</div>
    <div class="problem">
      遇到问题？点击
      <span @click="contact = true">联系客服</span>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="客服电话"
      :visible.sync="contact"
      width="19.1875rem"
      top="12.5rem"
      center
      class="myDialog"
    >
      <span class="telephone">0755-86526342</span>
      <span slot="footer" class="dialog-footer">
        <span @click="contact = false">取消</span>
        <span>|</span>
        <span type="primary" @click="callPhone()">拨打</span>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contact: false,
      show: false,
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"]
    };
  },
  methods: {
    callPhone() {
      window.location.href = "tel://075586526342";
    }
  }
};
</script>

<style lang="scss" scoped>
.page_createOrganization {
  height: 100%;
  overflow: hidden;
  .createOrganizationTitle {
    height: 3.125rem;
    line-height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    margin-left: 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 4.5rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .tips {
    color: #338afb;
    font-size: 0.8125rem;
    padding-left: 2.375rem;
    margin: 1.5rem 0 1.25rem;
  }
  .infoBox {
    width: 80%;
    margin: 0 auto;
  }
  .infoOne {
    height: 4.25rem;
    border-bottom: 1px solid #e8e8e8;
  }
  .infoTitle {
    padding-top: 0.75rem;
    color: #111111;
  }
  .create {
    width: 80%;
    height: 2.875rem;
    text-align: center;
    line-height: 2.875rem;
    font-weight: bold;
    background: #338afb;
    box-shadow: 0px 1px 12px 0px rgba(51, 138, 251, 1);
    border-radius: 1.5rem;
    margin: 1.875rem auto 0;
    color: #fff;
    font-size: 1.0625rem;
  }
  .problem {
    width: 84%;
    font-size: 0.8125rem;
    margin: 1.5rem auto 0;
    text-align: center;
    span {
      color: #338afb;
    }
  }

  .van-cell {
    padding: 0;
    font-size: 1rem;
    margin-top: 0.375rem;
    position: static;
  }
  .van-cell__value--alone {
    color: #9b9b9b;
  }
  .van-field__control {
    line-height: 24px;
  }
  ::-webkit-scrollbar {
    width: 0;
  }
}
</style>
<style lang="scss">
.myDialog {
  line-height: 50%;
  height: 100%;
  .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__title {
    color: #000000;
  }
  .telephone {
    width: 12.5rem;
    height: 1.125rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: #338afb;
    margin-left: 2.5rem;
  }
  .dialog-footer {
    //   display: flex;
    //   justify-content: space-around;
    //   align-items: center;
    > span:nth-of-type(1) {
      color: #9b9b9b;
    }
    > span:nth-of-type(2) {
      // width: 0.125rem;
      // height: 1.75rem;
      // line-height: 1.75rem;
      padding: 0 3.125rem;
      color: #e6e6e6;
    }
    > span:nth-of-type(3) {
      color: #000000;
    }
  }
}
</style>
