<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-card :body-style="{ padding: '20px', margin: '0 auto' }">
          <div class="imgbox">
            <el-upload
              class="uploader"
              :action="addressUrl"
              :show-file-list="false"
              :headers="headers"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :disabled="editable"
            >
              <img
                v-if="form.stationPic"
                :src="form.stationPic"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div class="el-upload__tip" slot="tip" v-show="!editable">
                点击图片可以重新上传
              </div>
            </el-upload>
          </div>
          <div class="station">
            <el-form ref="form" :model="form" :rules="rules" label-width="auto">
              <el-form-item label="油站名称" prop="deptName">
                <el-input
                  v-model="form.deptName"
                  placeholder="请输入油站名称"
                  :disabled="editable"
                />
              </el-form-item>
              <el-form-item label="油站地址" prop="deptAddress">
                <el-input
                  v-model="form.deptAddress"
                  placeholder="请输入油站地址"
                  :disabled="editable"
                />
              </el-form-item>
              <el-form-item label="联系人" prop="leader">
                <el-input
                  v-model="form.leader"
                  placeholder="请输入联系人"
                  :disabled="editable"
                />
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入电话"
                  :disabled="editable"
                />
              </el-form-item>
            </el-form>
            <el-button
              type="primary"
              size="small"
              @click="
                () => {
                  this.editable = !editable;
                }
              "
            >
              {{ editable ? "修改资料" : "取消保存" }}
            </el-button>
            <el-button
              type="primary"
              size="small"
              v-show="!editable"
              @click="submitForm"
            >
              保存资料
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加或修改油站信息对话框 -->
  </div>
</template>

<script>
import {
  listInfo,
  updateInfo,
  exportInfo,
} from "@/api/station/info";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Info",
  components: { Treeselect },
  data() {
    const validatorPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      editable: true,
      // 总条数
      total: 0,
      // 部门树选项
      deptOptions: undefined,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        stationName: null,
        deptAddress: null,
        oilGunNum: null,
        contacts: null,
        phone: null,
        stationGroupName: null,
        stationPic: null,
        stationLongitude: null,
        stationLatitude: null,
        mno: null,
        deptId: this.deptId,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deptName:[
          { required: true, message: '请填写油站名', trigger: 'blur' }
        ],
        deptAddress:[
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ],
        leader:[
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        phone:[
          { validator: validatorPhone, required: true, trigger: 'blur' }
        ]
      },
      imageUrl: "",
      headers: { Authorization: "Bearer " + getToken() },
      addressUrl:
        location.protocol +
        "//" +
        location.host +
        process.env.VUE_APP_BASE_API +
        "/common/upload",
    };
  },
  created() {
    this.getList();
  },

  methods: {
    /** 查询油站信息列表 */
    getList() {
      listInfo(this.queryParams).then((response) => {
        this.form = response.rows[0];
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$confirm("确认更新油站信息", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            updateInfo(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.editable=true
              this.getList();
            });
          });
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有油站信息数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportInfo(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    handleAvatarSuccess(res, file) {
      this.form.stationPic = res.url;
      this.form = {...this.form} ;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 4;
      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped>
.imgbox {
  margin: 0 auto;
  padding: 20px;
  width: 200px;
  height: 240px;
  img {
    width: 100%;
    height: 100%;
  }
  .uploader {
    width: 100%;
    height: 100%;
    .el-upload {
      width: 100%;
      height: 100%;
    }
    .avatar {
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
    .el-upload__tip {
      text-align: center;
      color: red;
    }
    .el-upload {
      color: red;
    }
  }
}
.station {
  width: 40%;
  min-width: 300px;
  margin: 0 auto;
}
</style>