<template>
  <div class="container">
    <el-dialog :visible.sync="visible" width="60%" :before-close="handleClose">
      <div class="upflieBox">
        <div class="fileBox">
          <el-image
            :src="$baseImgUrl + currentObj.pngImg"
            fit="contain"
          ></el-image>

          <div class="rightText">
            <p>
              店铺类型：{{ currentObj.storeType === "1" ? "公司" : "个人" }}
            </p>
            <p>证件类型：{{ currentObj.certificateName }}</p>
            <p>证件名称：{{ currentObj.storeName }}+{{ currentObj.name }}</p>
            <p>统一社会信用代码：{{ currentObj.code }}</p>
            <p>提醒日期：{{ currentObj.remindTime }}</p>
          </div>
        </div>
        <div class="dialogVisibleBtns">
          <el-button icon="el-icon-close" @click="dhandleFlie(0)"
            >删除证件</el-button
          >
          <el-button icon="el-icon-download" @click="dhandleFlie(1)"
            >下载证件</el-button
          >
          <el-button
            icon="el-icon-sort"
            class="changeIconBtn"
            @click="dhandleFlie(2)"
            >修改信息</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Const from "@/api/Const.js";
export default {
  name: "LookImgDetailComponent",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    currentObj: {
      type: Object,
      default: () => {}
    },
    lookImgIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      currentFile: {}
    };
  },
  watch: {
    currentObj: {
      handler(newValue, oldVaule) {
        console.log(newValue, "this.currentFile");
        this.currentFile = newValue;
      },
      deep: true
    }
  },
  methods: {
    handleClose() {
      this.$emit("changeLookDialogvisible", false);
    },
    dhandleFlie(type) {
      if (type === 0) {
        // 删除
        this.$confirm('确定要删除证件吗', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(res => {
          this.$axios
            .post(
              Const.api.delete_store_data,
              {
                id: this.currentFile.id
              },
              {
                headers: {
                  "Content-Type": "application/json" //将表单数据传递转化为form-data类型
                }
              }
            )
            .then(res => {
              let { data } = res;
              if (data.code === 0) {
                this.$emit("deleteImgData", this.lookImgIndex);
                this.handleClose();
                this.dialogVisible = false;
                this.$emit("update:visible", false);
                this.$axios.get(Const.api.saveOprateLog,{
                  params:{
                    model:'门店档案管理',
                    oprate: '删除'
                  }
                });
                this.$emit("reload");
                this.$message.success("操作成功！");
              } else {
                this.$message.error(data.message);
              }
            });
        });
      } else if (type === 1) {
        this.downLoadFile(this.currentFile);
      } else {
        // 修改信息
        this.$emit("updateImgDataImgData", {
          data: this.currentFile,
          type: "edit"
        });
      }
    },
    // 下载
    downLoadFile(currentFile) {
      window.open(Const.api.downloadFile + "?id=" + currentFile.id + "&type=2");
    }
  }
};
</script>

<style lang="scss" scoped>
.upflieBox {
  .fileBox {
    display: flex;
    .formBox {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
      .uploadImage {
        width: 100%;
        margin: 10px 10px 20px 10px;
      }
    }
    .rightText {
      width: 170%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 0 20px 40px 20px;
      border-radius: 10px;
      p {
        padding: 10px 20px;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
.dialogVisibleBtns {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .el-button {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    i.el-icon-sort {
      transform: rotateZ(90deg) !important;
    }
  }
}
</style>