<template>
  <!-- 设备维保 -->
  <vue-scroll style="height: 100%">
    <div class="alarmInfo">
      <div class="title whiteBlock">
        <el-form :inline="true" size="medium" class="demo-form-inline">
          <!-- <el-form-item label="设备编号">
            <el-input
              v-model="formInline.user"
              placeholder="请输入设备编号"
            ></el-input>
          </el-form-item> -->
          <el-form-item :label="$t('message.lifter.devName')">
            <el-select
              v-model="devSn"
              :placeholder="
                $t('message.lifter.pleaseSelect') + $t('message.lifter.devName')
              "
              clearable
            >
              <el-option
                :label="item.devName"
                :value="item.devSn"
                v-for="(item, index) in towerList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item :label="$t('message.lifter.alarmTime')">
            <el-date-picker
              v-model="time"
              type="daterange"
              value-format="yyyy-MM-dd"
              :range-separator="$t('message.lifter.to')"
              :start-placeholder="$t('message.lifter.startDate')"
              :end-placeholder="$t('message.lifter.deadline')"
            >
            </el-date-picker>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="getMaintenanceList" plain>{{
              $t("message.lifter.demand")
            }}</el-button>
            <el-button type="warning" plain @click="refresh">{{
              $t("message.lifter.refresh")
            }}</el-button>
            <el-button type="primary" @click="addMaintenanceBtn">{{
              $t("message.videoManage.add")
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content whiteBlock">
        <el-table
          :data="tableData"
          class="tables"
          style="width: 100%"
          height="600px"
        >
          <el-table-column prop="devName" :label="$t('message.lifter.devName')">
          </el-table-column>
          <el-table-column prop="devSn" :label="$t('message.lifter.devNumber')">
          </el-table-column>
          <el-table-column
            prop="maintenanceUnit"
            :label="$t('message.lifter.maintenanceUnit')"
          >
          </el-table-column>
          <el-table-column
            prop="personLiable"
            :label="$t('message.lifter.maintenanceSupervisor')"
          >
          </el-table-column>
          <el-table-column
            prop="maintenanceTime"
            :label="$t('message.lifter.maintenanceTime')"
          >
          </el-table-column>
          <!-- <el-table-column prop="date" :label="$t('message.lifter.reportTime')"> </el-table-column> -->
          <el-table-column
            prop="maintenanceStatus"
            :label="$t('message.lifter.maintenanceState')"
          >
            <template slot-scope="scope">
              {{ scope.row.maintenanceStatus == 1 ? "正常" : "不正常" }}
            </template>
          </el-table-column>
          <el-table-column prop="maintenanceImage" label="维保照片">
            <template slot-scope="scope">
              <img
                :src="fileUrl + scope.row.maintenanceImage"
                style="width: 40px; heigth: auto"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="maintenanceRecord"
            :label="$t('message.lifter.maintenanceRecord')"
          >
          </el-table-column> -->
          <el-table-column prop="remark" :label="$t('message.lifter.describe')">
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagerBox"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
          background
        ></el-pagination>
      </div>

      <el-dialog
        :modal-append-to-body="false"
        title="新增维保信息"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="667px"
      >
        <div class="dialog_content">
          <el-form
            :model="maintenanceForm"
            ref="maintenanceForm"
            label-width="120px"
            class="demo-ruleForm"
            :rules="rules" size="medium"
          >
            <el-form-item label="维保设备" prop="devSn">
              <el-select
                v-model="maintenanceForm.devSn"
                :placeholder="
                  $t('message.lifter.pleaseSelect') +
                  $t('message.lifter.devName')
                "
                style="width: 100%"
              >
                <el-option
                  :label="item.devName"
                  clearable
                  :value="item.devSn"
                  v-for="(item, index) in towerList"
                  :key="index"
                  style="width: 100%"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维保后状态" prop="maintenanceStatus">
              <el-select
                v-model="maintenanceForm.maintenanceStatus"
                :placeholder="
                  $t('message.lifter.pleaseSelect') +
                  $t('message.lifter.devName')
                "
                style="width: 100%"
              >
                <el-option label="正常" :value="1"></el-option>
                <el-option label="不正常" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维保时间" prop="maintenanceTime">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="maintenanceForm.maintenanceTime"
                type="datetime"
                placeholder="选择日期时间"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="维保人" prop="personLiable">
              <el-input
                v-model="maintenanceForm.personLiable"
                placeholder="请输入"
              ></el-input>
              <!-- <el-select
                v-model="maintenanceForm.personLiable"
                :placeholder="
                  $t('message.lifter.pleaseSelect') +
                  $t('message.lifter.devName')
                "
                style="width: 100%"
              >
                <el-option
                  :label="item.workerName"
                  :value="item.id"
                  v-for="(item, index) in managementInfoList"
                  :key="index"
                ></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="维保单位" prop="maintenanceUnit">
              <el-input
                v-model="maintenanceForm.maintenanceUnit"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="remark">
              <el-input
                v-model="maintenanceForm.remark"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="上传图片" prop="maintenanceImage">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                name="files"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img
                  v-if="maintenanceForm.maintenanceImage"
                  :src="fileUrl + maintenanceForm.maintenanceImage"
                  style="width: 100%; height: 100%"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
            <el-button type="primary" @click="saveBtn" size="medium">确 定</el-button>
          </span>
        </div>
      </el-dialog>
    </div>
  </vue-scroll>
</template>
<script>
import {
  getTowerListApi,
  getMaintenanceListApi,
  getManagementInfoListApi,
  addMaintenanceRecordApi,
} from "@/assets/js/api/towerCrane";
export default {
  data() {
    return {
      projectSn: "",
      towerList: [],
      devSn: "",
      time: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      uploadUrl: "",
      fileUrl: "",
      dialogVisible: false,
      managementInfoList: [],
      maintenanceForm: {
        devSn: "",
        devType: 1,
        maintenanceTime: "",
        maintenanceStatus: "",
        personLiable: "",
        maintenanceUnit: "",
        remark: "",
        maintenanceImage: "",
      },
      rules: {
        devSn: [{ required: true, message: "请选择设备", trigger: "change" }],
        maintenanceStatus: [
          {
            required: true,
            message: "请选择设备维保后状态",
            trigger: "change",
          },
        ],
        maintenanceTime: [
          { required: true, message: "请选择维保时间", trigger: "change" },
        ],
        personLiable: [
          { required: true, message: "请选择维保人", trigger: "change" },
        ],
        maintenanceImage: [
          { required: true, message: "请上传图片", trigger: "change" },
        ],
      },
    };
  },

  created() {
    this.projectSn = this.$store.state.projectSn;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.getTowerList();
    this.getMaintenanceList();
  },

  methods: {
    //获取设备下拉
    getTowerList() {
      let data = {
        projectSn: this.projectSn,
      };
      getTowerListApi(data).then((res) => {
        if (res.code == 200) {
          this.towerList = res.result;
        }
      });
    },

    //获取维保列表
    getMaintenanceList() {
      let data = {
        devType: 1,
        projectSn: this.projectSn,
        devSn: this.devSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      getMaintenanceListApi(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.records;
          this.total = res.result.total;
        }
      });
    },

    //刷新
    refresh() {
      this.devSn = "";
      this.pageNo = 1;
      this.pageSize = 10;
      this.getMaintenanceList();
    },
    //新增按钮
    addMaintenanceBtn() {
      this.dialogVisible = true;
      this.getManagementInfoList();
      setTimeout(() => {
        this.$refs.maintenanceForm.clearValidate();
      }, 200);
    },
    //关闭弹窗前
    handleClose() {
      this.dialogVisible = false;
    },
    // 文件上传成功
    handleAvatarSuccess(file) {
      if (file.data.length > 0) {
        this.maintenanceForm.maintenanceImage = file.data[0].imageUrl;
      }
    },

    //获取维保人
    getManagementInfoList() {
      let data = {
        projectSn: this.projectSn,
      };
      getManagementInfoListApi(data).then((res) => {
        if (res.code == 200) {
          this.managementInfoList = res.result;
        }
      });
    },

    //保存按钮
    saveBtn() {
      this.$refs["maintenanceForm"].validate((valid) => {
        if (valid) {
          let data = this.maintenanceForm;
          data.projectSn = this.projectSn;
          addMaintenanceRecordApi(data).then((res) => {
            if (res.code == 200) {
              this.dialogVisible = false;
              this.getMaintenanceList();
            }
          });
        } else {
          return false;
        }
      });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getMaintenanceList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getMaintenanceList();
    },
  },
};
</script>

<style lang="less" scoped>
.alarmInfo {
  width: 100%;
  height: 100%;
  .title {
    // background-color: #ffffff;
    padding: 0 20px;
    padding-top: 17px;
    height: 70px;
    box-sizing: border-box;
  }
  .content {
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 720px;
    // background-color: #ffffff;
  }
}
.demo-ruleForm {
  width: 90%;
}
.dialog_content{
  margin: 0 20px;
}
.dialog-footer{
    display: flex;
    justify-content: flex-end;
}
</style>