<template>
  <basic-container>
    <template >
      <el-row :span="24">
      <div class="check_status_class">
       <span >
        <el-col >
          审核状态:
          <el-select v-model="checkStatusValue">
            <el-option
              v-for="item in optionCheckStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        </span>
      </div>
      </el-row>
    </template>
    <avue-tabs :option="option"
               @change="handleChange"></avue-tabs>
    <span v-if="type.prop==='information'">
        <avue-form :option="tab1_option"
                   v-model="tab1_form"
                   ref="tab1_form"
                   :class="frame_class"
                   >
        </avue-form>
      </span>
    <span v-else-if="type.prop==='inspection'">
        <div>
          <avue-crud :data="inspection_data"
                     :table-loading="loading"
                     :option="optionInspection"
                     :permission="permissionList"
                     :before-open="beforeOpen"
                     :header-cell-class-name="headerClass"
                     v-model="inspection_form"
                     ref="crud"
                     @row-del="inspection_rowDel"
                     @row-update="inspection_rowUpdate"
                     @row-save="inspection_rowSave">
          </avue-crud>
        </div>
      </span>
    <span v-else-if="type.prop==='parameters'">
        <div>
          <avue-crud :data="parameters_data"
                     :table-loading="loading"
                     :option="optionParam"
                     :permission="permissionList"
                     :before-open="beforeOpen"
                     :header-cell-class-name="headerClass"
                     v-model="parameters_form"
                     ref="crud"
                     @row-del="parameters_rowDel"
                     @row-update="parameters_rowUpdate"
                     @row-save="parameters_rowSave">
          </avue-crud>
        </div>
      </span>
    <span v-else-if="type.prop==='document'">
        <avue-crud :option="optionDoc"
                   :table-loading="loading"
                   :data="document_data"
                   :permission="permissionList"
                   :header-cell-class-name="headerClass"
                   v-model="document_form"
                   ref="crud2"
                   @row-update="document_rowUpdate"
                   @row-save="document_rowSave"
                   @row-del="document_rowDel"
                   :upload-after="uploadAfter"
                   :upload-preview="(file) => handleUploadPreview(file)"
                   :upload-delete="(file) => handleUploadDelete(file)">
          <template #accessoryNameExt="scope">
            <el-link type="primary" :underline="false" @click="handleDownload(scope.row)">{{scope.row.prAccessoryName}}</el-link>
          </template>
          <template #menu="{row,index,size}">
            <el-button size="small" type="text" @click="handleDownload(row)" icon="el-icon-download">下 载</el-button>
          </template>
          </avue-crud>
      </span>
    <div class="container">
       <span >
          <el-button type="text"
                     size="large"
                     @click="back"
                     v-if="addUpdateShowButton">
                     取消</el-button>
         <el-button type="primary"
                     size="large"
                     @click="handleFormSubmit"
                     v-if="addUpdateShowButton">
                     确定</el-button>
          <el-button type="primary"
                     size="small"
                     @click="auditing"
                     v-if="shouldShowButton">
                     审核</el-button>
          <el-button type="primary"
                     size="small"
                     @click="reject"
                     v-if="shouldShowButton">
                     驳回</el-button>
          <el-button type="primary"
                     size="small"
                     @click="seachToUpdate"
                     v-if="UpdateShowButton">
                      修改</el-button>
          <el-button type="primary"
                     size="small"
                     @click="del"
                     v-if="shouldShowButton">
                     删除</el-button>
       </span>
    </div>
  </basic-container>
  <!--   https://avuejs.com/form/form-rules.html#%E5%A4%96%E7%BD%AE%E9%AA%8C%E8%AF%81-->
</template>
<script>
import {getList, getDetail, add, update, remove} from "@/api/leger/toolinventoryrecord";
import {
  inspection_add,
  inspection_update,
  inspection_remove,
  inspection_getListBylegerId,
  inspection_Del
} from "@/api/leger/inspectionstandards";
import {
  parameters_add,
  parameters_update,
  parameters_remove,
  parameters_tools_getListBylegerId
} from "@/api/leger/techparameters";
import {
  document_add,
  document_update,
  document_remove,
  document_tools_getListBylegerId
} from "@/api/leger/inventorydocument";
import {mapGetters} from "vuex";
import website from "@/config/website";
import {readonly} from "vue";
import {getToken} from "@/util/auth";
export default {
  name: "equipmentledgerDetail",
  data () {
    return {
      checkStatusValue:{},
      optionCheckStatus: [{
        value: 1,
        label: '审核中'
      }, {
        value: 2,
        label: '已审核'
      }, {
        value: 3,
        label: '未通过'
      }, {
        value: 4,
        label: ' '
      }
      ],
      frame_class: '',
      type: {},
      shouldShowButton:{},
      addUpdateShowButton:{},
      UpdateShowButton:{},
      readonlyForm:{},
      document_form:{},
      option: {
        column: [{
          label: '基本信息',
          prop: 'information',
        }
        ]
      },
      tab1_form: {},
      tab1_option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "工器具编码",
            prop: "toolsCodeId",
            rules: [{
              required: true,
              message: "请输入工器具编码",
              trigger: "blur"
            }],
            span: 24,
            maxlength: 20,
          },
          {
            label: "工器具名称",
            prop: "toolName",
            rules: [{
              required: true,
              message: "请输入工器具名称",
              trigger: "blur"
            }],
            span: 8,
            maxlength: 40,
          },
          {
            label: "工器具类别",
            prop: "toolCategory",
            rules: [{
              required: true,
              message: "请输入工器具类别",
              trigger: "blur"
            }],
            span: 8,
            maxlength: 40,
          },
          {
            label: "工器具类别描述",
            prop: "toolTypeDescription",
            span: 8,
            maxlength: 200,
          },
          {
            label: "规格型号",
            prop: "modelSpecification",
            span: 8,
            maxlength: 40,
          },
          {
            label: "工器具状态",
            prop: "toolStatus",
            rules: [{
              required: true,
              message: "请输入工器具状态",
              trigger: "blur"
            }],
            span: 8,
            maxlength: 20,
          },
          {
            label: "工器具状态描述",
            prop: "toolStatusDescription",
            span: 8,
            maxlength: 20,
          },
          {
            label: "配置日期",
            prop: "configurationDate",
            type: "date",
            format: 'yyyy/MM/dd',
            valueFormat: "yyyyMMdd",
            span: 8,
          },
          {
            label: "已用年限",
            prop: "yearsInUsed",
            span: 8,
            maxlength: 20,
          },
          {
            label: "出厂编号",
            prop: "factoryNo",
            span: 8,
            maxlength: 40,
          },
          {
            label: "责任班组",
            prop: "responsibleTeam",
            span: 8,
            maxlength: 20,
          },
          {
            label: "责任人",
            prop: "responsiblPerson",
            span: 8,
            maxlength: 20,
          },
          {
            label: "是否检验周期内",
            prop: "isInspectionPeriod",
            type: "select",
            search: true,
            dicUrl: "/api/daf-system/dict/dictionary?code=yes_no",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8,
          },
          {
            label: "场站",
            prop: "stations",
            type: "select",
            search: true,
            dicUrl: "/api/daf-system/dict/dictionary?code=station",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8,
          },
        ]
      },
      inspection_data: [],
      optionInspection: {
        align: 'center',
        menuAlign: 'center',
        height: 'auto',
        calcHeight: 210,
        tip: false,
        border: true,
        indexLabel: "序号",
        index: true,
        column: [
          {
            label: "检验内容",
            prop: "inspectionContent",
            rules: [{
              required: true,
              message: "请输入检验内容",
              trigger: "blur"
            }]
          },
          {
            label: "检验标准",
            prop: "inspectionStandards",
            rules: [{
              required: true,
              message: "请输入检验标准",
              trigger: "blur"
            }]
          },
        ]
      },
      tab2_page: {
        pageSize: 20,
        pagerCount: 5
      },
      parameters_data: [],
      optionParam: {
        align: 'center',
        menuAlign: 'center',
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        indexLabel: "序号",
        index: true,
        column: [
          {
            label: "分类",
            prop: "classification",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: "分类描述",
            prop: "description",
            span: 20,
            type: "textarea",
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: "技术参数",
            prop: "techParameters",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: "参数",
            prop: "parameters",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
        ]
      },
      tab3_page: {
        pageSize: 20,
        pagerCount: 5
      },
      document_data: [],
      optionDoc: {
        align: 'center',
        menuAlign: 'center',
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        indexLabel: "序号",
        index: true,
        column: [
          {
            label: "标题",
            prop: "title",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: "作者",
            prop: "author",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: "日期",
            prop: "date",
            type: "date",
            format: 'yyyy/MM/dd',
            valueFormat: "yyyyMMdd",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: "页数",
            prop: "page",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: "关键字",
            prop: "keyword",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: "主题",
            prop: "thead",
            span: 20,
            rules: [{
              trigger: "blur"
            }]
          },
          {
            label: '附件',
            prop: 'accessoryNameExt',
            dataType: 'object',
            fileType: 'img',//img/video/audio
            type: 'upload',
            // hide: true,
            limit: 1,
            propsHttp: {
              res: 'data',
            },
            data: {
              fileType: "2"// 工器具台账-文档清册
            },
            headers: {
            },
            span: 20,
            action: './api/system/file/upload'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn:  true,
        viewBtn: false,
        delBtn: true,
        editBtn: true
      };
    },
  },
  created () {
    this.type = this.option.column[0];
    if(this.$route.query.frameMode == "search"){
      this.option.column.push({ label: '检验标准', prop: 'inspection' },{ label: '技术参数', prop: 'parameters' },{ label: '文档清册', prop: 'document' });
      this.readonlyForm=true;
      this.shouldShowButton=true;
      this.addUpdateShowButton=false;
      this.UpdateShowButton=true;
      this.frame_class = 'frame_class1';
      this.checkStatusValue = this.$route.query.checkstatus;
      this.SearchDetail();
    }else{
      this.readonlyForm=false;
      this.shouldShowButton=false;
      this.UpdateShowButton=false;
      this.addUpdateShowButton=true;
      this.frame_class = null;
      this.checkStatusValue = 4;
    }
  },
  methods: {
    handleFormSubmit() {
      this.$refs.tab1_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(() => {
          this.tab1_form.checkStatus="1"
          add(this.tab1_form).then(()=>{
            this.$router.push({
              path: "/leger/toolinventoryrecord",
              query: {
              },
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }else {
        this.$confirm("是否修改所填数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          update(this.tab1_form).then(() => {
            this.$router.push({
              path: "/leger/toolinventoryrecord",
              query: {},
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }
    },
    back() {
      if(this.$route.query.frameMode=="add") {
        this.$router.push({path: "/leger/toolinventoryrecord"});
      }else{
        this.updateToSearch();
        this.SearchDetail();
      }
    },
    seachToUpdate () {
      this.shouldShowButton=false;
      this.addUpdateShowButton=true;
      this.UpdateShowButton=false;
      this.readonlyForm=false;
      this.frame_class = null;
    },
    updateToSearch () {
      this.readonlyForm=true;
      this.shouldShowButton=true;
      this.addUpdateShowButton=false;
      this.UpdateShowButton=false;
      this.frame_class = 'frame_class1';
    },
    handleChange (column) {
      this.type = column
      if (column.prop == 'parameters') {
        this.UpdateShowButton=false;
        this.parameters_onLoad();
      }if (column.prop == 'document') {
        this.UpdateShowButton=false;
        this.document_onLoad();
      }if (column.prop == 'inspection') {
        this.UpdateShowButton=false;
        this.inspection_onLoad();
      }
    },
    // 检验标准 新增按钮处理
    inspection_rowSave (form, done, loading) {
      loading();
      form.toolsCodeId = this.$route.query.id;
      inspection_add(form).then(() => {
        done(form);
        this.inspection_onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    // 检验标准 编辑按钮处理
    inspection_rowUpdate(form, index, done, loading) {
      inspection_update(form).then(() => {
        done(form);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });

    },
    // 检验标准 删除按钮处理
    inspection_rowDel(form, index, done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return inspection_remove(form.id);
        })
        .then(() => {
          this.inspection_onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    // 技术参数 新增按钮处理
    parameters_rowSave (form, done, loading) {
      loading();
      form.toolsCodeId = this.$route.query.id;
      parameters_add(form).then(() => {
        done(form);
        this.parameters_onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    // 技术参数 编辑按钮处理
    parameters_rowUpdate(form, index, done, loading) {
      parameters_update(form).then(() => {
        done(form);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });

    },
    // 技术参数 删除按钮处理
    parameters_rowDel(form, index, done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return parameters_remove(form.id);
        })
        .then(() => {
          this.parameters_onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    // 文档清册 新增按钮处理
    document_rowSave(form, done, loading) {
      loading();
      form.toolsCodeId = this.$route.query.id;
      document_add(form).then(() => {
        done(form);
        this.document_onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    // 文档清册 编辑按钮处理
    document_rowUpdate(form, index, done, loading) {
      console.log(form)
      document_update(form).then(() => {
        done(form);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });

    },
    // 文档清册 删除按钮处理
    document_rowDel(form, index, done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return document_remove(form.id);
        })
        .then(() => {
          this.document_onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    SearchDetail() {
      getDetail(this.$route.query.id).then(res => {
        console.log(res);
        this.tab1_form = res.data.data;
      });
    },
    auditing() {
      this.$confirm("是否将数据审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.tab1_form.checkStatus = "2"
        this.submitRejectOrauditing();
      });
    },
    reject() {
      this.$confirm("是否将数据审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.tab1_form.checkStatus = "3"
        this.submitRejectOrauditing();
      });
    },
    submitRejectOrauditing() {
      update(this.tab1_form).then(() => {
        this.$router.push({
          path: "/leger/toolinventoryrecord",
          query: {},
        });
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }).catch((error) => {
        this.$message({
          type: "error",
          message: "操作失败!"
        });
      });
    },
    del() {
      this.$confirm("是否将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        remove(this.tab1_form.id).then(() => {
          this.$router.push({
            path: "/leger/toolinventoryrecord",
            query: {},
          });
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }).catch((error) => {
          this.$message({
            type: "error",
            message: "操作失败!"
          });
        });
      })
    },
    headerClass() {
      return 'head-style'
    },
    inspection_onLoad(row, params = {}) {
      this.loading = true;
      inspection_getListBylegerId(this.$route.query.id).then(res => {
        this.inspection_data = res.data.data;
        this.loading = false;
      });
    },
    parameters_onLoad(row, params = {}) {
      this.loading = true;
      parameters_tools_getListBylegerId(this.$route.query.id).then(res => {
        this.parameters_data = res.data.data;
        this.loading = false;
      });
    },
    document_onLoad(row, params = {}) {
      this.loading = true;
      document_tools_getListBylegerId(this.$route.query.id).then(res => {
        this.document_data = res.data.data;
        this.loading = false;
      });
    },
    handleDownload(row) {
      window.open(`/api/system/file/download?daf-auth=${getToken()}&fileName=${row.accessoryName}`);
    },
    uploadAfter(response, done) {
      debugger
      console.log(response)
      // response 是服务器响应
      this.document_form.accessoryName = response.fileName;
      this.document_form.prAccessoryName = response.name;
      done();
    },
    handleUploadPreview(file) {
      // 禁止文件预览
      return false;
    },
    handleUploadDelete(file) {
      this.document_form.accessoryName = '';
      this.document_form.prAccessoryName = '';
    }
  }
}
</script>
<style>
.head-style {
  background-color: #1e9fff !important;
  color: #FFFFFF !important;
}

.frame_class1 input.el-input__inner {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}

.frame_class1 input::placeholder {
  color: transparent;
  display: none; /* 默认隐藏 */
}

.frame_class1 .el-input__icon {
  display: none;
}

.frame_class1 .el-input--prefix .el-input__inner {
  padding-left: 15px;
}

.container {
  display: flex;
  justify-content: flex-end; /* 将子元素推到容器的末端 */
}

.check_status_class {
  display: flex;
  justify-content: flex-end; /* 将子元素推到容器的末端 */
}

.check_status_class input.el-input__inner {
  border: none;
  box-shadow: none;
  outline: none;
  pointer-events: none;
}
</style>
