<template>
  <div>
    <MOSTY.PageTree :pageTitle="'检查频率管理'" :isShowLeftTree="false">
      <template #serach>
        <el-divider />
        <div class="btnBox">
          <el-button @click="black">返回</el-button>
          <!-- 判断当前登录人是否是安全科的人 -->
          <el-button v-if="syqshow && ssdept.orgBizType == '04' && (ssdept.orgLevel == '11' || ssdept.orgLevel == '21')"
            @click="szTime('Y')">收烟期时间配置</el-button>
          <el-button v-if="scqshow && ssdept.orgBizType == '04' && (ssdept.orgLevel == '11' || ssdept.orgLevel == '21')"
            @click="szTime('S')">生产期时间配置</el-button>
        </div>
      </template>
      <template #table>
        <!-- 表格 -->
        <section class="eltab3">
          <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="false" :tableHeight="'100%'">
            <template #pzlx="{ row }">
              <span v-if="row.pzlx.includes('J')" class="operesee" @click="foundationFn(row, 'J')">
                <el-icon>
                  <EditPen />
                </el-icon>
                基础标准
              </span>
              <span v-if="row.pzlx.includes('S')" class="operesee" @click="foundationFn(row, 'S')">
                <el-icon>
                  <EditPen />
                </el-icon>
                生产期配置
              </span>
              <span v-if="row.pzlx.includes('Y')" class="operesee" @click="foundationFn(row, 'Y')">
                <el-icon>
                  <EditPen />
                </el-icon>
                收烟期配置
              </span>
              <span v-if="row.pzlx.includes('X')" class="operesee" @click="foundationFn(row, 'X')">
                <el-icon>
                  <EditPen />
                </el-icon>
                闲置类配置
              </span>
              <span v-if="row.pzlx.includes('T')" class="operesee" @click="foundationFn(row, 'T')">
                <el-icon>
                  <EditPen />
                </el-icon>
                特殊配置
              </span>
            </template>

          </MOSTY.Table>
        </section>
      </template>
    </MOSTY.PageTree>

    <div v-if="comprehensiveShow" class="dialog-box">
      <Jcpz :title="pztitle" @close="closeEven" :Row="Row" :pzlx="pzlx" :orgids="props.orgids" />
    </div>
    <!-- 期限设置 -->
    <el-dialog v-model="dialogVisible" :title=timetitle width="30%" :before-close="closeDialog">
      <el-form :model="formQuery" ref="formRef" label-position="top" :rules="rules">
        <el-form-item label="开始日期:" :rules="[{ required: true, message: '请选择开始日期' }]" prop="starttime" required>
          <el-date-picker v-model="formQuery.starttime" style="width: 250px" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择开始日期" />
        </el-form-item>
        <el-form-item label="结束日期:" :rules="[{ required: true, message: '请选择结束日期' }]" prop="endtime" required>
          <el-date-picker v-model="formQuery.endtime" style="width: 250px" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择结束日期" />
        </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="closeDialog"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { reactive, onMounted, ref, defineProps, getCurrentInstance } from "vue";
import Jcpz from "./components/jcpz.vue";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["closeback"]);
const props = defineProps({
  rowId: {
    type: String,
    default: ''
  },
  orgids: {
    type: String,
    default: ''
  }
});
const dialogVisible = ref(false);
const buttonLoading = ref(false);
const syqshow = ref(false);
const scqshow = ref(false);
const formQuery = ref({});
const formRef = ref(null);
const ssdept = getItem("deptId")
const bigHeight = ref(); //整个高度
const tableloading = ref(false);
const timetitle = ref('')
const pzlx = ref(null)
const comprehensiveShow = ref(false);
const Row = ref(null)
const pztitle = ref("");
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "名称",
      prop: "name",
    },
    {
      title: "说明",
      prop: "note",
    },
    {
      title: "配置",
      prop: "pzlx",
      slot: true
    },
  ],

});
const tableHeight = ref();

// 初始化
onMounted(() => {

  getTableData();
});


//设置期限
function szTime(lx) {
  if (lx == 'Y') {
    timetitle.value = '设置收烟期时间'
    formQuery.value.timetype = '01'
    dialogVisible.value = true
  } else {
    timetitle.value = '设置生产期时间'
    dialogVisible.value = true
    formQuery.value.timetype = '02'
  }
  getTime(formQuery.value.timetype)
}
//	查询单位本年度已配置的
function getTime(timetype) {
  getApi({ timetype }, '/mosty-jcgl/configStage/getConfig').then(res => {
    if (res) {
      formQuery.value.starttime = res.starttime;
      formQuery.value.endtime = res.endtime;
    } else {
      formQuery.value.starttime = null;
      formQuery.value.endtime = null;
    }
  })
}

// 获取表格数据
const getTableData = () => {
  tableloading.value = true;
  syqshow.value = false
  scqshow.value = false
  getApi({ checklibOrgId: props.rowId }, "/mosty-jcgl/checklibOrg/getEntruleList").then((res) => {
    tableloading.value = false;
    data.tableData = res;
    data.tableData.forEach((item) => {
      if (item.pzlx) {
        item.pzlx = item.pzlx.split(",");
        if (item.pzlx.includes('Y')) {
          syqshow.value = true
        }
        if (item.pzlx.includes('S')) {
          scqshow.value = true
        }
      }
    });
  }).finally(() => {
    tableloading.value = false;
  });
};
const foundationFn = (row, lx) => {
  Row.value = row
  pzlx.value = lx
  pztitle.value = ''
  switch (lx) {
    case "J":
      pztitle.value = "公司基础标准";
      break;
    case "S":
      pztitle.value = "公司生产期配置";
      break;
    case "Y":
      pztitle.value = "公司收烟期配置";
      break;
    case "X":
      pztitle.value = "闲置类";
      break;
    case "T":
      pztitle.value = "物流中心";
      break;
  }
  comprehensiveShow.value = true;
};

const closeDialog = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      dialogVisible.value = false
    })
    .catch(() => {
      // catch error
    })

};
function closeEven() {
  comprehensiveShow.value = false;
}
function black() {
  emits("closeback");
}
function submit() {
  formRef.value.validate((valid) => {
    if (valid) {
      buttonLoading.value = true;
      postApi(formQuery.value, '/mosty-jcgl/configStage/saveConfig')
        .then(() => {
          ElMessage.success("设置成功");
          dialogVisible.value = false;
          getTableData()
        }).finally(() => {
          buttonLoading.value = false;
        });
    } else {
      ElMessage.error("请填写完必填项!");
      return false;
    }
  });
}

</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 267px);
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.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>
