<template>
  <div>
    <el-card style="margin-top: -10px">
      <el-form :model="repairOrder" ref="dataForm" label-width="120px" style="margin-bottom: -15px">

        <el-row>
          <el-col :span="10">
            <el-form-item label="设备报修记录号:">
              <el-input v-model="repairOrder.orderId"  style="width: 90%"
                        disabled
                        clearable></el-input>
            </el-form-item>
          </el-col>

          <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-row>

        <el-row>
          <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-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-row>
        <el-row>
          <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-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-row>
        <el-row>

          <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-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 class="query-form-item" label="审核人:">
              <el-input v-model="repairOrder.auditUserName" 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="维修人:">-->
          <!--    <el-select v-model="repairOrder.repariName"-->
          <!--               placeholder="请选择维修人"-->
          <!--               clearable="true"-->
          <!--               style="width: 90%"-->
          <!--               disabled-->
          <!--    >-->
          <!--      <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="10">-->
          <!--  <el-form-item label="维修开始时间:" prop="repariStartTime">-->
          <!--    <el-date-picker-->
          <!--      v-model="repairOrder.repariStartTime"-->
          <!--      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="维修结束时间:" prop="repariEndTime">-->
          <!--    <el-date-picker-->
          <!--      v-model="repairOrder.repariEndTime"-->
          <!--      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-row>-->
        <el-row>
          <!--<el-col :span="10">-->
          <!--  <el-form-item label="报修说明:">-->
          <!--    <el-input v-model="repairOrder.msg" 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.remark" placeholder="请输入报修信息" style="width: 90%"
                        disabled clearable></el-input>
            </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="deviceProjectSelectVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="40%"
      v-if="deviceProjectSelectVisible"
    >
      <DeviceInspectPlanProjectSet
        :detailQuery="detailQuery"
        :closeDialog="detailCloseDialogc"
      >
      </DeviceInspectPlanProjectSet>
    </el-dialog>

  </div>

</template>

<script>
import {isBlank} from "@/utils/strUtil";
import {getDeptListByUser} from "@/api/auth/authDept";
import {getInvListByUser} from "@/api/system/invWarehouse";
import {updateStatusAndTime, updateStatusAndImg} 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: "DeviceRepairOrderDetails",
  data() {
    return {
      deptList: [],
      invList: [],
      deviceDialogVisible: false,
      deviceLoading: false,
      filterQuery: {
        code: null,
        deptCode: null,
        invCode: null,
        page: 1,
        limit: 10
      },
      deviceList: [],
      detailList:[],
      detailQuery:{},
      deviceProjectSelectVisible:false,
      deviceTotal: 0,
      deptName: null,
      invName: null,
      selectRow: null,
      fileList: [],
      userList: [],
    };
  },
  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 || [];
      })
    },

    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;
    },
    stareTask() {
      this.$confirm('是否开始任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let param = {
          orderId: this.repairOrder.orderId,
          status: 4,
        }

        updateStatusAndTime(param).then((res) => {
          if (res.code == 20000) {
            this.$message.success("任务确认成功!");
            this.closeDialog();
          } else {
            this.$message.error(res.message);
          }

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    overTask() {
      this.$confirm('是否结束任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let param = {
          orderId: this.repairOrder.orderId,
          status: 5,
          repariRemark: this.repairOrder.repariRemark,
          repariImage: this.repairOrder.repariImage
        }
        updateStatusAndImg(param).then((res) => {
          if (res.code == 20000) {
            this.$message.success("任务已结束!");
            this.closeDialog();
          } else {
            this.$message.error(res.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 = [];
      })
    },


  },
  created() {
    if(this.repairOrder.id !=null){
      this.selectDevicerepairOrderDelect({orderIdFk: this.repairOrder.orderId})
    }
    this.getDeptList();
    this.getuserList();
  },
}
</script>

<style scoped>

</style>
