<template>
    <el-dialog title="详情" :visible.sync="visible" width="800px" :before-close="close" class="details-dialog">
        <el-form class="details-form" label-width="110px">
            <el-form-item label="系统模板名称:" prop="valueMean" class="classify-input">
                {{ formData.name }}
            </el-form-item>
            <el-form-item label="驱动类型:" prop="valueMean" class="classify-input">
                {{ formData.driveType | typePipe }}
            </el-form-item>
            <el-form-item label="维保周期:" prop="valueMean" class="classify-input">
                {{ formData.validTime | cyclePipe }}
            </el-form-item>
            <el-form-item label="维保项明细:" prop="valueMean" class="classify-input">
                <el-scrollbar class="maintenanceTable">
                    <el-table ref="multipleTable" :data="multipleTable" style="width: 100%" tooltip-effect="dark" border>
                        <!-- <el-table-column
                        prop="title"
                        label="序号"
                        min-width="40px;"
                        :show-overflow-tooltip="true"
                    ></el-table-column> -->
                        <el-table-column prop="opt" label="维保项" min-width="110px;" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column
                            prop="requirement"
                            label="维保要求"
                            min-width="200px;"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                    </el-table>
                </el-scrollbar>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import periodStatus from '../../model/period-status';
import { queryPage } from '@/apps/mobile/api/template-library-maintenance/index';
let that;
export default {
    data() {
        return {
            multipleTable: [], // 列表数据
            visible: false,
            formData: {},
            driveTypeList: [],
            validTimeList: [],
            ids: [],
        };
    },
    methods: {
        close() {
            this.visible = false;
            this.multipleTable = [];
        },
        open(driveTypeList, validTimeList, data) {
            this.driveTypeList = driveTypeList;
            this.validTimeList = validTimeList;
            this.ids = data.ids;
            this.visible = true;
            this.formData = { ...data };
            this.queryMaintenance();
            // console.log(this.formData, 'this.formData');
        },
        queryMaintenance() {
            let obj = {
                driveType: this.formData.driveType,
                validTime: this.formData.validTime,
            };
            console.log(obj, 'obj');
            queryPage(obj)
                .then(res => {
                    console.log(res, 'res');
                    this.ids.forEach(item => {
                        let it = res.data.records.find(val => {
                            return val.id == item;
                        });
                        if (it) {
                            this.multipleTable.push(it);
                        }
                    });
                })
                .catch(err => err);
        },
    },
    beforeCreate() {
        that = this;
    },
    filters: {
        typePipe: val => {
            let str = '';
            that.driveTypeList.forEach(item => {
                if (item.key == val) {
                    str = item.value;
                }
            });
            return str;
        },
        cyclePipe: val => {
            let str = '';
            that.validTimeList.forEach(item => {
                if (item.key == val) {
                    str = item.value;
                }
            });
            return str;
        },
    },
};
</script>
<style lang="stylus" scoped>
  .details-dialog{
      ::v-deep .el-dialog__body{
          padding-top:0;
      }
  }

  .details-form{

      ::v-deep .el-form-item{
         margin-bottom 0px;
      }
  }
    .maintenanceTable{
    height 300px;
}
</style>
