<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addRepairNotesDialog"
    :title="title"
    :close-on-click-modal="false"
    width="85%"
    :maxable="true"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="form" :model="form" class="create-form">
      <ele-pro-table
        ref="tableRef"
        :columns="faultList"
        :datasource="form.issuesListData"
        :need-page="false"
        :initLoad="false"
        maxHeight="600px"
        class="el-form-box"
        :toolkit="[]"
      >
        <template v-slot:toolbar>
          <el-button type="primary" @click="addfault">添加</el-button>
        </template>
        <template v-slot:headerType="{ column }">
          <span class="is-required">{{ column.label }}</span>
        </template>
        <template v-slot:headerPhenomenon="{ column }">
          <span class="is-required">{{ column.label }}</span>
        </template>
        <template v-slot:headerMaintenance="{ column }">
          <span class="is-required">{{ column.label }}</span>
        </template>
        <template v-slot:headerFaultReason="{ column }">
          <span class="is-required">{{ column.label }}</span>
        </template>
        <template v-slot:type="{ row,$index }">
          <el-form-item
            :prop="`issuesListData.${$index}.type`"
            :rules="{
                required: true,
                message: '请选择故障类型',
                trigger: 'change'
              }"
          >
            <el-select v-model="row.type" :placeholder="`请选择`">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:faultPhenomenon="{ row,$index }">
          <el-form-item
            :prop="`issuesListData.${$index}.faultPhenomenon`"
            :rules="{
                  required: true,
                  message: '请输入故障现象',
                  trigger: 'change'
                }"
          >
            <el-input v-model="row.faultPhenomenon" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        <template v-slot:faultReason="{ row,$index }">
          <el-form-item
            :prop="`issuesListData.${$index}.faultReason`"
            :rules="{
                  required: true,
                  message: '请输入故障原因',
                  trigger: 'change'
                }"
          >
            <el-input v-model="row.faultReason" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        <template v-slot:maintenanceProcess="{ row,$index }">
          <el-form-item
            :prop="`issuesListData.${$index}.maintenanceProcess`"
            :rules="{
                  required: true,
                  message: '请输入维修过程',
                  trigger: 'change'
                }"
          >
            <el-input v-model="row.maintenanceProcess" placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        <template v-slot:attachments="{ row }">
          <fileMain v-model="row.attachments"></fileMain>
        </template>

        <template v-slot:action="{ row,$index }">
          <el-popconfirm class="ele-action" title="确定要删除当前故障吗？" @confirm="delSon(row,$index)">
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-form>
    <template v-slot:footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">确认</el-button>
    </template>
  </ele-modal>
</template>

<script>
import { faultKnowledgeSave } from '@/api/salesServiceManagement/index';
import fileMain from '@/components/addDoc/index.vue';
export default {
  components: { fileMain },
  data() {
    return {
      title: '新增',
      loading: false,
      addRepairNotesDialog: false,
      form: { issuesListData: [] },
      //   issuesListData: [],
      rules: {},
      typeOptions: [
        { label: '维修', value: '1' },
        { label: '保养', value: '2' },
        { label: '安装', value: '3' }
      ]
    };
  },
  computed: {
    faultList() {
      return [
        {
          type: 'index',
          label: '序号',
          align: 'center',
          width: 60
        },
        {
          prop: 'type',
          slot: 'type',
          label: '故障类型',
          align: 'center',
          headerSlot: 'headerType',
          showOverflowTooltip: true,
          width: 120
        },
        {
          prop: 'faultPhenomenon',
          slot: 'faultPhenomenon',
          headerSlot: 'headerPhenomenon',
          label: '故障现象',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'faultReason',
          slot: 'faultReason',
          headerSlot: 'headerFaultReason',
          label: '故障原因',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'maintenanceProcess',
          slot: 'maintenanceProcess',
          headerSlot: 'headerMaintenance',
          label: '维修过程',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'attachments',
          slot: 'attachments',
          label: '附件',
          align: 'center',
          width: 120
        },
        {
          label: '操作',
          width: 120,
          align: 'center',
          resizable: false,
          slot: 'action',
          // fixed: 'right',
          showOverflowTooltip: true
        }
      ];
    }
  },
  methods: {
    init() {
      this.addRepairNotesDialog = true;
    },
    // 增加
    addfault() {
      this.form.issuesListData.push({
        maintenanceProcess: '',
        type: '',
        faultPhenomenon: ''
      });
    },
    // 删除
    delSon(data, index) {
      this.form.issuesListData.splice(index, 1);
    },
    // 取消
    handleClose() {
      this.addRepairNotesDialog = false;
      this.form.issuesListData = [];
    },

    // 保存
    async save() {
      if (this.form.issuesListData.length == 0) {
        this.$message.warning('请最少添加一条故障数据');
        return;
      }
      let valid = await this.getValidate();
      faultKnowledgeSave(this.form.issuesListData).then((res) => {
        if (res) {
          this.$message.success('操作成功!');
          this.$emit('refresh');
          this.handleClose();
        }
      });
    },
    getValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid, obj) => {
          if (obj) {
            let messages = Object.keys(obj).map((key) => obj[key][0]);
            if (messages.length > 0) {
              this.$message.warning(messages[0].message);
            }
          }
          if (!valid) {
            reject(false);
          } else {
            resolve(true);
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-box {
  :deep(.el-table .el-table__body-wrapper) {
    min-height: 350px;
  }
}
</style>