<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" v-model="visible" width="600px">
    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="120px">
      <el-form-item label="商户名称" prop="name"><el-input v-model="dataForm.name" size="medium" style="width:100%"
          clearable /></el-form-item>
      <el-form-item label="商户地址" prop="address"><el-input v-model="dataForm.address" size="medium" style="width:100%"
          clearable /></el-form-item>
      <el-form-item label="商户图片" prop="imageUrl">
        <el-upload class="avatar-uploader"  list-type="picture-card" action="#" :auto-upload="false" accept=".png, .jpg, .jpeg"
          :show-file-list="false" :on-change="handleUpload">
          <img v-if="dataForm.imageUrl" :src="dataForm.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商户营业时间" prop="merchHours"><el-input v-model="dataForm.merchHours" style="width:100%"
          size="medium" maxlength="20" clearable /></el-form-item>
      <el-form-item label="商户评分" prop="rating"><el-input v-model="dataForm.rating" style="width:100%" size="medium"
          maxlength="20" clearable /></el-form-item>
      <el-form-item label="商户类型" prop="type">
        <el-select v-model="dataForm.type" class="input" placeholder="商户类型" size="medium" clearable="clearable">
          <el-option label="洗车" value="1" />
          <el-option label="审车" value="2" />
          <el-option label="代驾" value="3" />
          <el-option label="道路救援" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="商户联系电话" prop="phoneNumber"><el-input v-model="dataForm.phoneNumber" style="width:100%"
          size="medium" maxlength="20" clearable /></el-form-item>
      <el-form-item label="是否合作商户" prop="isPartner">
        <el-select v-model="dataForm.isPartner" class="input" placeholder="是否合作商户" size="medium" clearable="clearable">
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="商户简介" prop="description"><el-input v-model="dataForm.description" style="width:100%"
          size="medium" maxlength="2000" type="textarea" clearable /></el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="medium" @click="visible = false">取消</el-button>
        <el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data(){
    return {
      visible: false,
      dataForm: {
        imageUrl:''
      },
      dataRule: {
        name: [
            { required: true, message: '请输入商户名称', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入商户地址', trigger: 'blur' },
          ],
          imageUrl: [
            { required: true, message: '请上传商户图片', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入商户地址', trigger: 'blur' },
          ],
          merchHours: [
            {type: 'date',  required: true, message: '请选择商户营业时间', trigger: 'change' },
          ],
          rating: [
            { required: true, message: '请输入商户评分', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请选择商户类型', trigger: 'change' },
          ],
          phoneNumber: [
            { required: true, message: '请输入商户联系电话', trigger: 'blur' },
            { min: 11, max: 11, message: "请输入11位联系电话", trigger: "blur" },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
          ],
          isPartner: [
            { required: true, message: '请选择是否合作商户', trigger: 'change' },
          ],
      },
    };
  },

  methods: {
    init: function (id) {
      let that = this;
      that.dataForm.id = id || 0;
      that.visible = true;
      that.$nextTick(() => {
        that.$refs['dataForm'].resetFields();
        if (id) {
          that.$http('hxds-wash-car/merchant/searchById', 'POST', { id: id }, true, function (resp) {
            that.dataForm=resp.rows
            that.dataForm.type = String(resp.rows.type);
            that.dataForm.isPartner = String(resp.rows.isPartner);
          });
        }
      });
    },
    handleChange: function (rawFile) {
      if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
        ElMessage.error("只能上传jpeg/jpg/png图片");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 1) {
        ElMessage.error("上传图片最大不超过1MB!");
        return false;
      }
      return true;
    },
    //上传
    handleUpload: function (file) {
      let that = this;
      let fileRaw = file.raw;
      let fd = new FormData();
      fd.append("file", fileRaw);
      // 这里是请求上传接口w
      this.$httpData('hxds-wash-car/oss/upload', 'POST', fd, function (resp) {

        that.dataForm.imageUrl = resp.url;
      });
    },
    dataFormSubmit: function () {
      let that = this;  
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          var url = "";
          if (that.dataForm.id == null || that.dataForm.id == "") {
            url = "hxds-wash-car/merchant/insert";
          } else {
            url = "hxds-wash-car/merchant/update";
          }
          that.$http(url, 'POST', that.dataForm, true, function (resp) {
            if (resp.rows == 1) {
              that.$message({
                message: '操作成功',
                type: 'success',
                duration: 1200
              });
              that.visible = false;
              that.$emit('refreshDataList');
            } else {
              that.$message({
                message: '操作失败',
                type: 'error',
                duration: 1200
              });
            }
          });
        }
      });
    },
  }
};
</script>

<style lang="less" scoped="scoped">
/deep/.avatar-uploader .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }

  /deep/.avatar-uploader .el-upload {
    border: 1px dashed  #c0ccda;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    // transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  /deep/ .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #d9d9d9;
}</style>
