<template>
  <div class="page_modifyOrganization">
    <van-sticky>
      <div class="modifyOrganizationTitle">
        <i class="iconfont icon-zuojiantou jiantou"></i>
        <span class="titleName">修改机构信息</span>
        <p>修改</p>
      </div>
    </van-sticky>
    <div class="organInfo">
      <div class="organInfoOne">
        <p>机构名称</p>
        <van-field v-model="text" placeholder="请填写机构名称" />
      </div>
      <div class="organInfoTwo">
        <div>
          <p>机构类型</p>
          <van-field
            @click="show = true"
            :value="type"
            placeholder="请选择机构类型"
            readonly
          />
        </div>
        <van-icon @click="show = true" class="arrow" name="arrow" />
      </div>
      <div class="organInfoTwo">
        <div>
          <p>机构地区</p>
          <van-field
            @click="show1 = true"
            :value="address"
            placeholder="请选择机构地区"
            readonly
          />
        </div>
        <van-icon @click="show1 = true" class="arrow" name="arrow" />
      </div>
      <div class="organInfoOne">
        <p>详细地址</p>
        <van-field v-model="text" placeholder="请填写详细地址" />
      </div>
      <div class="organInfoOne">
        <p>联系人</p>
        <van-field v-model="text" placeholder="请填写联系人" />
      </div>
      <div class="organInfoOne">
        <p>联系电话</p>
        <van-field v-model="text" type="tel" placeholder="请填写联系电话" />
      </div>
      <div class="organInfoThree">
        <p>机构logo</p>
        <van-uploader v-model="fileList" multiple />
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }"
      ><van-picker :columns="columns" @change="onChange"
    /></van-popup>
    <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }"
      ><van-area
        :area-list="list"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @cancel="show1 = false"
        @confirm="onConfirm"
    /></van-popup>
  </div>
</template>

<script>
import areaList from "../modifyOrganization/area";
export default {
  data() {
    return {
      show: false,
      show1: false,
      type: "",
      address: "",
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      list: {},
      fileList: []
    };
  },
  methods: {
    onChange(picker, value, index) {
      console.log(value);
      this.type = value;
      this.show = false;
    },
    onConfirm(value) {
      console.log(value);
      let str = "";
      let arr = [];
      value.map(item => {
        arr.push(item.name);
        str = arr.join("  ");
      });
      this.address = str;
      this.show1 = false;
    }
  },
  created() {
    this.list = areaList;
  }
};
</script>

<style lang="scss" scoped>
.page_modifyOrganization {
  height: 100%;
  overflow: hidden;
  background: #fafafa;
  .modifyOrganizationTitle {
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.125rem;
    background: #fff;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 1.25rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .organInfo {
    margin-top: 1rem;
    padding: 0 2rem;
    background: #fff;
    .van-cell {
      padding: 10px 0;
      font-size: 1rem;
    }
    .organInfoOne {
      height: 4.25rem;
      border-bottom: 1px solid #e8e8e8;
      p {
        padding-top: 0.625rem;
      }
    }
    .organInfoTwo {
      display: flex;
      justify-content: space-between;
      height: 4.25rem;
      border-bottom: 1px solid #e8e8e8;
      p {
        padding-top: 0.625rem;
      }
      .arrow {
        line-height: 4.25rem;
      }
    }
    .organInfoThree {
      height: 8.75rem;
      p {
        padding: 0.625rem 0;
      }
    }
  }
}
</style>
