<template>
  <div>
    <div class="dv-content-line"></div>
    <div class="dv-content-title">
      <img
        src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/qcinfo.png"
      />
      <span class="content-title">新增维修</span>
    </div>

    <div class="check-submit">
      <div class="check-type">
        <img
          src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/leftrim.png"
        />
        <select
          v-model="info.checktype"
          id="CheckType"
          name="CheckType"
          class="check-type-sel"
          placeholder="维修类型"
        >
          <option selected="selected" value>--请选择--</option>
          <option
            v-on:change="typeChange"
            v-for="item in types"
            data-placeholder="请选择"
            :key="item.DataValue"
            :value="item.DataValue"
            v-text="item.DataName"
          ></option>
        </select>
      </div>
      <div class="check-info">
        <img
          src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/leftrim.png"
        />
        <input v-model="info.checkinfo" class="info-input" type="text" placeholder="维修内容" />
      </div>
      <div class="check-mark">
        <textarea v-model="info.remark" class="mark" name="mark" id="mark" placeholder="备注（不超过50字）"></textarea>
      </div>

      <div class="dv-img">
        <div class="dv-img-txt">上传图片:</div>
        <div class="dv-img-ll">
          <img
            src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/picdemo.png"
          />
          <img
            src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/picdemo.png"
          />
          <img
            src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/picdemo.png"
          />
          <img
            @click="actionSheet()"
            class="add-img"
            src="https://release-sup8-images.oss-cn-shanghai.aliyuncs.com/h5_template/%E5%B8%83%E6%9C%97%E5%95%86%E8%A1%8C/addpicicon.png"
          />
        </div>
      </div>
      <div class="check-btn">
        <button class="btn-reset" @click="reset()">重置</button>
        <button class="btn-submit" @click="addQualityInspection()">确认提交</button>
      </div>

      <mt-actionsheet :actions="data" v-model="sheetVisible"></mt-actionsheet>
    </div>
  </div>
</template>

<script>
//import $ from "jquery";
import { MessageBox, Actionsheet } from "mint-ui";
import apiHelper from "@/assets/js/apiHelper.js";
import wx from "weixin-js-sdk";

export default {
  name: "Login",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      types: [],
      imgarr: [],
      info: {
        checktype: "",
        checkinfo: "",
        remark: "",
        imgs: ""
      },
      data: [
        {
          name: "拍照",
          method: this.getCamera
        },
        {
          name: "从相册中选择",
          method: this.getLibrary
        }
      ],
      sheetVisible: false
    };
  },
  methods: {
    upImg() {
      var that = this;
      wx.uploadImage({
        localId: that.localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function(res) {
          var serverId = res.serverId; // 返回图片的服务器端ID
        }
      });
    },
    actionSheet: function() {
      // 打开action sheet
      this.sheetVisible = true;
    },
    getCamera: function() {
      var that = this;
      condole.log("camera");
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          that.localIds = localIds;
          condole.log(localIds);
        }
      });
    },
    getLibrary: function() {
      var that = this;
      condole.log("album");
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          that.localIds = localIds;
          condole.log(localIds);
        }
      });
    },
    getCheckTypes() {
      var that = this;
      apiHelper.getCheckTypes(function(res) {
        debugger;
        if (res.flag == true) {
          //DataName: "维修" DataValue: "1"
          that.types = res.data;
        } else {
          MessageBox.alert(res.data || "登录失败");
        }
      });
    },
    // 重置
    reset() {
      //this.$parent.changeSelectedPage("Check_2");
      this.checktype = "";
      this.checkinfo = "";
      this.remark = "";
      this.imgs = "";
      this.imgarr = [];
    },
    typeChange() {
      this.info.checktype = $("#CheckType").val();
    },
    checkParamsData() {
      var that = this;
      if (that.info.checktype == "") {
        MessageBox.alert("请选择维修类型");
        return;
      }

      if (that.info.checkinfo == "") {
        MessageBox.alert("请输入维修内容");
        return;
      }

      if (that.info.remark == "") {
        MessageBox.alert("请输入备注");
        return;
      }

      if (that.info.remark != "" && that.info.remark.length > 50) {
        MessageBox.alert("备注不能超过50个字符");
        return;
      }

      // if (that.info.imgs == "") {
      //   MessageBox.alert("请上传图片");
      //   return;
      // }
    },
    addQualityInspection() {
      debugger;
      var that = this;
      //var checkdate = new Date().getDate();
      var checkdate = "h5checkdate";
      var arbrownuserstr = localStorage.getItem("arbrownuser");
      var arbrownuser = {};
      if (!!arbrownuserstr) {
        arbrownuser = JSON.parse(arbrownuserstr);
        if (arbrownuser.UserId == "" && arbrownuser.UserName == "") {
          MessageBox.alert("未登录，请先登录");
          return;
        }
      } else {
        MessageBox.alert("未登录，请先登录");
        return;
      }

      var userid = arbrownuser.UserId || "6283b6607efd462093b9897f13aa4155";
      var operuserid = arbrownuser.UserId || "6283b6607efd462093b9897f13aa4155";
      var code = that.sup8.codeInfo.Code || "5171246046940429";
      debugger;
      apiHelper.addQualityInspection(
        userid,
        code,
        that.info.checktype,
        that.info.checkinfo,
        checkdate,
        that.info.remark,
        operuserid,
        function(res) {
          if (res.flag == true) {
            MessageBox.alert("提交成功").then(action => {
              that.types = [];
              that.imgarr = [];
              that.info.checktype = "";
              that.info.checkinfo = "";
              that.info.remark = "";
              that.info.imgs = "";
            });
          } else {
            MessageBox.alert("登录失败");
          }
          debugger;
        }
      );
    }
  },
  watch: {},
  created: function() {
    var that = this;
  },

  mounted: function() {
    var that = this;
    that.getCheckTypes();
  }
};
</script>

<style scoped>
.dv-content-line {
  height: 0.4rem;
  background: #f9fafb;
}
.content-title {
  position: relative;
  top: -0.2rem;
  font-size: 15px;
  font-weight: bolder;
  color: #7b3e15;
}

.dv-content-title {
  margin: 1rem 0rem 0.5rem 1rem;
  background-color: #ffffff;
}
.dv-content-title img {
  width: 1.1rem;
  margin: 0rem 0.5rem 0rem 0rem;
}

.check-type,
.check-info {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}
.check-type img,
.check-info img {
  height: 35px;
  float: left;
}

.check-type-sel {
  width: 95%;
  height: 35px;
  border-color: #cccccc;
  padding-left: 10px;
  color: #858380;
}
.info-input {
  width: 91%;
  height: 29px;
  color: #858380;
  padding-left: 10px;
}

.check-mark {
  margin: 0.5rem 1rem;
}

.mark {
  width: 95%;
  height: 7rem;
  padding: 0.5rem 0.2rem 0.2rem 0.5rem;
}
.check-btn {
  padding-top: 1rem;
  text-align: center;
  padding-left: 1rem;
}
.btn-submit {
  width: 10rem;
  height: 2rem;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background-color: #1d4c9d;
  border: 1px solid #1d4c9d;
  margin: 0.5rem 0.5rem 0.5rem 0rem;
  border-radius: 3px;
}
.btn-reset {
  width: 6rem;
  height: 2rem;
  font-size: 18px;
  font-weight: bold;
  color: #1d4c9d;
  background-color: #fff;
  border: 1px solid #1d4c9d;
  margin: 0.5rem 0rem 0.5rem 0rem;
  border-radius: 3px;
  float: left;
}
/** 图片*/

.dv-img-txt {
  margin: 1rem 0.5rem 0.4rem 1rem;
  font-size: 14px;
}

.dv-img-txt img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}

.dv-img-ll {
  margin: 0.2rem 0.5rem 0.1rem 1rem;
}
.dv-img img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.add-img {
  background-color: #eaeaea;
}
</style>
