<!-- 报事上报 -->
<template>
  <scroll-view class="content" 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" ref="item1">
          <u--input v-model="form.apartmentId" 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" ref="item1">
          <u--input v-model="form.questionType" 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 ref="item1">
          <u--textarea v-model="form.title" placeholder="请输入内容" count maxlength="500"></u--textarea>
        </u-form-item>

        <u-form-item labelAlign="right" labelWidth="100px" label="问题描述" borderBottom ref="item1">
          <u--textarea v-model="form.content" placeholder="请输入内容" count maxlength="500"></u--textarea>
        </u-form-item>
        <u-form-item labelAlign="right" labelWidth="120px" label="上传图片/视频" borderBottom ref="item1">
          <u-upload
            v-model="fileList"
            :max-count="10"
            :multiple="true"
            :preview-full-image="true"
            :deletable="true"
            :show-upload-list="true"
            :file-list="fileList"
            accept="image"
            @after-read="afterRead"
            @delete="onDelete"
          >
            <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 ref="item1">
          <u--input v-model="form.inspector" border="none"></u--input>
        </u-form-item>
        <u-form-item labelAlign="right" labelWidth="100px" label="巡检人电话" borderBottom ref="item1">
          <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="deptOptions" title="请选择乐业社区" @close="lysqShow = false" @select="handleTreeSelect">
    </u-action-sheet>
    <u-action-sheet :show="wtlxShow" :actions="actions1" title="请选择问题类型" @close="wtlxShow = false" @select="sexSelect">
    </u-action-sheet>
  </scroll-view>
</template>

<script>
import {
  queryDeptDropdownList,
} from "@/common/rec";
import { getdeptList,addInspection } from '@/common/api.js';
export default {
  data () {
    return {
      wtlxShow: false,
      lysqShow: false,
      deptOptions: [],
      actions1: [
        { name: '问题1', },
        { name: '问题2', },
      ],
      form: {
        apartmentId: '',
        questionType: '',
        title: '',
        content: '',
        inspector: '',
        inspectorPhone: '',
        inspectionTime: '',
        imageList: []
      },
      rules:{
        sex:[
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      radio: '',
      switchVal: false,
      fileList: [],
    }
  },
  onLoad () {
    this.getTree()
  },
  methods: {
    afterRead(event) {
      let files = Array.isArray(event) ? event : [event]
      this.fileList = this.fileList.concat(files)
    },
    onDelete(event) {
      this.fileList.splice(event.index, 1)
    },
    getTree(){
      getdeptList().then(async (res) => {
        this.deptOptions = this.handleTree(
          res.data,
          "deptId",
          "parentId",
          "children",
          2
        );
        // console.log(this.deptOptions[0].children);
        // console.log(this.deptOptions[0].children.map(item=> item.deptName));
        this.deptOptions = await this.getListByParentId("1", '156');
        console.log(this.deptOptions);
        
      });
    },
    // 三级联动通用接口
    async getListByParentId(type, id) {
      return new Promise((resolve, reject) => {
        queryDeptDropdownList({ type, id }).then((res) => {
          resolve(res.data);
        });
      });
    },
    handleBtn () {
      addInspection().then(res=>{
        console.log(res);
      })
    },
    handleTreeSelect (e) {
      console.log(e);
      
      // this.model1.userInfo.sex = e.name
      // this.$refs.uForm.validateField('userInfo.sex')
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  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>
