<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="申请调解" left-arrow />

    <view class="line"></view>
    <van-notice-bar color="#FF7F34" background="#FEF9F5" text="* 属于必填项" />

    <view class="form-list">
      <view class="form-body" v-for="(item, index) in pickerList" :key="index">
        <view class="flex flex-v-center flex-between">
          <view class="label">
            <text>{{ item.title }}</text>
            <text class="red">*</text>
          </view>
          <view class="label-value flex flex-v-center">
            <picker @change="bindPickerChange" :data-name="item.name"
              :range-key="item.title === '调解类型' ? 'label' : 'name'"
              :value="item.title == '调解类型' ? form.caseType : form.mediatorId" :range="item.typeList">
              <view class="picker">
                <text class="card-placeholder" v-if="item.title === '调解类型'" style="color: #000000">
                  <text v-if="form.caseType !== ''">{{ item.typeList[caseType].label }}</text>
                  <text style="color: #999999" v-if="form.caseType === ''">请选择调解类型</text>
                </text>
                <!-- <text class="card-placeholder" wx:if="{{item.title === '调解员'}}" style="color: #000000;">
              <text wx:if="{{form.mediatorId !== ''}}">{{item.typeList[mediatorId].name}}</text>
              <text style="color:#999999" wx:if="{{form.mediatorId === ''}}">请选择调解员</text>
            </text> -->
              </view>
            </picker>
            <image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
          </view>
        </view>
      </view>

      <view class="form-body">
        <view class="label">
          <text>标题</text>
          <text class="red">*</text>
        </view>
        <textarea class="textarea-class" @input="inputeidt" maxlength="30" :value="form.title" data-name="title"
          placeholder="请输入，不超过30字" focus auto-height></textarea>
      </view>

      <view class="form-body">
        <view class="label">
          <text>姓名</text>
          <text class="red">*</text>
        </view>
        <input class="flex1 textarea-class" @input="inputeidt" v-model="form.name" type="text" data-name="name"
          placeholder="请输入姓名" />
      </view>

      <view class="form-body">
        <view class="flex flex-col">
          <view class="label">
            <text>所在村/社区</text>
            <text class="red">*</text>
          </view>
          <view class="label-value textarea-class picker flex flex-v-center flex-between">
            <view :class="currentValue ? '' : 'picker-text'" @tap="onOpenVisible">{{ currentTile }}</view>
            <image @tap="onOpenVisible" class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
          </view>
        </view>
      </view>

      <view class="form-body">
        <view class="label">
          <text>描述</text>
          <text class="red">*</text>
        </view>
        <textarea class="textarea-class" @input="inputeidt" maxlength="200" data-name="descInfo"
          placeholder="请输入，不超过200字" :value="form.descInfo"></textarea>
        <view class="form-image">
          <van-uploader :after-read="afterRead" :before-delete="beforeDelete" v-model="fileList" :deletable="true"
            max-count="9">
            <image class="camera" src="/static/images/icon9.png"></image>
          </van-uploader>
        </view>
        <view class="form-msg">附件不超过9个，每个大小不超过1M</view>
      </view>

      <view class="form-body">
        <view class="label">当前位置</view>
        <view class="location-info flex flex-v-center flex-between">
          <input style="width: 100%" :value="form.address" placeholder="请选择地址" auto-height disabled />
          <image class="location" src="/static/packages/people/images/icon7.png"></image>
        </view>
      </view>
      <view class="form-treaty">
        <van-checkbox label-disabled checked-color="red" v-model="checked" shape="square" use-icon-slot @change="onCheckbox">
          <!-- <image class="ic-check"
            :src="checked ? '/static/images/ic-radio1.png' : '/static/images/ic-radio.png'" /> -->
          <view class="checbox-text flex">
            <!-- <text>我已阅读《</text>
        <navigator class="jump-to">申请党员帮办</navigator>
        <text>》，承诺材料真实性</text> -->
            本人承诺以上信息真实有效
          </view>
        </van-checkbox>
      </view>
      <view class="form-button">
        <van-button v-if="!checked" disabled block color="#C1C1C1">发布信息</van-button>
        <van-button @click="submit" v-if="checked" block color="#FE3B53">发布信息</van-button>
      </view>
    </view>

    <van-popup v-model:show="isVisible" round position="bottom">
      <van-cascader
        v-model="currentValue"
        title="请选择所在地区"
        :options="optionData"
        :field-names="defaultFieldNames"
        @finish="onCloseVisible"
        @close="onCloseVisible"
        @change="onChangeVisible"
      />
    </van-popup>

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

<script>
  // const app = getApp();
  // const {
  //   peopleApi,
  //   publicApi
  // } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  export default {
    components: {},
    data() {
      return {
        pickerList: [{
            id: 1,
            title: '调解类型',
            name: 'caseType',
            typeList: []
          }
          // {
          //   id: 2, title: '调解员', name: 'mediatorId',
          //   typeList: []
          // }
        ],

        option: {},
        fileList: [],
        appealEnclosure: [],
        caseType: '',

        // mediatorId: '',
        form: {
          // address: app.globalData.config.locationInfo.name,
          caseType: '',
          descInfo: '',

          // mediatorId: '',
          title: '',

          userId: uni.getStorageSync('userInfoData').userId,
          name: '',
          mediatorId: ''
        },

        checked: true,

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

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

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

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

        attributeName: '',
        name: '',
        type: '',
        typeList: ''
      };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(option) {
      this.option = option
      this.getTypeList();
      this.deptTreeApi();
      // await this.getmediatorPageList();
    },
    methods: {
      /**
       * 接口
       */
      async deptTreeApi() {
        // 获取所在村/社区
        const res = await publicApi.deptTreeApi();
        if (res.data && res.data.length) {
          this.optionData = res.data
        }
      },

      //  获取地址
      async handelLocation() {
        const data = await uni.chooseLocation();
        this.form = {
          ...this.form,
          address: data.address
        }
      },

      beforeDelete(file, dateil) {
      this.appealEnclosure.splice(dateil.index, 1);
      this.fileList.splice(dateil.index, 1)
      },

      // 输入框输入事件
      inputeidt(e) {
        const {
          target: dataset,
          detail
        } = e;
        this.form[`${dataset.dataset.name}`] = detail.value
        console.log(this.form);
      },

      onOpenVisible() {
        this.isVisible = true
      },

      onCloseVisible() {
        this.isVisible = false
      },

      onChangeVisible(e) {
        this.currentTile = e.selectedOptions[e.tabIndex].name
        this.currentValue =e.value
      },

      // 下拉选择事件
      bindPickerChange: function(e) {
        const {
          name
        } = e.currentTarget.dataset;
        let value = e.detail.value;
        let type = this.form.name;
        let typename = ''
        if (name === 'caseType') {
          typename = this.pickerList[0].typeList[value].value;
          console.log(typename)
        } else {
          typename = this.pickerList[1].typeList[value].id;
        }
        this.caseType = value
        this.form.caseType = value
        this[name] = value
        this[type] = typename
      },

      // 勾选协议
      onCheckbox(event) {
        this.checked = event
      },

      async afterRead(event) {
      const {
        file
      } = event;

      const res = await getApp().globalData.upload({ file });
      if (res.code !== 0) {
        uni.showToast({
          title: '上传图片失败',
          icon: 'none'
        });
        return false;
      }
      this.appealEnclosure.push(res.data);
    },
      // 字典类型
      async getTypeList() {
        const res = await publicApi.getDictDataApi({
          dictType: 'people_cases_type'
        });
        if (res.data) {
          this.pickerList[0].typeList = res.data.list
        }
      },

      // 人民调解员
      async getmediatorPageList() {
        const res = await peopleApi.mediatorPageApi({
          name: this.name
        });
        if (res.data) {
          this.pickerList[0].typeList = res.data.list
        }
      },

      // 提交form表单
      async submit() {
        const {
          caseType,
          descInfo,
          title,
          address,
          name
        } = this.form;
        const {
          mediatorId
        } = this.option;
        let params = {
          caseType,
          title,
          descInfo,
          pics: this.appealEnclosure,
          address: address,
          status: '1',
          userId: this.form.userId,
          name,
          orgId: this.currentValue
        };
        // 加入如果是从调解员详情添加过来自动绑定
        if (mediatorId) {
          params.mediatorId = mediatorId;
        }
        caseType === '' || title === '' || params.orgId === '';
        if (descInfo === '') {
          uni.showToast({
            title: caseType === '' ?
              '请选择调解类型' : title === '' ?
              '请输入标题' : descInfo === '' ?
              '请输入描述' : params.orgId === '' ?
              '请选择所在村/社区' : '带*属于必填项',
            icon: 'none'
          });
          return false;
        }
        const res = await peopleApi.createCasesApi(params);
        if (res.code !== 0) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          return;
        }
        uni.showToast({
          title: '申请成功',
          icon: 'none'
        });
        uni.redirectTo({
          url: '/packages/people/pages/mediate-my-list/mediate-my-list'
        });
      }
    }
  };
</script>
<style lang="less">
  page {
    background-color: #fff;
  }

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

  .red {
    color: red;
  }

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

  .line {
    width: 100%;
    height: 36rpx;
  }

  .form-list {
    width: 100%;
    height: 100%;
  }

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

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

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

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

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

    .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-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 {
    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;
  }

  .right {
    text-align: right;
  }
</style>