<template>
  <!-- 厂站数据采集 -->
  <div class="stationCollect publicContainer">
    <div class="content">
      <div class="contLeft">
        <div class="search input">
          <el-input placeholder="站点名称" clearable v-model="searchList.stationName"></el-input>
          <el-button type="primary" @click="searchClick"> 搜索</el-button>
        </div>
        <ul class="ul_date">
          <li v-for="i in projectDate" :class="{ bgcClsas: projectId == i.stationCode }" @click="liClick(i)">
            <el-icon color="#1296db">
              <LocationFilled />
            </el-icon>
            {{ i.stationName }}
          </li>
        </ul>
      </div>
      <div class="contRight">
        <el-button type="primary" size="large" @click="pointKeyClick">点位配置</el-button>
        <div class="layout-body">
          <el-table :data="realtimeData" v-loading="tableLoading" max-height="500" v-if="headerList.length > 0">
            <el-table-column
              v-for="i in headerList"
              :key="i.pointKey"
              :label="i.pointName"
              show-overflow-tooltip
              :prop="i.pointKey"
              width="130"
            />
          </el-table>
          <el-form label-width="auto" ref="ruleForm" inline :model="formData" style="margin-top: 10px">
            <el-form-item label="时间:">
              <el-date-picker
                clearable
                format="YYYY-MM-DD"
                v-model="AllData.publishTime"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="searchClickTwo(1)">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tabsList" v-loading="tableLoading" max-height="500">
            <el-table-column type="index" width="55" label="序号" :index="getIndex" />
            <el-table-column
              v-for="i in headerList"
              :key="i.pointKey"
              :label="i.pointName"
              show-overflow-tooltip
              :prop="i.pointKey"
              width="130"
            />
          </el-table>
          <!-- 分页 -->
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="formData.pageNum"
            v-model:limit="formData.pageSize"
            @pagination="sitePropertyRelationM"
          />
          <!-- 查看详情弹框 -->
          <el-dialog v-model="visible" title="因子配置" :modal-append-to-body="false" :close-on-click-modal="false" width="800px">
            <el-transfer
              v-model="leftValue"
              filterable
              :titles="['未选', '已选']"
              :button-texts="['向左移动', '向右移动']"
              :data="transferData"
            >
              <template #left-footer> </template>
              <template #right-footer> </template>
            </el-transfer>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" @click="open2(1)">保存</el-button>
                <el-button @click="cancel">关闭</el-button>
              </div>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getInfolist } from '@/api/scada/stationInfo';
import { headRelation, sitePropertyRelation, headConfig, data_queryheads, realtimeDataList } from '@/api/scada/monitor';
import { formateDate, TimeDefault } from '@/utils/validate';
const { proxy } = getCurrentInstance();
const projectDate = ref([]);
const projectId = ref(0);
const visible = ref(false);
const realtimeData = ref([]);
const total = ref(0);
const headerList = ref([]);
let tabsList = ref([]);
const leftValue = ref([]);
const transferData = ref([]);
const searchList = reactive({});
let tableLoading = ref(true);
let loading = ref(true);
const AllData = reactive({
  publishTime: [proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD '), proxy.moment().format('YYYY-MM-DD 23:59:59')],
  formData: { pageNum: 1, pageSize: 10 },
  queryParams: {},
});
const { queryParams, formData } = toRefs(AllData);
console.log(formData.value, 'formData.value');
//查询项目
function searchClick() {
  getInfolistM(searchList);
}
const getIndex = index => {
  return (formData.value.pageNum - 1) * formData.value.pageSize + index + 1;
};
function searchClickTwo() {
  sitePropertyRelationM();
}
const sitePropertyRelationM = async p => {
  loading.value = true;
  tableLoading.value = true;
  if (AllData.publishTime) {
    formData.value.startTime = formateDate(AllData.publishTime[0]);
    formData.value.endTime = formateDate(AllData.publishTime[1]);
  }
  let res = await sitePropertyRelation({ ...formData.value, stationCode: projectId.value });
  if (res.code == 200) {
    tabsList.value = res.data;
    total.value = res.total;
    loading.value = false;
    tableLoading.value = false;
  }
  data_queryheadsM();
};

//获取站点
const getInfolistM = async p => {
  let { data, code } = await getInfolist(p);
  if (code == 200) {
    projectDate.value = data;
    let stationCode = data[0]?.stationCode;
    projectId.value = stationCode;
    data_queryheadsM();
    realtimeDataListM();
    sitePropertyRelationM();
  }
};
//站点点击
function liClick({ stationCode }) {
  projectId.value = stationCode;
  (AllData.publishTime = [
    proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD '),
    proxy.moment().format('YYYY-MM-DD 23:59:59'),
  ]),
    data_queryheadsM();
  realtimeDataListM();
  sitePropertyRelationM();
}
//表格数据列表接口
const realtimeDataListM = async () => {
  let params = {
    stationCode: projectId.value,
  };
  let res = await realtimeDataList(params);
  realtimeData.value = Array(res.data);
};
// 表格头部
const data_queryheadsM = async () => {
  let params = {
    stationCode: projectId.value,
  };
  let { data } = await data_queryheads(params);
  headerList.value = data;
};

// 穿梭框
const postPlcinfo = async () => {
  transferData.value = [];
  leftValue.value = [];
  let params = {
    dataShow: '',
    stationCode: projectId.value,
  };
  const res = await headRelation(params);
  res.data.forEach(element => {
    transferData.value.push({ key: element.pointKey, label: element.pointName });
    if (element.dataShow == 1) {
      leftValue.value.push(element.pointKey);
    }
  });
};
//穿梭框保存调用的接口
const headConfigM = async row => {
  tableLoading.value = true;
  let params = {
    pointKeys: leftValue.value,
    stationCode: projectId.value,
  };
  let res = await headConfig(params);
  console.log(res, 'res11');
  tableLoading.value = false;
};

//点位配置点击事件
function pointKeyClick() {
  visible.value = true;
  postPlcinfo();
}
//点位配置保存
function open2() {
  visible.value = false;
  data_queryheadsM();
  headConfigM();
  sitePropertyRelationM();
}
//点位配置关闭按钮
function cancel() {
  visible.value = false;
}
onMounted(() => {
  getInfolistM();
  // realtimeDataListM();
  // sitePropertyRelationM();
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.stationCollect {
  width: 100%;
  .contLeft {
    height: calc(100vh - 100px);
    background: $mainColor1;
    padding: 20px 10px;
    .search {
      display: flex;
      width: 270px;
      margin-left: 2%;
      align-items: center;
    }
  }
  .ul_date {
    margin: 10px 0;
    padding: 0;
    font-size: 16px;
    li {
      padding: 5px 10px;
      font-size: 14px;
      display: flex;
      align-items: center;
      margin: 10px 5px;
      cursor: pointer;
      .el-icon {
        margin-right: 5px;
      }
    }
    .bgcClsas {
      color: #409eff;
    }
  }
  .content {
    display: flex;
    position: relative;
    margin-left: 5px;
  }
  .contRight {
    width: 85%;

    padding: 10px;
    .layout-body {
      padding: 20px;
      border: 1px solid $mainColor2;
      height: calc(100vh - 150px) !important;
      overflow: auto;
      .top {
        margin-bottom: 15px;
      }
    }
  }
}
</style>