<template>
  <div>
    <el-card style="margin: 5px;margin-top: -20px">
      <el-form :model="inspectTake" ref="formRef" label-width="120px" style="margin-bottom: -15px">
        <el-button-group style="display: flex;margin: 0px 0 10px 90%; height: 35px">
          <el-button type="primary" v-if="type != 5" @click.native="submit(type)">提交</el-button>
        </el-button-group>

        <el-row>
          <el-col :span="10">
            <el-form-item class="query-form-item" label="部门:" prop="deptCode">
              <el-select v-model="inspectTake.deptCode" placeholder="请选择部门" clearable="true"
                         :disabled="inspectTake.id !== null" @change="deptChange" style="width: 90%">
                <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="仓库:" prop="invCode">
              <el-select v-model="inspectTake.invCode" :disabled="inspectTake.id !== null" placeholder="请选择仓库"
                         clearable="true" style="width: 90%">
                <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="设备名称:" prop="deviceName">
              <el-input v-model="inspectTake.deviceName" disabled placeholder="请输入设备名称" style="width: 90%"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="物资编码:" prop="code">
              <el-input v-model="inspectTake.code" disabled placeholder="请输入编码" style="width: 90%"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="type == 5">
          <el-col :span="10">
            <el-form-item label="开始时间:" prop="deviceName">
              <el-input v-model="inspectTake.strartTime" disabled placeholder="请输入开始时间" style="width: 90%"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="结束时间:" prop="code">
              <el-input v-model="inspectTake.endTime" disabled placeholder="请输入结束时间" style="width: 90%"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="项目类型:" prop="type">
              <el-select v-model="inspectTake.type" style="width: 90%" disabled placeholder="请选择项目类型" clearable="true">
                <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="inspectUser">
              <el-select v-model="inspectTake.inspectUser" disabled placeholder="委托验收人" clearable
                         style="width: 90%">
                <el-option
                    v-for="item in userList"
                    :key="item.userid"
                    :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="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="3" :disabled="editType == 2 || type == 5"
                        v-model="inspectTake.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-card>

    <el-card>

      <el-row type="flex" justify="end">
        <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 10px">
            <el-button type="primary" @click.native.stop="selectPlanFunction(null)" v-if="type != 5" :loading="loading">选入</el-button>
          </el-button-group>
        <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 50px">
          <el-button type="primary" @click.native.stop="setPlanFunction(null)" :loading="loading" v-if="type != 5">新增</el-button>
        </el-button-group>
      </el-row>

      <el-table :data="delectList" style="width: 100%;" border highlight-current-row max-height="300" height="500"
                ref="multipleTable">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="项目内容" prop="projectContent" width="400"></el-table-column>
        <el-table-column label="状态" prop="status" width="100">
          <template slot-scope="scope">
            <el-tag>{{ statusMap[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="巡检图片" prop="inspectImage" width="250">
          <template slot-scope="scope">
            <div style="color: #1890ff;" @click="showImgViewer(scope.row)">{{ scope.row.inspectImage }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="type != 5" @click.native.stop="editDialog(scope.row,'edit')">
              编辑
            </el-button>
            <el-button type="text" size="small" @click.native.stop="editDialog(scope.row,'detail')">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
        :title="name"
        :visible.sync="inspectTakeSetVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="45%"
        append-to-body
        v-if="inspectTakeSetVisible"
    >
      <DeviceInspectTakeProjectSet
          :inputQuery="inputQuery"
          :editType="editType"
          :type="type"
          :closeDialog="inspectTakeSetCloseDialog"
      ></DeviceInspectTakeProjectSet>
    </el-dialog>

    <el-dialog
        title="设备选入"
        :visible.sync="inspectSelectPlanSetVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="80%"
        append-to-body
        v-if="inspectSelectPlanSetVisible"
    >
      <DeviceProjectSelectTake
          :inputQuery="inputQuery"
          :type="inspectTake.type"
          :closeDialog="inspectTakeSetCloseDialog"
      ></DeviceProjectSelectTake>
    </el-dialog>

    <el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList"/>

  </div>

</template>

<script>
import {isBlank} from "@/utils/strUtil";
import {getDeptListByUser} from "@/api/auth/authDept";
import {getInvListByUser, warehouseUserList} from "@/api/system/invWarehouse";
import {saveDeviceInspectPlan, updateStatus} from "@/api/inventory/deviceInspectPlan";
import DeviceInspectTakeProjectSet from "@/views/inventory/DeviceInspectTakeProjectSet"
import {
  saveDeviceInspectTake,
  selectDeviceInspecTakeDetail,
  uploadDeviceInspecTake
} from "@/api/inventory/deviceInspectTake";
import {previewImage, previewFile} from "@/api/purchase/supCompany";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import DeviceProjectSelectTake from "@/views/inventory/DeviceProjectSelectTake"

export default {
  props: {
    inspectTake: {
      type: Object,
      required: true
    },
    type: {
      type: Object,
      required: true
    },
    closeDialog: {
      type: Function,
      required: true
    }
  },
  name: "DeviceInspectPlanAuditModify",
  data() {
    return {
      deptList: [],
      invList: [],
      userList: [],
      imgList: [],
      name:'',
      isColse: false,
      BASE_URL: process.env.VUE_APP_BASE_API,
      editType: null,
      deviceDialogVisible: false,
      deviceLoading: false,
      filterQuery: {
        code: null,
        deptCode: null,
        invCode: null,
        page: 1,
        limit: 10
      },
      loading: false,
      inputQuery: {
        id: null,
        projectCode: null,
        projectContent: null,
        status: null,
        result: null,
        inspectImage: null,
        inspectUser: null,
        updateTime: null,
        taskOrderIdFk: null
      },
      deviceList: [],
      delectList: [],
      deviceTotal: 0,
      deptName: null,
      invName: null,
      selectRow: null,
      imgViewerVisible: false,
      inspectTakeSetVisible: false,
      inspectSelectPlanSetVisible: false,
      statusMap: {
        1: "未开始",
        2: "已检查",
        3: "异常",
        4: "不巡检",
      },
    };
  },
  methods: {
    deptChange() {
      this.inspectTake.invCode = null;
      this.invList = [];
      this.getInvList();
    },
    getDeptList() {
      getDeptListByUser().then((res) => {
        this.deptList = res.data || [];
        this.getInvList();
      });
    },
    getInvList() {
      let params = {deptCode: this.inspectTake.deptCode};
      getInvListByUser(params)
          .then((response) => {
            this.invList = response.data || [];
            this.getList();
          })
          .catch(() => {
          });
    },
    submit(status) {
      //判断状态
      if (this.type == 4) {
        for (var i = 0; i < this.delectList.length; i++) {
          if (this.delectList[i].status != 2) {
            return this.$message.error("还有任务未检查！");
          }
        }
      }
      this.inspectTake.status = status
      uploadDeviceInspecTake(this.inspectTake).then((res) => {
        if (res.code === 20000) {
          this.$message.success("提交成功");
          this.closeDialog();
        } else {
          this.$message.error(res.message);
        }
      }).catch((error) => {
        this.$message.error(error.message);
      });
    },
    combine() {
      this.deviceDialogVisible = false;
      this.inspectTake.code = this.selectRow.code;
      this.inspectTake.deviceName = this.selectRow.deviceName;
    },

    //!--------------------------------------------------------------   新加方法           --------------------------------------------------------- //
    selectDeviceInspecTakeDetail(obj) {
      selectDeviceInspecTakeDetail(obj).then((res) => {
        this.loading = false;
        if (res.code === 20000) {
          this.delectList = res.data || [];
        } else {
          this.$message.error(res.message);
          this.delectList = [];
        }
      }).catch((error) => {
        this.loading = false;
        this.$message.error(error.message);
        this.delectList = [];
      })
    },
    getUserBus() {
      let query = {
        code: this.inspectTake.invCode,
      }
      //加载用户数据
      warehouseUserList(query).then((res) => {
        this.userList = [];
        this.userList = res.data.list;
      }).catch((error) => {
        this.$message.error("用户数据加载失败")
      });
    },
    setPlanFunction(row) {
      this.name = "巡检任务添加"
      if (this.inspectTake.id != null) {
        if (isBlank(row)) {
          this.inputQuery = {
            id: null,
            projectCode: null,
            projectContent: null,
            status: null,
            result: null,
            inspectImage: null,
            inspectUser: null,
            updateTime: null,
            taskOrderIdFk: null
          },
          this.inputQuery.status = 1
          this.inputQuery.inspectUser = this.inspectTake.inspectUser
          this.inputQuery.taskOrderIdFk = this.inspectTake.orderId
        } else {
          this.inputQuery = row
        }
        this.inspectTakeSetVisible = true;
      } else {
        this.inputQuery.taskOrderIdFk = this.inspectTake.orderId
        this.inspectTakeSetVisible = true;
      }
    },
    selectPlanFunction(row){
      if (this.inspectTake.orderId != null) { //edit
        if(isBlank(row)){
          this.inputQuery = {
            id: null,
            projectCode: null,
            projectContent: null,
            status: null,
            result: null,
            inspectImage: null,
            inspectUser: null,
            updateTime: null,
            taskOrderIdFk: null
          },
          this.inputQuery.inspectUser = this.inspectTake.inspectUser
          this.inputQuery.taskOrderIdFk = this.inspectTake.orderId
        }else{
          this.inputQuery = row
        }
      }else{
        this.inputQuery.taskOrderIdFk = this.inspectTake.orderId
      }
      this.inspectSelectPlanSetVisible = true;
    },
    editDialog(row, type) {
      this.inputQuery = row;
      this.inspectTakeSetVisible = true
      if (type == 'edit') {
        this.editType = 1;
        this.name = "巡检任务编辑"
      } else if (type == 'detail') {
        this.editType = 2;
        this.name = "巡检任务详情"
      } else {
        this.editType = 3;
      }
    },

    showImgViewer(row) {
      if (row.inspectImage.substr(-1) == ',') {
        row.inspectImage = row.inspectImage.slice(0, row.inspectImage.length - 1);
      }
      this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
      this.imgList = [];
      previewImage({imageUrl: row.inspectImage, certFileUrl: this.certFileUrl}).then(response => {
        if (response.code === 20000) {
          this.imgList = response.data;
        }
        console.log(this.imgList)
        this.imgViewerVisible = true;
      });
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动

    },
    closeImgViewer() {
      this.imgViewerVisible = false;
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
    inspectTakeSetCloseDialog() {
      this.inspectTakeSetVisible = false
      this.inspectSelectPlanSetVisible = false
      var count=0;
      if (this.type == 4) {
        for (var i = 0; i < this.delectList.length; i++) {
          if (this.delectList[i].status != 2) {
            count++;
          }
        }
        if(count == 0){
         return  this.$message.success("任务已全部完成")
        }
      }
      this.selectDeviceInspecTakeDetail({taskOrderIdFk: this.inspectTake.orderId});
    }
  }
  ,
  components: {
    DeviceInspectTakeProjectSet, ElImageViewer ,DeviceProjectSelectTake
  }
  ,
  created() {
    this.getDeptList();
    this.getUserBus();
    if (!isBlank(this.inspectTake.id)) {
      this.selectDeviceInspecTakeDetail({taskOrderIdFk: this.inspectTake.orderId});
    }
  }
  ,
}
</script>

<style scoped>

</style>
