<template>
  <div class="table-box">
    <div style="display: flex;flex-direction: column;">
      <div style="flex-grow: 1;height: 66vh;overflow-y: auto;overflow-x: hidden">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-table stripe ref="dataTable" :border="true" :data="processTableData" size="small" style="height: 66vh;"
              @selection-change="handleSelectionChangepro">
              <!-- <el-table-column type="selection" width="40" align="center" :reserve-selection="true" /> -->
              <template v-for="item in columns" :key="item">
                <el-table-column v-bind="item" :align="item.align ?? 'left'"
                  :reserve-selection="item.type == 'selection'">
                  <template #default="scope">
                    <template v-if="item.prop === 'use_able'">
                      <div style="text-align: center;">
                        <el-checkbox v-model="scope.row.use_able" :true-value="1" :false-value="0" disabled />
                      </div>
                    </template>
                    <template v-if="item.prop === 'part_type'">
                      <div>{{ findNameByType(1, scope.row.part_type) }}</div>
                    </template>
                    <template v-if="item.prop === 'se_mode'">
                      <!-- <el-select class="no-border-select" v-model="scope.row.b" size="small">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select> -->
                      <div>{{ scope.row.se_mode === 0 ? '人工' : '自动' }}</div>

                    </template>
                    <template v-if="item.prop === 'se_type'">
                      <!-- <el-select class="no-border-select" v-model="scope.row.c" size="small">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select> -->
                      <div>{{ findNameByType(2, scope.row.se_type) }}</div>
                    </template>
                    <template v-if="item.prop === 'operation'">
                      <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
                        <el-button type="primary" link @click="handleUpdate">
                          <el-icon>
                            <Edit />
                          </el-icon>
                        </el-button>
                      </el-tooltip>
                    </template>
                  </template>
                </el-table-column>
              </template>

              <!-- 无数据 -->
              <template #empty>
                <div class="table-empty">
                  <slot name="empty">
                    <img src="@/assets/images/notData.png" alt="notData" />
                    <div>暂无数据</div>
                  </slot>
                </div>
              </template>
            </el-table>
          </el-col>
          <el-col :span="14">
            <div class="disposition-title" style="margin-top: 0px">其它</div>
            <div style="display: flex;align-items: center">
              <el-checkbox disabled v-model="platformInfo.fybsjjgList[0]" true-value="1" false-value="0"
                label="风演变时间间隔【>m/s】" />
              <el-input disabled v-model="platformInfo.fybsjjgList[1]" style="width: 80px;margin-left: 5px" />
            </div>
            <div style="display: flex;align-items: center;margin-top: 10px">
              <el-checkbox disabled v-model="platformInfo.mfbqytjList[0]" true-value="1" false-value="0"
                label="毛发表启用条件【<℃】" />
              <el-input disabled v-model="platformInfo.mfbqytjList[1]" style="width: 80px;margin-left: 16px" />
              <div style="margin-left: 10px">系数1</div>
              <el-input disabled v-model="platformInfo.mfsdbdxhgxsList[0]" style="width: 80px;margin-left: 5px" />
              <div style="margin-left: 10px">系数2</div>
              <el-input disabled v-model="platformInfo.mfsdbdxhgxsList[1]" style="width: 80px;margin-left: 5px" />
              <div style="margin-left: 10px">系数3</div>
              <el-input disabled v-model="platformInfo.mfsdbdxhgxsList[2]" style="width: 80px;margin-left: 5px" />
              <div style="margin-left: 10px">系数4</div>
              <el-input disabled v-model="platformInfo.mfsdbdxhgxsList[3]" style="width: 80px;margin-left: 5px" />
            </div>
            <div style="display: flex;align-items: center;margin-top: 10px">
              <el-checkbox disabled v-model="platformInfo.fxcgqzbpcList[0]" :true-value="1" :false-value="0"
                label="风向传感器指北偏差" />
              <el-input disabled v-model="platformInfo.fxcgqzbpcList[1]" style="width: 80px;margin-left: 38px" />
            </div>
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="12">
                <el-checkbox disabled v-model="platformInfo.lbszdfxhqx" :true-value="1" :false-value="0"
                  label="雷暴所在方向和去向" />
              </el-col>
              <el-col :span="12">
                <el-checkbox disabled v-model="platformInfo.jyyszdfxhqx" :true-value="1" :false-value="0"
                  label="积雨云所在方向和去向" />
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="12">
                <el-checkbox disabled v-model="platformInfo.ljszdfxhqx" :true-value="1 || '1'" :false-value="0"
                  label="龙卷所在方向和去向" />
              </el-col>
              <el-col :span="12">
                <el-checkbox disabled v-model="platformInfo.bdy300mdyszdfxhqx" :true-value="1" :false-value="0"
                  label="不大于300米低云所在的方向和去向" />
              </el-col>
            </el-row>
            <div class="disposition-title" style="margin-top: 20px">设置干湿表型号</div>
            <el-table stripe ref="tableRef" :border="true" :data="platformInfo.typeList" style="max-height: 315px"
              size="small" @selection-change="handleSelectionChange">
              <!-- <el-table-column type="selection" width="40" align="center" /> -->
              <template v-for="item in columns2" :key="item">
                <el-table-column v-bind="item" :align="item.align ?? 'left'"
                  :reserve-selection="item.type == 'selection'">
                  <template #default="scope">
                    <template v-if="item.prop === 'status'">
                      <div style="text-align: center;">
                        <!-- <el-checkbox v-model="scope.row.status" true-value="1" false-value="0" disabled /> -->
                        <el-radio v-model="scope.row.status" disabled value="1"></el-radio>
                      </div>
                    </template>
                    <template v-if="item.prop === 'operation'">
                      <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
                        <el-button type="primary" link @click="handleUpdate">
                          <el-icon>
                            <Edit />
                          </el-icon>
                        </el-button>
                      </el-tooltip>
                    </template>
                  </template>
                </el-table-column>
              </template>

              <!-- 无数据 -->
              <template #empty>
                <div class="table-empty">
                  <slot name="empty">
                    <img src="@/assets/images/notData.png" alt="notData" />
                    <div>暂无数据</div>
                  </slot>
                </div>
              </template>
            </el-table>
          </el-col>
        </el-row>

      </div>
      <div class="disposition-bottom">
        <el-button disabled> 取消 </el-button>
        <el-button type="primary" plain disabled> 上一步 </el-button>
        <el-button type="primary" disabled> 下一步 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { defineProps, reactive, ref, onMounted } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getYassensorlist, getUserList, getYallSensorList, getPlatformList, getAllpartlist } from "@/api/modules/allData";

const props = defineProps(['selectData', 'sensorList'])
const dataTable = ref()
const elements = ref<any>([])
const pageable = ref<any>({
  asCode: props.selectData?.as_code,
  pageNum: 1,
  pageSize: 20,

});
const selectedRows = ref([]); // 初始默认选中的行数据
const tableKey = ref(0); // 用于强制重新渲染表格的 key
const getInfo = async () => {
  let { data } = await getYassensorlist(pageable.value)
  processTableData.value = data[props.selectData?.as_code]


}




const platformInfo = ref<any>({
  fybsjjgList: ['', ''],
  mfbqytjList: ['', ''],
  mfsdbdxhgxsList: ['', ''],
  fxcgqzbpcList: ['', ''],
  lbszdfxhqx: 1,
  jyyszdfxhqx: 1,
  ljszdfxhqx: 1,
  bdy300mdyszdfxhqx: 1,
  typeList: [{

  }]
})
const getPlatformListInfo = async () => {
  let { data } = await getPlatformList({ pageNum: 1, pageSize: 20, asCode: props.selectData?.as_code })

  const dataInfo = data?.list ? data.list[0] : null
  console.log(dataInfo, 'list');

  if (dataInfo !== null) {
    platformInfo.value = {
      fybsjjgList: dataInfo?.fybsjjg?.split('|'),
      mfbqytjList: dataInfo?.mfbqytj?.split('|'),
      mfsdbdxhgxsList: dataInfo?.mfsdbdxhgxs?.split('|'),
      fxcgqzbpcList: [dataInfo?.fxcgqzbpc ? 1 : 0, dataInfo?.fxcgqzbpc],
      lbszdfxhqx: dataInfo?.lbszdfxhqx,
      jyyszdfxhqx: dataInfo?.jyyszdfxhqx,
      ljszdfxhqx: dataInfo?.ljszdfxhqx,
      bdy300mdyszdfxhqx: dataInfo?.bdy300mdyszdfxhqx,
      typeList: [{
        name: '球状干湿表(自然通风速度)',
        status: dataInfo?.qzgsb_zrtfsd?.split('|')[0],
        nofrozen: dataInfo?.qzgsb_zrtfsd?.split('|')[1],
        frozen: dataInfo?.qzgsb_zrtfsd?.split('|')[2],
      }, {
        name: '通风干湿表(通风速度0.8m/s)',
        status: dataInfo?.tfgsb_0_8?.split('|')[0],
        nofrozen: dataInfo?.tfgsb_0_8?.split('|')[1],
        frozen: dataInfo?.tfgsb_0_8?.split('|')[2],
      }, {
        name: '通风干湿表(通风速度0.5m/s)',
        status: dataInfo?.tfgsb_0_5?.split('|')[0],
        nofrozen: dataInfo?.tfgsb_0_5?.split('|')[1],
        frozen: dataInfo?.tfgsb_0_5?.split('|')[2],
      }, {
        name: '球状干湿表(自然通风)*',
        status: dataInfo?.qzgsb_zrtf?.split('|')[0],
        nofrozen: dataInfo?.qzgsb_zrtf?.split('|')[1],
        frozen: dataInfo?.qzgsb_zrtf?.split('|')[2],
      }, {
        name: '柱状干湿表(自然通风)*',
        status: dataInfo?.zzgsb_zrtf?.split('|')[0],
        nofrozen: dataInfo?.zzgsb_zrtf?.split('|')[1],
        frozen: dataInfo?.zzgsb_zrtf?.split('|')[2],
      }]
    }

  } else {
    platformInfo.value = {
      fybsjjgList: ['', ''],
      mfbqytjList: ['', ''],
      mfsdbdxhgxsList: ['', ''],
      fxcgqzbpcList: ['', ''],
      lbszdfxhqx: 1,
      jyyszdfxhqx: 1,
      ljszdfxhqx: 1,
      bdy300mdyszdfxhqx: 1,
      typeList: [{

      }]
    }
  }
}

// 获取要素字典
const allPart = ref<any>([])
const getAllPart = async () => {
  const { data } = await getAllpartlist()
  allPart.value = data.list
}

// // 获取传感器字典
// const sensorList = ref<any>([]);
// const getSensorList = async () => {
//   const { data } = await getYallSensorList();
//   sensorList.value = data.list
// };

const handleUpdate = () => {
}

const formRef = ref<any>();
const formInline = ref<any>({
  intervalSelected: false,
  interval: '',
  deviationSelected: false,
  deviation: '',
  conditionSelected: false,
  condition: ''
})

const multipleSelectionpro = ref<[]>([])
const handleSelectionChangepro = (val: []) => {
  multipleSelectionpro.value = val
}
const multipleSelection = ref<[]>([])
const handleSelectionChange = (val: []) => {
  multipleSelection.value = val
}

// 通过给定的type去查照
function findNameByType(check, type) {
  if (check === 1) {
    let foundObject = allPart.value?.find(obj => obj.part_type === type);
    return foundObject ? foundObject.part_name : '参数错误'; // 如果找到了对象，返回其name属性，否则返回null
  } else {
    let foundObject = props.sensorList?.find(obj => obj.se_type === type);
    return foundObject ? foundObject.se_name : '参数错误'; // 如果找到了对象，返回其name属性，否则返回null
  }
}
const processTableData = ref<any>([]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "use_able", label: "", width: 40 },
  { prop: "part_type", label: "项目", width: 200 },
  { prop: "se_mode", label: "观测模式", width: 150 },
  { prop: "se_type", label: "传感器名称" }
]);

// 表格配置项
const columns2 = reactive<ColumnProps[]>([
  { prop: "status", label: "", width: 40 },

  { prop: "name", label: "干湿表型号" },
  { prop: "nofrozen", label: "未结冰", width: 200 },
  { prop: "frozen", label: "结冰", width: 200 }
]);

onMounted(() => {
  getAllPart()
  // getSensorList()
  getInfo()
  getPlatformListInfo()


});
</script>

<style scoped>
.table-box {
  height: 100%;
}


::v-deep .no-border-select .el-select__wrapper {
  box-shadow: 0 0 0 0px !important;
  background-color: #00000000;
}
</style>
