<template>
  <el-dialog
    title="保养单详情"
    append-to-body
    fullscreen
    :visible.sync="dialogVisible"
    @close="close"
    @open="open"
  >
    <el-form ref="form" style="border: 1px solid #cfe0df;margin-top: 10px;padding-top: 10px;" :inline="true" :model="form"  size="mini" label-width="120px" label-suffix=":">
      <el-row>
        <el-col :span="8">
          <el-form-item label="单据号" prop="maint_code">
            <el-input v-model="form.maint_code" style="width: 200px;" disabled  />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="业务日期" prop="plan_start_date">
            <el-date-picker v-model="form.plan_start_date" type="date" placeholder="选择日期" style="width: 200px" value-format="yyyy-MM-dd" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="保养类型" prop="maintenancecycle">
            <el-select
              v-model="form.maintenancecycle"
              disabled
              size="mini"
              placeholder="请选择"
              class="filter-item"
            >
              <el-option
                v-for="item in dict.EM_DEVICE_BY_INVTYPE"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="设备" prop="devicerecord_id">
            <el-input v-model="form.device_code" :disabled="true" style="width: 200px;">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" style="width: 580px;" rows="2" type="textarea" disabled />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="crud-opts2">
      <span class="role-span">项目明细</span>
    </div>

    <el-card class="box-card" shadow="never" :body-style="{padding:'0'}">
      <!--表格渲染-->
      <el-table
        ref="table2"
        :data="tableData"
        style="width: 100%;"
        max-height="500"
        border
        :highlight-current-row="true"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
      >
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column show-overflow-tooltip prop="maint_item_code" label="保养项目编号" align="center" />
        <el-table-column show-overflow-tooltip prop="maint_item_name" label="保养项目名称" align="center" />
        <el-table-column show-overflow-tooltip prop="item_level" label="保养等级" align="center" :formatter="formatLevel" />
        <el-table-column show-overflow-tooltip prop="contents" label="保养内容" align="center" />
        <el-table-column show-overflow-tooltip prop="requirement" label="要求" align="center" />
        <el-table-column prop="dtl_remark" label="备注" align="center" />
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>

import crudDevicemaintenancemst from '@/api/wms/sb/devicemaintenancemst'

export default {
  name: 'ViewDialog1',
  components: { },
  dicts: ['EM_DEVICE_WX_INVTYPE', 'EM_DEVICE_BY_INVTYPE'],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    rowmst: {
      type: Object
    }
  },
  watch: {
    dialogShow: {
      handler(newValue) {
        this.dialogVisible = newValue
      }
    },
    rowmst: {
      handler(newValue) {
        this.form = newValue
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {},
      tableData: [],
      deviceDialog: false,
      itemDialog: false
    }
  },
  methods: {
    open() {
      debugger
      const data = {
        'maint_id': this.form.maint_id
      }
      crudDevicemaintenancemst.getDtl(data).then(res => {
        this.tableData = res
      })
    },
    formatLevel(row, cloum) {
      if (row.item_level === '01') {
        return '日常'
      } else if (row.item_level === '02') {
        return '一级'
      } else if (row.item_level === '03') {
        return '二级'
      }
    },
    close() {
      this.$emit('update:dialogShow', false)
    }
  }
}
</script>

<style>
.crud-opts2 {
  padding: 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts2 .el-dialog__title2 {
  line-height: 24px;
  font-size:20px;
  color:#303133;
}

.crud-opts2 .role-span {
  padding: 10px 0px 10px 0px;
}
.crud-opts2 .crud-opts-form {
  padding: 10px 0px 0px 20px;
}

.input-with-select  {
  background-color: #fff;
}
</style>
