<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==='attachment'">
        <div>
          <avue-crud :data="attachment_data"
                     :table-loading="loading"
                     :option="optionParam"
                     :permission="permissionList"
                     :before-open="beforeOpen"
                     :header-cell-class-name="headerClass"
                     v-model="attachment_form"
                     ref="crud"
                     @row-del="attachment_rowDel"
                     @row-update="attachment_rowUpdate"
                     @row-save="attachment_rowSave">
          </avue-crud>
        </div>
      </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="closeTicket"
                    v-if="shouldShowButton">
                    关票</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/smart/workpermit";
  import {
    attachment_add,
    attachment_update,
    attachment_remove,
    attachment_getListBylegerId,
  } from "@/api/smart/workpermitattachment";
  import {mapGetters} from "vuex";
  import website from "@/config/website";
  import {readonly} from "vue";
  import {getToken} from "@/util/auth";
  import {parameters_remove} from "@/api/leger/techparameters";
  import request from "@/router/axios";
  export default {
    name: "equipmentledgerDetail",
    data () {
      return {
        checkStatusValue: this.$route.query.checkstatus,
          optionCheckStatus: [{
            value: 1,
            label: '审核中'
          }, {
            value: 2,
            label: '已审核'
          }, {
            value: 3,
            label: '未通过'
          }, {
            value: 4,
            label: ' '
          }],
        frame_class: '',
        type: {},
        shouldShowButton:{},
        addUpdateShowButton:{},
        UpdateShowButton:{},
        readonlyForm:{},
        attachment_form:{},
        option: {
          column: [{
            label: '基本信息',
            prop: 'information',
          }
          ]
        },
        tab1_form: {},
        tab1_option: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: "KKS编码",
              prop: "kksEncoding",
              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.tab1_form.kksDescription = res.data.data.kksDescription;
                      this.tab1_form.stations = res.data.data.station;
                    })
                  }
                },
              },
              rules: [{
                required: true,
                message: "请输入KKS编码",
                trigger: "blur",
              }],
              span: 8,
              maxlength: 20,
            },
            {
              label: "KKS描述",
              prop: "kksDescription",
              disabled: true,
              rules: [{
                required: true,
                message: "请输入KKS描述",
                trigger: "blur"
              }],
              span: 8,
              maxlength: 20,
            },
            {
              label: "场站",
              prop: "stations",
              disabled: true,
              type: "select",
              dicUrl: "/api/daf-system/dict/dictionary?code=station",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              span: 8,
              maxlength: 20,
            },
            {
              label: "工作票编号",
              prop: "workTicketNo",
              rules: [{
                required: true,
                message: "请输入工作票编号",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "工作票类型",
              prop: "workTicketType",
              rules: [{
                required: true,
                message: "请输入工作票类型",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "工单",
              prop: "tickets",
              span:8
            },
            {
              label: "班组",
              prop: "team",
              rules: [{
                required: true,
                message: "请输入班组",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "工作负责人",
              prop: "workChargePerson",
              rules: [{
                required: true,
                message: "请输入工作负责人",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "工作班成员",
              prop: "workClassMembers",
              rules: [{
                required: true,
                message: "请输入工作班成员",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "许可人",
              prop: "licensors",
              rules: [{
                required: true,
                message: "请输入许可人",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "签发人",
              prop: "issuer",
              rules: [{
                required: true,
                message: "请输入签发人",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "功能位置",
              prop: "functionalLocation",
              span:8
            },
            {
              label: "工作地点",
              prop: "placeWork",
              rules: [{
                required: true,
                message: "请输入工作地点",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "工作内容",
              prop: "jobDescription",
              rules: [{
                required: true,
                message: "请输入工作内容",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "计划开始时间",
              prop: "planStartDate",
              rules: [{
                required: true,
                message: "请输入计划开始时间",
                trigger: "blur"
              }],
              type: "date",
              format: 'yyyy/MM/dd',
              valueFormat: "yyyyMMdd",
              span:8
            },
            {
              label: "计划结束时间",
              prop: "planEndDate",
              rules: [{
                required: true,
                message: "请输入计划结束时间",
                trigger: "blur"
              }],
              type: "date",
              format: 'yyyy/MM/dd',
              valueFormat: "yyyyMMdd",
              span:8
            },
            {
              label: "工作条件",
              prop: "workingConditions",
              rules: [{
                required: true,
                message: "请输入工作条件",
                trigger: "blur"
              }],
              span:8
            },
            {
              label: "实际结束时间",
              prop: "actualEndDate",
              type: "date",
              format: 'yyyy/MM/dd',
              valueFormat: "yyyyMMdd",
              span:8
            },
            {
              label: "是否延期",
              prop: "isExtended",
              type: "select",
              dicUrl: "/api/daf-system/dict/dictionary?code=yes_no",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              span:8
            },
            {
              label: "计划延期时间",
              prop: "plannedExtensionDate",
              type: "date",
              format: 'yyyy/MM/dd',
              valueFormat: "yyyyMMdd",
              span:8
            },
            {
              label: "延期申请理由",
              prop: "extRegReason",
              span:8
            },
            {
              label: "是否变更",
              prop: "ischanged",
              type: "select",
              dicUrl: "/api/daf-system/dict/dictionary?code=yes_no",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              span:8
            },
            {
              label: "变更申请理由",
              prop: "changeReason",
              span:8,
              row:true,
            },
            {
              label: "总结",
              prop: "summary",
              span:8
            },
            {
              label: "工作状态",
              type: "select",
              prop: "workState",
              dicUrl: "/api/daf-system/dict/dictionary?code=work_status",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              span:8
            },
          ]
        },
        tab2_page: {
          pageSize: 20,
          pagerCount: 5
        },
        attachment_data: [],
        optionParam: {
          align: 'center',
          menuAlign: 'center',
          height: 'auto',
          calcHeight: 210,
          searchShow: true,
          searchMenuSpan: 6,
          tip: false,
          border: true,
          indexLabel: "序号",
          index: true,
          column: [
            {
              label: "附票编码",
              prop: "ticketCode",
            },
            {
              label: "附票类型",
              prop: "ticketType",
              type: "select",
              dicUrl: "/api/daf-system/dict/dictionary?code=ticket_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              rules: [{
                required: true,
                message: "请输入附票类型",
                trigger: "blur"
              }],
              span:24,
            },
            {
              label: "专项作业名称",
              prop: "specialJobName",
              rules: [{
                required: true,
                message: "请输入专项作业名称",
                trigger: "blur"
              }],
              span:24,
            },
            {
              label: "工作内容",
              prop: "jobDescription",
              rules: [{
                required: true,
                message: "请输入工作内容",
                trigger: "blur"
              }],
              span:24,
            },
            {
              label: "状态",
              type: "select",
              prop: "workStatus",
              dicUrl: "/api/daf-system/dict/dictionary?code=work_status",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              rules: [{
                required: true,
                message: "请输入工作状态",
                trigger: "blur"
              }],
              span:24,
            },
            {
              label: "工作地点",
              prop: "placeWork",
              rules: [{
                required: true,
                message: "请输入工作地点",
                trigger: "blur"
              }],
              span:24,
            },
            {
              label: "创建人",
              prop: "createUser",
              type: 'select',
              dicUrl: "/api/daf-user/listBySearch?search={{key}}",
              props: {
                label: 'name',
                value: 'id',
                desc: 'code'
              },
              span:24,
            },
            {
              label: "创建时间",
              prop: "createTime",
            }
          ]
        },
        tab3_page: {
          pageSize: 20,
          pagerCount: 5
        },
      }
    },
    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: 'attachment' });
        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();
        const kksDescription = this.findObject(this.tab1_option.column, "kksDescription");
        kksDescription.disabled = false;
        const stations = this.findObject(this.tab1_option.column, "stations");
        stations.disabled = false;
      }else{
        this.readonlyForm=false;
        this.shouldShowButton=false;
        this.UpdateShowButton=false;
        this.addUpdateShowButton=true;
        this.frame_class = null;
        this.checkStatusValue = 4;
      }
      const create_user = this.findObject(this.optionParam.column, "createUser");
      create_user.display = false;
      const create_date = this.findObject(this.optionParam.column, "createTime");
      create_date.display = false;
      const ticketCode = this.findObject(this.optionParam.column, "ticketCode");
      ticketCode.display = false;
    },
    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: "/smart/workpermit",
                query: {
                },
              });
              this.$message({
                type: "success",
                message: "操作成功!"
              });
            }).catch((error) => {
              this.$message({
                type: "error",
                message: "操作失败!"
              });
            });
          });
        }else {
          this.$confirm("是否修改所填数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.tab1_form.checkStatus="1"
            update(this.tab1_form).then(() => {
              this.$router.push({
                path: "/smart/workpermit",
                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/workpermit"});
        }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=true;
        this.frame_class = 'frame_class1';
      },
      handleChange (column) {
        this.type = column
        if (column.prop == 'attachment') {
          this.UpdateShowButton=false;
         this.attachment_onLoad();
        }if (column.prop == 'information'){
          this.UpdateShowButton=true;
        }
        this.attachment_form.ticketCode = this.tab1_form.workTicketNo;
      },
      // 工作票新增按钮处理
      attachment_rowSave (form, done, loading) {
        loading();
        form.workTicketNo = this.$route.query.id;
        form.ticketCode = this.attachment_form.ticketCode;
        attachment_add(form).then(() => {
          done(form);
          this.attachment_onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.attachment_form.ticketCode = this.tab1_form.workTicketNo;
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      // 工作票编辑按钮处理
      attachment_rowUpdate (form, index, done, loading) {
        attachment_update(form).then(() => {
          done(form);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      // 工作票删除按钮处理
      attachment_rowDel (form, index,done) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return attachment_remove(form.id);
          })
          .then(() => {
            this.attachment_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;
        });
      },
      closeTicket() {
        this.$confirm("是否结束该工作票?", "提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.tab1_form.workState="4"
          this.submitRejectOrauditing();
        });
      },
      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: "/smart/workpermit",
            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/workpermit",
              query: {},
            });
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          }).catch((error) => {
            this.$message({
              type: "error",
              message: "操作失败!"
            });
          });
        })
      },
      headerClass(){
        return 'head-style'
      },
      attachment_onLoad(row, params = {}) {
        this.loading = true;
        attachment_getListBylegerId(this.$route.query.id).then(res => {
          this.attachment_data = res.data.data;
          this.loading = false;
        });
      }
    }
  }
</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;
}

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

.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>
