<!-- 报事上报 -->
<template>
  <scroll-view class="xj-page" scroll-y="true">
    <image src="/static/img/bsorbxBac.png" class="contentImg"></image>
    <view class="xjTitle">填写信息</view>
    <view class="xjTips">请您填写相关问题</view>
    <view class="conItem">
      <u-form labelPosition="left">

        <u-form-item labelAlign="right" labelWidth="100px" label="乐业社区" prop="sex" borderBottom
          @click="lysqShow = true" required>
          <u--input v-model="form.apartmentName" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item labelAlign="right" labelWidth="100px" label="巡检问题类型" borderBottom
          @click="wtlxShow = true" required>
          <u--input v-model="form.questionName" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item labelAlign="right" labelWidth="100px" label="标题内容" borderBottom required>
          <u--textarea v-model="form.title" placeholder="请输入内容" count maxlength="500"></u--textarea>
        </u-form-item>

        <u-form-item labelAlign="right" labelWidth="100px" label="问题描述" borderBottom required>
          <u--textarea v-model="form.content" placeholder="请输入内容" count maxlength="500"></u--textarea>
        </u-form-item>
        <u-form-item labelAlign="right" labelWidth="120px" label="上传图片/视频" borderBottom>
          <u-upload
            v-model="fileList"
            :max-count="10"
            :multiple="true"
            :preview-full-image="true"
            :deletable="true"
            :show-upload-list="true"
            :fileList="fileList"
            accept="all"
             @afterRead="afterRead"
            @delete="onDelete"
              :maxSize="10 * 1024 * 1024"
        @oversize="oversize"
          >
            <view class="custom-upload-btn">
              <view class="icon-box">
                <image class="camera-icon" src="/static/img/camera-icon.png" mode="aspectFill"></image>
              </view>
              <view class="upload-tips">点击上传</view>
            </view>
          </u-upload>
        </u-form-item>
      </u-form>
    </view>

    <view class="conItem" style="margin-top: 40rpx;">
      <u--form labelPosition="left">
        <u-form-item labelAlign="right" labelWidth="100px" label="巡检人姓名" borderBottom required>
          <u--input v-model="form.inspector" border="none"></u--input>
        </u-form-item>
        <u-form-item labelAlign="right" labelWidth="100px" label="巡检人电话" borderBottom required>
          <u--input v-model="form.inspectorPhone" border="none"></u--input>
        </u-form-item>
      </u--form>
    </view>

    <view class="btn" @click="handleBtn">提交</view>

    <u-action-sheet :show="lysqShow" :actions="apartmentList" title="请选择乐业社区" @close="lysqShow = false" @select="handleTreeSelect">
    </u-action-sheet>
    <u-action-sheet :show="wtlxShow" :actions="questionTypeList" title="请选择问题类型" @close="wtlxShow = false" @select="handleQuestionSelect">
    </u-action-sheet>
  </scroll-view>
</template>

<script>
import {
  queryDeptDropdownList,
} from "@/common/rec";
import { getdeptList,addInspection } from '@/common/api';
import { uploadImage } from '@/pages/api.js';
import { getDicts } from "@/common/system/dict/data";

export default {
  data () {
    return {
      wtlxShow: false,
      lysqShow: false,
      deptOptions: [],
      questionTypeList: [],
      form: {
        apartmentId: '',
        apartmentName:'',
        questionType: '',
        questionName: '',
        title: '',
        content: '',
        inspector: '',
        inspectorPhone: '',
        inspectionTime: '',
        imageList: []
      },
      rules:{
        sex:[
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      radio: '',
      switchVal: false,
      fileList: [],
      apartmentList:[]
    }
  },
  onLoad () {
    this.getTree()
    this.getDictType()
  },
  methods: {
    async afterRead(event) {
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await uploadImage(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];

        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.url,
          })
        );
        fileListLen++;
      }
      var arry = [];
      this.fileList.filter((v, i) => {
        arry.push({
          name: v.name || '',
          format: v.type,
          url:v.url
        });
      });
      this.form.imageList = arry
    },
    onDelete(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
      var arry = [];
      this.fileList.filter((v, i) => {
        arry.push({
          name: v.name || '',
          format: v.type,
          url:v.url
        });
      });
      this.form.imageList = arry
    },
     //图片超过大小时取消上传
    oversize(e) {
      this.$u.toast("请传10MB以内大小的图片/视频！");
      return false;
    },
    getDictType(){
      getDicts('inspection_question_type').then((res) => {
        this.questionTypeList = res.data.map(item=>{
          item.name = item.dictLabel
          return item
        })
      });
    },

    getArea(arr) {
      let newArr = [];
      if (arr != undefined && arr.length > 0) {
        newArr = arr.map(item => {
          if (item.children != undefined && item.children.length > 0) {
            this.getArea(item.children);
          }
          return item;
        });
      }
      return newArr;
    },
    getCommunity(arr) {
      if (arr != undefined && arr.length > 0) {
        arr.forEach(async (item) => {
          let communityList = await this.getListByParentId("1", item.deptId);
          this.apartmentList = [...this.apartmentList,...communityList]
          if (item.children != undefined && item.children.length > 0) {
            this.getCommunity(item.children);
          }
        });
      }
    },
    getTree(){
      getdeptList().then((res) => {
        this.deptOptions = this.handleTree(
          res.data,
          "deptId",
          "parentId",
          "children",
          2
        );
        const areaLst = this.getArea(this.deptOptions[0].children)
        this.getCommunity(areaLst)
      });
    },
    // 三级联动通用接口
    async getListByParentId(type, id) {
      return new Promise((resolve, reject) => {
        queryDeptDropdownList({ type, id }).then((res) => {
          resolve(res.data);
        });
      });
    },
    handleBtn () {
      console.log(this.form);
      if(!this.form.apartmentId){
        uni.showToast({
          icon: 'none',
          title: '请选择乐业社区'
        })
        return
      } else if(!this.form.questionType){
        uni.showToast({
          icon: 'none',
          title: '巡检问题类型'
        })
        return
      } else if(!this.form.title){
        uni.showToast({
          icon: 'none',
          title: '请输入标题内容'
        })
        return
      } else if(!this.form.content){
        uni.showToast({
          icon: 'none',
          title: '请输入问题描述'
        })
        return
      } else if(!this.form.inspector){
        uni.showToast({
          icon: 'none',
          title: '请输入巡检人姓名'
        })
        return
      } else if(!this.form.inspectorPhone){
        uni.showToast({
          icon: 'none',
          title: '请输入巡检人电话'
        })
        return
      }
      // console.log(this.form);
      let parmas = JSON.parse(JSON.stringify(this.form))
      delete parmas.apartmentName
      delete parmas.questionName
      addInspection(parmas).then(res=>{
        if(res.code == 200){
          uni.showToast({
            icon: 'success',
            title: '提交成功!',
            success:()=>{
              this.fileList = []
              this.form = {
                apartmentId: '',
                apartmentName:'',
                questionType: '',
                questionName: '',
                title: '',
                content: '',
                inspector: '',
                inspectorPhone: '',
                inspectionTime: '',
                imageList: []
              }
              setTimeout(() => {
               uni.switchTab({
                 url: '/pages/tabBar/work/index'
              });
             },2000)
            },

          })
        }else{
          uni.showToast({
						title: res.msg || "提交失败",
						icon: "none",
					});
        }
      })
    },
    handleTreeSelect(e) {
      console.log(e);
      console.log(this.deptOptions);
      
      this.form.apartmentName = e.name
      this.form.apartmentId = this.deptOptions.find(item=>item.deptName === e.name).deptId
    },
    handleQuestionSelect(e){
      this.form.questionName = e.dictLabel
      this.form.questionType = e.dictValue
    }
  }
}
</script>

<style lang="scss" scoped>
.xj-page {
  width: 100%;
  height: 100vh;
  padding-bottom: 50rpx;
  box-sizing: border-box;
}

.contentImg {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  width: 100%;
  height: 280rpx;
  z-index: -1;
}

.xjTitle {
  width: 100%;
  color: rgba(16, 16, 16, 1);
  font-size: 38rpx;
  font-weight: bold;
  margin-left: 30rpx;
  margin-top: 40rpx;
}

.xjTips {
  width: 100%;
  color: rgba(102, 102, 102, 1);
  font-size: 26rpx;
  margin-left: 30rpx;
  margin-top: 10rpx;
}

.conItem {
  width: calc(100% - 40rpx);
  border-radius: 10rpx;
  margin-left: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
  margin-top: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.btn {
  width: 414rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 600rpx;
  background: linear-gradient(86.25deg, rgba(13, 198, 198, 1) 3.03%, rgba(19, 194, 194, 1) 3.03%, rgba(70, 219, 213, 1) 96.43%);
  color: rgba(255, 255, 255, 1);
  font-size: 34rpx;
  text-align: center;
  margin: auto;
  margin-top: 40rpx;
}

.custom-upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #fafafa;
  border: 2rpx solid #f0f0f0;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20rpx 16rpx 0 0;
}
.icon-box{
  width: 60rpx;
  height: 60rpx;
  background: #ceeced;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-icon{
  width: 36rpx;
  height: 36rpx;
}
.upload-tips {
  color: #bbb;
  font-size: 24rpx;
  margin-top: 8rpx;
}
.u-upload__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20rpx;
}
.u-upload__preview {
  border-radius: 16rpx;
  overflow: hidden;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
}
</style>

<style lang="scss">
.xj-page{
  .u-form-item__body__left__content__required{
    font-size: 24rpx !important;
  }
}

</style>
