<template>
  <div class="name">
    <el-card class="mt10 box-card">
      <div class="lcl-title">巡检记录</div>
      <el-button type="primary" icon="el-icon-plus" @click="addRecord"
        >新增</el-button
      >
      <div class="mt10" id=" radar-table">
        <el-table
          :data="dataList"
          border
          stripe
          style="width: 100%"
          :header-cell-style="{
            textAlign: 'center',
            height: '20px',
          }"
          :row-style="{ height: '20px' }"
        >
          <el-table-column align="center" prop="insDate" label="巡检日期">
          </el-table-column>
          <el-table-column align="center" prop="insUser" label="巡检人员">
          </el-table-column>

          <el-table-column align="center" prop="insStatus" label="审核状态">
            <template slot-scope="scope">
              <el-tag
                class="subject-btn"
                type="warning"
                v-if="scope.row.insStatus == 0"
                >等待审核</el-tag
              >
              <el-tag
                class="subject-btn"
                type="success"
                v-if="scope.row.insStatus == 1"
                >审核通过</el-tag
              >
              <el-tag
                class="subject-btn"
                type="danger"
                v-if="scope.row.insStatus == 2"
                >审核未通过</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            class-name="small-padding fixed-width"
            label="操作"
            v-if="checkRole(['admin', 'addreporter', 'checker'])"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                v-if="scope.row.insStatus === 0 && checkRole(['addreporter'])"
                @click="handleUpdate(scope.row)"
                >{{ "修改" }}</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <!-- 新增对话框 -->
        <el-dialog
          :title="reportDialogTitle"
          :visible.sync="dialogVisible"
          width="70%"
        >
          <el-form
            :model="reportForm"
            ref="reportForm"
            label-width="6.25rem"
            class="demo-dynamic"
          >
            <el-form-item label="负责人" prop="insUser">
              <el-input
                style="width: 75%"
                v-model="reportForm.insUser"
              ></el-input>
            </el-form-item>
            <el-form-item label="巡检日期" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="reportForm.insDate"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <div
              v-for="(item, index) in reportForm.slopeArtInsDetailsVos"
              :key="index"
            >
              <el-divider></el-divider>
              <div style="margin: 10px auto">
                <span>巡检项目{{ index + 1 }}</span
                ><el-button
                  @click.prevent="removeDomain(item)"
                  size="small"
                  type="danger"
                  style="margin-left: 20px"
                  >删除巡检项目{{ index + 1 }}</el-button
                >
              </div>
              <el-form-item
                label="巡检项目"
                :prop="reportForm.slopeArtInsDetailsVos[index].detailsProject"
              >
                <el-input
                  v-model="
                    reportForm.slopeArtInsDetailsVos[index].detailsProject
                  "
                ></el-input>
              </el-form-item>
              <el-form-item
                label="巡检备注"
                :prop="reportForm.slopeArtInsDetailsVos[index].detailsRemark"
              >
                <el-input
                  v-model="
                    reportForm.slopeArtInsDetailsVos[index].detailsRemark
                  "
                ></el-input>
              </el-form-item>
              <img
                :src="reportForm.slopeArtInsDetailsVos[index].detailsImage"
                alt=""
                width="100px"
                height="100px"
                style="display: block"
                v-if="reportForm.slopeArtInsDetailsVos[index].detailsImage"
              />
              <el-upload
                v-if="!reportForm.slopeArtInsDetailsVos[index].detailsImage"
                action="#"
                :auto-upload="false"
                :limit="1"
                :file-list="fileList"
                :on-change="picChange"
                :on-success="handleUploadSuccess"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG"
                ref="fileupload"
                :http-request="
                  (scope) => {
                    return uploadImage(scope);
                  }
                "
              >
                <el-button size="small" type="primary">上传巡检照片</el-button>
                <!-- <i slot="default" class="el-icon-plus"></i> -->
              </el-upload>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button style="float: left" @click="addDomain" type="warning"
              >新增巡检</el-button
            >
            <el-button type="primary" @click="submitForm('reportForm')"
              >提交</el-button
            >
          </span>
        </el-dialog>

        <!-- 查看对话框 -->

        <el-dialog
          :title="reportDialogTitle"
          :visible.sync="dialogView"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
        >
          <el-dialog
            width="30%"
            title="审核"
            :visible.sync="innerCheckVisible"
            append-to-body
            :close-on-press-escape="false"
            :close-on-click-modal="false"
          >
            <el-form :model="checkForm" :rules="checkRules">
              <el-form-item label="理由" prop="remark">
                <el-input
                  v-model="checkForm.remark"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div
              slot="footer"
              class="dialog-footer"
              v-if="checkForm.insStatus == 0"
            >
              <el-button type="danger" @click="checkResult(2)"
                >不通过</el-button
              >
              <el-button type="success" @click="checkResult(1)"
                >通 过</el-button
              >
            </div>
          </el-dialog>
          <div>日期: {{ dialogViewData.time }}</div>
          <el-button
            type="primary"
            size="medium"
            @click="checkDia"
            v-if="checkForm.insStatus == 0"
            >审核</el-button
          >
          <el-table :data="dialogViewDataList">
            <el-table-column
              property="detailsProject"
              label="巡查项目"
              width="150"
            ></el-table-column>
            <el-table-column
              property="detailsRemark"
              label="备注"
            ></el-table-column>
            <el-table-column property="detailsImage" label="巡检照片">
              <template slot-scope="scope">
                <img
                  :src="scope.row.detailsImage"
                  alt=""
                  style="width: 150px; height: 150px"
                />
              </template>
            </el-table-column>
          </el-table>
          <span
            >经现场巡查，除上述问题外，其他项目运行正常。<span
              v-if="checkForm.insStatus != 0"
              >审核人：{{ dialogViewData.insAuditUser }}</span
            ><span v-if="checkForm.insStatus != 0"
              >理由：{{ dialogViewData.remark }}</span
            ></span
          >
          <div class="shenhe shenhe0" v-if="checkForm.insStatus == 0">
            <span>等待审核</span>
          </div>
          <div class="shenhe shenhe1" v-if="checkForm.insStatus == 1">
            <span>审核通过</span>
          </div>
          <div class="shenhe shenhe2" v-if="checkForm.insStatus == 2">
            <span>审核未通过</span>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
import { inshistory, insAdd, insAdult, insEdit } from "@/api/lclApi/lclapi";
import { checkPermi, checkRole } from "@/utils/permission";
export default {
  name: "name",

  components: {},
  props: [],
  data() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: "",
        planName: "",
        planStatus: "",
        planType: "",
      },
      reportDialogTitle: "巡检报告填写",
      dialogVisible: false,
      dialogView: false,
      dialogViewData: { time: "2023-03-24", insAuditUser: "", remark: "" },
      dialogViewDataList: [
        {
          detailsProject: "01#裂缝",
          detailsRemark: "裂缝长2.63m，宽0.06m，深0.58m。裂缝未生长。",
          detailsImage:
            "https://exp-picture.cdn.bcebos.com/6061b9cd0c6efbf28a6ac760127bbbf4db58da70.jpg?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1%2Fformat%2Cf_auto%2Fquality%2Cq_80",
        },
      ],
      dataList: [
        {
          id: 1,
          ren: "ty",
          time: "2023-03-24",
          type: "年度校准",
          shen: "待审核",
        },
      ],
      reportForm: {
        insUser: null,
        insDate: null,
        slopeArtInsDetailsVos: [
          {
            detailsProject: null,
            detailsRemark: null,
            detailsImage: null,
          },
        ],
      },
      dialogImageUrl: "",
      disabled: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //图片
      fileList: [],
      picListNum: 1,
      //审核弹窗
      innerCheckVisible: false,
      //审核表单
      checkForm: { id: null, remark: null, insStatus: null },
      //审核规则
      checkRules: {
        remark: [{ required: true, message: "请输入理由", trigger: "blur" }],
      },
    };
  },
  watch: {},
  created() {
    this.$nextTick(function () {
      this.getList();
    });
  },
  mounted() {
    this.$nextTick(function () {});
  },
  methods: {
    checkPermi,
    checkRole,
    //记录列表
    getList() {
      inshistory(this.queryParams).then((res) => {
        if (res && res.code == 200 && res.rows) {
          this.dataList = res.rows;
          this.total = res.total;
        }
      });
    },
    addRecord() {
      this.picListNum = 1;
      this.reportForm = {
        insUser: null,
        insDate: null,
        slopeArtInsDetailsVos: [
          {
            detailsProject: null,
            detailsRemark: null,
            detailsImage: null,
          },
        ],
      };
      this.reportDialogTitle = "现场巡检报告";
      this.dialogVisible = true;
    },
    //修改
    handleUpdate(row) {
      this.picListNum = row.slopeArtInsDetailsVos.length;
      this.reportForm = row;
      this.reportDialogTitle = "修改现场巡检报告";
      this.dialogVisible = true;
    },
    handleAdd(row) {
      console.log(row);
    },
    handleView(row) {
      this.checkForm = { id: null, remark: null, insStatus: null };
      this.dialogViewDataList = row.slopeArtInsDetailsVos;
      this.dialogViewData.time = row.insDate;
      this.dialogViewData.insAuditUser = row.insAuditUser;
      this.dialogViewData.remark = row.remark;
      this.checkForm.id = row.id;
      this.checkForm.insStatus = row.insStatus;
      this.checkForm.remark = row.remark;
      this.reportDialogTitle = "新增现场巡检报告";
      this.dialogView = true;
    },
    handleUploadSuccess(res, file) {
      console.log(res, file);
      const index = this.$refs.fileupload.uploadFiles.indexOf(file);
      this.reportForm.pro[index].fileList.push({
        name: res.fileName,
        url: res.fileUrl,
      });
    },
    addDomain() {
      let that = this;

      let len = this.reportForm.slopeArtInsDetailsVos[this.picListNum - 1];
      if (len.detailsProject && len.detailsRemark && len.detailsImage) {
        if (this.reportForm.id) {
          var insId = this.reportForm.id;
        }
        that.reportForm.slopeArtInsDetailsVos.push({
          detailsProject: null,
          detailsRemark: null,
          detailsImage: null,
          insId: null || insId,
        });
        this.$nextTick(() => {
          that.picListNum = that.reportForm.slopeArtInsDetailsVos.length;
        });
      } else {
        this.$message({
          message: "仔细检查巡检项目、巡检备注、照片信息",
          type: "error",
        });
      }
    },
    removeDomain(item) {
      if (this.picListNum > 1) {
        var index = this.reportForm.slopeArtInsDetailsVos.indexOf(item);
        if (index !== -1) {
          this.reportForm.slopeArtInsDetailsVos.splice(index, 1);
          console.log(this.reportForm.slopeArtInsDetailsVos);
        }
        this.picListNum = this.picListNum - 1;
        // this.reportForm.slopeArtInsDetailsVos[this.picListNum - 1].detailsImage =
        // file.url;
        console.log(this.reportForm, "removeDomain");
      } else {
        this.$message({
          message: "至少保留一条",
          type: "error",
        });
      }
    },
    handleRemove(item) {
      console.log(item, "handleRemove");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    submitForm() {
      if (this.reportForm.id) {
        insEdit(this.reportForm).then((res) => {
          if (res.code === 200) {
            this.getList();
            this.reportForm = {
              insUser: null,
              insDate: null,
              slopeArtInsDetailsVos: [
                {
                  detailsProject: null,
                  detailsRemark: null,
                  detailsImage: null,
                },
              ],
            };
            this.fileList = [];
            this.dialogVisible = false;
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
        });
      } else {
        insAdd(this.reportForm).then((res) => {
          if (res.code === 200) {
            this.getList();
            this.reportForm = {
              insUser: null,
              insDate: null,
              slopeArtInsDetailsVos: [
                {
                  detailsProject: null,
                  detailsRemark: null,
                  detailsImage: null,
                },
              ],
            };
            this.fileList = [];
            this.dialogVisible = false;
            this.$message({
              message: "提交成功",
              type: "success",
            });
          }
        });
      }
    },
    picChange(file, fileList) {
      console.log(file, "here");

      this.getBase64(file.raw).then((result) => {
        this.reportForm.slopeArtInsDetailsVos[
          this.picListNum - 1
        ].detailsImage = result;
      });
      // this.reportForm.slopeArtInsDetailsVos[this.picListNum - 1].url = file.url;
    },
    uploadImage(scope) {
      console.log(scope, "uploadImage");
    },
    beforeUpload(file) {
      this.getBase64(file).then((res) => {
        console.log(res);
      });
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    //审核窗口
    checkDia() {
      console.log(this.checkForm);
      this.innerCheckVisible = true;
    },
    //通不通过你说了算
    checkResult(val) {
      if (!this.checkForm.remark && val === 2) {
        this.$message({
          message: "请填写不通过的理由",
          type: "error",
        });
        return;
      }
      this.checkForm.insStatus = val;
      insAdult(this.checkForm).then((res) => {
        console.log(res);
        if (res && res.code === 200) {
          this.getList();
          this.innerCheckVisible = false;
          this.dialogView = false;
          this.$message({
            message: "提交成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.name {
  width: 100%;
  min-height: 100%;
  .box-card {
    width: 100%;
    .lcl-title {
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 30px;
      position: relative;
      padding-left: 10px;
      &:before {
        content: "";
        position: absolute;
        left: 0px;
        top: 4px;
        width: 6px;
        height: 22px;
        background: #0d85f4;
      }
    }
  }
}
.shenhe {
  border: 3px solid #db1316;
  width: 270px;
  height: 86px;
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  right: 10px;
  bottom: 40px;
  z-index: 100;
  transform: rotate(-10deg);
  pointer-events: none;
  span {
    display: inline-block;
    width: 100%;
    height: 70px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background-color: #db1316;
    font-size: 40px;
    line-height: 70px;
    font-weight: bold;
  }
}
.shenhe0 {
  border: 3px solid #e6a23c;
  span {
    background-color: #e6a23c;
  }
}
.shenhe1 {
  border: 3px solid #67c23a;
  span {
    background-color: #67c23a;
  }
}
.shenhe2 {
  border: 3px solid #f56c6c;
  span {
    background-color: #f56c6c;
  }
}
</style>