<template>
  <view class="">
    <custom-nav-bar position="fixed" color="black" left-text="党组织注册" left-arrow />

    <view class="form-list">
      <view class="form-body form-col">
        <view class="label">
          <text>单位名称</text>
          <text v-if="!disabled" class="red">*</text>
        </view>
        <input v-if="!disabled" class="flex1 textarea-class" @input="headleInput" :value="form.workName" type="text"
          data-name="workName" placeholder="请输入单位名称" />

        <block v-else>{{form.workName}}</block>
      </view>

      <view class="form-body">
        <view class="flex flex-v-center flex-between">
          <view class="label">
            <text>支部名称</text>
            <text v-if="!disabled" class="red">*</text>
          </view>
          <view class="label-value flex flex-v-center">
            <block v-if="!disabled">
              <picker @change="bindPickerChange" range-key="label" data-list="educationList" data-name="branchName"
                :value="form.branchName" :range="educationList">
                <view style="color: #000000" v-if="form.branchName !== ''">{{ form.branchName }}
                </view>
                <view style="color: #999" v-if="form.branchName === ''">请选择支部名称</view>
              </picker>
              <image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
            </block>
            <block v-else>
              <view style="color: #000000" v-if="educationList.length !== 0">{{ form.branchName }}
              </view>
            </block>
          </view>
        </view>
      </view>

      <view class="form-body form-col">
        <view class="label">
          <text>单位地址</text>
          <text v-if="!disabled" class="red">*</text>
        </view>
        <input v-if="!disabled" class="flex1 textarea-class" @input="headleInput" :value="form.workAddress" type="text"
          data-name="workAddress" placeholder="请输入单位地址" />

        <block v-else>
          {{form.workAddress}}
        </block>
      </view>

      <view class="form-body form-col">
        <view class="label">
          <text>支部书记</text>
          <text v-if="!disabled" class="red">*</text>
        </view>
        <input v-if="!disabled" class="flex1 textarea-class" @input="headleInput" :value="form.secretaryName"
          type="text" data-name="secretaryName" placeholder="请输入支部书记" />

        <block v-else>
          {{form.secretaryName}}
        </block>
      </view>

      <view class="form-body form-col">
        <view class="label">
          <text>联系方式</text>
          <text v-if="!disabled" class="red">*</text>
        </view>
        <input v-if="!disabled" class="flex1 textarea-class" @input="headleInput" :value="form.secretaryMobile"
          type="text" data-name="secretaryMobile" placeholder="请输入联系方式" />
        <block v-else>
          {{form.secretaryMobile}}
        </block>
      </view>

      <view class="form-body form-col">
        <view class="label">
          <text>党建联系人</text>
          <text v-if="!disabled" class="red">*</text>
        </view>
        <input v-if="!disabled" class="flex1 textarea-class" @input="headleInput" :value="form.partyBuildName"
          type="text" data-name="partyBuildName" placeholder="请输入党建联系人" />
        <block v-else>
          {{form.partyBuildName}}
        </block>
      </view>

      <view class="form-body form-col">
        <view class="label">
          <text>联系方式</text>
          <text v-if="!disabled" class="red">*</text>
        </view>
        <input v-if="!disabled" class="flex1 textarea-class" @input="headleInput" :value="form.partyBuildMobile"
          type="text" data-name="partyBuildMobile" placeholder="请输入联系方式" />
        <block v-else>
          {{form.partyBuildMobile}}
        </block>
      </view>

      <view class="form-body">
        <view class="flex flex-v-center flex-between">
          <view class="label">
            <text>结对共建社区</text>
            <text v-if="!disabled" class="red">*</text>
          </view>
          <view class="label-value flex flex-v-center">
            <block v-if="!disabled">
              <view :class="form.communityId ? 'picker-line' : 'picker-text'" data-name="结对共建社区" @tap="onOpenVisible">
                {{ form.communityName }}
              </view>
              <image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
            </block>
            <block v-else>
              {{form.communityName}}
            </block>
          </view>
        </view>
      </view>

      <view class="form-body">
        <view class="flex flex-v-center flex-between">
          <view class="label">
            <text>结对共建小区</text>
            <text v-if="!disabled" class="red">*</text>
          </view>
          <view class="label-value flex flex-v-center">
            <block v-if="!disabled">
              <view :class="form.villageId ? 'picker-line' : 'picker-text'" data-name="结对共建小区" @tap="onOpenVisible">
                {{ form.villageName }}
              </view>
              <image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
            </block>
            <block v-else>
              {{form.villageName}}
            </block>
          </view>
        </view>
      </view>

      <view class="form-body form-col">
        <view class="label">
          <text>支部党员人数</text>
          <text v-if="!disabled" class="red">*</text>
        </view>
        <input class="flex1 textarea-class" v-if="!disabled" @input="headleInput" :value="form.partyMemberNum"
          type="text" data-name="partyMemberNum" placeholder="请输入支部党员人数" />
        <block v-else>
          {{form.partyMemberNum}}
        </block>
      </view>

      <view class="form-button">
        <block v-if="!disabled">
          <block v-if="options.userid === undefined">
            <van-button v-if="checked" @click="handSubmit" data-name="新增" block color="#FE3B53">提交</van-button>
            <van-button v-else block color="#D9E2EE">提交</van-button>
          </block>
          <block v-else>
            <van-button @click="handSubmit" data-name="修改" block color="#FE3B53">提交</van-button>
          </block>
        </block>
        <block v-else>
          <van-button @click="headerEite" block color="#FE3B53">编辑</van-button>
        </block>
      </view>

    </view>

    <van-popup v-model:show="isVisible" round position="bottom">
      <van-cascader v-model="currentValue" :title="cascaderTitle" :options="optionData" :field-names="defaultFieldNames"
        @finish="onCloseVisible" @close="onCloseVisible" @change="onChangeVisible" />
    </van-popup>

  </view>
</template>

<script>
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import utils from '@/utils/util'
  import util from '@/utils/util.map'
  import {
    Form
  } from 'vant';
  export default {
    data() {
      return {
        options: {},
        disabled: false,
        form: {
          workName: '',
          branchName: '',
          workAddress: '',
          secretaryName: '',
          secretaryMobile: '',
          partyBuildName: '',
          partyBuildMobile: '',
          communityId: '',
          communityName: '请选择结对共建社区',
          villageId: '',
          villageName: '请选择结对共建小区',
          partyMemberNum: '',
        },
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 5, 1),
        educationList: [],
        checked: false,

        // 级连选择器数据 start
        cascaderTitle: '',
        isVisible: false,
        FiledVisible: true,

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

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

        // 选择后的id
        // 级联选择默认显示字段
        // 级连选择器数据 end
        defaultFieldNames: {
          text: 'name',
          value: 'id',
          children: 'children'
        },
      }
    },
    onLoad(options) {
      this.options = options

      this.getTypeApi('people_party_organization_branch', 'educationList');
      this.deptTreeApi();

      if (options.userid !== undefined) {
        this.disabled = true
        this.partyOrganizationInfo();
      }

    },
    methods: {
      async partyOrganizationInfo() {
        const res = await peopleApi.partyOrganizationInfoApi({});
        if (res.data) {
          this.form = res.data
        }
      },
      async deptTreeApi() {
        // 获取所在村/社区
        const res = await publicApi.deptTreeApi();
        if (res.data && res.data.length) {
          this.optionData = res.data
        }
      },
      //  获取群众点单字典
      async getTypeApi(dictType, list) {
        const res = await publicApi.getDictDataApi({
          dictType: dictType,
          pageNo: 1,
          pageSize: 100,
        });
        if (res.code === 0) {
          this[list] = res.data.list
        }
      },
      bindPickerChange(e) {
        const {
          name,
          list
        } = e.target.dataset;
        if (name === 'branchName') {
          this.form[name] = this[list][e.detail.value].label
        } else {
          this.form[name] = e.detail.value
        }

      },
      headleInput(event) {
        const {
          name
        } = event.target.dataset;
        this.form[name] = event.detail.value

        if (name === 'partyMemberNum') {
          this.checked = true
        }
      },
      onOpenVisible(e) {
        this.isVisible = true
        this.cascaderTitle = e.currentTarget.dataset.name
      },

      onCloseVisible() {
        this.isVisible = false
      },

      onChangeVisible(e) {
        if (this.cascaderTitle === '结对共建社区') {
          this.form.communityName = e.selectedOptions[e.tabIndex].name
          this.form.communityId = e.value
        } else {
          this.form.villageName = e.selectedOptions[e.tabIndex].name
          this.form.villageId = e.value
        }
      },
      handSubmit(e) {
        // 校验必填字段
        const formKey = Object.keys(utils.filterParams(this.form));
        console.log(formKey)
        console.log(this.form)
        const required = [
          'workName',
          'branchName',
          'workAddress',
          'secretaryName',
          'secretaryMobile',
          'partyBuildName',
          'partyBuildMobile',
          'partyMemberNum',
          'communityId',
          'villageId',
        ];
        const isRequired = required.every((e) => formKey.includes(e));
        if (!isRequired) {
          return wx.showToast({
            title: '星号为必填！',
            icon: 'none',
          });
        }

        const {
          name
        } = e.target.dataset;
        if (name === '修改') {
          console.log('修改');
          this.addSubmitUpdate();
        } else {
          this.addSubmit();
        }
      },
      async addSubmitUpdate() {
        const res = await peopleApi.partyOrganizationUpdateApi(this.form);
        if (res.data) {
          wx.showToast({
            title: '修改成功',
            icon: 'none',
          });

          let time = setTimeout(() => {
            wx.navigateBack({
              delta: 1,
            });
            clearTimeout(time);
          }, 1500);
        } else {
          wx.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      },

      async addSubmit() {
        const res = await peopleApi.partyOrganizationCreateApi(this.form);
        if (res.data) {
          wx.showToast({
            title: '注册成功',
            icon: 'none',
          });

          let time = setTimeout(() => {
            wx.navigateBack({
              delta: 1,
            });
            clearTimeout(time);
          }, 1500);
        } else {
          wx.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      },
      headerEite() {
        this.disabled = false
      },
    }
  }
</script>

<style lang="less" scoped>
  .form-list {
    width: 100%;
  }

  .form-body {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    padding: 40rpx 40rpx 38rpx;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: 678rpx;
      height: 1px;
      background-color: #EFEFEF;
    }

    .label {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }

    .label-value {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      line-height: 32rpx;

      .ic-xia {
        margin-left: 27rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }

    .picker {
      margin-top: 24rpx;
    }

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

    .picker-line {
      flex: 1;
    }

    .textarea-class {
      margin-top: 26rpx;
      width: 100%;
      font-size: 32rpx;
      font-weight: 400;
    }

    .form-msg {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      line-height: 26rpx;
      margin-top: 28rpx;
    }

    .location {
      width: 32rpx;
      height: 32rpx;
    }

    .location-info {
      margin-top: 26rpx;

      input {
        font-size: 32rpx;
        font-weight: 400;
      }
    }
  }

  .form-col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;

    .textarea-class {
      margin-top: 0;
    }

    .card-placeholder {
      font-size: 32rpx;
      font-weight: 400;
      color: #000000;
    }
  }

  .form-location {
    padding: 20rpx 35rpx;
    border-radius: 16rpx;
  }

  .form-treaty {
    padding: 83rpx 40rpx 32rpx;

    .ic-check {
      width: 32rpx;
      height: 32rpx;
    }

    .checbox-text {
      font-size: 28rpx;
      font-weight: 400;
      color: #000000;
      line-height: 28rpx;

      .jump-to {
        color: var(--item-dominant-color);
      }
    }
  }

  .form-button {
    margin-top: 34rpx;
    padding: 25rpx 36rpx;
  }

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

  .form-button-body-select {
    background: var(--item-dominant-color);
  }

  .form-image {
    margin: 20rpx 0rpx 20rpx 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .form-image>view {
    width: 31.3%;
    position: relative;
    margin-right: 13.5rpx;
  }

  .form-image>view>image:nth-child(1) {
    width: 100%;
    height: 200rpx;
    border-radius: 10rpx;
  }

  .form-image>view>image:nth-child(2) {
    position: absolute;
    top: -0rpx;
    right: 0rpx;
    width: 40rpx;
    height: 40rpx;
  }

  .camera {
    width: 160rpx;
    height: 160rpx;
  }

  .pd-left {
    text-align: left;
    padding-left: 35px;
  }

  .img-icon {
    height: 20px;
  }
</style>