<template>
  <div>
    <el-card style="margin-top: -10px">
      <el-form :model="repairOrder" ref="dataForm" label-width="100px"  :rules="formRules" style="margin-bottom: -15px" >
        <el-button-group style="display: flex;margin: 0px 0 10px 80%; height: 35px">
          <!--<el-button-->
          <!--  type="primary"-->
          <!--  @click.native="selectDevice()"-->
          <!--&gt;选择设备-->
          <!--</el-button>-->
          <!--<el-button-->
          <!--  type="primary"-->
          <!--  @click.native="submit()"-->
          <!--&gt;保存-->
          <!--</el-button>-->
          <el-button
            type="primary"
            @click.native="approved()"
          >审核通过
          </el-button>
          <el-button
            type="primary"
            @click.native="NoApproved()"
          >驳回
          </el-button>
        </el-button-group>

        <el-row>
          <el-col :span="10">
            <el-form-item class="query-form-item" label="部门:">
              <el-select v-model="repairOrder.deptCode"
                         placeholder="请选择部门"
                         clearable="true"
                         @change="deptChange"
                         style="width: 90%"
                         disabled
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.code">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item class="query-form-item" label="仓库:">
              <el-select v-model="repairOrder.invCode"
                         placeholder="请选择仓库"
                         clearable="true"
                         style="width: 90%"
                         disabled
              >
                <el-option
                  v-for="item in invList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.code">
                  <span style="float: left">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="设备名称:">
              <el-input v-model="repairOrder.deviceName" placeholder="请输入设备名称" style="width: 90%"
                        disabled
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="物资编码:">
              <el-input v-model="repairOrder.code" placeholder="请输入编码" style="width: 90%" clearable
                        disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="维修类型:">
              <el-select v-model="repairOrder.repairType" placeholder="请选择维修类型" style="width: 90%" disabled clearable>
                <el-option label="自行维修" :value=1></el-option>
                <el-option label="外部维修" :value=2></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="紧急程度:">
              <el-select v-model="repairOrder.urgencyType" placeholder="请选择紧急程度" style="width: 90%" disabled clearable>
                <el-option label="正常" :value=1></el-option>
                <el-option label="较急" :value=2></el-option>
                <el-option label="特急" :value=3></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!--<el-col :span="10">-->
          <!--  <el-form-item label="计划完成日期:" prop="planTime">-->
          <!--    <el-date-picker-->
          <!--      v-model="repairOrder.planTime"-->
          <!--      type="datetime"-->
          <!--      placeholder="选择日期"-->
          <!--      style="width: 90%"-->
          <!--      clearable-->
          <!--      disabled-->
          <!--      value-format="yyyy-MM-dd HH:mm:ss"-->
          <!--    >-->
          <!--    </el-date-picker>-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <el-col :span="10">
            <el-form-item label="备注:">
              <el-input v-model="repairOrder.remark" placeholder="请输入备注" style="width: 90%"
                    disabled    clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-row>-->
        <!--  <el-col :span="10">-->
        <!--    <el-form-item class="query-form-item" label="维修人:" prop="repariName">-->
        <!--    <el-select v-model="repairOrder.repariName"-->
        <!--               placeholder="请选择维修人"-->
        <!--               clearable="true"-->
        <!--               style="width: 90%"-->

        <!--    >-->
        <!--      <el-option-->
        <!--        v-for="item in userList"-->
        <!--        :key="item.id"-->
        <!--        :label="item.employeeName"-->
        <!--        :value="item.userid">-->
        <!--        <span style="float: left">{{ item.employeeName }}</span>-->
        <!--      </el-option>-->
        <!--    </el-select>-->
        <!--    </el-form-item>-->
        <!--  </el-col>-->

        <!--</el-row>-->
      <!--<el-row>-->
      <!--    <el-col :span="11">-->
      <!--      <el-form-item label="报修图片:">-->
      <!--        <el-upload-->
      <!--          class="upload-demo"-->
      <!--          ref="upload"-->
      <!--          :action="this.uploadUrl"-->
      <!--          :on-preview="uploadHandlePreview"-->
      <!--          :on-remove="uploadHandleRemove"-->
      <!--          :headers="headers"-->
      <!--          :on-exceed="uploadHandleExceed"-->
      <!--          accept=".jpg,.png,.pdf,.doc"-->
      <!--          :on-change="uploadOnchange"-->
      <!--          :on-success="uploadHandleSuccess"-->
      <!--          :on-error="uploadHandleError"-->
      <!--          :file-list="fileList"-->
      <!--          :data="{ type: 'image2' }"-->
      <!--          :auto-upload="true"-->
      <!--        >-->
      <!--          <el-button-->
      <!--            slot="trigger"-->
      <!--            size="small"-->
      <!--            type="primary"-->
      <!--          >-->
      <!--            {{ choiceFile }}-->
      <!--          </el-button>-->
      <!--          <div>只能上传 jpg,png,pdf,doc 文件，且不超过 10 MB</div>-->
      <!--        </el-upload>-->
      <!--      </el-form-item>-->
      <!--    </el-col>-->

      <!--  </el-row>-->
      </el-form>
    </el-card>

    <el-card class="el-card">
      <el-table v-loading="loading" :data="detailList" style="width: 100%" border highlight-current-row>
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="项目内容" prop="content" width="300"></el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </el-card>


    <!--<el-dialog-->
    <!--  title="选择巡检设备"-->
    <!--  :visible.sync="deviceDialogVisible"-->
    <!--  :close-on-click-modal="false"-->
    <!--  :close-on-press-escape="false"-->
    <!--  width="65%"-->
    <!--  v-if="deviceDialogVisible"-->
    <!--  append-to-body-->
    <!--&gt;-->
    <!--  <el-form class="query-form" :model="filterQuery" :inline="true" label-width="100px">-->
    <!--    <el-form-item class="query-form-item" label="部门:">-->
    <!--      <el-input v-model="deptName" disabled></el-input>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item class="query-form-item" label="仓库:">-->
    <!--      <el-input v-model="invName" disabled></el-input>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item class="query-form-item" label="资产编码:">-->
    <!--      <el-input v-model="filterQuery.code" clearable></el-input>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item>-->
    <!--      <el-button-group>-->
    <!--        <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>-->
    <!--        <el-button type="primary" icon="search" @click="queryDevice"-->
    <!--        >查询-->
    <!--        </el-button-->
    <!--        >-->
    <!--        <el-button type="primary" icon="search" @click="combine">确定</el-button>-->
    <!--      </el-button-group>-->
    <!--    </el-form-item>-->
    <!--  </el-form>-->

    <!--  <el-table v-loading="deviceLoading" :data="deviceList" style="width: 100%"-->
    <!--            highlight-current-row-->
    <!--            @current-change="handleCurrentChange"-->
    <!--          >-->
    <!--    <el-table-column label="序号" type="index"></el-table-column>-->
    <!--    <el-table-column label="设备名称" prop="deviceName" width="200"></el-table-column>-->
    <!--    <el-table-column label="资产编码" prop="code" width="200"></el-table-column>-->
    <!--    <el-table-column label="规格型号" prop="ggxh" width="120"></el-table-column>-->
    <!--    <el-table-column label="批次号" prop="batchNo" width="120"></el-table-column>-->
    <!--    <el-table-column label="生产日期" prop="productionDate" width="120"></el-table-column>-->
    <!--    <el-table-column label="失效日期" prop="expireDate" width="120"></el-table-column>-->
    <!--    <el-table-column label="生产厂家" prop="manufactory" show-overflow-tooltip></el-table-column>-->
    <!--    <el-table-column label="供应商" prop="supName" show-overflow-tooltip></el-table-column>-->
    <!--    <el-table-column label="注册证号" prop="zczbhhzbapzbh" width="150" show-overflow-tooltip></el-table-column>-->
    <!--  </el-table>-->

    <!--  <pagination-->
    <!--    v-show="deviceTotal>0"-->
    <!--    :total="deviceTotal"-->
    <!--    :limit.sync="filterQuery.limit"-->
    <!--    :page.sync="filterQuery.page"-->
    <!--    @pagination="getDeviceList"-->
    <!--  ></pagination>-->
    <!--</el-dialog>-->
  </div>

</template>

<script>
import {isBlank} from "@/utils/strUtil";
import {getDeptListByUser} from "@/api/auth/authDept";
import {getInvListByUser} from "@/api/system/invWarehouse";
import {saveDeviceRepairOrder, updateStatus} from "@/api/dev/deviceRepairOrder";
import {getDeptDeviceList} from "@/api/dev/deptDevice";
import store from "@/store";
import {warehouseUserList} from "@/api/system/invWarehouse"
import {filterByorderIdFk} from "@/api/dev/deviceRepairOrderDetail";


export default {
  props: {
    repairOrder: {
      type: Object,
      required: true
    },
    closeDialog: {
      type: Function,
      required: true
    }
  },
  name: "DeviceRepairOrderModify",
  data() {
    return {
      deptList: [],
      invList: [],
      deviceDialogVisible: false,
      deviceLoading: false,
      filterQuery: {
        code: null,
        deptCode: null,
        invCode: null,
        page: 1,
        limit: 10
      },
      deviceList: [],
      detailList:[],
      deviceTotal: 0,
      deptName: null,
      invName: null,
      selectRow: null,
      choiceFile:"选取报修图片",
      uploadUrl: "",
      BASE_URL: process.env.VUE_APP_BASE_API,
      headers: {},
      fileList: [],
      userList:[],
      // formRules:{
      //   repariName:[{required: true, message:"请选择维修人", trigger: 'blur'}]
      // }
    };
  },
  methods: {
    deptChange() {
      this.repairOrder.invCode = null;
      this.invList = [];
      this.getInvList();
    },
    getDeptList() {
      getDeptListByUser().then((res) => {
        this.deptList = res.data || [];
        this.getInvList();
      });
    },
    getInvList() {
      let params = {deptCode: this.repairOrder.deptCode};
      getInvListByUser(params)
        .then((response) => {
          this.invList = response.data || [];
          this.getList();
        })
        .catch(() => {
        });
    },
    getuserList(){
      let param ={code :this.repairOrder.invCode}
      warehouseUserList(param).then((res) =>{
        this.userList = res.data.list || [];
      })
    },
    submit() {
      if (isBlank(this.repairOrder.deptCode) || isBlank(this.repairOrder.invCode) || isBlank(this.repairOrder.code)) {
        this.$message.error("请选择设备相关信息")
        return;
      }
      let formName = isBlank(this.repairOrder.id) ? "add" : "edit";
      saveDeviceRepairOrder(this.repairOrder, formName).then((res) => {
        if (res.code === 20000) {
          this.$message.success("添加成功");
          this.closeDialog();
        } else {
          this.$message.error(res.message);
        }
      }).catch((error) => {
        this.$message.error(error.message);
      });
    },
    selectDevice() {
      if (isBlank(this.repairOrder.deptCode) || isBlank(this.repairOrder.invCode)) {
        this.$message.warning("请先选择报修设备所属部门和仓库");
        return;
      }
      this.setDeptAnInvName();
      this.deviceDialogVisible = true;
      this.filterQuery = {
        code: null,
        deptCode: this.repairOrder.deptCode,
        invCode: this.repairOrder.invCode,
        page: 1,
        limit: 10
      }
      this.getDeviceList();
    },
    getDeviceList() {
      this.deviceLoading = true;
      this.deviceList = [];
      getDeptDeviceList(this.filterQuery).then((res) => {
        this.deviceLoading = false;
        if (res.code === 20000) {
          this.deviceList = res.data.list || [];
          this.deviceTotal = res.data.total || 0;
        } else {
          this.$message.error(res.message);
          this.deviceList = [];
          this.deviceTotal = 0;
        }
      }).catch((error) => {
        this.deviceLoading = false;
        this.deviceList = [];
        this.deviceTotal = 0;
      });
    },
    setDeptAnInvName() {
      this.deptList.forEach((item) => {
        if (item.code === this.repairOrder.deptCode) {
          this.deptName = item.name;
        }
      });

      this.invList.forEach((item) => {
        if (item.code === this.repairOrder.invCode) {
          this.invName = item.name;
        }
      })
    },
    onReset() {
      this.filterQuery.code = null;
      this.filterQuery.page = 1;
      this.getDeviceList();
    },
    queryDevice() {
      this.filterQuery.page = 1;
      this.getDeviceList();
    },
    handleCurrentChange(row) {
      this.selectRow = row;
    },
    combine() {
      this.deviceDialogVisible = false;
      this.repairOrder.code = this.selectRow.code;
      this.repairOrder.deviceName = this.selectRow.deviceName;
    },

    approved(){
      // if(isBlank(this.repairOrder.repariName)){
      //   this.$message.warning("请选择维修人!")
      //   return;
      // }

      this.$confirm('是否通过审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
              orderId: this.repairOrder.orderId,
              status: 2,
              repariName:this.repairOrder.repariName
            };
        updateStatus(params).then((res) => {
          if (res.code === 20000) {
            this.$message.success("审核通过！");
            this.closeDialog();
          } else {
            this.$message.error(res.message);
          }
        }).catch((error) => {
          this.$message.error(error.message);
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },

    NoApproved(){
      this.$confirm('是否驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          orderId: this.repairOrder.orderId,
          status: 0
        };
        updateStatus(params).then((res) => {
          if (res.code === 20000) {
            this.$message.success("已驳回！")
            this.closeDialog();
          } else {
            this.$message.error(res.message);
          }
        }).catch((error) => {
          this.$message.error(error.message);
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    selectDevicerepairOrderDelect(obj) {
      filterByorderIdFk(obj).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.detailList = res.data || [];
        } else {
          this.$message.error(res.message);
          this.detailList = [];
        }
      }).catch((error) => {
        this.loading = false;
        this.$message.error(error.message);
        this.detailList = [];
      })
    },

    // uploadHandlePreview(file) {},
    // uploadHandleRemove(file, fileList) {
    //   this.repairOrder.uploadImage = null;
    //   console.log(file, fileList);
    // },
    // uploadHandleExceed(files, fileList) {
    //   this.$message.warning(
    //     `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
    //       files.length + fileList.length
    //     } 个文件`
    //   );
    // },
    // uploadOnchange(file, fileList) {
    //   let fileName = file.name;
    //   let uid = file.uid;
    //   let pos = fileName.lastIndexOf(".");
    //   let lastName = fileName.substring(pos, fileName.length);
    //   if (
    //     lastName.toLowerCase() !== ".jpg" &&
    //     lastName.toLowerCase() !== ".png" &&
    //     lastName.toLowerCase() !== ".doc" &&
    //     lastName.toLowerCase() !== ".pdf"
    //   ) {
    //     this.$message.error("上传文件只能是 jpg,png,doc,pdf 格式");
    //     for (let i = 0; i < fileList.length; i++) {
    //       //从list删除
    //       if (fileList[i].uid === uid) {
    //         fileList.splice(i, 1);
    //       }
    //     }
    //     return;
    //   }
    //   // 限制上传文件的大小
    //   const isLt = file.size / 1024 / 1024 / 30 <= 1;
    //   if (!isLt) {
    //     this.$message.error("上传文件大小不能超过 30MB");
    //     for (let i = 0; i < fileList.length; i++) {
    //       if (fileList[i].uid === uid) {
    //         fileList.splice(i, 1);
    //       }
    //     }
    //   }
    //   return isLt;
    // },
    // uploadHandleSuccess(response, file, fileList) {
    //   if (response.code === 20000) {
    //       if(this.repairOrder.uploadImage == null){
    //         this.repairOrder.uploadImage = response.data.name+",";
    //       }else{
    //         this.repairOrder.uploadImage += response.data.name+",";
    //       }
    //   } else {
    //     this.$message.error("文件上传失败：" + response.message);
    //   }
    //   console.log(this.repairOrder.uploadImage)
    // },
    // uploadHandleError() {
    // },



  },
  created() {
    if(this.repairOrder.id !=null){
      this.selectDevicerepairOrderDelect({orderIdFk: this.repairOrder.orderId})
    }
    this.uploadUrl = this.BASE_URL + "/udiwms/upload/register/file";
    this.headers = {
      ADMINID: store.getters.adminId,
      ADMINTOKEN: store.getters.token,
    };
    this.repairOrder.uploadImage = null;
    this.getDeptList();
    this.getuserList();
  },
}
</script>

<style scoped>

</style>
