<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">

      <el-form-item label="导入酒店" prop="isRoomMap">
        <el-upload
          class="upload-demo"
          action=""
          :on-change="handleChange"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :limit="limitUpload"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          :auto-upload="false"
        >
          <el-button size="small" type="primary">点击导入酒店</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        limitUpload: 1,
        visible: false,
        dataForm: {
          id: 0,
          hotelId: '',
          dtId: '',
          storeId: '',
          groupId: '',
          blonPlantform: '',
          isDel: '',
          isUp: ''
        },
        dataRule: {
          hotelId: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          dtId: [
            { required: true, message: '分销商编码不能为空', trigger: 'blur' }
          ],
          storeId: [
            { required: true, message: '店铺编码不能为空', trigger: 'blur' }
          ],
          groupId: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          blonPlantform: [
            { required: true, message: '所属平台不能为空', trigger: 'blur' }
          ],
          isDel: [
            { required: true, message: '是否有效不能为空', trigger: 'blur' }
          ],
          isUp: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {

      //上传文件时处理方法
      handleChange(file, fileList) {
        this.fileTemp = file.raw;
        this.importfxx(this.fileTemp);

      },
      //超出最大上传文件数量时的处理方法
      handleExceed() {
        this.$message({
          type: "warning",
          message: "超出最大上传文件数量的限制！",
        });
        return;
      },
      //移除文件的操作方法
      handleRemove(file, fileList) {
        this.fileTemp = null;
      },
      importfxx(obj) {
        let _this = this;
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据

        this.file = event.currentTarget.files[0];

        var rABS = false; //是否将文件读取为二进制字符串
        var f = this.file;

        var reader = new FileReader();
        //if (!FileReader.prototype.readAsBinaryString) {
        FileReader.prototype.readAsBinaryString = function (f) {
          var binary = "";
          var rABS = false; //是否将文件读取为二进制字符串
          var pt = this;
          var wb; //读取完成的数据
          var outdata;
          var reader = new FileReader();
          reader.onload = function (e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            //此处引入，用于解析excel
            var XLSX = require("xlsx");
            if (rABS) {
              wb = XLSX.read(btoa(fixdata(binary)), {
                //手动转化
                type: "base64",
              });
            } else {
              wb = XLSX.read(binary, {
                type: "binary",
              });
            }
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            //outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
            //此处可对数据进行处理
            let arr = [];
            outdata.map((v) => {
              arr.push(v["酒店id"]);
            });
            _this.dataForm.hotelIds = arr;
            console.info(_this.dataForm.hotelIds)
          };
          reader.readAsArrayBuffer(f);
        };
        if (rABS) {
          reader.readAsArrayBuffer(f);
        } else {
          reader.readAsBinaryString(f);
        }
      },

      // 检 查
      select() {
        // 去重
        this.dataForm.hotelIds = this.dataForm.hotelIds.filter((item, index) => {
          return this.dataForm.hotelIds.indexOf(item) === index
        });
        this.dataListSelections = []
      },

      // init (id) {
      //   this.dataForm.id = id || 0
      //   this.visible = true
      //   this.$nextTick(() => {
      //     this.$refs['dataForm'].resetFields()
      //     if (this.dataForm.id) {
      //       this.$http({
      //         url: this.$http.adornUrl(`/op/htlgroup/info/${this.dataForm.id}`),
      //         method: 'get',
      //         params: this.$http.adornParams()
      //       }).then(({data}) => {
      //         if (data && data.code === 0) {
      //           this.dataForm.hotelId = data.htlGroup.hotelId
      //           this.dataForm.dtId = data.htlGroup.dtId
      //           this.dataForm.storeId = data.htlGroup.storeId
      //           this.dataForm.groupId = data.htlGroup.groupId
      //           this.dataForm.blonPlantform = data.htlGroup.blonPlantform
      //           this.dataForm.isDel = data.htlGroup.isDel
      //           this.dataForm.isUp = data.htlGroup.isUp
      //         }
      //       })
      //     }
      //   })
      // },
      init(dtId , storeId, groupId , blonPlantform) {
        this.dataForm.dtId = dtId
        this.dataForm.storeId = storeId
        this.dataForm.groupId = groupId
        this.dataForm.blonPlantform = blonPlantform
        this.visible = true
        this.active = 0
      },

      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/op/htlgroup/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                // 'id': this.dataForm.id || undefined,
                // 'hotelId': this.dataForm.hotelId,
                'dtId': this.dataForm.dtId,
                'storeId': this.dataForm.storeId,
                'id': this.dataForm.groupId,
                'blonPlantform': this.dataForm.blonPlantform,
                'hotelIds': this.dataForm.hotelIds
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
