<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" filterable placeholder="请选择站点">
          <el-option
            v-for="dict in searchSiteList"
            :key="dict.stCode"
            :label="`${dict.stName}-${dict.stCode}`"
            :value="dict.stCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="status">
        <el-select v-model="queryParams.status" 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"
        >
          删除
        </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" />
      <el-table-column label="序号" type="index" width="55" />
      <el-table-column prop="st" label="站点编号" width="110" show-overflow-tooltip></el-table-column>
      <el-table-column prop="stName" label="站点名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="referRainStationStName" label="关联雨量站点" show-overflow-tooltip></el-table-column>
      <el-table-column prop="referRainPipeStName" label="关联雨水管网" show-overflow-tooltip></el-table-column>
      <el-table-column prop="startDatetime" label="开始时间" width="180"></el-table-column>
      <el-table-column prop="endDatetime" label="结束时间" width="180"></el-table-column>
      <el-table-column prop="percentage" label="修复进度(%)" width="110"></el-table-column>
      <el-table-column label="状态" 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="操作" 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="danger" v-if="scope.row.status == 0" 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="1440px" 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,
    status: 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>