<template>
  <div class="addcompany">
    <div class="list" style="padding-bottom: 500px">
      <div class="list-row" style="padding-top: 0">
        <div style="height: auto" class="width100">
          <div class="width100 mt12px padb12px border_bottom_ccc list_date">
            <div class="dsp mt12px padb12px">
              <div class="width30 input_title">
                <span style="color: red">*&nbsp;</span>检查类型
              </div>

              安全隐患检查
            </div>
          </div>
          <div
            class="width100 mt12px padb12px border_bottom_ccc list_date display_flex"
            style="display: flex"
          >
            <div class="input_title float_left">
              <span style="color: red">*</span>
              归属年度
            </div>
            <div
              class="float_left width70 first_title font28px"
              style="color: #777; height: auto"
            >
              <div
                style="color: #777; height: auto; width: 100%"
                class="float_left input_value"
              >
                {{ form.attributiveYear }}
              </div>
            </div>
          </div>

          <div
            class="width100 mt12px padb12px border_bottom_ccc list_date height40px"
            style="display: flex"
          >
            <div class="input_title float_left">
              <span style="color: red">*</span>
              检查人
            </div>

            <div style="color: #777" class="input_value float_left">
              {{ !form.checkUser ? "请选择" : form.checkUser }}
            </div>
          </div>
          <div
            class="width100 mt12px padb12px border_bottom_ccc list_date height40px"
            style="display: flex"
          >
            <div class="input_title float_left">
              <span style="color: red">*</span>
              检查对象
            </div>

            <div style="color: #777" class="input_value float_left">
              {{ form.checkCompanyName }}
            </div>
          </div>

          <div
            class="width100 mt12px padb12px border_bottom_ccc list_date"
            style="display: flex"
          >
            <div class="input_title float_left">
              <span style="color: red">*</span>
              检查日期
            </div>

            <div
              style="
                color: #777;
                display: flex;
                height: auto;
                align-items: center;
              "
              class="input_value float_left"
            >
              {{ form.checkTime }}
              <!-- 0510-13921516068 -->
            </div>
          </div>

          <div class="width100 mt12px padb12px list_date height300px">
            <div class="input_title mb16px">检查详情</div>
            <textarea
              v-model="form.checkInfo"
              :maxlength="2000"
              readonly
              placeholder="请输入"
              type="text"
              class="textareaStyle"
            />
            <div
              style="
                background: rgba(249, 249, 249, 1);
                text-align: right;
                padding-right: 10px;
                padding-bottom: 10px;
              "
            >
              {{ !form.checkInfo ? 0 : form.checkInfo.length }}/2000
            </div>
          </div>
          <div class="width100 mt12px border_bottom_ccc list_date">
            <div class="input_title">自检表</div>
            <div
              class="custom-image-box"
              style="margin-top: 10px; margin-bottom: 10px"
            >
              <van-uploader
                :multiple="true"
                :file-list="form.uploadAddressExcel"
                :deletable="false"
                :show-upload="true"
                disabled
              />
            </div>
          </div>
          <div class="width100 mt12px border_bottom_ccc list_date">
            <div class="input_title">其他附件</div>
            <div
              class="custom-image-box"
              style="margin-top: 10px; margin-bottom: 10px"
            >
              <div
                style="
                  width: 100%;
                  white-space: inherit;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
                @click="openFile(item)"
                v-for="item in JSON.parse(form.uploadAddressExcel2)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="width100 mt12px padb12px list_date height300px">
            <div class="input_title mb16px">备注</div>
            <textarea
              v-model="form.remark"
              :maxlength="2000"
              readonly
              placeholder="请输入"
              type="text"
              class="textareaStyle"
            />
            <div
              style="
                background: rgba(249, 249, 249, 1);
                text-align: right;
                padding-right: 10px;
                padding-bottom: 10px;
              "
            >
              {{ !form.remark ? 0 : form.remark.length }}/2000
            </div>
          </div>
          <div class="width100 mt12px padb12px list_date height300px">
            <div class="input_title mb16px">
              <span style="color: red">*</span>
              处理反馈
            </div>
            <textarea
              v-model="form.handlingFeedback"
              :maxlength="2000"
              placeholder="请输入"
              type="text"
              class="textareaStyle"
            />
            <div
              style="
                background: rgba(249, 249, 249, 1);
                text-align: right;
                padding-right: 10px;
                padding-bottom: 10px;
              "
            >
              {{
                !form.handlingFeedback ? 0 : form.handlingFeedback.length
              }}/2000
            </div>
          </div>
        </div>
      </div>
      <div class="save_button" @click="save()">提交</div>
    </div>
  </div>
</template>
              
          <script>
const form = {
  finishType: "3",
  finishInfo: "",
  info: "",
  infoMorePictureUrlList: [],
  finishPictureUrlList: [],
  testTypeIndex: 0,
  year: "2023",
  carDate: "2023-06-30",
  remark: "",
  checkInfo: "",
  updateAddressY: "",
  updateAddressX: "",
  updateAddress: "",
  handlingFeedback: "",
};
import TelNum from "@/components/tel-number";
import { upload } from "@/service/api_upload";
import { Toast } from "vant";
import constant from "@/common/js/constant";
import {
  getByCodes,
  findSafetySelfCheckingManagetById,
  updateSafetySelfCheckingManage,
} from "../../service/modify-handle.js";
import auth from "@/service/auth";
import wx from "weixin-js-sdk";
export default {
  components: { TelNum },
  data() {
    return {
      id: null,
      BASE_URI: this.$constant.BASE_URI,
      companyAllList: [],
      defaultSelected: [],
      show: false,
      bizhongIndex: 0,
      testList: [
        { label: "类型1", value: 1 },
        { label: "类型2", value: 2 },
        { label: "类型3", value: 3 },
        { label: "类型4", value: 4 },
        { label: "类型5", value: 5 },
        { label: "类型6", value: 6 },
        { label: "类型7", value: 7 },
        { label: "类型8", value: 8 },
      ],
      settleInTypeIndex: 0,
      range: [],
      zaitiList: [],
      imageStyles: {},
      listStyles: {},
      fileLists: [],
      activeNames: [],
      StatusBar: 0,
      dic_key: ["safety_inspection_type"],
      dic_SelectList: {},
      search: {
        pageSize: 10,
        pageNum: 1,
      },
      form: { ...form },
      companyAllList: [],
      value: ["0"],
      modeIndex: -1,
      styleIndex: -1,
      current: 0,
      mode: "default",
      dotsStyles: {},
      swiperDotIndex: 0,
    };
  },

  mounted() {
    // console.log(this.$route.query.id);
    this.id = this.$route.query.id;
    console.log(this.$route.query);
    this.getByCodes();
    this.form.createdBy = auth.currUser().id;
  },
  onShow() {},
  methods: {
    call(item) {
      // findSafetySelfCheckingManagetById
      window.location.href = "tel:" + item.openUserPhone;
    },
    openFile(item) {
      window.open(item.url);
      var ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("iphone") !== -1 || ua.indexOf("ipad") !== -1) {
        console.log("iphone");
        window.location.href = item.url + "?time=" + new Date().getTime();
      } else {
        console.log("111");
        wx.miniProgram.navigateTo({
          // url: item.url,
          url:
            "/pages/file/download?callBackUrl=" +
            encodeURIComponent(window.location.href.split("#")[0]) +
            "&url=" +
            item.url,
        });
      }
      // window.open(url)
    },
    afterRead(file) {
      Toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0,
      });
      if (file instanceof Array) {
        file.map((v) => {
          console.log(v);
          this.uploadImg(v);
        });
      } else {
        console.log(file);
        this.uploadImg(file);
      }
    },
    uploadImg(file) {
      const _this = this;
      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) => {
        // axios.post('http://121.228.7.226:9001/wx/fileController/upload', formParam, config)
        upload(formParam, config)
          .then((response) => {
            if (response.data.length) {
              _this.form.finishPictureUrlList.push({
                url:
                  constant.BASE_URI +
                  "/wx/fileController/download/" +
                  response.data[0],
                isImage: true,
              });
            }
            let imgsrcArr = [];
            for (let i = 0; i < _this.form.finishPictureUrlList.length; i++) {
              if (_this.form.finishPictureUrlList[i].url) {
                imgsrcArr.push(_this.form.finishPictureUrlList[i]);
              }
            }

            _this.form.finishPictureUrlList = imgsrcArr;
            console.log(_this.form.finishPictureUrlList);
            Toast.clear();
          })
          .catch((err, x) => {
            reject(err, x);
          });
      });
    },
    async findSafetySelfCheckingManagetById() {
      console.log(123);
      let that = this;

      if (that.id != null) {
        let detail = await findSafetySelfCheckingManagetById(that.id);
        that.form = { ...form };
        that.form = detail;

        that.form.info = detail.info;
        that.form.finishInfo = detail.finishInfo;

        if (detail.uploadAddressExcel.length != 0) {
          let uploadAddressExcel = JSON.parse(detail.uploadAddressExcel);
          console.log("uploadAddressExcel", uploadAddressExcel);

          that.form.uploadAddressExcel = uploadAddressExcel;
        }
        if (detail.finishPictureUrl && detail.finishPictureUrl.length != 0) {
          let finishPictureUrlList = detail.finishPictureUrl.split(",");
          that.form.finishPictureUrlList = finishPictureUrlList.map((e) => {
            return {
              name: e,
              imgUrl: "/FileController/download/" + e,
              url: that.$constant.BASE_URI + "/FileController/download/" + e,
              isImage: true,
            };
          });
        }
        let index = that.dic_SelectList.safety_inspection_type.findIndex(
          (e) => e.value == detail.updateType
        );
        console.log(index);
        if (index != -1) {
          that.form.testTypeIndex = index;
          that.form.updateType =
            that.dic_SelectList.safety_inspection_type[index].value;
        }
        console.log(that.form.finishInfo);
        that.$forceUpdate();
      }
    },
    selectYear(event) {
      this.form.attributiveYear = event.detail.value;
      this.$forceUpdate();
    },
    selectCarDate(event) {
      this.form.finishTime = event.detail.value;
      this.$forceUpdate();
    },
    bindPickerChange: function (e) {
      this.form.testTypeIndex = e.detail.value;
      this.form.updateType =
        this.dic_SelectList.safety_inspection_type[e.detail.value].value;
    },

    confirm(e) {
      var associationCompanyString = [];
      var associationCompany = [];
      for (var p in e) {
        associationCompanyString.push(e[p].label);
        associationCompany.push(e[p].value);
      }

      this.form.associationCompanyString = associationCompanyString.join(",");
      this.form.associationCompany = associationCompany.join(",");
    },
    deleteRYXXZP(event) {
      this.form.finishPictureUrlList.splice(event.detail.index, 1);
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      console.log(data);
      this.dic_SelectList.safety_inspection_type = JSON.parse(
        data.safety_inspection_type.dictValue
      );
      this.form.updateType =
        this.dic_SelectList.safety_inspection_type[0].value;
      this.findSafetySelfCheckingManagetById();
      console.log(this.form.updateType);
    },

    // /wx/SaleController/findRoomInfoListByIds
    async findRoomInfoListByIds() {
      let data = await findRoomInfoListByIds(ids);
      return data;
    },

    async getSelectDeptTwo(key) {
      let that = this;
      let departmentList = await getSelectDeptTwo("");
      that.range = tools.transData(
        departmentList.data,
        "id",
        "parentid",
        "children"
      );
      that.$refs[key]._show();
    },

    async save() {
      let that = this;
      let finishPictureUrl = [];
      if (
        !that.form.handlingFeedback ||
        that.form.handlingFeedback.length == 0
      ) {
        Toast("请填写反馈内容");
        return;
      }

      if (
        that.form.finishPictureUrlList &&
        that.form.finishPictureUrlList.length > 0
      ) {
        console.log(that.form.finishPictureUrlList);
        finishPictureUrl = that.form.finishPictureUrlList.map((e) => {
          return e.url;
        });
      }
      console.log(that.form.finishPictureUrl);
      let form = [
        {
          finishType: 3,
          finishTime: this.$common.transServDate(new Date()),
          //   checkTime: this.$common.transServDate(new Date()),
          finishUser: auth.currUser().id,
          updatedBy: auth.currUser().id,
          id: that.form.id,
          finishInfo: that.form.finishInfo,
          finishPictureUrl: finishPictureUrl.toString(),
        },
      ];
      let data = await updateSafetySelfCheckingManage({
        id: this.id,
        updatedBy: this.form.updatedBy,
        companyName: this.form.companyName,
        handlingFeedback: this.form.handlingFeedback,
      });
      if (data.code == 200) {
        Toast.success("处理成功");

        this.$router.go(-1);
      }
    },
    chossseFile() {
      this.$refs.files.upload();
    },
    onChange(event) {
      this.activeNames = event.detail;
    },
  },
};
</script>   
<style  lang="scss" >
.height40px {
  height: 40px;
}
.width100 {
  width: 100%;
}
.float_left {
  float: left;
}

.width70 {
  width: 70%;
}
.btn-div {
  width: 100%;
  height: 100px;
  padding: 20px 10%;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
}
.btn {
  width: 80%;
  height: 90px;
  border-radius: 50px 50px 50px 50px;
  background: #1d18bc;
  line-height: 90px;
  color: white;
}
.save_button {
  width: calc(100% - 64px);
  margin: 64px 32px 0 32px;
  background: #1d18bc;
  border-radius: 50px;
  height: 88px;
  color: white;
  text-align: center;
  line-height: 88px;
}
.form {
  width: calc(100% - 64px);
  background: #ffffff;
  padding: 32px;
  margin-top: 64px;
  .label {
    height: 53px;
    line-height: 53px;
  }
}
.form_row {
  height: 40px;
  font-weight: 400;
  font-size: 12px;
}
.zaiti_list {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.idclass {
  width: 147px;
  height: 100px;
}
.dengjibutton {
  margin-top: 12px;
  margin-left: 60px;
  margin-right: 60px;
  width: calc(100% - 120px);
  height: 60px;
  text-align: center;
  background: #1d18bc;
  color: white;
  line-height: 60px;
}
.addcompany {
  margin-bottom: 200px;
  .whitespacenowrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.addcompany {
  .mt12px {
    margin-top: 12px;
  }
  .padb12px {
    padding-bottom: 12px;
  }
  .border_bottom_ccc {
    border-bottom: 1px solid #cccccc;
  }
  .dsp {
    display: flex;
    align-items: center;
  }
  .textareaStyle {
    display: block;
    height: 200px;
    background: rgba(249, 249, 249, 1);
    padding: 20px;
    width: calc(100% - 40px);
  }
  .list-row {
    width: calc(100% - 64px);
    margin: 32px 16px 38px 16px;
    padding-left: 16px;
    padding-right: 16px;
    background: #ffffff;
    margin-bottom: 16px;
    display: flex;
    //height: 278px;
    border-radius: 8px 8px 8px 8px;
  }
  .detailstitle {
    height: 42px;
    font-size: 30px;
    font-weight: 500;
    color: #333333;
    padding-bottom: 16px;
  }
  .typestitle {
    height: 42px;
    font-size: 12px;
    font-weight: 500;
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
}
</style>
           <style lang="scss">
::v-deep .is-open + .uni-collapse-item__wrap {
  height: auto !important;
}
::v-deep .uni-collapse-item__wrap-content {
  height: auto !important;
}
.pageconfig {
  background: #ffffff;
  padding: 32px;
}
.input_title {
  width: 30%;
  font-size: 28px;
  height: 40px;
  line-height: 40px;
  color: #333333;
}
.input_value {
  width: 60%;
  font-size: 14;
  height: 40px;
  line-height: 40px;
  color: #777777;
}
.uni-collapse-item__title-box {
  padding: 0 !important;
}
.uni-collapse-item__title-text {
  color: #1d18bc !important;
  font-size: 32px !important;
}
</style>
        <style lang="scss">
.example-body {
  padding: 10px;
  padding-top: 0;
}

.custom-image-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
  color: #333;
}
.uni-file-picker__item {
  display: none;
}
.uploadbutton {
  width: 162px;
  height: 44px;
}
</style>