<template>
  <div>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <MOSTY.Search :searchArr="searchArr" @submit="Searchdata" />
        <el-button type="primary" @click="addUserHander" class="ml10" v-if="isBtnShow">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
      <section class="eltab3">
        <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData"
          :tableloading="tableloading">
          <template #amount="{ row }">
            <span>{{ row.amount }} 万支</span>
          </template>
          <template #lcCount="{ row }">
            <span>{{ row.lcCount }} 个</span>
          </template>
          <template #actions="{ row }">
            <span class="operedit" @click="handlexg(row)" v-if="isBtnShow">
              <el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              v-if="isBtnShow" @confirm="handledelete(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="handleSee(row)">
              <el-icon>
                <Compass />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
        </MOSTY.Pages>
      </div>
    </div>
  </div>
  <el-dialog v-model="addbpdShow" :title="title" :before-close="closeDialog" width="600px" append-to-body>
    <el-form ref="ruleFormRef" label-width="130px" :model="fromData" :inline="true" :rules="rules"
      :disabled="!saveBtnShow">
      <el-form-item label="所属单位:" prop="orgname">
        <el-input v-model="fromData.orgname" disabled clearable style="width: 337px" />
      </el-form-item>
      <el-form-item label="年份:" prop="year">
        <el-date-picker v-model="fromData.year" type="year" format="YYYY" value-format="YYYY" placeholder="选择年份"
          style="width: 337px">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="年配送量:" prop="amount">
        <el-input v-model.number="fromData.amount" type='number' placeholder="请输入年配送量" style="width: 337px">
          <template #append>万支</template></el-input>
      </el-form-item>
      <el-form-item label="笼车数量:" prop="lcCount">
        <el-input v-model.number="fromData.lcCount" type='number' placeholder="请输入笼车数量" style="width: 337px">
          <template #append>个</template></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if='saveBtnShow' @click="savefrom(ruleFormRef)" v-loading='loadingshow'> <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>

</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage"
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["handleChange", 'searchChange']);
const tableloading = ref(false);
const addbpdShow = ref(false);
const saveBtnShow = ref(true);
const loadingshow = ref(false);
const ruleFormRef = ref()
const title = ref('')
const fromData = ref({
  orgname: '',
  orgcode: ''
});
const isBtnShow = ref(false)
const searchArr = reactive([
  {
    showType: "year",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear() + "",
  },

]);
const rules = {
  ...rule.numberzzsRule({ validator: true, require: true, num: 99999 }, "lcCount"),
  ...rule.numbernineRule({ validator: true, require: true, iszs: true, firstNum: 9, lastNum: 4 }, "amount"),
  year: [{ required: true, message: "请选择年份", trigger: "blur" }],
  orgname: [{ required: true, message: "所属单位不能为空", trigger: "blur" }],

};
const props = defineProps({
  obj: {
    default: null,
    type: Object
  }
});
const pageData = reactive({
  listQuery: {
    pageCurrent: 1,
    pageSize: 5,
    year: new Date().getFullYear().toString(),
  },
  tableColumns: [
    {
      title: "单位名字",
      prop: "orgname"
    },
    {
      title: "年份",
      prop: "year"
    },
    {
      title: "年配送量",
      prop: "amount",
      slot: true
    },
    {
      title: "笼车数量",
      prop: "lcCount",
      slot: true
    },

    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
const pageConfiger = reactive({
  pageSize: 5,
  pageCurrent: 1,
  total: 0
})
onMounted(() => {
  pageData.listQuery.orgcode = props.obj.orgCode
  let isEdit = props.obj.isEdit
  if (getItem('deptId').ssdwid == pageData.listQuery.orgcode && isEdit) {
    isBtnShow.value = true
  }
  gettablist()
})
//年配送量分页查询
function gettablist() {
  tableloading.value = true
  getApi(pageData.listQuery, "/mosty-jcgl/delivery/getPageList").then((res) => {
    if (res) {
      tableloading.value = false
      pageData.tableData = res.records
      pageConfiger.total = res.total
    }
  })
}
//新增
function addUserHander() {
  title.value = '年配送量新增';
  fromData.value = {
    orgname: props.obj.orgname,
    orgcode: props.obj.orgCode,
  }
  saveBtnShow.value = true;
  addbpdShow.value = true
}
//修改
function handlexg(row) {
  saveBtnShow.value = true;
  title.value = '年配送量修改';
  getmain(row.id)
}
//详情
function handleSee(row) {
  saveBtnShow.value = false;
  title.value = '年配送量详情';
  getmain(row.id)
}
//获取详情
function getmain(id) {
  if (id) {
    getApi({ id: id }, "/mosty-jcgl/delivery/getInfo").then((res) => {
      if (res) {
        fromData.value = res;
        addbpdShow.value = true
      }
    });
  }
}
//注销
function handledelete(row) {
  postApi({}, `/mosty-jcgl/delivery/del/${row.id}`).then(res => {
    ElMessage.success("删除成功");
    gettablist()
  })
}
const closeDialog = () => {
  if (!saveBtnShow.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        addbpdShow.value = false
      })
  } else {
    addbpdShow.value = false
  }

};

// 保存
const savefrom = async (ruleFormRef) => {
  loadingshow.value = true
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      if (fromData.value) {
        if (fromData.value.id) {
          postApi(fromData.value, "/mosty-jcgl/delivery/update")
            .then((res) => {
              ElMessage.success("修改成功");
              addbpdShow.value = false
              gettablist()
            }).finally(() => {
              loadingshow.value = false
            })
        } else {
          postApi(fromData.value, "/mosty-jcgl/delivery/add")
            .then((res) => {
              ElMessage.success("新增成功")
              addbpdShow.value = false
              gettablist()
            }).finally(() => {
              loadingshow.value = false
            })
        }


      }
    } else {
      ElMessage.error("请输入必填项!");
      loadingshow.value = false
    }
  });
};

//查询
function Searchdata(obj) {
  pageData.listQuery.year = obj.year;
  pageData.listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  gettablist()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  pageConfiger.pageCurrent = val;
  gettablist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  pageConfiger.pageSize = val;
  gettablist()
};
</script>

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

.headBox3 {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

.el-form {
  width: 600px;
  display: block !important;
  margin: 0 auto;
  padding: 10px;
  margin-top: 10px;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}
</style>
