<template>
  <div>
    <div class="page-container">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="75px"
      >
        <el-form-item label="算法类型" prop="taskType">
          <el-select
            style="width: 150px;"
            v-model="queryParams.taskType"
            placeholder="全部"
            filterable
            clearable
            popper-class="card-select-dropdown"
          >
            <el-option
              v-for="item in listPatroltype"
              :key="item.algId"
              :label="item.algName"
              :value="item.algName"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="算法名称" prop="devType">
          <el-select
            style="width: 150px;"
            v-model="queryParams.devType"
            placeholder="全部"
            filterable
            clearable
            popper-class="card-select-dropdown"
          >
            <el-option label="表记识别算法" value="0" />
            <el-option label="机器人" value="1" />
            <el-option label="视频" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="算法状态" prop="fileStatus">
          <el-select
            style="width: 150px;"
            v-model="queryParams.fileStatus"
            placeholder="全部"
            filterable
            clearable
            popper-class="card-select-dropdown"
          >
            <el-option label="未归档" value="0" />
            <el-option label="已归档" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="时间">
          <el-date-picker
                style="width: 200px;border-radius: 5px;border:1px"
                v-model="timeValue"
                type="date"
                clearable
                placeholder="选择时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions0"
              >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div class="table-card" ref="tableCardRef">
        <el-table
          class="card-table"
          v-loading="loading"
          :data="dataList"
          height="500"
          border
          stripe
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <el-table-column label="算法标识" align="center" prop="algSubtypeCode" />
          <el-table-column label="算法名称" align="center" prop="algSubtypeName" />
          <el-table-column label="算法类型" align="center" prop="algName" />
          <!-- <el-table-column label="厂商" align="center" prop="createTime" >
            <template slot-scope="scope">
             <span>**********</span>
            </template>
          </el-table-column> -->
          <el-table-column label="时间" align="center" prop="createTime" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!-- 只有未归档才能修正 -->
              <el-button v-if="scope.row.delFlag !=1"
                size="mini"
                type="primary"
                @click="archiveInfo(scope.row)"
                >启用
              </el-button>
              <el-button v-else
                style="background-color: #909399;"
                size="mini"
                type="info"
                @click="lookDetail(scope.row)"
                >停用</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <CardPagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <el-dialog
      title="归档"
      id="dialoga"
      :visible.sync="showContrastEdit"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      append-to-body
      custom-class="card-dialog card-page card-dialog-height-auto"
    >
      <el-form
        ref="contrastForm"
        :model="contrastForm"
        :rules="contrastRules"
        label-width="100px"
        label-position="top"
      >
        <el-form-item label="审核人" prop="chechkPerson">
          <el-input
            v-model="contrastForm.chechkPerson"
            placeholder="请输入审核人"
          />
        </el-form-item>
        <el-form-item label="巡视结论" prop="taskResult">
          <el-input
            style="resize: none"
            type="textarea"
            :rows="3"
            v-model="contrastForm.taskResult"
            placeholder="请输入巡视结论"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          class="card-dialog-cancel-btn"
          @click="() => (showContrastEdit = false)"
          >取 消</el-button
        >
        <el-button
          type="primary"
          class="card-dialog-sure-btn"
          :loading="isArchiving"
          :disable="isLock"
          @click="handleArchiveClicked"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPartrolResult,
} from "@/api/algorithmConfiguration/index";
import {
  partrolResultArchive,
} from "@/api/inspectionDataManage/inspectionArchive";
// import InspectionArchiveContrastDialog from "@/views/components/InspectionArchiveContrastDialog.vue";
import debounce from "lodash.debounce";
import { listPatroltype } from "@/api/algorithmConfiguration/index";
import { openDialog } from "../common.js";
import CardPagination from "@/components/CardPagination/index.vue";
import CardBox from "@/components/cardBox.vue";
export default {
  name: "InspectionArchive",
  components: {
    //  InspectionArchiveContrastDialog,
      CardPagination,
       CardBox },
  dicts: [
    "patrol_result_value_type",
    "patrol_result_recognition_type",
    "patrol_result_valid_type",
    // "patrol_type",
    "device_type",
  ],
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      timeValue:'',
      // 遮罩层
      loading: true,
      isArchiving: false, // 正在归档
      isLock: false,
      // 总条数
      total: 0,
      // 数据
      dataList: [],
      //时间范围
      dateRange: [],
      dateRangePickerOptions: {
        disabledDate(selectDate) {
          return new Date().getTime() < selectDate.getTime();
        },
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskType: null,
        devType: null,
        fileStatus: null,
      },
      // 是否显示对比数据
      showContrast: false,

      // 显示编辑修正
      showContrastEdit: false,
      contrastForm: {
        chechkPerson: null,
        taskResult: null,
      },
      contrastRules: {
        chechkPerson: [
          { required: true, message: "请输入审核人", trigger: "change" },
        ],
        taskResult: [
          { required: true, message: "请输入巡视结论", trigger: "change" },
        ],
      },
      // 最新详细信息
      newInfo: null,
      // 原始详细信息
      originalInfo: null,
      listPatroltype: [],
    };
  },
  created() {
    // 防抖
    this.setTableHeight = debounce(this.setTableHeight, 300);
    window.addEventListener("resize", this.setTableHeight);
    this.getlistPatroltype();
    this.getList();
  },
  mounted() {
    this.setTableHeight();
  },
  destroyed() {
    this.setTableHeight.cancel();
    window.removeEventListener("resize", this.setTableHeight);
  },

  methods: {
    getlistPatroltype() {
      listPatroltype().then((res) => {
        this.listPatroltype = res.rows;
      });
    },

    // 获取巡检任务
    getPatrolTypeStr(type) {
      const element = this.listPatroltype.find(
        (item) => item.patrolTypeCode == type
      );
      if (element) {
        return element.patrolTypeName;
      }
      return "";
    },
    setTableHeight() {
      this.tableHeight = this.$refs.tableCardRef.clientHeight - 40;
    },
    /** 获取数据列表 */
    getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      // 拍摄时间筛选范围
      if (this.dateRange && this.dateRange.length === 2) {
        params.beginTime = this.dateRange[0];
        params.endTime = this.dateRange[1];
      }
      listPartrolResult(params).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 设备类型
    getDeviceTypeStr(dataType) {
      switch (dataType) {
        case "0":
          return "无人机";
        case "1":
          return "机器人";
        case "2":
          return "视频";
      }
    },

    // 修正
    archiveInfo(info) {
      this.contrastForm = {
        lineId: info.lineId,
        chechkPerson: null,
        taskResult: null,
      };
      this.resetForm("contrastForm");
      this.showContrastEdit = true;
    },
    // 查看详情
    lookDetail(info) {
      this.$router.push({
        name: "cardInspectionArchivePointInfo",
        params: {
          id: info.lineId,
        },
      });
      // // 开发
      // if (process.env.VUE_APP_DIALOG == "true") {
      //   this.$router.push({
      //     name: "cardInspectionArchivePointInfo",
      //     params: {
      //       id: info.lineId,
      //     },
      //   });
      // } else {
      //   sessionStorage.setItem("archiveLineId", JSON.stringify(info.lineId));

      //   openDialog({
      //     sourceCardId: "wuhan@videoMonitor-card-45",
      //     targetCardId: "wuhan@videoMonitor-card-46",
      //     dialogTitle: "巡视结果归档详情",
      //   });
      // }
    },

    // 归档
    handleArchiveClicked() {
      this.$refs["contrastForm"].validate((valid) => {
        if (valid) {
          const params = { ...this.contrastForm };
          this.isArchiving = true;
          this.isLock = true;
          partrolResultArchive(params)
            .then((res) => {
              this.$modal.msgSuccess("归档成功");
              this.showContrastEdit = false;
              this.getList();
            })
            .finally(() => {
              this.isArchiving = false;
              this.isLock = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>

.page-content {
  width: 100%;
  height: 856px;
}
.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.query-card {
  margin-bottom: 15px;

  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
}

.table-card {
  flex: 1;
  height: 0;

  ::v-deep .el-card__body {
    height: 100%;
  }
}

// #dialoga {
//   height: 39vh;
//   overflow: auto;
// }
</style>
<style>
.vue-treeselect__control {
  background-color: rgb(0, 1, 1, 0) !important;
  border: 1px solid #40486a !important;
}

.el-tree-node__content:hover {
  /* background: RGBA(23, 37, 51, 1) !important; */
}

.el-tree-node:focus > .el-tree-node__content {
  /* background-color: RGBA(23, 37, 51, 1) !important; */
}

.el-picker-panel {
  /* background: #202f3e !important;
  border: 1px solid #40486a !important; */
}

.el-picker-panel__footer {
  /* background: #202f3e !important; */
}

.el-date-picker__time-header {
  border-bottom: 1px solid #40486a !important;
}

.el-date-table th {
  border-bottom: 1px solid #40486a !important;
}

.el-picker-panel__footer {
  border-top: 1px solid #40486a !important;
}

.el-popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: #40486a !important;
}

.el-time-panel__footer {
  border-top: 1px solid #40486a !important;
}

.el-button--medium,
.el-button.is-plain {
  background-color: #247382 !important;
  border: 1px solid #247382 !important;
}

.el-time-panel {
  /* background-color: #202f3e !important;
  border: 1px solid #40486a !important; */
}

.el-date-table td.disabled div {
  background: RGBA(23, 37, 51, 1) !important;
}

.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #40486a !important;
}

.el-input-number--medium .el-input-number__increase {
  background-color: rgb(1, 1, 1, 0) !important;
}

.el-transfer-panel {
  /* background-color: #202f3e !important;
  border-color: #40486a !important; */
  /* border: 1px solid red; */
  width: 300px !important;
}

.el-transfer-panel__header {
  /* background-color: #202f3e !important;
  border-color: #40486a !important; */
}

.el-step__head.is-finish {
  color: #37cbd6 !important;
  border-color: #37cbd6 !important;
}

.el-message-box {
  /* background-color: #202f3e !important;
  border: 1px solid #40486a !important; */
}

.el-button--small {
  background-color: #247382 !important;
  border: none !important;
}

.el-step__title.is-finish {
  color: #37cbd6 !important;
}

.el-input__inner {
  border-color: #40486a !important;
}

.el-select-dropdown {
  /* background-color: #202f3e !important;
  border: 1px solid #40486a !important; */
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: RGBA(23, 37, 51, 1) !important;
}
</style>
