<template>
  <div>
    <div class="cityDangerReportForm">
      <div class="row">
        <div class="row-label">
          <span class="isrequired">*</span>
          <span>隐患描述</span>
        </div>
        <div class="row-value">
          <van-field
            v-model="form.hiddenTroubleDescription"
            rows="4"
            autosize
            type="textarea"
            maxlength="800"
            placeholder="补充隐患的位置、隐患的大致情况、影响等信息"
            show-word-limit
          />
        </div>
      </div>
      <div class="row pdb0">
        <div class="row-label">
          <span>上传现场图片</span>
          <span class="tips">（最多9张）</span>
        </div>
        <div class="row-value">
          <van-uploader
            :max-count="9"
            v-model="entryForm"
            :after-read="afterRead"
          />
        </div>
      </div>
      <div class="row disflex pdb0 jcsb aligncenter">
        <div class="row-label mb0">
          <span class="isrequired">*</span>
          <span>联系人</span>
        </div>
        <div class="row-value width300px">
          <input type="text" placeholder="请填写" v-model="form.reportPeople" />
        </div>
      </div>
      <div class="row disflex pdb0 jcsb aligncenter">
        <div class="row-label mb0">
          <span class="isrequired">*</span>
          <span>联系电话</span>
        </div>
        <div class="row-value width300px">
          <input
            type="text"
            placeholder="请填写"
            placeholder-class="placestyle"
            v-model="form.reportPeopleTel"
          />
        </div>
      </div>
      <div class="row disflex pdb0 jcsb aligncenter">
        <div class="row-label mb0">
          <span class="isrequired">*</span>
          <span>所在区域</span>
        </div>
        <div class="row-value width300px" @click="show = true">
          <div style="display: flex; justify-content: end">
            <div style="color: rgba(179, 179, 179, 1)">
              {{ form.area ? form.areaName : "请选择区域" }}
            </div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <div class="row disflex pdb0 jcsb aligncenter">
        <div class="row-label mb0">
          <span class="isrequired">*</span>
          <span>隐患位置</span>
        </div>
        <div class="row-value width300px">
          <input
            type="text"
            v-model="form.hiddenTroubleAddress"
            placeholder="请填写隐患位置"
            placeholder-class="placestyle"
          />
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker
        title=""
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
        value-key="label"
      />
    </van-popup>
    <div class="btn" v-if="!$route.query.id">
      <van-button type="default" class="tj" @click="addForm">提交</van-button>
    </div>
  </div>
</template>

<script>
import { addForApp, getTroubleDetail } from "@/service/api_company.js";
import { upload } from "@/service/api_upload";
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      columns: [
        { label: "梁溪区", value: 320213, isSelected: false },
        { label: "锡山区", value: 320205, isSelected: false },
        { label: "惠山区", value: 320206, isSelected: false },
        { label: "滨湖区", value: 320211, isSelected: false },
        { label: "新吴区", value: 320214, isSelected: false },
        { label: "经开区", value: 320299, isSelected: false },
        { label: "江阴市", value: 320281, isSelected: false },
        { label: "宜兴市", value: 320282, isSelected: false },
      ],
      form: {
        createdBy: "10008611",
      },
      entryForm: [],
      fileList: [
        // { url: 'https://cloud-image', isImage: true },
      ],
    };
  },
  methods: {

    async addForm() {
      console.log(this.fileList);
      console.log(this.form);
      if (
        !this.form.hiddenTroubleDescription ||
        this.form.hiddenTroubleDescription.length == 0
      ) {
        return Toast("请填写隐患描述");
      }
      if (!this.form.reportPeople || this.form.reportPeople.length == 0) {
        return Toast("请填写联系人");
      }
      if (!this.form.reportPeopleTel || this.form.reportPeopleTel.length == 0) {
        return Toast("请填写联系电话");
      }
      if (!this.form.area || this.form.area.length == 0) {
        return Toast("请选择所在区域");
      }
      if (
        !this.form.hiddenTroubleAddress ||
        this.form.hiddenTroubleAddress.length == 0
      ) {
        return Toast("请填写隐患位置");
      }
      let form = { ...this.form };
      form.scenePhoto = JSON.stringify(this.entryForm);
      let data = await addForApp(form);
      console.log(data);
      if (data.code == 200) {
        Toast("提交成功");
        this.$router.go(-1);
      }
    },
    async getTroubleDetail() {
      let data = await getTroubleDetail({ id: this.$route.query.id });
      this.form = data;
      let index = this.columns.findIndex((e) => e.value == data.area);
      console.log(this.columns[index]);
      console.log(JSON.parse(data.scenePhoto));
      this.entryForm = JSON.parse(data.scenePhoto);
      this.form.areaName = this.columns[index].label;
    },
    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[this.entryForm.length - 1].url = response.data.msg;
              this.entryForm[this.entryForm.length - 1].content = null;
              this.entryForm[this.entryForm.length - 1].name =
                response.data.name;

              Toast("上传成功");
              Toast.clear();
              console.log(this.entryForm);
            } else {
              Toast("上传失败");
              Toast.clear();
            }
          })
          .catch((err, x) => {
            reject(err, x);
          });
      });
    },
    afterRead(file) {
      if (file instanceof Array) {
        file.map((v) => {
          this.uploadImg(v);
        });
      } else {
        this.uploadImg(file);
      }
    },
    onConfirm(e) {
      this.form.area = e.value;
      this.form.areaName = e.label;
      console.log(e);
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
  },
  mounted() {
        console.log('this.$route.params', this.$route.params, this.$route.params.openId)
        // alert('openId'+this.$route.params.openId)
        this.form.createdBy = this.$route.params.openId
    if (this.$route.query.id) {
      this.getTroubleDetail();
    }
  },
};
</script>

<style lang="scss">
.btn {
  display: flex;
  justify-content: space-around;
  margin-top: 5vh;
  button {
    width: 75vw;
    height: 15vw;
  }
  .tj {
    background: rgba(13, 47, 118, 1);
    color: white;
  }
}
.placestyle {
  text-align: right;
}
.disflex {
  display: flex;
}
.aligncenter {
  align-items: center;
}
.mb0 {
  margin-bottom: 0px !important;
}
.jcsb {
  justify-content: space-between;
}
.pdb0 {
  padding-bottom: 0;
}
.width300px {
  width: 300px;
}
.width100px {
  width: 100px;
}
.cityDangerReportForm {
  margin-top: 24px;
  background: #ffffff;
  padding: 24px;
  box-sizing: border-box;
  .isrequired {
    color: red;
  }
  .row {
    margin-bottom: 5.2vw;
    padding-bottom: 5.2vw;
    border-bottom: 1px solid #e6e6e6;
  }
  .row-label {
    font-size: 36px;
    margin-bottom: 16px;
  }
  .tips {
    color: rgba(179, 179, 179, 1);
    font-size: 24px;
  }
  .row-value {
    font-size: 36px;
    .van-cell {
      font-size: 36px;
      background: rgba(245, 247, 250, 1);
    }
    input {
      width: 100%;
      text-align: right;
      font-size: 36px;
    }
    .van-image,
    .van-uploader__upload {
      height: 30vw;
      width: 29vw;
    }
  }
}
</style>
