<template>
  <div class="repair-box">
    <div class="repair-content fixed-page-content">
      <div class="white-box page-1">
        <div class="page-1-head" @click="goNavigator('repairRecord')">
          <i class="iconfont icon-daichulihetong"></i>
          <span>上报记录</span>
        </div>
      </div>
      <div class="white-box page-2">
        <div class="cell-item">
          <p class="label">当前企业</p>
          <p class="tit">{{ companyName }}</p>
        </div>
        <!-- <div class="cell-item">
          <p class="label required">您是想</p>
          <div class="tit">
            <van-radio-group v-model="form.type">
              <van-radio name="1" checked-color="#976CEB">报事</van-radio>
              <van-radio name="2" checked-color="#976CEB">咨询</van-radio>
            </van-radio-group>
          </div>
        </div> -->
        <div class="block-cell-item">
          <p class="label">快捷选择</p>
          <div class="tit">
            <ul class="custom-select-list">
              <li
                v-for="item in quickList"
                v-if="item.value !== ''"
                :key="item.value"
                :class="{
                  active: quickSleced.value && item.value === quickSleced.value,
                }"
                @click="quickSelect(item)"
              >
                {{ item.label }}
              </li>
            </ul>
            <van-field
              v-model="form.description"
              rows="4"
              autosize
              type="textarea"
              maxlength="100"
              placeholder="输入文字进行政企服务描述"
              show-word-limit
            >
            </van-field>
          </div>
        </div>
      </div>
      <div class="white-box page-3">
        <!-- <div class="cell-item">
          <p class="label required">位置</p>
          <div class="tit">
            <van-radio-group v-model="form.position">
              <van-radio
                :name="item.val"
                checked-color="#976CEB"
                v-for="item in positionList"
                :key="item.val"
                @change="changePosition(item.val)"
                >{{ item.lable }}</van-radio
              >
            </van-radio-group>
          </div>
        </div> -->
        <div class="block-cell-item">
          <p class="label">
            补充说明
            <span class="tips">（支持图片上传，最多6张）</span>
          </p>
          <div class="tit">
            <van-uploader
              :multiple="true"
              v-model="fileUrlList"
              :max-count="6"
              :after-read="afterRead"
              :before-delete="beforeDelete"
              accept="image/*"
            >
            </van-uploader>
          </div>
        </div>
        <div class="cell-item">
          <p class="label">*联系方式</p>
          <input
            type="text"
            v-model="form.contact"
            placeholder="请输入联系方式"
          />
        </div>
        <div class="cell-item">
          <p class="label">上报人</p>
          <p class="tit">{{ form.userId }}</p>
        </div>
      </div>
    </div>
    <div class="repair-bottom bottom-button">
      <button class="btn" @click="submit">提交</button>
    </div>
  </div>
</template>
<script>
import Base from "@/pages/base/base";
import { add } from "@/service/api_repair";
import { Toast } from "vant";
import auth from "@/service/auth";
import { upload } from "@/service/api_upload";
export default {
  data() {
    return {
      dc_key: ["QUICK_SELECTION"],
      reportTypeSleced: "1",
      quickSleced: {},
      quickList: [],
      positionSleced: "1",
      positionList: [
        {
          val: "1",
          lable: "室内",
        },
        {
          val: "2",
          lable: "公区",
        },
      ],
      fileUrlList: [],
      fileUrls: [],
      companyName: "",
      form: {
        groupId: "",
        companyId: "",
        type: "1",
        serviceType: "",
        description: "",
        position: "1",
        userId: auth.currUser().qymc + "-" + auth.currUser().lxdh,
        fileUrl: "",
        status: "unAcceptance",
      },
      entryForm: [],
    };
  },
  mixins: [Base],
  mounted() {
    this.initDict(this.dc_key).then((res) => {
      this.quickList = this.dc_data.QUICK_SELECTION;
    });
    console.log(auth.currUser());
    this.companyName = auth.currUser().qymc;
    this.form.companyName = auth.currUser().qymc;
    this.form.companyId = auth.currUser().id;
    // getCompanyById({ id: auth.currUser().id, type: '2,3' }).then(res => {
    //     this.form.companyId = res.data.id
    //     this.companyName = res.data.businessName
    // })
  },
  methods: {
    /**
     *
     */
    quickSelect(item) {
      if (this.quickSleced.value && this.quickSleced.value === item.value) {
        this.quickSleced = {};
      } else {
        this.quickSleced = item;
        // this.form.description = item.lable
        this.$set(this.form, "description", item.label);
      }
    },
    /**
     * 上传文件
     */
    async beforeDelete(file, detail) {
      this.entryForm.splice(detail.index, 1);
      Toast.loading({
        message: "删除中...",
        forbidClick: true,
        duration: 0,
      });
      Toast.clear();
    },
    afterRead(file) {
      Toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0,
      });
      if (file instanceof Array) {
        file.map((v) => {
          this.uploadImg(v);
        });
      } else {
        this.uploadImg(file);
      }
    },
    uploadImg(file) {
      const formParam = new FormData(); // 创建form对象
      formParam.append("file", file.file); // 通过append向form对象添加数据
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
          "MVVM-Key": String(new Date().getTime()),
          xx: "anything",
        }, // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      }; // 添加请求头
      return new Promise((resolve, reject) => {
        upload(formParam, config)
          .then((response) => {
            console.log(response);
            if (response.data) {
              this.entryForm.push(response.data[0]);
              Toast("上传成功");
              Toast.clear();
            } else {
              Toast("上传失败");
              Toast.clear();
            }
          })
          .catch((err, x) => {
            reject(err, x);
          });
      });
    },
    submit() {
      if (!this.form.contact || this.form.contact === "") {
        Toast("请填写联系方式");
        return;
      }
      if (this.quickSleced.value == null || this.quickSleced.value === "") {
        Toast("请选择服务类型");
        return;
      }

      this.form.groupId = auth.currUser().groupId; // 园区
      this.form.fileUrl = this.entryForm.join(",");
      this.form.serviceType = this.quickSleced.value;
      this.form.createdBy = auth.currUser().id;
      this.form.userId = auth.currUser().id + "-" + this.form.userId;
      add(this.form).then((res) => {
        Toast("填报成功");
        this.$router.push({
          path: "/repairRecord",
        });
      });
    },
    changePosition(val) {},
  },
};
</script>
<style lang="scss" scoped>
.repair-box {
  width: 100%;
  height: 100%;
  .page-1 {
    font-size: 30px;
    color: var(--violetColor2);
    padding: 30px;
    box-sizing: border-box;
    .page-1-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      i {
        font-size: 38px;
        margin-right: 10px;
      }
    }
  }
  .page-2 {
    .van-cell {
      padding: 20px;
      border-radius: 10px;
      background: $page-color-base;
      box-sizing: border-box;
      textarea {
        height: 60px;
      }
    }
  }
}
</style>
