<template>
  <!-- 历史数据优化 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="" prop="st">
        <el-select v-model="queryParams.st" placeholder="请选择站点">
          <el-option
            v-for="dict in searchSiteList"
            :key="dict.stCode"
            :label="dict.stName"
            :value="dict.stCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="typecode">
        <el-select v-model="queryParams.typecode" placeholder="请选择状态">
          <el-option
            v-for="dict in typecodes"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="view" @click="handelViewResult"
          >修复结果</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="view" @click="handelTaskDetail"
          >修复日志</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['drainager:drainagerInfo:remove']"
          >删除</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['drainager:drainagerInfo:export']"
          >导出</el-button
        >
      </el-col> -->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      :data="rtuSiteInfoList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column
        prop="st"
        label="站点编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="stName"
        label="站点名称"
        align="center"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="referRainStationStName"
        label="关联雨量站点"
        align="center"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="referRainPipeStName"
        label="关联雨水管网"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="startDatetime"
        label="开始时间"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="endDatetime"
        label="结束时间"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="percentage"
        label="修复进度（%）"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column label="状态" align="center" width="90">
        <template #default="scope">
          <span v-if="scope.row.status == '0'" style="color: red">未开始</span>
          <span v-if="scope.row.status == '1'">修复中</span>
          <span v-if="scope.row.status == '2'" style="color: green"
            >已完成</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="260">
        <template #default="scope">
          <el-button
            link
            type="primary"
            v-if="scope.row.status == 0"
            @click="handelRepair(scope.row.id)"
            >开始修复</el-button
          >
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            link
            type="primary"
            icon="Delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 新增、修改 -->
    <el-dialog :title="title" v-model="open" width="1000px" append-to-body>
      <el-form
        ref="configFormRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="修复站点" prop="st">
              <el-select v-model="form.st" placeholder="请选择修复站点">
                <el-option
                  v-for="item in searchSiteList"
                  :key="item.stCode"
                  :label="item.stName"
                  :value="item.stCode"
                  @click="changeSt"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="关联雨量站" prop="referRainStationSt">
              <el-select
                multiple
                collapse-tags
                collapse-tags-tooltip
                v-model="form.referRainStationSt"
                placeholder="请选择关联雨量站"
              >
                <el-option
                  v-for="item in yulianglist"
                  :key="item.stCode"
                  :label="item.stName"
                  :value="item.stCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isliuliangzhan">
            <el-form-item label="关联流量站：" prop="referFlowStationSt">
              <el-select
                v-model="form.referFlowStationSt"
                multiple
                collapse-tags
                collapse-tags-tooltip
                placeholder="请选择关联流量站"
              >
                <el-option
                  v-for="item in liulianglist"
                  :key="item.stCode"
                  :label="item.stName"
                  :value="item.stCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联雨水管网" prop="referRainPipeSt">
              <el-select
                multiple
                collapse-tags
                collapse-tags-tooltip
                v-model="form.referRainPipeSt"
                placeholder="请选择关联雨水管网"
              >
                <el-option
                  v-for="item in guanwanglist"
                  :key="item.stCode"
                  :label="item.stName"
                  :value="item.stCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修复时间" prop="dateRange">
              <el-date-picker
                v-model="form.dateRange"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <div
            class="flex flex-r flex-align-center"
            v-for="(item, index) in form.siteRepairPropertyConfigList"
            :key="item.id"
          >
            <div class="flex flex-r flex-1 flex-align-center">
              <el-form-item label="修复因子" prop="property" label-width="90">
                <el-select v-model="item.property" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in xiufulist"
                    :key="item.code"
                    :label="item.name + ' ' + '(' + item.code + ')'"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>

              <div class="flex flex-r">
                <div class="el-form-item__label" style="margin-left: 20px">
                  正常范围
                </div>
                <div class="flex flex-1">
                  <el-form-item label="" prop="minValue" label-width="0">
                    <el-input v-model="item.minValue" placeholder="请输入" />
                  </el-form-item>
                </div>
                <div class="flex flex-1">
                  <el-form-item label="" prop="maxValue" label-width="0">
                    <el-input v-model="item.maxValue" placeholder="请输入" />
                  </el-form-item>
                </div>
              </div>
            </div>
            <el-icon
              style="
                margin-bottom: 15px;
                margin-left: 10px;
                cursor: pointer;
                color: red;
                font-size: 18px;
              "
              @click="delCofig(index)"
              ><Delete
            /></el-icon>
          </div>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addCofig">新增修复因子</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修复结果 -->
    <el-dialog
      :title="title"
      v-model="resultDetailOpen"
      width="1400px"
      append-to-body
    >
      <outcomeEvaluation
        :stCode="selectionValues[0].st"
        :rowData="selectionValues[0]"
        :refresh="refresh"
      ></outcomeEvaluation>
    </el-dialog>
    <!-- 查看日志 -->
    <el-dialog
      title="查看日志"
      v-model="logDetailOpen"
      width="600px"
      append-to-body
    >
      <p>任务进度：</p>
      <el-progress :percentage="percentage"></el-progress>
      <div class="scrollShow">
        <p
          v-for="(item, index) in processData"
          :key="index"
          class="m-b-10 zhixing"
        >
          {{ index + 1 }} : {{ item.date }}
          {{ item.describe }}
        </p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="logDetailOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="repairHistory">
import {
  pageRepairSite_page_with_all_site,
  listRuleEngine,
  listSite,
  listRepairAllSite,
  listSiteSupportedProperty,
  siteconfigdetail_by_st,
  addRtuRepairConfig,
  updateRtuRepairConfig,
} from "@/api/dataAnalysis/repairdata";
import {
  siteRepairHistoryPage,
  repairConfigHistory,
  addRtuRepairHisConfig,
  updateRtuRepairHisConfig,
  delRepairHisConfig,
  repairConfigHisDetail,
} from "@/api/dataAnalysis/repairHistory";
import outcomeEvaluation from "../repairdata/outcomeEvaluation.vue";
const { proxy } = getCurrentInstance();
const typecodes = proxy.fixDict["typecodes"]; //修复状态

const rtuSiteInfoList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const selectionValues = ref([]); //选中的数据
const total = ref(0);
const title = ref("");
const currentRow = ref({});
const searchSiteList = ref([]); //站点搜索列表
const isconfigAdd = ref(true); //修改/新增判断按钮
const isliuliangzhan = ref(false);
const ruleList = ref([]); //规则下拉框
const yulianglist = ref([]); //雨量站下拉框
const liulianglist = ref([]); //流量站下拉框
const guanwanglist = ref([]); //雨水管网下拉框
const xiufulist = ref([]); //修复因子下拉
const resultDetailOpen = ref(false); //修复结果
const refresh = ref(1); //刷新标识
const processData = ref([]);
const percentage = ref(0);

//日志详情
const logDetailOpen = ref(false);
const data = reactive({
  form: {
    dateRange: [],
    siteRepairPropertyConfigList: [
      {
        property: "", //修复因子
        minValue: 0, //正常范围最小值
        maxValue: 0, //	正常范围最大值
      },
    ],
  },
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    st: null,
    typecode: null,
  },
  rules: {
    st: [
      {
        required: true,
        message: "请选择修复站点",
        trigger: "blur",
      },
    ],
    referRainStationSt: [
      {
        required: true,
        message: "请选择关联雨量站",
        trigger: "blur",
      },
    ],
    dateRange: [
      {
        required: true,
        message: "请选择修复时间",
        trigger: "change",
      },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);
watch(
  () => form.value.siteRepairPropertyConfigList,
  (v1, v2) => {
    let propertys = form.value.siteRepairPropertyConfigList.map((item) => {
      return item.property;
    });
    isliuliangzhan.value = propertys.includes("va");
    form.value.referFlowStationSt = isliuliangzhan.value
      ? form.value.referFlowStationSt
      : [];
  }
);
/** 查询站点列表 */
function getList() {
  loading.value = true;
  queryParams.value.platformCode = 111211;
  siteRepairHistoryPage(queryParams.value).then((response) => {
    rtuSiteInfoList.value = response.data;
    total.value = response.total;
    loading.value = false;
  });
}

//获取站点列表
function getSearchSiteList() {
  listRepairAllSite({ platformCode: 111211 }).then((res) => {
    searchSiteList.value = res.data;
  });
}

//开始修复
function handelRepair(id) {
  repairConfigHistory(id).then((res) => {
    console.log(res);
    getList();
    proxy.$modal.msgSuccess(res.msg);
  });
}

//选择修复站点
function changeSt() {
  form.value.referRainStationSt = []; //关联雨量站点(可多选，用,隔开)
  form.value.referRainPipeSt = []; //关联雨水管网(可多选，用,隔开)
  form.value.referFlowStationSt = []; //关联雨水管网(可多选，用,隔开)
  form.value.siteRepairPropertyConfigList.forEach((item) => {
    item.property = "";
  });
  selectionList();
}

//获取下拉数据
function selectionList() {
  //流量站下拉
  listSite({ samePlatformSt: form.value.st, existProperty: "sbl1" }).then(
    (res) => {
      liulianglist.value = res.data;
    }
  );
  //雨量站下拉
  listSite({ samePlatformSt: form.value.st, existProperty: "pj" }).then(
    (res) => {
      yulianglist.value = res.data;
    }
  );
  //雨水管网下拉
  listSite({ samePlatformSt: form.value.st, existProperty: "z" }).then(
    (res) => {
      guanwanglist.value = res.data;
    }
  );
  //修复因子下拉
  listSiteSupportedProperty(form.value.st).then((res) => {
    xiufulist.value = res.data;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: "",
    st: "", //站点编号
    referRainStationSt: [], //关联雨量站点(可多选，用,隔开)
    referRainPipeSt: [], //关联雨水管网(可多选，用,隔开)
    referFlowStationSt: [], //关联雨水管网(可多选，用,隔开)
    dateRange: [],
    siteRepairPropertyConfigList: [
      {
        property: "", //修复因子
        minValue: 0, //正常范围最小值
        maxValue: 0, //	正常范围最大值
      },
    ],
  };
  proxy.resetForm("configFormRef");
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  repairConfigHisDetail(row.id).then((res) => {
    open.value = true;
    title.value = "修改";
    form.value.st = res.data.st;
    changeSt();
    res.data.referFlowStationSt = res.data.referFlowStationSt
      ? res.data.referFlowStationSt.split(",")
      : [];
    res.data.referRainPipeSt = res.data.referRainPipeSt
      ? res.data.referRainPipeSt.split(",")
      : [];
    res.data.referRainStationSt = res.data.referRainStationSt
      ? res.data.referRainStationSt.split(",")
      : [];
    form.value = res.data;
    form.value.dateRange = res.data.startDatetime
      ? [res.data.startDatetime, res.data.endDatetime]
      : [];
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["configFormRef"].validate((valid) => {
    if (valid) {
      form.value.referFlowStationSt = form.value.referFlowStationSt.join(",");
      form.value.referRainPipeSt = form.value.referRainPipeSt.join(",");
      form.value.referRainStationSt = form.value.referRainStationSt.join(",");
      form.value.startDatetime =
        form.value.dateRange && form.value.dateRange.length
          ? form.value.dateRange[0]
          : "";
      form.value.endDatetime =
        form.value.dateRange && form.value.dateRange.length
          ? form.value.dateRange[1]
          : "";
      if (form.value.id) {
        updateRtuRepairHisConfig(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addRtuRepairHisConfig(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

//批量添加修复因子
function addCofig() {
  form.value.siteRepairPropertyConfigList.push({
    property: "", //修复因子
    minValue: 0, //正常范围最小值
    maxValue: 0, //	正常范围最大值
  });
}

//删除修复因子
function delCofig(index) {
  form.value.siteRepairPropertyConfigList.splice(index, 1);
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  selectionValues.value = selection;
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm("是否确认删除？")
    .then(function () {
      return delRepairHisConfig(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

//修复结果详情
function handelViewResult() {
  if (!ids.value.length) {
    proxy.$modal.msgWarning("请选择一条数据");
  } else if (ids.value.length > 1) {
    proxy.$modal.msgWarning("只能选择一条数据");
  } else {
    resultDetailOpen.value = true;
    title.value = selectionValues.value[0].stName + "修复结果";
    refresh.value = Math.random();
  }
}
//修复日志
function handelTaskDetail() {
  if (!ids.value.length) {
    proxy.$modal.msgWarning("请选择一条数据");
  } else if (ids.value.length > 1) {
    proxy.$modal.msgWarning("只能选择一条数据");
  } else {
    logDetailOpen.value = true;
    repairConfigHisDetail(ids.value[0]).then((res) => {
      processData.value = res.data.process ? JSON.parse(res.data.process) : [];
      percentage.value = processData.value.length
        ? processData.value[processData.value.length - 1]["percentage"]
        : 0;
    });
  }
}
getList();
getSearchSiteList();
</script>
<style lang="scss" scoped></style>