<template>
  <basic-container>
    <avue-form :option="option"
               v-model="form"
               ref="form"
               :before-open="beforeOpen"
               :class="frame_class">
    </avue-form>
    <div class="container">
       <span >
          <el-button type="primary"
                     size="small"
                     @click="handleFormSubmit"
                     v-if="addUpdateShowButton && permission.inspectionobject_add">
                     确定</el-button>
         <el-button type="primary"
                    size="small"
                    @click="seachToUpdate"
                    v-if="shouldShowButton && permission.inspectionobject_edit">
                      修改</el-button>
       </span>
    </div>
  </basic-container>
</template>

<script>
import {getList, getDetail, add, update, remove, takeEffect, lapse} from "@/api/inspection/inspectionobject";
import {mapGetters} from "vuex";
import {getToken} from "@/util/auth";
import request from "@/router/axios";

export default {
  name: "inspectionobjectDetail",
  data() {
    return {
      addUpdateShowButton:{},
      shouldShowButton:{},
      readonlyForm:{},
      objectAreaFlag:{},
      frame_class: '',
      form: {},
      query: {},
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "对象编号",
            prop: "objectNo",
            span:8,
            disabled:true,
            rules: [{
              required: true,
              message: "请输入对象编号",
              trigger: "blur"
            }]
          },
          {
            label: "对象名称",
            prop: "objectName",
            search:true,
            span:8,
            maxlength: 20,
            rules: [{
              required: true,
              message: "请输入对象名称",
              trigger: "blur"
            }]
          },
          {
            label: "场站",
            prop: "station",
            search:true,
            type: "select",
            disabled: true,
            span:8,
            dicUrl: "/api/daf-system/dict/dictionary?code=station",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请输入场站",
              trigger: "blur"
            }]
          },
          {
            label: "对象类型",
            prop: "objectType",
            span:8,
            maxlength: 20,
            event: {
              change: (val) => {
                if (!val) return
                if (val) {
                  if (val=="工器具"){
                    const toolsCodeId = this.findObject(this.option.column, "toolsCodeId");
                    toolsCodeId.display = true;
                    const kksNo = this.findObject(this.option.column, "kksNo");
                    this.form.kksNo=' ';
                    kksNo.disabled = true;
                    if(["view"].includes(this.$route.query.frameMode)) {
                      kksNo.disabled = false;
                    }
                  }else{
                    const toolsCodeId = this.findObject(this.option.column, "toolsCodeId");
                    toolsCodeId.display = false;
                    const kksNo = this.findObject(this.option.column, "kksNo");
                    kksNo.disabled = false;
                    if(["view"].includes(this.$route.query.frameMode)) {
                      kksNo.disabled = false;
                    }
                  }
                }
              },
            },
            rules: [{
              required: true,
              message: "请输入对象类型",
              trigger: "blur"
            }]
          },
          {
            label: "对象区域",
            prop: "objectArea",
            search:true,
            span:8,
            maxlength: 20,
            rules: [{
              required: true,
              message: "请输入对象区域",
              trigger: "blur"
            }]
          },
          {
            label: "对象状态",
            prop: "istatus",
            search:true,
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=istatus",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span:8,
            rules: [{
              required: true,
              message: "请输入对象状态",
              trigger: "blur"
            }]
          },
          {
            label: "KKS编号",
            prop: "kksNo",
            search:true,
            disabled: false,
            span:8,
            type: "select",
            dicUrl: "/api/equipmentledger/getKksList",
            props: {
              label: "kksEncoding",
              value: "kksEncoding",
            },
            event: {
              change: (val) => {
                if (!val) return
                if (val) {
                  request({
                    url: '/api/equipmentledger/getDetailList',
                    method: 'get',
                    params: {
                      KksNo: val
                    }
                  }).then((res) => {
                    this.form.station = res.data.data.station;
                  })
                }
              },
            },
            rules: [{
              required: true,
              message: "请输入KKS编号",
              trigger: "blur"
            }]
          },
          {
            label: "取消原因",
            prop: "cancelReason",
            span: 8,
            maxlength: 20,
          },
          {
            label: "工器具编码",
            prop: "toolsCodeId",
            display: false,
            search:true,
            span:8,
            type: "select",
            dicUrl: "/api/leger/toolinventoryrecord/getToolsCodeIdList",
            props: {
              label: "toolsCodeId",
              value: "toolsCodeId",
            },
            rules: [{
              required: true,
              message: "请输入工器具编码",
              trigger: "blur"
            }],
            event: {
              change: (val) => {
                if (!val) return
                if (val) {
                  request({
                    url: '/api/leger/toolinventoryrecord/getDetailList',
                    method: 'get',
                    params: {
                      toolsCodeId: val
                    }
                  }).then((res) => {
                    this.form.station = res.data.data.stations;
                  })
                }
              },
            },
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      // this.option.column = this.option.column.filter(v => {
      //     return this.permission['inspectionobject_col_' + v.prop]
      // })
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false
      };
    },
  },
  created () {
    if(["view"].includes(this.$route.query.frameMode)){
      this.readonlyForm = true;
      this.addUpdateShowButton = false;
      this.shouldShowButton=true;
      this.frame_class = 'frame_class';
      const station = this.findObject(this.option.column, "station");
      station.disabled = false;
    }else{
      const objectNo = this.findObject(this.option.column, "objectNo");
      objectNo.value = ' ';
      const iStatus = this.findObject(this.option.column, "istatus");
      iStatus.display = false;
      const cancelReason = this.findObject(this.option.column, "cancelReason");
      cancelReason.display = false;
      this.readonlyForm = false;
      this.addUpdateShowButton = true;
      this.shouldShowButton=false;
      this.frame_class = null;
    }
    this.SearchDetail();
  },
  methods: {
    // handleFormSubmit() {
    //   const form = this.$refs.form;
    //   form.validate((valid) => {
    //     if (valid) {
    //       this.Submit();
    //     } else {
    //       this.$message({
    //         type: "warning",
    //         message: "请输入必要信息!"
    //       });
    //     }
    //   });
    // },
    handleFormSubmit() {
      this.$refs.form.validate((valid, done, msg) => {
        if (valid) {
          done()
          this.Submit();
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 处理表单提交
    Submit() {
      if(this.$route.query.frameMode=="add"){
        this.$confirm("是否新增所填数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          add(this.form).then(()=>{
            this.$router.push({
              path: "/inspection/inspectionobject",
              query: {
              },
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }else {
        this.$confirm("是否修改所填数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          if (this.form.istatus==1){
            this.form.cancelReason="";
          }
          update(this.form).then(() => {
            this.$router.push({
              path: "/inspection/inspectionobject",
              query: {},
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }
    },
    seachToUpdate () {
      this.shouldShowButton=false;
      this.addUpdateShowButton=true;
      this.readonlyForm=false;
      this.frame_class = null;
    },
    SearchDetail() {
      if (["view"].includes(this.$route.query.frameMode)) {
        getDetail(this.$route.query.id).then(res => {
          this.form = res.data.data;
        });
      }
    },
  }
};
</script>

<style>
.frame_class input.el-input__inner {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}
.frame_class .el-input__icon {
  display: none;
}
.frame_class .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
.frame_class input::placeholder {
  color: transparent;
  display: none; /* 默认隐藏 */
}
.container {
  display: flex;
  justify-content: flex-end; /* 将子元素推到容器的末端 */
}
</style>
