<template>
  <ele-modal :visible.sync="visible" title="处置" width="45vw" append-to-body>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="create-form"
      :maxable="true"
    >
      <headerTitle title="基本信息" style="margin-top: 15px"></headerTitle>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 9, md: 12 } : { span: 9 }">
          <el-form-item label="类型:" prop="type">
            <DictSelection
              dictName="异常类型"
              v-model="form.type"
              disabled
            ></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 9, md: 24 } : { span: 9 }">
          <el-form-item label="编码:" prop="code">
            <el-input v-model="form.code" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 18, md: 24 } : { span: 16 }">
          <el-form-item label="名称:" prop="name">
            <el-input v-model="form.name" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 18, md: 24 } : { span: 16 }">
          <el-form-item label="异常描述:">
            <el-input
              v-model="form.describes"
              type="textarea"
              :rows="2"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 9, md: 24 } : { span: 9 }">
          <el-form-item label="创建人:" prop="createUserName">
            <el-input v-model="form.createUserName" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 9, md: 24 } : { span: 9 }">
          <el-form-item label="创建时间:" prop="createTime">
            <el-input v-model="form.createTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item prop="accessory" label="附件">
            <fileUpload
              v-model="form.accessory"
              module="main"
              :limit="5"
              disabled
              :showLib="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <headerTitle
        v-if="form.approvalProcess.length > 0"
        title="异常判定结果"
        style="margin-top: 15px"
      ></headerTitle>
      <el-row
        :gutter="15"
        v-for="(item, index) in form.approvalProcess"
        :key="index"
      >
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="审核人:">
            <el-input :value="item.auditor" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="异常判定:">
            <el-input :value="item.exceptionDetermine" disabled />
          </el-form-item>
        </el-col>
        <el-col
          v-if="item.exceptionDispose"
          v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }"
        >
          <el-form-item label="异常处置:">
            <el-input :value="item.exceptionDispose" disabled />
          </el-form-item> </el-col
      ></el-row>
      <el-row :gutter="15">
        <headerTitle title="异常处置" style="margin-top: 15px"></headerTitle>

        <footBtn @footBtn="footBtn" />
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <!-- <el-button
        type="primary"
        @click="save"
        :loading="loading"
      
      >
        确定
      </el-button> -->
    </template>
    <unacceptedProductCreate ref="unacceptedProductCreate" @refresh="refresh" />
  </ele-modal>
</template>

<script>
import fileUpload from '@/components/upload/fileUpload';
import unacceptedProductCreate from '@/views/unacceptedProduct/components/create';
import footBtn from './footBtn';
import { transitionUnacceptedProduct } from './transition';
import { save } from '@/api/exceptionManagement/index';

const defaultForm = function () {
  return {
    accessory: [],
    images: [],
    code: '',
    type: '',
    relationType: '', //关联类型 1 计划 2订单 3工单
    relationId: '', //关联id
    relationCode: '',
    exceptionDetermine: '', //异常判定
    exceptionDispose: '', //异常处置
    approvalStatus: '', //审批状态
    approvalOpinion: '', //审批意见
    exceptionClose: '', //异常关闭 0否 1 是
    createUserName: '', //创建人名称
    id: '',
    describes: '',
    createTime: '',
    relationJson: [],
    approvalProcess: []
  };
};
export default {
  components: { fileUpload, footBtn, unacceptedProductCreate },
  data() {
    return {
      visible: false,
      loading: false,
      type:'',
      form: { ...defaultForm() },
      // 表单验证规则
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        name: [{ required: true, message: '请选择', trigger: 'change' }],
        relationType: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    };
  },

  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {},
  methods: {
    open(row) {
      this.visible = true;

      this.form = JSON.parse(JSON.stringify(row));
      this.form.relationJson = this.form.relationJson[0];
      this.form.type = this.form.type + '';
    },

    footBtn(type) {
      let data = JSON.parse(JSON.stringify(this.form));
      this.type=type
      if (type == '3') {
        this.$refs.unacceptedProductCreate.open(
          transitionUnacceptedProduct(data),
          'add'
        );
      }
    },
    refresh() {
      this.save()
      this.cancel();
      this.$emit('refresh');
    },
    cancel() {
      this.form = { ...defaultForm() };
      this.visible = false;
    },

    /* 保存编辑 */
    save() {
 
  

        this.loading = true;
        let data = JSON.parse(JSON.stringify(this.form));
        data={
          id:data.id,
          approvalStatus:4,
          disposalStatus:this.type
        }
        save(data)
          .then((res) => {
            this.loading = false;
            this.$message.success('成功');
            this.cancel();
            this.$emit('refresh');
          })
          .catch((e) => {
            this.loading = false;
          });
  
    }
  }
};
</script>
<style lang="scss" scoped>
.basic-details-title {
  margin: 10px 0;
}

.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}

.create-form .el-form-item {
  margin-bottom: 15px !important;
}
</style>
