<template>
    <div class="app-container" 
      v-loading="loading">
      <!-- 添加或修改设备模型信息对话框 -->
      <div class="marginbottom50px">
        <el-steps :active="currentStep">
            <el-step title="模型信息" description="名称、编号、序号、备注等" />
            <el-step title="参数类别配置" description="模型的参数类别" />
            <el-step title="调控策略" description="模型的调控策略" />
        </el-steps>
      </div>
      <div>
        <el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px">
          <el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" >
            <el-carousel-item :key="1"  name="1" class="textaligncenter">
              <div  class="widthhalfinlineblock">
                <el-form-item label="模型名称" prop="modelName">
                    <el-input v-model="form.modelName" placeholder="请输入模型名称" />
                </el-form-item>
                <el-form-item label="模型编码" prop="modelCode">
                    <el-input v-model="form.modelCode" placeholder="请输入模型编码" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="form.sort" :min="1" :max="100" placeholder="请输入排序"/>
                </el-form-item>
                <el-form-item label="上级" prop="pid">
                <el-tree-select
                    v-model="form.pid"
                    :data="devicemodelOptions"
                    :props="{ value: 'id', label: 'modelName', children: 'children' }"
                    value-key="id"
                    placeholder="请选择上级"
                    check-strictly
                    :default-expand-all="true" 
                    :default-checked-keys="defaultCheckedKeys"
                />
                </el-form-item>
                <el-form-item label="模型类别" key="selectmodelType" prop="modelTypeId">
                    <el-select v-model="form.modelTypeId" placeholder="请选择模型类别" clearable>
                        <el-option v-for="dict in modeltypeList" :key="dict.id" :label="dict.modelTypeName" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否是叶节点">
                  <el-switch
                    v-model="form.dc_is_leaf"
                    @change="switch_isLeaf"
                    class="ml-2i"
                    style="--el-switch-on-color: #13ce66"
                  />
                </el-form-item>
                <el-form-item label="是否可用">
                  <el-switch
                    v-model="form.dc_available"
                    class="ml-2i"
                    style="--el-switch-on-color: #13ce66"
                  />
                </el-form-item>
                <el-form-item label="备注" prop="note">
                  <el-input v-model="form.note" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </div>
            </el-carousel-item>
            <el-carousel-item :key="2" name="2" class="textaligncenter">
                <div class="widthhalfinlineblock">
                  <div class="textalignright marginbottom5">
                    <el-button type="primary" style="display: inline-block !important" @click="addParamModel">添加参数模版</el-button>
                  </div>
                  <el-table :data="selectedModelList" style="width: 100%" max-height="250" @cell-dblclick="startEditing">
                    <el-table-column fixed label="序号" width="80">
                      <template #default="scope" >
                        <span>{{ scope.$index+1 }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="ID" align="center" width="55" prop="id" />
                    <el-table-column label="参数名称" align="center" prop="paramClassName" />
                    <el-table-column label="参数编码" align="center" prop="paramClassCode" />
                    <el-table-column label="PLC地址位" align="center" prop="plcAdr">
                      <template #default="scope">
                        <span v-if="!scope.row.editing">{{ scope.row.editing}}</span>
                        <el-input v-else v-model="scope.row.plcAdr"  @blur="saveData(scope)"/>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column label="是否可控" align="center" prop="control">
                      <template #default="scope">
                        <dict-tag :options="dc_class_type" :value="scope.row.control" />
                      </template>
                    </el-table-column> -->
                    <el-table-column label="类别" align="center" prop="classType">
                      <template #default="scope">
                        <dict-tag :options="dc_class_type" :value="scope.row.classType" />
                      </template>
                    </el-table-column>
                    <el-table-column label="分区" align="center" prop="devicePartion">
                      <template #default="scope">
                        <dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
                      </template>
                    </el-table-column>
                    <el-table-column label="备注" align="center" prop="note" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                      <template #default="scope">
                        <el-button type="text" icon="View" @click="handleView(scope.row)">查看</el-button>
                        <el-button type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </el-carousel-item>
          </el-carousel>  
          <div class="textaligncenter">
            <el-form-item  class="widthhalfinlineblock">
              <el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" >上一步</el-button>
              <el-button type="primary" v-if="submitButtonShow" @click="submitForm" >提交</el-button>
              <el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" >下一步</el-button>
              <el-button @click="cancel">取 消</el-button>
            </el-form-item>
          </div>
        </el-form>
        <el-dialog :title="title" v-model="addParamModelShow" width="800px" append-to-body :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type">
          <el-table ref="dialogTable" :data="paramModelList" key="newTable" style="width: 100%" max-height="600">
            <el-table-column type="selection" width="55" :selectable="ifselectable"/>
            <el-table-column label="ID" align="center" width="55" prop="id" />
            <el-table-column label="参数名称" align="center" prop="paramClassName" />
            <el-table-column label="参数编码" align="center" prop="paramClassCode" />
            <el-table-column label="类别" align="center" prop="classType">
              <template #default="scope">
                <dict-tag :options="dc_class_type" :value="scope.row.classType" />
              </template>
            </el-table-column>
            <el-table-column label="分区" align="center" prop="devicePartion">
              <template #default="scope">
                <dict-tag :options="dc_device_partion" :value="scope.row.devicePartion" />
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="note" />
          </el-table>
          <div class="textalignright margintop10">
            <el-button type="primary" @click="selectedSubmit">提交</el-button>
          </div>
        </el-dialog> 
      </div>
    </div>
  </template>
  <style lang="scss">
    @import "@/assets/styles/self-defined.scss";
    .customCarousel {
      div{
        button {
            display: none !important;
        }
      } 
      ul{
        display: none !important;
      }
    } 
  </style>
  <script setup name="newdevicemodel">
  import { listDevicemodel,addDevicemodel, updateDevicemodel } from "@/api/model/devicemodel";
  import { listParamclass } from "@/api/model/paramclass";
  import { listModelType} from "@/api/model/modelType";
  import { onMounted, ref } from 'vue';
  const { proxy } = getCurrentInstance();
  const {dc_class_type, dc_device_partion} = proxy.useDict('dc_available', 'dc_is_leaf', 'dc_class_type', 'dc_device_partion');
  const router = useRouter();
  const devicemodelOptions = ref([]);
  const open = ref(false);
  const loading = ref(false);
  const modeltypeList = ref([]);
  const currentStep = ref(1);
  const nextStepButtonShow = ref(false);
  const prevStepButtonShow = ref(false);
  const submitButtonShow = ref(true);
  const paramModelList = ref([]);
  const addParamModelShow = ref(false);
  const nordeNumber = ref(1);
  const selectedModelList = ref([]);
  console.log(router);
  console.log(proxy);
  const tempPid = router.currentRoute._value.query.pid;
  const data = reactive({
    form: {
      sort:1,
      dc_is_leaf:false,
      dc_available:false,
      // pid:tempPid,
    },
    dc_available: [
        {label: '可用', value: 'true', elTagType: 'default', elTagClass: null}, 
        {label: '不可用', value: 'false', elTagType: 'default', elTagClass: null}
    ],
    dc_is_leaf: [
        {label: '是', value: 'true', elTagType: 'default', elTagClass: null}, 
        {label: '否', value: 'false', elTagType: 'default', elTagClass: null}
    ],
    queryParams: {
      modelName: null,
      modelCode: null,
      sort: null,
      modelTypeId: null,
      pid: null,
      note: null
    },
    rules: {
      modelTypeId: [
        { required: true, message: "模型类别不能为空", trigger: "change" }
      ],
      modelName: [
        { required: true, message: "模型名称不能为空", trigger: "change" }
      ],
      modelCode: [
        { required: true, message: "模型编码不能为空", trigger: "change" }
      ],
      pid: [
        { required: true, message: "上级不能为空", trigger: "change" }
      ],
    }
  });
  
  const { queryParams, form, rules, dc_available, dc_is_leaf } = toRefs(data);
     
  // 取消按钮
  function cancel() {
    open.value = false;
    reset();
  }
  
  // 表单重置
  function reset() {
    form.value = {
      tentantId: null,
      version: null,
      createBy: null,
      createTime: null,
      updateBy: null,
      updateTime: null,
      deptId: null,
      userId: null,
      deleteBy: null,
      deleteTime: null,
      id: null,
      modelName: null,
      modelCode: null,
      sort: null,
      modelTypeId: null,
      pid: null,
      note: null
    };
    proxy.resetForm("devicemodelRef");
  }
  
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["devicemodelRef"].validate(valid => {
      if (valid) {
        if (form.value.id != null) {
          updateDevicemodel(form.value).then(response => {
            router.go(-1);
            proxy.$modal.msgSuccess("修改成功");
          });
        } else {
          addDevicemodel(form.value).then(response => {
            router.go(-1);
            proxy.$modal.msgSuccess("新增成功");
          });
        }
      }
    });
  }
  /** 查询设备模型类型列表 */
    function getModelTypeList() {
        loading.value = true;
        listModelType(queryParams.value).then(response => {
            console.log(response);
            modeltypeList.value = response.rows;
            loading.value = false;
        });
    }
    function getTreeselect() {
      listDevicemodel().then(response => {
      devicemodelOptions.value = [];
      const data = { id: 0, modelName: '顶级节点', children: [] };
      const parentData = response.data.filter(item => {
        // 根据需要进行关键字匹配，可以使用 includes()、indexOf() 等方法
        return !item.isLeaf;
      });
      data.children = proxy.handleTree(parentData, "id", "pid");
      devicemodelOptions.value.push(data);
    });
  }
    onMounted(() => {
        console.log("-------------"+tempPid);
    // 在组件首次加载完成后执行的逻辑
    // 可以在这里给组件复制
      // form.value.pid=tempPid;
    });
    function switch_isLeaf(){
      if(form.value.dc_is_leaf){
        submitButtonShow.value = false;
        nextStepButtonShow.value = true;
      }else{
        submitButtonShow.value = true;
        nextStepButtonShow.value = false;
      }
    }
    function nextStep(){
      console.log("---------------");
      proxy.$refs["devicemodelRef"].validate(valid => {
        // if (valid) {
          if(currentStep.value<2){
            currentStep.value = currentStep.value + 1;
            proxy.$refs.carousel.next(); 
            submitButtonShow.value = true;
            nextStepButtonShow.value = false;
            prevStepButtonShow.value = true;
          }
        // }
      });
    }
    function prevStep(){
        currentStep.value = currentStep.value - 1;
        proxy.$refs.carousel.prev(); 
        submitButtonShow.value = false;
        nextStepButtonShow.value = true;
        prevStepButtonShow.value = false;
    }

    /** 查询参数模型信息列表 */
    function addParamModel(){
      loading.value = true;
      listParamclass(queryParams.value).then(response => {
          console.log(response);
          paramModelList.value = response.rows;
          console.log(paramModelList);
          addParamModelShow.value = true;
          loading.value = false;
      });
    }

    function handleView(){
      
    }

    function handleEdit(){
      
    }

    function selectedSubmit(){
      const newSelectedList = proxy.$refs.dialogTable.getSelectionRows().map(row => ({
          ...row,
          editing: false, // 添加 'editing' 属性并设置初始值为 false
        }));
      if(selectedModelList.value.length>0){
        selectedModelList.value = {
          ...selectedModelList,
          ...newSelectedList,
        }
      }else{
        selectedModelList.value = newSelectedList;
      }
      
      console.log(selectedModelList);
      addParamModelShow.value = false;
    }

    function startEditing(scope) {
      console.log(scope);
      scope.row.editing = true; // 进入编辑模式
    }

    function saveData(scope) {
      // 保存数据的逻辑...
      scope.row.editing = false; // 保存完成后，切换回显示模式
    }

    function ifselectable(row, index){
      let flag = true;
      console.log(selectedModelList.value);
      if(selectedModelList.value != []){
        selectedModelList.value.forEach(element => {
          if(element.id == row.id){
             flag = false;
          }
        });
      }
      return flag;
    }

    getTreeselect();
    getModelTypeList();
  </script>
  
  