<template>
  <div>
    <el-card style="margin-top: -10px">
      <el-form :model="inspectPlan" ref="formRef" :rules="formRules" label-width="120px" style="margin-bottom: -15px">
        <el-button-group style="display: flex;margin: 0px 0 10px 80%; height: 35px">
          <el-button
              type="primary"
              v-if="inspectPlan.id === null"
              @click.native="selectDevice()"
          >选择设备
          </el-button>
          <el-button
              type="primary"
              @click.native="submit()"
          >保存
          </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="inspectPlan.deptCode" placeholder="请选择部门" clearable="true"
                         :disabled="inspectPlan.code != 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="inspectPlan.invCode" :disabled="inspectPlan.code != 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="inspectPlan.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="inspectPlan.code" 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="startTime">
              <el-date-picker
                  v-model="inspectPlan.startTime"
                  type="datetime"
                  placeholder="选择计划开始时间"
                  style="width: 90%"
                  :disabled="type == 'detail'"
                  :picker-options="pickerOptionsStart"
                  :clearable="false"
                  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="endTime">
              <el-date-picker
                  v-model="inspectPlan.endTime"
                  type="datetime"
                  :disabled="type == 'detail'"
                  :picker-options="pickerOptionsEnd"
                  placeholder="选择计划结束时间"
                  style="width: 90%"
                  :clearable="false"
                  value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="时间频率:" prop="frequency">
              <el-input v-model="inspectPlan.frequency"  :disabled="type == 'detail'" type="number" placeholder="请选择时间频率" style="width: 100%"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="单位:" label-width="60px"  :disabled="type == 'detail'" prop="frequencyUnit">
              <el-select v-model="inspectPlan.frequencyUnit"   :disabled="type == 'detail'"style="width: 73%" placeholder="单位" clearable>
                <el-option label="年" :value=1></el-option>
                <el-option label="月" :value=2></el-option>
                <el-option label="日" :value=3></el-option>
                <el-option label="小时" :value=4></el-option>
                <el-option label="分钟" :value=5></el-option>
                <el-option label="秒" :value=6></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" v-if="type == 'detail'">
            <el-form-item label="计划状态:" prop="planStatus">
              <el-select v-model="inspectPlan.planStatus" style="width: 90%" placeholder="请选择计划级别" 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-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)" :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">新增</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="content" width="300"></el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop="true" @click.native="setPlanFunction(scope.row)">编辑
            </el-button>
            <el-button type="text" size="small" @click.stop="true"
                       @click.native="delectPlanFunction(scope.row)">删除
            </el-button>
          </template>
        </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
    >
      <el-card>
        <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-divider style="margin: 15px"></el-divider>

        <el-table v-loading="deviceLoading" :data="deviceList" style="width: 100%" highlight-current-row border
                  @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-card>
    </el-dialog>

    <el-dialog
        title="设备巡检设置"
        :visible.sync="inspectPlanSetVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="40%"
        append-to-body
        v-if="inspectPlanSetVisible"
    >
      <deviceInspectPlanProjectSet
          :inputQuery="inputQuery"
          :closeDialog="inspectPlanSetCloseDialog"
      ></deviceInspectPlanProjectSet>
    </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"
    >
      <deviceProjectSelect
          :inputQuery="inputQuery"
          type="1"
          :closeDialog="inspectPlanSetCloseDialog"
      ></deviceProjectSelect>
    </el-dialog>

  </div>

</template>

<script>
import {isBlank} from "@/utils/strUtil";
import {getDeptListByUser} from "@/api/auth/authDept";
import {getInvListByUser} from "@/api/system/invWarehouse";
import {getDeviceInspectPlanList, saveDeviceInspectPlan} from "@/api/dev/deviceInspectPlan";
import {getDeptDeviceList} from "@/api/dev/deptDevice";
import deviceInspectPlanProjectSet from "@/views/dev/DeviceInspectPlanProjectSet"
import deviceProjectSelect from "@/views/dev/DeviceProjectSelect"
import {
  selectDeviceInspectPlanDelect,
  uploadDeviceInspectPlanDelect,
  delectDeviceInspectPlanDelect
} from "@/api/dev/deviceInspectPlanDelect";


export default {
  props: {
    inspectPlan: {
      type: Object,
      required: true
    },
    type: {
      type: Object,
      required: true
    },
    closeDialog: {
      type: Function,
      required: true
    }
  },
  name: "DeviceInspectPlanModify",
  data() {
    return {
      deptList: [],
      invList: [],
      deviceDialogVisible: false,
      deviceLoading: false,
      filterQuery: {
        code: null,
        deptCode: null,
        invCode: null,
        page: 1,
        limit: 10
      },
      loading: false,
      inputQuery: {
        id: null,
        orderIdFk: null
      },
      deviceList: [],
      delectList: [],
      deviceTotal: 0,
      deptName: null,
      invName: null,
      selectRow: null,
      inspectPlanSetVisible: false,
      inspectSelectPlanSetVisible: false,
      // 开始时间限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.inspectPlan.endTime) {
            return time.getTime() > new Date(this.inspectPlan.endTime).getTime() || time.getTime() <= new Date(this.inspectPlan.createDate).getTime() - 86400000;
          }
          return time.getTime() <= new Date(this.inspectPlan.createDate).getTime() - 86400000;
        },
      },
      // 结束时间限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.inspectPlan.startTime) {
            return time.getTime() < new Date(this.inspectPlan.startTime).getTime();
          }
          return time.getTime() <= new Date(this.inspectPlan.createDate).getTime() - 86400000;
        },
      },
      formRules: {
        deptCode: [
          {required: true, message: "部门不能为空", trigger: "blur"}
        ],
        invCode: [
          {required: true, message: "仓库不能为空", trigger: "blur"}
        ],
        deviceName: [
          {required: true, message: "设备名称不能为空", trigger: "blur"}
        ],
        code: [
          {required: true, message: "编码不能为空", trigger: "blur"}
        ],
        startTime: [
          {required: true, message: "计划开始时间不能为空", trigger: "blur"}
        ],
        endTime: [
          {required: true, message: "计划结束时间不能为空", trigger: "blur"}
        ],
        frequency: [
          {required: true, message: "时间频率不能为空", trigger: "blur"}
        ],
        frequencyUnit: [
          {required: true, message: "时间频率单位不能为空", trigger: "blur"}
        ],
        level: [
          {required: true, message: "计划级别不能为空", trigger: "blur"}
        ],
        planStatus: [
          {required: true, message: "计划状态不能为空", trigger: "blur"}
        ],
      },
    };
  },
  methods: {
    deptChange() {
      this.inspectPlan.invCode = null;
      this.invList = [];
      this.getInvList();
    },
    getDeptList() {
      getDeptListByUser().then((res) => {
        this.deptList = res.data || [];
        this.getInvList();
      });
    },
    getInvList() {
      let params = {deptCode: this.inspectPlan.deptCode};
      getInvListByUser(params)
          .then((response) => {
            this.invList = response.data || [];
            this.getList();
          })
          .catch(() => {
          });
    },
    submit() {
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          let formName = isBlank(this.inspectPlan.id) ? "add" : "edit";
          if(formName == "add"){
            this.inspectPlan.planStatus = 1;
          }
          saveDeviceInspectPlan(this.inspectPlan, 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.inspectPlan.deptCode) || isBlank(this.inspectPlan.invCode)) {
        this.$message.warning("请先选择巡检设备所属部门和仓库");
        return;
      }
      this.setDeptAnInvName();
      this.deviceDialogVisible = true;
      this.filterQuery = {
        code: null,
        deptCode: this.inspectPlan.deptCode,
        invCode: this.inspectPlan.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.inspectPlan.deptCode) {
          this.deptName = item.name;
        }
      });

      this.invList.forEach((item) => {
        if (item.code === this.inspectPlan.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.inspectPlan.code = this.selectRow.code;
      this.inspectPlan.deviceName = this.selectRow.deviceName;
    },

    //!--------------------------------------------------------------   新加方法           --------------------------------------------------------- //
    inspectPlanSetCloseDialog() {
      this.inspectPlanSetVisible = false;
      this.inspectSelectPlanSetVisible = false;
      this.selectDeviceInspectPlanDelect({orderIdFk: this.inputQuery.orderIdFk})
    },
    selectDeviceInspectPlanDelect(obj) {
      selectDeviceInspectPlanDelect(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 = [];
      })
    },
    setPlanFunction(row) {
      if (this.inspectPlan.id != null) {
        if(isBlank(row)){
          this.inputQuery = {};
          this.inputQuery.orderIdFk = this.inspectPlan.orderId
        }else{
          this.inputQuery = row
        }
        this.inspectPlanSetVisible = true;
      } else {
        this.$refs["formRef"].validate((valid) => {
          if (valid) {
            let formName = isBlank(this.inspectPlan.id) ? "add" : "edit";
            if(formName == "add"){
              this.inspectPlan.planStatus = 1;
            }
            saveDeviceInspectPlan(this.inspectPlan, formName).then((res) => {
              if (res.code === 20000) {
                this.inspectPlan.id = res.data.id;
                this.inspectPlan.orderId = res.data.orderId;
                this.inputQuery = {};
                this.inputQuery.orderIdFk = this.inspectPlan.orderId
                this.inspectPlanSetVisible = true;
              } else {
                this.$message.error(res.message);
              }
            }).catch((error) => {
              this.$message.error(error.message);
            });
          }
        })
      }
    },
    delectPlanFunction(row) {
      delectDeviceInspectPlanDelect({id: row.id}).then((res) => {
        if (res.code == 20000) {
          this.selectDeviceInspectPlanDelect({orderIdFk: row.orderIdFk})
        } else {
          this.$message.error(res.message);
        }
      }).catch((error) => {
        this.$message.error(error.message);
      })
    },
    selectPlanFunction(){
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          let formName = isBlank(this.inspectPlan.id) ? "add" : "edit";
          if(formName == "add"){
            this.inspectPlan.planStatus = 1;
          }
          saveDeviceInspectPlan(this.inspectPlan, formName).then((res) => {
            if (res.code === 20000) {
              this.inspectPlan.id = res.data.id;
              this.inspectPlan.orderId = res.data.orderId;
              this.inputQuery = {};
              this.inputQuery.orderIdFk = this.inspectPlan.orderId
              this.inspectSelectPlanSetVisible = true;
            } else {
              this.$message.error(res.message);
            }
          }).catch((error) => {
            this.$message.error(error.message);
          });
        }
      })
    }
}
,
components:{
  deviceInspectPlanProjectSet,deviceProjectSelect
}
,
created()
{
  this.inspectPlan.createDate = new Date().getTime();
  this.getDeptList();
  if (!isBlank(this.inspectPlan.id)) {
    this.selectDeviceInspectPlanDelect({orderIdFk: this.inspectPlan.orderId});
  }
}
,
}
</script>

<style scoped>

</style>
