<template>
  <el-form :inline="true" :model="formInline" ref="formRef"  class="form-inline" label-position="top">
    <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="20">
            <el-radio-group v-model="radio1">
              <el-radio-button  label="日常策略" value="日常策略" plain/>
              <el-radio-button  label="任务策略" value="任务策略" plain/>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='任务策略'">
          <el-col :span="24">
            <el-button type="primary" plain style="margin-top: 15px;" @click="handleUpdateTask">新增</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='日常策略'">
          <el-col :span="24">
            <div class="table-box" style="margin-top: 10px;height: 58vh" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
                <template v-for="item in columns" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                    <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>
                  </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>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="radio1==='任务策略'">
          <el-col :span="24">
            <div class="table-box" style="margin-top: 10px;height: 53vh" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="processTableData2"  size="small">
                <template v-for="item in columns2" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                  </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>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button > 取消 </el-button>
        <el-button type="primary" plain> 上一步 </el-button>
        <el-button type="primary"> 下一步 </el-button>
      </div>
    </div>
  </el-form>

  <!-- 日常策略 添加或修改对话框 -->
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body class="tactics">
    <el-form ref="formRef" :model="dailyForm" :rules="rules" >
      <div class="disposition-title">警告设置</div>
      <el-form-item label="触发条件:" prop="relationship"  style="display: flex;align-items: center">
        <el-radio-group v-model="dailyForm.relationship">
          <el-radio value="1" size="large">条件并且</el-radio>
          <el-radio value="2" size="large">条件或者</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="触发周期:" prop="cycle"  style="display: flex;align-items: center">
        <div class="flex-center">
          <el-input v-model="dailyForm.cycle" style="width: 150px" />
          <div style="margin-left: 10px">分钟</div>
        </div>
      </el-form-item>
      <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
      <div class="table-box" style="margin-top: 10px;height: 160px">
        <el-table stripe ref="tableRef" :border="true" :data="processTableData3"  size="small" >
          <template v-for="item in columns3" :key="item">
            <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link >
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </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>
      </div>

      <div class="disposition-title">消警设置</div>
      <el-form-item label="解除条件:" prop="relationship"  style="display: flex;align-items: center">
        <el-radio-group v-model="dailyForm.relationship">
          <el-radio value="1" size="large">条件并且</el-radio>
          <el-radio value="2" size="large">条件或者</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="解除周期:" prop="cycle"  style="display: flex;align-items: center">
        <div class="flex-center">
          <el-input v-model="dailyForm.cycle" style="width: 150px" />
          <div style="margin-left: 10px">分钟</div>
        </div>
      </el-form-item>
      <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
      <div class="table-box" style="margin-top: 10px;height: 160px">
        <el-table stripe ref="tableRef" :border="true" :data="processTableData4"  size="small" >
          <template v-for="item in columns4" :key="item">
            <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link >
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </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>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 任务策略 添加或修改对话框 -->
  <el-dialog :title="dialogTask.title" v-model="dialogTask.visible" width="800px" append-to-body class="tactics">
    <el-form ref="formRef" :model="taskForm" :rules="rules" style="overflow: auto;height: 70vh;overflow-x: hidden;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称:" prop="name"  style="display: flex;align-items: center">
            <el-input v-model="taskForm.name" style="width: 240px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="12">
          <el-form-item label="开始时间:" prop="startTime"  style="display: flex;align-items: center">
            <el-date-picker
              style="width: 240px"
              v-model="taskForm.startTime"
              type="date"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间:" prop="endTime"  style="display: flex;align-items: center">
            <el-date-picker
              style="width: 240px"
              v-model="taskForm.endTime"
              type="date"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="display: flex;align-items: center; margin-top: 10px">
        <el-radio-group v-model="taskForm.type">
          <el-radio-button  label="能见度" value="能见度" plain/>
          <el-radio-button  label="风速" value="风速" plain/>
          <el-radio-button  label="大气电场" value="大气电场" plain/>
          <el-radio-button  label="云量" value="云量" plain/>
          <el-radio-button  label="云高" value="云高" plain/>
          <el-radio-button  label="温度" value="温度" plain/>
          <el-radio-button  label="湿度" value="湿度" plain/>
          <el-radio-button  label="小时雨量" value="小时雨量" plain/>
          <el-radio-button  label="累年平均值" value="累年平均值" plain/>
        </el-radio-group>
      </el-form-item>
      <div class="disposition-title">警告设置</div>
      <el-form-item label="触发关系:" prop="relationship"  style="display: flex;align-items: center">
        <el-radio-group v-model="dailyForm.relationship">
          <el-radio value="1" size="large">条件并且</el-radio>
          <el-radio value="2" size="large">条件或者</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="告警方式:" prop="manner"  style="display: flex;align-items: center">
        <el-radio-group v-model="dailyForm.manner">
          <el-radio value="1" size="large">字幕提示</el-radio>
          <el-radio value="2" size="large">声音提示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
      <div class="table-box" style="margin-top: 10px;height: 160px">
        <el-table stripe ref="tableRef" :border="true" :data="processTableData3"  size="small" >
          <template v-for="item in columns3" :key="item">
            <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link >
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </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>
      </div>

      <div class="disposition-title">消警设置</div>
      <el-form-item label="触发关系:" prop="relationship"  style="display: flex;align-items: center">
        <el-radio-group v-model="dailyForm.relationship">
          <el-radio value="1" size="large">条件并且</el-radio>
          <el-radio value="2" size="large">条件或者</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
      <div class="table-box" style="margin-top: 10px;height: 160px">
        <el-table stripe ref="tableRef" :border="true" :data="processTableData4"  size="small" >
          <template v-for="item in columns4" :key="item">
            <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link >
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </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>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx">
import {defineProps, onMounted, reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
import {getAstactList, getYaspacketList, getYasthreshold} from "@/api/modules/allData";
const props = defineProps<{
  selectData?: {};
}>();

const pageable = ref<any>({
  asCode: props.selectData.as_code,
  pageNum: 1,
  pageSize: 20,
});
const getList= async ()=>{
  const { data } = await getAstactList(pageable.value);
}

onMounted(() => {
  getList()
})






const rules = ref<any>(
  {
    name: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
    startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
    endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
  }
);
const dialog = reactive<any>({
  visible: false,
  title: '',
  isMode: true
});

const dialogTask = reactive<any>({
  visible: false,
  title: '',
  isMode: true
});

const dailyForm = ref<any>({
  relationship: "1",
  cycle:"",
  manner:""
});

const taskForm = ref<any>({
  relationship: "1",
  cycle:"",
  manner:"",
  name:"",
  startTime:"",
  endTime:"",
  type:""
});


/** 修改按钮操作 */
const handleUpdateTask = async (row?: any) => {
  reset();
  dialogTask.visible = true;
  dialogTask.title = "策略管理";
  dialogTask.isMode = false;
}



/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
  reset();
  dialog.visible = true;
  dialog.title = "策略管理";
  dialog.isMode = false;
}


/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
  dailyForm.value = { ...dailyForm };
  formRef.value?.resetFields();
}





const formRef = ref<any>();
const formInline = ref<any>({

})

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {

    }
  });
}

const radio1 = ref('日常策略')

const processTableData = ref([
  {
    a: "能见度",
    d: "1",
    e: "告警时间",
    f: "字幕告警",
  }
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "a", label: "策略名称"},
  { prop: "b", label: "告警条件"},
  { prop: "c", label: "消警条件" },
  { prop: "d", label: "告警时间" },
  { prop: "e", label: "消警时间" },
  { prop: "f", label: "告警方式" },
  { prop: "operation", label: "操作", width:150,align: 'center' }
]);

const processTableData2 = ref([

]);

// 表格配置项
const columns2 = reactive<ColumnProps[]>([
  { prop: "a", label: "任务名称"},
  { prop: "b", label: "开始时间"},
  { prop: "c", label: "结束时间" },
  { prop: "d", label: "能见度" },
  { prop: "e", label: "风速" },
  { prop: "f", label: "大气电场" },
  { prop: "g", label: "云量" },
  { prop: "h", label: "云高" },
  { prop: "i", label: "气温" },
  { prop: "j", label: "湿度" },
  { prop: "k", label: "降水" },
  { prop: "l", label: "启停" }
]);


const processTableData3 = ref([

]);

// 表格配置项
const columns3 = reactive<ColumnProps[]>([
  { prop: "a", label: "告警要素"},
  { prop: "b", label: "告警条件"},
  { prop: "c", label: "告警阈值" },
  { prop: "operation", label: "操作", width:100,align: 'center' }
]);

const processTableData4 = ref([

]);

// 表格配置项
const columns4 = reactive<ColumnProps[]>([
  { prop: "a", label: "消警要素"},
  { prop: "b", label: "消警条件"},
  { prop: "c", label: "消警阈值" },
  { prop: "operation", label: "操作", width:100,align: 'center' }
]);
</script>

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

.flex-center{
  display: flex;
  align-items: center
}

.tactics .el-form-item--default {
  margin-bottom: 0px;
}
</style>
