<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"
                     :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 {getWorkOrderbyKksEncoding, getworkticketbyKksEncoding, getoperationbyKksEncoding} from "@/api/leger/dynamicledger";
import {mapGetters} from "vuex";
import {Alert} from "element-ui";

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: {},
      workorder_form:{},
      shouldShowButton:{},
      addUpdateShowButton:{},
      readonlyForm:{},
      option: {
        column: [{
          label: '工单',
          prop: 'workorder',
        }, {
          label: '工作票',
          prop: 'workticket',
        },{
          label: '操作票',
          prop: 'operation',
        }
        ]
      },
      loading: true,
      workorder_data: {},
      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: "workOrderNo",
          },
          {
            label: "工单类型",
            prop: "workOrderType",
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=workorder_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "内容描述",
            prop: "description",
          },
          {
            label: "维护作业类型",
            prop: "maintenanceTaskType",
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=maintenance_job_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "用户状态",
            prop: "userStatus",
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=user_status",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "发生时间",
            prop: "occurrenceTime",
            type: "datetime",
            format: 'yyyy/MM/dd HH:mm:ss',
            valueFormat: "yyyyMMdd HH:mm:ss",
          },
          {
            label: "处理时间",
            prop: "processingTime",
            type: "datetime",
            format: 'yyyy/MM/dd HH:mm:ss',
            valueFormat: "yyyyMMdd HH:mm:ss",
          },
          {
            label: "处理结果",
            prop: "handlingResult",
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=workorder_process_res",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
        ]
      },
      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: "workTicketNo",
          },
          {
            label: "工作票类型",
            prop: "workTicketType",
          },
          {
            label: "工作负责人",
            prop: "workChargePerson",
          },
          {
            label: "许可人",
            prop: "licensors",
          },
          {
            label: "签发人",
            prop: "issuer",
          },
          {
            label: "许可时间",
            prop: "planStartDate",
            type: "datetime",
            format: 'yyyy/MM/dd HH:mm:ss',
            valueFormat: "yyyyMMdd HH:mm:ss",
          },
          {
            label: "状态",
            prop: "workState",
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=work_status",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
        ]
      },
      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: "operationTicketNo",
          },
          {
            label: "状态",
            prop: "sts",
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=operation_sts",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "操作票类型",
            prop: "operationTicketType",
          },
          {
            label: "操作开始时间",
            prop: "plannedStartTime",
            type: "datetime",
            format: 'yyyy/MM/dd HH:mm:ss',
            valueFormat: "yyyyMMdd HH:mm:ss",
          },
          {
            label: "操作结束时间",
            prop: "plannedEndTime",
            type: "datetime",
            format: 'yyyy/MM/dd HH:mm:ss',
            valueFormat: "yyyyMMdd HH:mm:ss",
          },
          {
            label: "操作人",
            prop: "workLeader",
          },
          {
            label: '监护人',
            prop: 'guardian',
          },
          {
            label: "发令人",
            prop: "givingOrdersUser",
          },
          {
            label: "操作人所属班组",
            prop: "workTeam",
          },
          {
            label: '风险等级',
            prop: 'jobRiskLevel',
          },
          {
            label: '是否合格',
            prop: 'isQuakified',
            type: "select",
            dicUrl: "/api/daf-system/dict/dictionary?code=is_qualified",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn:  false,
        viewBtn: false,
        delBtn: false,
        editBtn: false
      };
    },
  },

  created () {
    this.type = this.option.column[0];
    this.workOrder_onLoad()
  },
  methods: {
    handleChange (column) {
      this.type = column
      if (column.prop === 'workodrder') {
        this.workOrder_onLoad();
      }if (column.prop === 'workticket') {
        this.workticket_onLoad();
      }if (column.prop === 'operation') {
        this.operation_onLoad();
      }
    },

    headerClass(){
      return 'head-style'
    },
    workOrder_onLoad() {
      this.loading = true;
      console.log(123,this.$route.query.kksEncoding);
      getWorkOrderbyKksEncoding(this.$route.query.kksEncoding).then(res => {
        this.workorder_data = res.data.data;
        this.loading = false;
      });
    },
    workticket_onLoad(r) {
      this.loading = true;
      getworkticketbyKksEncoding(this.$route.query.kksEncoding).then(res => {
        this.workticket_data = res.data.data;
        this.loading = false;
      });
    },
    operation_onLoad() {
      this.loading = true;
      getoperationbyKksEncoding(this.$route.query.kksEncoding).then(res => {
        this.operation_data = res.data.data;
      this.loading = false;
      });
    }

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