<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" left-text="党员认证" left-arrow />

    <!--  -->
    <view class="party-padd">
      <view class="flex flex-between">
        <text>所在党支部</text>
        <view class="font-right"><input type="text" data-name="partyBranch" @input="headleInput" placeholder="请输入" />
        </view>
      </view>
      <view class="slot"></view>
      <view>
        <view>现居社区/村</view>
        <view class="mt-26 flex flex-between">
          <view :class="currentValue ? '' : 'picker-text'" @tap="onOpenVisible">{{ currentTile }}</view>
          <van-icon name="arrow-down" color="red" size="16px" />
        </view>
        <view class="slot"></view>
      </view>
    </view>

    <view class="thenMesses-button">
      <button class="bth bth-select" @tap="appraise" :data-item="messsDetail">提交信息</button>
    </view>

    <wux-cascader :visible="isVisible" title="所在村/社区" :options="optionData" :safe-area-inset-bottom="true"
      :defaultFieldNames="defaultFieldNames" @close="onCloseVisible" @change="onChangeVisible" />
  </view>
</template>

<script>
  // import wuxCascader from '../../../../lib/wux-weapp/cascader/index';
  //index.js
  // const app = getApp();
  // const {
  //   consult,
  //   publicApi,
  //   myApi
  // } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
  import * as myApi from '@/api/myApi';
  import * as consult from '@/api/consult';
  export default {
    components: {
      // wuxCascader
    },
    data() {
      return {
        partyBranch: '',

        // 级连选择器数据 start
        isVisible: false,

        optionData: [],
        currentTile: '请选择',

        // 选择后的名称
        currentValue: null,

        // 选择后的id
        // 级联选择默认显示字段
        // 级连选择器数据 end
        defaultFieldNames: {
          label: 'name',
          value: 'id',
          children: 'children'
        },

        name: '',
        form: '',
        checked: '',
        messsDetail: ''
      };
    },
    onLoad() {
      this.deptTreeApi();
    },
    methods: {
      /**
       * 接口
       */
      async deptTreeApi() {
        // 获取所在村/社区
        const res = await publicApi.deptTreeApi();
        if (res.data && res.data.length) {
          this.setData({
            optionData: res.data
          });
        }
      },

      headleInput(event) {
        const {
          value
        } = event.detail;
        const {
          name
        } = event.currentTarget.dataset;
        this[name] = value;
        this.setData({
          ...this,
          [name]: this[name]
        });
      },

      bindPickerChange: function(e) {
        this.form.type = Number(e.detail.value);
        this.setData({
          form: this.form
        });
      },

      onCheckbox(event) {
        this.setData({
          checked: event.detail
        });
      },

      onOpenVisible() {
        this.setData({
          isVisible: true
        });
      },

      onCloseVisible() {
        this.setData({
          isVisible: false
        });
      },

      onChangeVisible(e) {
        const {
          options = [], value = []
        } = e.detail;
        this.setData({
          currentTile: options[options.length - 1].name,
          currentValue: value[value.length - 1]
        });
      },

      // 提交
      async appraise() {
        const {
          partyBranch,
          currentValue
        } = this;
        if (partyBranch === '') {
          uni.showToast({
            title: '所在党支部不能为空',
            icon: 'none'
          });
          return false;
        } else if (currentValue === null) {
          uni.showToast({
            title: '所在党支部不能为空',
            icon: 'none'
          });
          return false;
        }
        let params = {
          partyBranch,
          orgId: currentValue
        };
        const res = await myApi.myMemberAuthApi(params);
        if (res.data) {
          uni.showToast({
            title: '党员认证成功',
            icon: 'none'
          });
          setTimeout(function() {
            uni.switchTab({
              url: '/pages/my/my'
            });
          }, 1000);
        }
      }
    }
  };
</script>
<style lang="less">
  .party-padd {
    padding: 146rpx 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }

  .font-right {
    text-align: right;
    width: 70%;
  }

  .slot {
    margin: 40rpx 0 40rpx 0;
    height: 1px;
    background: #efefef;
  }

  .mt-26 {
    margin-top: 26rpx;
  }

  .thenMesses-button {
    padding: 25rpx 36rpx;
    position: fixed;
    width: 100%;
    bottom: 0;

    .bth {
      height: 80rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      background: #c1c1c1;
      border-radius: 8rpx;
    }

    .bth-select {
      background: var(--item-dominant-color);
    }
  }

  .picker-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #999999;
  }
</style>