<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="addRepairNotesDialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="50%"
  >
    <div class="dialog_top">
      <!-- <div>报修记录编号：{{ addForm.repairsCode }}</div> -->
      <el-button v-if="title === '新增'" type="primary" @click="selectEquipment"
        >选择设备</el-button
      >
    </div>
    <div class="main_container">
      <el-form :model="addForm" :rules="addFormRules" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编码：" prop="code">
              <el-input
                v-model="addForm.code"
                placeholder="选择设备带出"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称：" prop="name">
              <!-- <el-input
                v-if="title === '新增'"
                v-model="addForm.name"
                placeholder="选择设备带出"
                disabled
              ></el-input>
              <el-input
                v-else
                v-model="addForm.deviceName"
                placeholder="选择设备带出"
                disabled
              ></el-input> -->
              <el-input
                v-model="addForm.name"
                placeholder="选择设备带出"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="固资编码：" prop="fixCode">
              <el-input
                v-model="addForm.fixCode"
                placeholder="选择设备带出"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编号：" prop="codeNumber">
              <el-input
                v-model="addForm.codeNumber"
                placeholder="选择设备带出"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="规格：" prop="specification">
              <el-input
                v-model="addForm.specification"
                placeholder="选择设备带出"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号：" prop="modelType">
              <el-input
                v-model="addForm.modelType"
                placeholder="选择设备带出"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备位置：" prop="equiLocation">
              <el-input
                v-model="addForm.equiLocation"
                placeholder="选择设备带出"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="片区负责人部门：" prop="repairGroupName">
              <dept-select
                v-model="addForm.repairGroupName"
                placeholder="选择设备带出"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="片区负责人：" prop="repairUserName">
              <person-select
                v-model="addForm.repairUserId"
                clearable
                placeholder="选择设备带出"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领导部门：" prop="leaderDeptId">
              <dept-select
                v-model="addForm.leaderDeptId"
                @input="auditorDeptClick"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期望完成时间：" prop="expectedTime">
              <el-date-picker
                v-model="addForm.expectedTime"
                type="datetime"
                style="width: 100%"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="通知领导：" prop="leaderUserId">
              <el-select
                style="width: 100%"
                v-model="addForm.leaderUserId"
                @change="changeUser"
                filterable
                placeholder="请选通知领导"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <person-select
                v-model="addForm.repairLeaderUserId"
                clearable
                @change="changeUser"
              /> -->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="故障描述：" prop="remark">
              <el-input
                type="textarea"
                :rows="3"
                v-model="addForm.remark"
                placeholder="请输入故障描述"
                resize="none"
                maxlength="500"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="24">
            <el-form-item label="图片：" prop="repairsImg">
               <SelectUpload
                multiple
                ref="selectUploadRef"
                @getImgs="getImgs"
                :limit="4"
                :initData="initData"
              />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="24">
            <el-form-item label="视频：" prop="repairsVideo"> </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </div>
    <div class="btns">
      <el-button type="primary" @click="submitAdd" :loading="loading"
        >提交</el-button
      >
      <el-button @click="handleClose">关闭</el-button>
    </div>
    <CategoryDialog
      ref="equipmentDialogRef"
      @success="selectedEquipment"
      :type="'1'"
    />
  </el-dialog>
</template>

<script>
  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
  import { getAssetInfo } from '@/api/ledgerAssets/index';
  import CategoryDialog from '@/components/AssetDialog/categoryDialog';
  import DeptSelect from '@/components/CommomSelect/dept-select.vue';
  import PersonSelect from '@/components/CommomSelect/person-select.vue';
  import {
    save,
    update,
    getRepairInfoById
  } from '@/api/maintenance/repair_report';
  import { getUserPage } from '@/api/system/organization';
  export default {
    props: {
      dialogTitle: {
        type: String,
        default: '新增报修记录'
      },
      infoData: {
        type: Object,
        default: {}
      }
    },
    components: {
      CategoryDialog,
      DeptSelect,
      PersonSelect
    },
    watch: {
      infoData(val) {
        let id = val.id;
        this.selectedEquipment(id);
      }
    },
    data() {
      return {
        title: '新增',
        addRepairNotesDialog: false,
        addForm: {
          leaderUserId: ''
        },
        initData: [],
        userList: [],
        addFormRules: {
          remark: {
            required: true,
            message: '请输入故障描述',
            trigger: 'blur'
          }
        },
        loading: false,
        row: null,
        receiverList: []
      };
    },
    created() {
      this.getUserList();
    },
    methods: {
      // 切换领导部门更换人员
      async auditorDeptClick(data) {
        console.log(data);
        this.addForm.leaderUserId = '';
        this.addForm.leaderName = '';
        this.userList = [];
        if (data) {
          this.getStaffList(data);
        }
      },
      // 获取领导部门下面人员
      async getStaffList(id) {
        let res = await warehouseDefinition.getUserPage({
          groupId: id,
          size: 9999,
          page: 1
        });
        this.userList = res.list;
      },
      // 初始化数据(父组件调用)
      init(row) {
        this.addRepairNotesDialog = true;
        this.row = row;
        if (row) {
          this.title = '修改';
          this.selectedEquipment(row.id);
        } else {
          this.title = '新增';
          this.userList = [];
        }
      },
      handleClose() {
        this.initData = [];
        this.addRepairNotesDialog = false;
        this.addForm = {
          leaderUserId: ''
        };
      },
      // 打开选择设备弹窗
      selectEquipment() {
        this.$refs.equipmentDialogRef.open();
      },
      // 上传图片
      getImgs(list) {
        this.addForm.repairsImg = list.map((item) => item.accessUrl).join(',');
        console.log('上传的图片：', this.addForm.repairsImg);
      },
      // 获取接收人列表
      async getUserList(deptCode) {
        let data = { pageNum: 1, size: -1 };
        const res = await getUserPage(data);
        this.receiverList = res.list;
      },
      changeUser(data) {
        this.receiverList.map((item) => {
          if (item.id == data) {
            this.addForm.leaderName = item.name;
          }
        });
      },

      // 选择的设备
      selectedEquipment(id) {
        let constApi = null;
        if (this.title === '新增') {
          constApi = getAssetInfo;
        } else {
          constApi = getRepairInfoById;
        }
        constApi(id).then((res) => {
          console.log('res--------------', res);
          if (this.title === '新增') {
            this.addForm = {
              ...res.category.category,
              ...res,
              leaderUserId: ''
            };
          } else {
            this.addForm = {
              ...res.substanceDetailVO.category.category,
              ...res.substanceDetailVO,
              ...res
            };
            this.getStaffList(this.addForm.leaderDeptId);
          }
          console.log('addForm--------------', this.addForm);
          this.addForm.equiLocation =
            this.addForm.deviceLocationName +
            '-' +
            this.addForm.deviceDetailAddress;
          // this.addForm.equiLocation =
          //   res.positionList?.length > 0 ? res.positionList[0].pathName : '';
          // const model = res.modelType ? res.modelType : '';
          // const specification = res.specification
          //   ? res.specification + '|'
          //   : res.modelType
          //   ? '|'
          //   : '';
          // this.addForm.equiModel = specification + model; // 规格型号
          // if (this.row) {
          //   this.$set(this.addForm, 'repairDeptId', this.row.repairDeptId);
          //   this.$set(this.addForm, 'repairUserId', this.row.repairUserId);
          //   this.$set(this.addForm, 'expectedTime', this.row.expectedTime);
          //   this.$set(this.addForm, 'remark', this.row.remark);
          // }
        });
      },

      // 提交新增
      submitAdd() {
        if (!this.addForm.code) {
          return this.$message.warning('请选择报修设备！');
        }
        // const params = {
        //   deviceId: this.addForm.id,
        //   expectedTime: new Date(this.addForm.expectedTime),
        //   remark: this.addForm.remark,
        //   repairDeptId: this.addForm.repairDeptId,
        //   repairUserId: this.addForm.repairUserId,
        //   status: 0,
        //   sourceType: 1,
        //   deviceCode: this.addForm.code,
        //   deviceName: this.addForm.name,
        //   repairUserName: this.addForm.repairUserName,
        //   repairLeaderUserId: this.addForm.repairLeaderUserId,
        //   repairLeaderUserName: this.addForm.repairLeaderUserName
        // };
        const params = {
          deviceId: this.addForm.id,
          expectedTime: new Date(this.addForm.expectedTime),
          remark: this.addForm.remark,
          deviceCode: this.addForm.code,
          deviceName: this.addForm.name,
          status: 0,
          sourceType: 1,
          leaderDeptId: this.addForm.leaderDeptId,
          leaderUserId: this.addForm.leaderUserId,
          leaderName: this.addForm.leaderName
        };
        this.loading = true;
        if (this.row) {
          params.id = this.row.id;
          params.deviceId = this.addForm.deviceId;
          params.code = this.row.code;
          update(params)
            .then((res) => {
              this.$message.success('修改成功！');
              this.$emit('refresh');
              this.loading = false;
              this.handleClose();
            })
            .catch((e) => {
              this.loading = false;
            });
        } else {
          save(params)
            .then((res) => {
              this.$message.success('新增成功！');
              this.$emit('refresh');
              this.loading = false;
              this.handleClose();
            })
            .catch((e) => {
              this.loading = false;
            });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  .dialog_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .btns {
    text-align: right;
    margin: 10px 0;
  }
</style>
