<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <div class="right" style="width:100%">
        <!-- 头部 -->
        <div class="headBox" style="justify-content: space-between">
          <div class="title">排查类型列表</div>
          <div class="pztitle">{{ props.title }}</div>
          <div class="btnBox">
            <el-button type="primary" @click="CloseEvent">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>
        <!-- 基础类型表格 -->
        <el-table v-if='props.pzlx == "J" || props.pzlx == "S" || props.pzlx == "Y"' stripe :data="treeData" border
          row-key="id" :tree-props="{ children: 'children' }" style="width: 100%" :height="tableHeight" :key="keyCount"
          v-loading="isLoading">
          <el-table-column prop="zdmc" label="排查类型" show-overflow-tooltip align="left" width="320">
          </el-table-column>
          <el-table-column label="检查频率" show-overflow-tooltip align="center" v-if="props.pzlx == 'J'">
            <template #default="{ row }">
              <div style="text-align: center;">
                <Span v-if="row.hasChild == '1'">/</Span>
                <dict-tag v-else :options="D_BZ_JCBZPL" :value="row.checkrate" :tag="false"></dict-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="收烟期检查频率" show-overflow-tooltip align="center"
            v-if="props.pzlx == 'S' || props.pzlx == 'Y'">
            <template #default="{ row }">
              <div style="text-align: center;">
                <Span v-if="row.hasChild == '1'">/</Span>
                <dict-tag v-else :options="D_BZ_JCBZPL" :value="row.spcheckrate" :tag="false"></dict-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="320">
            <template #default="{ row }">
              <div style="text-align: center;">
                <span class="operedit" v-if='!row.children || row.children.length == 0' @click="setFn(row)">
                  <el-icon>
                    <EditPen />
                  </el-icon>设置</span>
                <span v-else>/</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <MOSTY.Table v-if='props.pzlx == "X"' :table-columns="tableColumns" :tableData="tableData" :tableHeight="'75vh'"
          :tableloading="tableloading">
          <template #checkrate="{ row }">
            <dict-tag :options="D_BZ_JCBZPL" :value="row.checkrate" :tag="false"></dict-tag>
          </template>
          <template #spcheckrate="{ row }">
            <dict-tag :options="D_BZ_JCBZPL" :value="row.spcheckrate" :tag="false"></dict-tag>
          </template>
          <template #orgcodecheckrate="{ row }">
            <dict-tag :options="D_BZ_JCBZPL" :value="row.orgcodecheckrate" :tag="false"></dict-tag>
          </template>
          <template #zt="{ row }">
            <dict-tag :options="D_DBZ_YHDJ" :value="row.zt" :tag="false"></dict-tag>
          </template>
          <template #actions="{ row }">
            <span class="operesee" @click="setFn(row)">
              <el-icon>
                <EditPen />
              </el-icon>
              设置
            </span>
          </template>
        </MOSTY.Table>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="设置排查频率" width="30%" :before-close="handleClose">
      <el-form :model="formQuery" ref="formRef" label-position="top" :rules="rules">
        <el-form-item label="通用检查频率：" :rules="[{ required: true, message: '请选择通用检查频率' }]" prop="checkrate" required>
          <el-select v-model="formQuery.checkrate" clearable placeholder="请选择通用检查频率" style="width: 250px">
            <el-option v-for="item in D_BZ_JCBZPL" :key="item" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">

          <el-button type="primary" @click="submit" :loading="buttonLoading"> <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>确定</span> </el-button>
          <el-button @click="dialogVisible = false"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, defineEmits, defineProps, watch } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["close"]);
const buttonLoading = ref(false);
const isLoading = ref(false); // 是否加载
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  leftShow: {
    type: Boolean,
    default: true
  },
  Row: {
    type: Object,
    default: {}
  },
  pzlx: {
    type: String,
    default: ""
  },
  orgids: {
    type: String,
    default: ""
  }
});
// 数据
const { D_TB_KNCSDHG, D_TB_WXYKZCS, D_BZ_JCBZPL } = proxy.$dict(
  "D_TB_KNCSDHG", "D_TB_WXYKZCS", "D_BZ_JCBZPL");
const dialogVisible = ref(false);
const bigHeight = ref(); //整个高度
const tableloading = ref(false);
const tableData = ref([]);
const formRef = ref(null);
const formQuery = ref({});
// 分页
const listQuery = ref({
  pzlx: props.pzlx,
  id: '10010100',
  level: 2,
  orgids: props.orgids ? props.orgids : null,
  exttype: props.Row.exttype ? props.Row.exttype : null,
});
const tableColumns = ref([
  {
    title: "排查类型",
    prop: "objChecktypename"
  },
  {
    title: "通用检查频率",
    prop: "checkrate",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
]);
watch(
  () => props.pzlx,
  (val) => {
    if (val == "T") {
      tableColumns.value = [
        {
          title: "排查类型",
          prop: "objChecktypename"
        },
        {
          title: "标准检查频率",
          prop: "checkrate",
          slot: true
        },
        {
          title: "检查频率(技术中心)",
          prop: "orgcodecheckrate",
          slot: true
        },
        {
          title: "检查频率(物流中心)",
          prop: "actions",
          slot: true
        }
      ];
    } else if (val == "J") {

    } else if (val == "Y" || val == "S") {
      tableColumns.value = [
        {
          title: "排查类型",
          prop: "objChecktypename"
        },
        {
          title: "收烟期检查频率",
          prop: "spcheckrate",
          slot: true
        },
        {
          title: "操作",
          prop: "actions",
          slot: true
        }
      ];
    } else if (val == "X") {
      tableColumns.value = [
        {
          title: "排查类型",
          prop: "objChecktypename"
        },
        {
          title: "检查频率",
          prop: "checkrate",
          slot: true
        },
        {
          title: "操作",
          prop: "actions",
          slot: true
        }
      ];
    }
  },
  {
    deep: true,
    immediate: true
  }
);
const tableHeight = ref();
const total = ref(0);
const rules = reactive({
  region: [{ required: true, message: "请选择通用检查频率", trigger: "blur" }]
});
const treeData = ref([]);
// 初始化
onMounted(() => {
  bigHeightFn();
  tabHeightFn();
  window.onreset = () => {
    bigHeightFn();
    tabHeightFn();
  }
  // 基础类
  if (props.pzlx == 'J' || props.pzlx == 'Y' || props.pzlx == 'S') {
    // 获取现场树
    getTreeData();
  } else {
    getTableData();
  }
});
const getTreeData = () => {
  isLoading.value = true;
  getApi({ pzlx: props.pzlx, isPl: '01' }, "/mosty-jcgl/checklib/getXcTree").then((res) => {
    treeData.value = res;
  }).finally(() => {
    isLoading.value = false;
  });;
};
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - 220;
};
// 获取表格数据
const getTableData = () => {
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/checklibOrg/getPclxList")
    .then((res) => {
      if (res) {
        tableloading.value = false;
        tableData.value = res;
        tableData.value.forEach((item) => {
          // if (item.controls) {
          //   item.controls = item.controls.split(",");
          // }
        });
        total.value = res.total;
      }
    }).catch(() => {
      tableData.value = [];
      tableloading.value = false;
    });
};

const CloseEvent = () => {
  emits("close");
};
const setFn = (row) => {
  formQuery.value.checklibId = row.dm || row.objChecktypeid
  formQuery.value.orgids = props.orgids
  dialogVisible.value = true;
};
// 关闭弹窗
function handleClose() {
  dialogVisible.value = false;
}

//保存
function submit() {
  formRef.value.validate((valid) => {
    if (valid) {
      buttonLoading.value = true;
      if (props.pzlx == 'J' || props.pzlx == 'X') {
        postApi(formQuery.value, '/mosty-jcgl/checklibOrg/setCheckRate').then(() => {
          dialogVisible.value = false;
          ElMessage.success("修改成功");
          if (props.pzlx == 'J') {
            // 获取现场树
            getTreeData();
          } else {
            getTableData();
          }
        }).finally(() => {
          buttonLoading.value = false;
        });
      } else if (props.pzlx == 'S' || props.pzlx == 'Y') {
        postApi(formQuery.value, '/mosty-jcgl/checklibOrg/setCheckRateSyq').then(() => {
          dialogVisible.value = false;
          ElMessage.success("修改成功");
          // 获取现场树
          getTreeData();
        }).finally(() => {
          buttonLoading.value = false;
        });
      } else {
        postApi(formQuery.value, '/mosty-jcgl/checklibOrg/setCheckRateWlAndJs').then(() => {
          dialogVisible.value = false;
          ElMessage.success("修改成功");
          // 基础类
          if (props.pzlx == 'J') {
            // 获取现场树
            getTreeData();
          } else {
            getTableData();
          }
        }).finally(() => {
          buttonLoading.value = false;
        });
      }
    } else {
      ElMessage.error("请填写完必填项!");
      return false;
    }
  });
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: left;
}

::v-deep .el-dialog__body {
  height: 10vh !important;
}

.operate {
  color: yellowgreen !important;
}

.disab {
  margin: 0 5px;
  cursor: pointer;
  color: #807e7e66 !important;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .pztitle {
    color: red;
  }

  .left {
    width: 300px;
    // height: 1030px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

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

    .btnBox {
      justify-content: flex-end;
      margin: 20px;

      .el-select {
        width: 150px;
      }

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

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}

.el-form {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.el-form-item {
  text-align: center;
}

.dix-cell {
  display: flex;
  // flex-wrap: wrap;
}

::v-deep .el-form--label-top .el-form-item {
  display: flex;
  align-items: baseline;
}
</style>
