<template>
  <basic-container>
    <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>
    <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==='operationItem'">
        <!--        选项卡内容3  https://avuejs.com/crud/crud-fun.html-->
        <avue-crud :option="optionDoc"
                   :table-loading="loading"
                   :data="item_data"
                   :permission="permissionList"
                   :header-cell-class-name="headerClass"
                   v-model="item_form"
                   ref="crud2"
                   @row-update="item_rowUpdate"
                   @row-save="item_rowSave"
                   @row-del="item_rowDel">
          </avue-crud>
      </span>
    <div class="container">
       <span >
          <el-button type="primary"
                     size="large"
                     @click="handleFormSubmit"
                     v-if="addUpdateShowButton">
                     确定</el-button>
          <el-button type="text"
                     size="large"
                     @click="back"
                     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="shouldShowButton">
                      修改</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/smart/operationticket";
import {
  item_add,
  item_update,
  item_remove,
  item_getListByItemId,
  getItemDetail,
} from "@/api/smart/operationitem";
import {mapGetters} from "vuex";
import website from "@/config/website";
import {readonly} from "vue";
import {getToken} from "@/util/auth";
export default {
  name: "operationticketDetail",
  data () {
    return {
      checkStatusValue: this.$route.query.reviewStatus,
      optionCheckStatus: [{
        value: "1",
        label: '审核中'
      }, {
        value: "2",
        label: '已审核'
      }, {
        value: "3",
        label: '未通过'
      }, {
        value: "4",
        label: ' '
      }],
      frame_class: '',
      type: {},
      shouldShowButton:{},
      addUpdateShowButton:{},
      readonlyForm:{},
      item_form:{},
      option: {
        column: [{
          label: '基本信息',
          prop: 'information',
        }
        ]
      },

      tab1_form: {},
      tab1_option: {
        submitBtn: false,
        emptyBtn: false,
        isShowItem: false,
        group:[
          {
            column: [
              {
                label: "KKS编码",
                prop: "kksEncoding",
                rules: [{
                  required: true,
                  message: "请输入KKS编码",
                  trigger: "blur",
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "KKS描述",
                prop: "kksDescription",
                rules: [{
                  required: true,
                  message: "请输入KKS描述",
                  trigger: "blur"
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "场站",
                prop: "station",
                rules: [{
                  required: true,
                  message: "请输入场站",
                  trigger: "blur"
                }],
                type: "select",
                dicUrl: "/api/daf-system/dict/dictionary?code=station",
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
                span: 8,
                maxlength: 20,
              },

              {
                label: "操作票编号",
                prop: "operationTicketNo",
                rules: [{
                  required: true,
                  message: "请输入操作票编号",
                  trigger: "blur",
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "操作票类型",
                prop: "operationTicketType",
                rules: [{
                  required: true,
                  message: "请输入操作票类型",
                  trigger: "blur"
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "作业风险等级",
                prop: "jobRiskLevel",
                rules: [{
                  required: true,
                  message: "请输入作业风险等级",
                  trigger: "blur"
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "工作班组",
                prop: "workTeam",
                rules: [{
                  required: true,
                  message: "请输入工作班组",
                  trigger: "blur"
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "工作负责人",
                prop: "workLeader",
                rules: [{
                  required: true,
                  message: "请输入工作负责人",
                  trigger: "blur"
                }],
                span:8,
                row:true,
                maxlength: 20,
              },

              {
                label: "发令人",
                prop: "givingOrdersUser",
                rules: [{
                  required: true,
                  message: "请输入发令人",
                  trigger: "blur"
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "监护人",
                prop: "guardian",
                rules: [{
                  required: true,
                  message: "请输入监护人",
                  trigger: "blur"
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "控制等级",
                prop: "controlLevel",
                rules: [{
                  required: true,
                  message: "请输入控制等级",
                  trigger: "blur"
                }],
                span: 8,
                maxlength: 20,
              },
              {
                label: "计划开始时间",
                prop: "plannedStartTime",
                rules: [{
                  required: true,
                }],
                type: "date",
                format: 'yyyy/MM/dd',
                valueFormat: "yyyyMMdd",
                span: 8,
                maxlength: 20,
              },
              {
                label: "计划结束时间",
                prop: "plannedEndTime",
                rules: [{
                  required: true,
                }],
                type: "date",
                format: 'yyyy/MM/dd',
                valueFormat: "yyyyMMdd",
                span: 8,
                maxlength: 20,
              },
              {
                label: "工作签发时间",
                prop: "workIssuanceTime",
                rules: [{
                  required: true,
                }],
                type: "date",
                format: 'yyyy/MM/dd',
                valueFormat: "yyyyMMdd",
                span: 8,
                maxlength: 20,
              },
              {
                label: "安全措施交底",
                prop: "securityMeasuresDisclosure",
                type: "textarea",
                span: 8,
                maxlength: 1000,
              },
              {
                label: "作业后风险管控情况评价",
                prop: "riskControlEvaluation",
                type: "textarea",
                span: 8,
                display: this.$route.query.frameMode == "add"? false : true,
                maxlength: 1000,
              },
              {
                label: "状态",
                prop: "sts",
                type: "select",
                dicUrl: "/api/daf-system/dict/dictionary?code=operation_sts",
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
                display: this.$route.query.frameMode == "add"? false : true,
                span: 8,
                maxlength: 20,
              },
              {
                label: "是否合格",
                display: this.$route.query.frameMode == "add"? false : true,
                type: "select",
                prop: "isQuakified",
                dicUrl: "/api/daf-system/dict/dictionary?code=is_qualified",
                span: 8,
                offset: 16,
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
              },
            ]
          },
          {
            label: '作业前风险辨识',
            column: [
              {
                label: "人员资格",
                prop: "personnelQualification",
                span: 8,
                maxlength: 20,
              },
              {
                label: "人员状态",
                prop: "personnelState",
                span: 8,
                maxlength: 20,
              },
              {
                label: "人员防护",
                prop: "personnelPritection",
                span: 8,
                maxlength: 20,
              },
              {
                label: "安全距离",
                prop: "safeDistance",
                span: 8,
                maxlength: 20,
              },
              {
                label: "走错间隔",
                prop: "wrongInterval",
                span: 8,
                maxlength: 20,
              },
              {
                label: "安全措施落实",
                prop: "securityMeasuresImplement",
                span: 8,
                maxlength: 20,
              },
              {
                label: "开展过程检查",
                prop: "conductProcessInspections",
                span: 8,
                maxlength: 20,
              },
              {
                label: "安全培训落实",
                prop: "securityTrainingImplement",
                span: 8,
                maxlength: 20,
              },
              {
                label: "其他",
                prop: "other",
                span: 8,
                maxlength: 20,
              },


            ]

          },
          ]
      },
      tab3_page: {
        pageSize: 20,
        pagerCount: 5
      },
      item_data: [],
      optionDoc: {
        align: 'center',
        menuAlign: 'center',
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        indexLabel: "序号",
        index: true,
        column: [
          {
            label: "操作票编号",
            prop: "operationTicketNo",
            span: 20,
            // disabled: true,
            rules: [{
              required: true,
              message: "请输入操作票编号",
              trigger: "blur"
            }]
          },
          {
            label: "操作项目编号",
            prop: "operationItemNo",
            span: 20,
            rules: [{
              required: true,
              message: "请输入操作项目编号",
              trigger: "blur"
            }]
          },
          {
            label: "项目名称",
            prop: "itmeName",
            span: 20,
            rules: [{
              required: true,
              message: "请输入项目名称",
              trigger: "blur"
            }]
          },
          {
            label: "危害因素",
            prop: "securityMeasures",
            span: 20,
            rules: [{
              required: true,
              message: "请输入危害因素",
              trigger: "blur"
            }]
          },
          {
            label: "风险等级",
            prop: "riskLevel",
            span: 20,
            rules: [{
              required: true,
              message: "请输入风险等级",
              trigger: "blur"
            }]
          },
          {
            label: "其他",
            prop: "other",
            span: 20,
            type:"textarea",
            rules: [{
              required: true,
              message: "请输入其他",
              trigger: "blur"
            }]
          },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn:  true,
        viewBtn: false,
        delBtn: true,
        editBtn: true
      };
    },
  },
  created () {
    this.type = this.option.column[0];
    this.option.column.push({ label: '操作项目', prop: 'operationItem' });
    if(this.$route.query.frameMode == "add"){
      this.readonlyForm=false;
      this.shouldShowButton=false;
      this.addUpdateShowButton=true;
      this.frame_class = null;
    }else{
      this.readonlyForm=false;
      this.shouldShowButton=true;
      this.addUpdateShowButton=false;
      this.frame_class = 'frame_class1';
      this.SearchDetail();
    }
  },
  methods: {
    handleFormSubmit() {
      const form = this.$refs.tab1_form;
      form.validate((valid) => {
        if (valid) {
          this.Submit();
        } else {
          this.$message({
            type: "warning",
            message: "请输入必要信息!"
          });
        }
      });
    },
    // 处理表单提交
    Submit() {
      if(this.$route.query.frameMode=="add"){
        this.$confirm("是否新增所填数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.tab1_form.reviewStatus="1"
          this.tab1_form.sts= "1"
          add(this.tab1_form).then(()=>{
            this.$router.push({
              path: "/smart/operationticket",
              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: "/smart/operationticket",
              query: {},
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        });
      }
    },
    back() {
      if(this.$route.query.frameMode=="add") {
        this.$router.push({path: "/smart/operationticket"});
      }else{
        this.updateToSearch();
        this.SearchDetail();
      }
    },
    seachToUpdate () {
      this.shouldShowButton=false;
      this.addUpdateShowButton=true;
      this.readonlyForm=false;
      this.frame_class = null;
    },
    updateToSearch () {
      this.readonlyForm=true;
      this.shouldShowButton=true;
      this.addUpdateShowButton=false;
      this.frame_class = 'frame_class1';
    },
    handleChange (column) {
      this.type = column
      if(this.$route.query.frameMode != "add"){
        if (column.prop == 'operationItem') {
          this.item_onLoad();
        }
      }
    },

    // 操作项目 新增按钮处理
    item_rowSave (form, done, loading) {
      loading();
      form.id = this.$route.query.id;
      item_add(form).then(() => {
        done(form);
        this.item_onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    // 操作项目 编辑按钮处理
    item_rowUpdate (form, index, done, loading) {
      console.log(form)
      item_update(form).then(() => {
        done(form);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });

    },
    // 操作项目 删除按钮处理
    item_rowDel (form, index,done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return item_remove(form.id);
        })
        .then(() => {
          this.item_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;
      });
      // getItemDetail(this.$route.query.id,this.tab1_form.operationTicketNo).then(res => {
      //   console.log(res);
      //   this.item_data = res.data.data;
      // });
    },
    auditing() {
      this.$confirm("是否将数据审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.tab1_form.reviewStatus="2"
        this.submitRejectOrauditing();
      });
    },
    reject() {
      this.$confirm("是否将数据审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.tab1_form.reviewStatus="3"
        this.submitRejectOrauditing();
      });
    },
    submitRejectOrauditing() {
      update(this.tab1_form).then(() => {
        this.$router.push({
          path: "/smart/operationticket",
          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: "/smart/operationticket",
            query: {},
          });
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }).catch((error) => {
          this.$message({
            type: "error",
            message: "操作失败!"
          });
        });
      })
    },
    headerClass(){
      return 'head-style'
    },
    item_onLoad(row, params = {}) {
      this.loading = true;
      item_getListByItemId(this.$route.query.operationTicketNo).then(res => {
        this.item_data = res.data.data;
        this.loading = false;
      });
    },
    handleDownload(row) {
      window.open(`/api/system/file/download?daf-auth=${getToken()}&fileName=${row.accessoryName}`);
    },
  }
}
</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 .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; /* 将子元素推到容器的末端 */
}
</style>
