<template>
  <basic-container>
    <template>
      <el-row :span="24">
        <el-col :span="5">
          场站:
          <el-select v-model="stationValue" disabled="disabled">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          KKS编码:<el-input
            type="text"
            resize="none"
            v-model="kksEncodingValue"
            style="width: 300px;"
            disabled="disabled">
        </el-input>
        </el-col>
        <el-col :span="9">
          KKS描述:<el-input
            type="text"
            resize="none"
            v-model="kksDesValue"
            style="width: 500px;"
            disabled="disabled">
          </el-input>
        </el-col>
      </el-row>
    </template>
    <avue-tabs :option="option"
               @change="handleChange"></avue-tabs>
    <span v-if="type.prop==='workorder'">
        <div>
          <avue-crud :data="workorder_data"
                     :table-loading="loading"
                     :option="optionWorkOrder"
                     :permission="permissionList"
                     :before-open="beforeOpen"
                     :header-cell-class-name="headerClass"
                     v-model="workorder_form"
                     ref="workorder_crud">
          </avue-crud>
        </div>
      </span>
    <span v-else-if="type.prop==='workticket'">
          <avue-crud :data="workticket_data"
                     :table-loading="loading"
                     :option="optionWorkTicket"
                     :permission="permissionList"
                     :before-open="beforeOpen"
                     :header-cell-class-name="headerClass"
                     v-model="workticket_form"
                     ref="workticket_crud">
          </avue-crud>
      </span>
    <span v-else-if="type.prop==='operation'">
      <div id="operation">
        <avue-crud :option="optionOperation"
                   :table-loading="loading"
                   :data="operation_data"
                   :permission="permissionList"
                   :header-cell-class-name="headerClass"
                   v-model="operation_form"
                   ref="operation_crud">
          </avue-crud>
      </div>
      </span>
  </basic-container>
</template>
<script>
import {getList, getDetail, add, update, remove} from "@/api/leger/equipmentledger";
import {
  parameters_add,
  parameters_update,
  parameters_remove,
  parameters_getListBylegerId,
  parameters_Del
} from "@/api/leger/techparameters";
import {
  document_add,
  document_update,
  document_remove,
  document_getListBylegerId,
  document_Del
} 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: "dynamicledgerDetail",
  data () {
    return {
      stationValue: this.$route.query.station,
        options: [{
          value: 1,
          label: '景和光伏'
        }, {
          value: 2,
          label: '北沙一光伏'
        }, {
          value: 3,
          label: '北沙二光伏'
        }, {
          value: 4,
          label: '达坂城风电一场'
        }],
      kksEncodingValue:this.$route.query.kksEncoding,
      kksDesValue:this.$route.query.kksDescription,
      frame_class: '',
      type: {},
      shouldShowButton:{},
      addUpdateShowButton:{},
      readonlyForm:{},
      option: {
        column: [{
          label: '工单',
          prop: 'workorder',
        }, {
          label: '工作票',
          prop: 'workticket',
        },{
          label: '操作票',
          prop: 'operation',
        }
        ]
      },
      workorder_form: {},
      optionWorkOrder: {
        align: 'center',
        menuAlign: 'center',
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        menu: false,
        tip: false,
        border: true,
        indexLabel: "序号",
        index: true,
        column: [
          {
            label: "工单编号",
            prop: "orderNo",
          },
          {
            label: "工单类型",
            prop: "orderType",
          },
          {
            label: "内容描述",
            prop: "orderDescription",
          },
          {
            label: "维护作业类型",
            prop: "maintenenceType",
          },
          {
            label: "用户状态",
            prop: "userStatus",
          },
          {
            label: "发生时间",
            prop: "happenDate",
          },
          {
            label: "处理时间",
            prop: "processDate",
          },
          {
            label: "处理结果",
            prop: "processResult",
          },
        ]
      },
      tab2_page: {
        pageSize: 20,
        pagerCount: 5
      },
      workticket_data: [],
      optionWorkTicket: {
        align: 'center',
        menuAlign: 'center',
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        menu: false,
        tip: false,
        border: true,
        indexLabel: "序号",
        index: true,
        column: [
          {
            label: "工作票编号",
            prop: "ticketNo",
          },
          {
            label: "工作票类型",
            prop: "ticketType",
          },
          {
            label: "工作负责人",
            prop: "workPrincipal",
          },
          {
            label: "许可人",
            prop: "licensor",
          },
          {
            label: "签发人",
            prop: "signer",
          },
          {
            label: "许可时间",
            prop: "permissionDate",
          },
          {
            label: "状态",
            prop: "workStatus",
          },
        ]
      },
      tab3_page: {
        pageSize: 20,
        pagerCount: 5
      },
      operation_data: [],
      optionOperation: {
        align: 'center',
        menuAlign: 'center',
        height: 'auto',
        calcHeight: 210,
        searchShow: true,
        searchMenuSpan: 6,
        menu: false,
        tip: false,
        border: true,
        indexLabel: "序号",
        index: true,
        column: [
          {
            label: "操作票编号",
            prop: "operationNo",
          },
          {
            label: "状态",
            prop: "operationStatus",
          },
          {
            label: "操作任务",
            prop: "operationTask",
          },
          {
            label: "操作开始时间",
            prop: "operationStateData",
          },
          {
            label: "操作结束时间",
            prop: "operationEndData",
          },
          {
            label: "操作人",
            prop: "operator",
          },
          {
            label: '监护人',
            prop: 'guardian',
          },
          {
            label: "发令人",
            prop: "enforcer",
          },
          {
            label: "操作人所属班组",
            prop: "operationTeam",
          },
          {
            label: '风险等级',
            prop: 'risk',
          },
          {
            label: '是否合格',
            prop: 'isQualified',
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn:  false,
        viewBtn: false,
        delBtn: false,
        editBtn: false
      };
    },
  },
  created () {
    this.type = this.option.column[0];
  },
  methods: {
    handleChange (column) {
      this.type = column
      // if (column.prop == 'workodrder') {
      //   this.workodrder_onLoad();
      // }if (column.prop == 'workticket') {
      //   this.workticket_onLoad();
      // }if (column.prop == 'operation') {
      //   this.operation_onLoad();
      // }
    },

    headerClass(){
      return 'head-style'
    },
    // workodrder_onLoad(row, params = {}) {
    //   this.loading = true;
    //   workodrder_getListBylegerId(this.$route.query.id).then(res => {
    //     this.parameters_data = res.data.data;
    //   this.loading = false;
    //   });
    // },
    // workticket_onLoad(row, params = {}) {
    //   this.loading = true;
    //   workticket_getListBylegerId(this.$route.query.id).then(res => {
    //     this.document_data = res.data.data;
    //   this.loading = false;
    //   });
    // },
    // operation_onLoad(row, params = {}) {
    //   this.loading = true;
    //   operation_getListBylegerId(this.$route.query.id).then(res => {
    //     this.document_data = res.data.data;
    //   this.loading = false;
    //   });
    // }

  }
}
</script>
<style>
.head-style{
  background-color: #3366cc !important;
  color: #FFFFFF !important;
}
</style>
