<template>
  <div class="bigBoxs">
    <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
      <template #content>
        <MOSTY.Assort :title="'基础信息'" />
        <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="150px" :model="data.fromObj" :inline="true"
          :rules="rules" :disabled="!props.saveBtnShow">
          <el-form-item label="颁发机关:" prop="issuingagencies">
            <el-input v-model="data.fromObj.issuingagencies" clearable style="width: 337px" />
          </el-form-item>
          <el-form-item label="颁发日期:" prop="issuingdate">
            <el-date-picker v-model="data.fromObj.issuingdate" type="date" value-format="YYYY-MM-DD"
              style="width: 337px" :disabled-date="disablednowDate1" @change="changepfrq" />
          </el-form-item>
          <el-form-item label="发证日期:" prop="validstartdate">
            <el-date-picker v-model="data.fromObj.validstartdate" type="date" value-format="YYYY-MM-DD"
              style="width: 337px" :disabled-date="disabledfrq" @change="changepfzrq" />
          </el-form-item>
          <el-form-item label="有效结束日期:" prop="validenddate">
            <el-date-picker v-model="data.fromObj.validenddate" type="date" value-format="YYYY-MM-DD"
              style="width: 337px" :disabled-date="disableyxjs" />
          </el-form-item>
          <el-form-item label="法定代表人:" prop="legalperson">
            <el-input v-model="data.fromObj.legalperson" clearable style="width: 337px" />
          </el-form-item>
          <el-form-item label="地址:" prop="address">
            <el-input v-model="data.fromObj.address" clearable style="width: 337px" />
          </el-form-item>
          <el-form-item label="备注:" style="width: 100%">
            <el-input v-model="data.fromObj.bz" clearable style="width: 100%" />
          </el-form-item>
          <el-form-item label="食品经营许可证件信息：" style='width:100%;'>
            <MOSTY.Upload v-model="data.fromObj.file" :limit="5" :delrow="delrow" :ShowfileList="true"
              @filehandleChange="changeFile" :gsgfList="['jpg', 'png', 'pdf']" :isImg="true"
              :disabled="!props.saveBtnShow" />
          </el-form-item>
        </el-form>
        <div v-if='!props.saveBtnShow'>
          <MOSTY.Assort :title="'修改记录表'" />
          <section style='height: 40vh;'>
            <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
              :isSelect="false" :isSort="false" @SortChange="SortChange" style="width: 100%;">
              <!-- 操作 -->
              <template #actions="{ row }">
                <span class="operesee" @click="handletabSee(row)" size="small"><el-icon>
                    <View />
                  </el-icon>详情</span>
              </template>
            </MOSTY.Table>
          </section>
          <div class="fenye">
            <Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange"></Pages>
          </div>
        </div>
      </template>
      <template #footer>

        <el-button type="primary" :loading="loading" @click="handleSave(ruleFormRef)" v-if="props.saveBtnShow">
          <span><el-icon>
              <DocumentChecked />
            </el-icon>保存</span>
        </el-button>
        <el-button @click="CloseEvent" type="primary">
          <span><el-icon>
              <DocumentDelete />
            </el-icon>关闭</span>
        </el-button>
      </template>
      <template #dwbox>
        <!-- 详情 -->
        <el-dialog v-model="dialogVisible" :show-close="false" :title="'人员证书记录详情'" :close-on-click-modal="false"
          width="1300px">
          <div class='diafrom'>
            <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="150px" :disabled="true" :model="fromObj"
              :inline="true" :rules="rules">
              <el-form-item label="颁发机关:" prop="issuingagencies">
                <el-input v-model="fromObj.issuingagencies" clearable style="width: 230px" />
              </el-form-item>
              <el-form-item label="颁发日期:" prop="issuingdate">
                <el-date-picker v-model="fromObj.issuingdate" type="date" value-format="YYYY-MM-DD"
                  style="width: 230px" />
              </el-form-item>
              <el-form-item label="发证日期:" prop="validstartdate">
                <el-date-picker v-model="fromObj.validstartdate" type="date" value-format="YYYY-MM-DD"
                  style="width: 230px" />
              </el-form-item>
              <el-form-item label="有效结束日期:" prop="validenddate">
                <el-date-picker v-model="fromObj.validenddate" type="date" value-format="YYYY-MM-DD"
                  style="width: 230px" />
              </el-form-item>
              <el-form-item label="法定代表人:" prop="legalperson">
                <el-input v-model="fromObj.legalperson" clearable style="width: 230px" />
              </el-form-item>
              <el-form-item label="地址:" prop="address">
                <el-input v-model="fromObj.address" clearable style="width: 230px" />
              </el-form-item>
              <el-form-item label="备注:">
                <el-input v-model="fromObj.bz" clearable style="width:1067px" />
              </el-form-item>
              <el-form-item label="食品经营许可证件信息：" style='width:100%;'>
                <MOSTY.Upload v-model="fromObj.file" :limit="5" :delrow="delrow" :ShowfileList="true"
                  @filehandleChange="changeFile" :gsgfList="['jpg', 'png', 'pdf']" :isImg="true" :disabled="true" />
              </el-form-item>
            </el-form>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="cancle()">取消</el-button>
            </span>
          </template>
        </el-dialog>
      </template>
    </MOSTY.FromPage>
  </div>

</template>

<script setup>
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  reactive,
  getCurrentInstance
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { disablednowDate1 } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  },
  title: String,
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  canteenInfoId: String
});
const fromObj = ref({})
const delrow = ref({}); //删除文件列表
const keys = ref(1)
const rules = reactive({
  issuingagencies: [{ required: true, message: "颁发机关不能为空", trigger: "blur" }],
  issuingdate: [{ required: true, message: "颁发日期不能为空", trigger: "blur" }],
  validstartdate: [{ required: true, message: "有效开始日期不能为空", trigger: "blur" }],
  validenddate: [{ required: true, message: "有效结束日期不能为空", trigger: "blur" }],
  legalperson: [{ required: true, message: "法定代表不能为空", trigger: "blur" }],
  address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
});
const emits = defineEmits(["close"]);
const data = reactive({
  fromObj: {},
  tbOndutymanagesonList: {}
});
const total = ref(0)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
});
const ruleFormRef = ref();
// 获取表格数据
const tableloading = ref(false);
const loading = ref(false);
const dialogVisible = ref(false);
const tableData = ref([])
const tableColumn = ref([
  {
    title: "颁发机关",
    prop: "issuingagencies",
  },
  {
    title: "颁发日期",
    prop: "issuingdate"
  },
  {
    title: "法定代表人",
    prop: "legalperson"
  },
  {
    title: "发证日期",
    prop: "validstartdate"
  },
  {
    title: "有效结束日期",
    prop: "validenddate",
  },
  {
    title: "地址",
    prop: "address"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 10,
  pageCurrent: 1,
  total: 0
})
onMounted(() => {
  if (props.editObj.id) {
    getmain(props.editObj.id)
    keys.value++
  } else {
    data.fromObj = {};
  }
});
//详情
const getmain = (id) => {
  if (id) {
    getApi({}, "/mosty-jcgl/foodsStorage/getFoodsStorageById/" + id).then(
      (res) => {
        if (res) {
          data.fromObj = res;
          listQuery.zbid = res.id
          listQuery.issuingagencies = res.issuingagencies
          listQuery.orgcode = res.orgcode
          getListData()
        }
      }
    );
  }
};

function disabledfrq(time) {
  return time.getTime() > new Date().getTime()
  // return time.getTime() + 24 * 60 * 60 * 1000 < new Date(data.fromObj.issuingdate).getTime()
}
function disableyxjs(time) {
  return time.getTime() + 24 * 60 * 60 * 1000 < new Date(data.fromObj.validstartdate).getTime()
}
function changepfrq() {
  data.fromObj.validstartdate = ''
  data.fromObj.validenddate = ''
}
function changepfzrq() {
  data.fromObj.validenddate = ''
}
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
  }

};

function getListData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/foodsStorage/queryJlb`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        pageConfiger.total = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  );
}
const handleSave = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      loading.value = true
      data.fromObj.file = data.fromObj.file ? data.fromObj.file.toString() : null;
      data.fromObj.canteenInfoId = props.canteenInfoId;
      if (data.fromObj) {
        if (data.fromObj.id) {
          postApi(
            data.fromObj,
            "/mosty-jcgl/foodsStorage/updateFoodsStorageOne"
          )
            .then((res) => {
              ElMessage.success("修改成功");
              emits("close");
            }).finally(() => {
              loading.value = false
            })

        } else {
          postApi(
            data.fromObj,
            "/mosty-jcgl/foodsStorage/addFoodsStorageOne"
          )
            .then((res) => {
              ElMessage.success("新增成功");
              emits("close");
            }).finally(() => {
              loading.value = false
            })
        }
      }
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};
//记录表详情
function handletabSee(val) {
  getApi({ id: val.id }, '/mosty-jcgl/foodsStorage/queryJlbById').then(res => {
    fromObj.value = res
    dialogVisible.value = true
  })

}
//关闭记录详情
function cancle() {
  dialogVisible.value = false
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.pageCurrent = val;
  pageConfiger.pageCurrent = val;
  getListData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.pageSize = val;
  pageConfiger.pageSize = val;
  getListData();
};
</script>

<style lang="scss" scoped>
.diafrom {
  // width: 1238px;

  .el-form {
    width: 100%;
  }
}

.box_cont {
  height: calc(100vh - 10vh);
  overflow-y: scroll;
}

.searchBox {
  width: 1333px;
  margin: 20px auto;
}

.ld_box {
  display: flex;
  margin-right: 30px;
}

.el-form {
  width: 93%;
  margin: 0px auto;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}
</style>