<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">
        <view class="flex flex-v-center flex-between">
          <view class="label">
            <text>点单类型</text>
            <text class="red">*</text>
          </view>
          <view class="label-value flex flex-v-center">
            <picker @change="bindPickerChange" range-key="label" :value="form.type" :range="columns">
              <view style="color: #000000">{{ columns[form.type].label }}</view>
            </picker>
            <image class="ic-xia" src="/static/packages/people/images/ic-xia.png"></image>
          </view>
        </view>
      </view>

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

      <view class="form-body">
        <view class="label">
          <text>标题</text>
          <text class="red">*</text>
        </view>
        <textarea class="textarea-class" @input="headleInput" maxlength="100" :value="form.title" data-name="title"
          placeholder="请输入标题" auto-height></textarea>
      </view>

      <view class="form-body">
        <view class="label">
          <text>描述</text>
          <text class="red">*</text>
        </view>
        <textarea class="textarea-class" maxlength="500" @input="headleInput" data-name="content" placeholder="请输入内容"
          auto-height :value="form.content"></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 form-col">
        <view class="label">姓名</view>
        <input class="flex1 textarea-class" @input="headleInput" :value="form.name" type="text" data-name="name"
          placeholder="请输入姓名" />
      </view>

      <view class="form-body form-col">
        <view class="label">电话</view>
        <input class="flex1 textarea-class" type="number" @input="headleInput" :value="form.mobile" data-name="mobile"
          maxlength="12" placeholder="请输入电话" />
      </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" auto-height disabled placeholder="请选择地址" />
          <image class="location" src="/static/packages/people/images/icon7.png"></image>
        </view>
      </view>

      <view class="form-body form-col">
        <view class="label">同意对外展示我的诉求</view>
        <view class="label-value flex flex-v-center">
          <picker @change="bindPickerShowFlag" data-name="showFlag" range-key="label" :value="form.showFlag"
            :range="agreeList">
            <view style="color: #000000">{{ agreeList[form.showFlag].label }}</view>
          </picker>
          <image class="ic-xia" src="/static/packages/people/images/ic-xia.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" @click="submit" block color="#FE3B53">发布信息</van-button>
        <van-button v-else disabled block color="#C1C1C1">发布信息</van-button>
      </view>
    </view>

    <van-dialog :show="isDialog" closeOnClickOverlay @confirm="isDialog = false"
      message="群众点单是针对发展党员的程序流程基本要求、党的理论方针、支部周期性工作动态、党员志愿者帮扶及对上级支部的意见建议进行点单。不涉及以上点单类型的建议您拨打政务服务热线0354-7221890" />


    <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().globalData
console.log(app)
// const {
//   publicApi,
//   peopleApi
// } = app.globalData.api;
import * as peopleApi from '@/api/peopleApi';
import * as publicApi from '@/api/publicApi';
export default {
  components: {
  },
  data() {
    return {
      userInfoData: uni.getStorageSync('userInfoData'),

      // 上传图片所需
      appealEnclosure: [],

      fileList: [],

      form: {
        address: '',
        posX: '',
        posY: '',
        content: '',
        title: '',
        mobile: '',
        orgId: 0,
        name: null,
        type: 1,
        showFlag: 1
      },

      checked: false,

      columns: [{
        id: 1,
        type: '求助'
      },
      {
        id: 2,
        type: '帮助'
      }
      ],

      agreeList: [{
        label: '否',
        value: 0
      },
      {
        label: '是',
        value: 1
      }
      ],

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

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

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

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

      isDialog: false,
      name: '',
      label: ''
    };
  },
  onLoad() {
    // this.form.address = app.globalData.config.locationInfo.name;
    // this.form.posX = app.globalData.config.locationInfo.latitude;
    // this.form.posY = app.globalData.config.locationInfo.longitude;
    const userInfoData = uni.getStorageSync('userInfoData');
    console.log(userInfoData)
    this.isDialog = true
    this.form = this.form
    this.userInfoData = userInfoData
    this.deptTreeApi();
    this.getTypeApi();
  },
  methods: {
    //  获取群众点单字典
    async getTypeApi() {
      const res = await publicApi.getDictDataApi({
        dictType: 'people_seek_help_type',
        pageNo: 1,
        pageSize: 100
      });
      if (res.data) {
        this.columns = res.data.list
      }
    },

    /**
     * 接口
     */
    async deptTreeApi() {
      // 获取所在村/社区
      const res = await publicApi.deptTreeApi();
      if (res.data && res.data.length) {
        this.optionData = res.data
      }
    },

    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.fileList.push({url:res.data})
      this.appealEnclosure.push(res.data);
    },

    async submit() {
      const {
        address,
        content,
        mobile,
        name,
        posX,
        posY,
        status,
        title,
        type,
        showFlag
      } = this.form;
      const params = {
        address,
        content,
        mobile,
        name,
        posX,
        posY,
        status,
        title,
        type,
        showFlag,
        userId: this.userInfoData.userId,
        status: 1,
        images: [],
        orgId: this.currentValue
      };
      params.images = this.appealEnclosure
      params.type = this.columns[Number(params.type)].value;
      if (type === '' || title === '' || content === '' || !params.orgId) {
        let toastTitle = '';
        if (type === '') {
          toastTitle = '请选择信息类型';
        } else if (title === '') {
          toastTitle = '请输入标题';
        } else if (content === '') {
          toastTitle = '请输入描述';
        } else if (!params.orgId) {
          toastTitle = '请选择所在村/社区';
        } else {
          toastTitle = '带*属于必填项';
        }
        uni.showToast({
          title: toastTitle,
          icon: 'none'
        });
        return false;
      }
      const res = await peopleApi.seekHelpCreateApi(params);
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        return;
      }
      uni.showToast({
        title: '发布成功',
        icon: 'none'
      });

      wx.redirectTo({
        url: '/packages/people/pages/masses/masses',
      });
      // 返回上一页
      uni.navigateBack();
    },

    headleInput(event) {
      const {
        value
      } = event.detail;
      const {
        name
      } = event.currentTarget.dataset;
      this.form[name] = value;
      this.form = this.form
      this[name] = this[name]
    },
    beforeDelete(file, dateil) {
      this.appealEnclosure.splice(dateil.index, 1);
      this.fileList.splice(dateil.index, 1)
    },

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

    bindPickerShowFlag: function (e) {
      this.form.showFlag = Number(e.detail.value);
      this.form = this.form
    },

    onCheckbox(event) {
      this.checked = event
    },

    onOpenVisible() {
      this.isVisible = true
    },

    onCloseVisible() {
      this.isVisible = false
    },

    onChangeVisible(e) {
      this.currentTile = e.selectedOptions[e.tabIndex].name
      this.currentValue = e.value
    }
  }
};
</script>
<style lang="less">
page {
  background-color: #fff;
}

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

.red {
  color: red;
}

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

.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: #e1e1e1;
  }

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