<style scoped lang="scss">
.title {
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
}
.titles {
  margin-top: 10px;
  font-weight: bold;
  font-size: 18px;
  border-left: 3px solid #409efe;
  padding-left: 10px;
  margin-bottom: 10px;
}
.dis {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 14px 10px;
  .left {
    width: 140px;
  }
  .right {
    width: 220px;
  }
}
</style>

<template>
  <div class="system-dept-container layout-padding">
    <el-card shadow="hover">
      <div class="titles">库存设置</div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in state.tableData"
          :key="index"
          :label="item.areaName"
          :name="index"
        >
          <div>
            <div style="background-color: #f6f7fb">
              <div class="dis">
                <div class="left">区县编码</div>
                <div class="right">
                  <el-input
                    size="default"
                    disabled
                    v-model="state.fromInput.areaCode"
                    :prefix-icon="Folder"
                    placeholder="请输入区县编码"
                  />
                </div>
              </div>
              <div class="dis">
                <div class="left">年度</div>
                <div class="right">
                  <el-date-picker
                    v-model="state.fromInput.year"
                    type="year"
                    size="default"
                    value-format="YYYY"
                    placeholder="选择年度"
                  />
                </div>
              </div>
              <div class="dis">
                <div class="left">库存总数</div>
                <div class="right">
                  <el-input
                    size="default"
                    v-model="state.fromInput.inventoryTotalNum"
                    :prefix-icon="Folder"
                    placeholder="请输入"
                  />
                </div>
              </div>
              <div class="dis">
                <div class="left">库存总面积</div>
                <div class="right">
                  <el-input
                    size="default"
                    v-model="state.fromInput.inventoryTotalArea"
                    :prefix-icon="Folder"
                    placeholder="请输入"
                  />
                </div>
              </div>
              <div class="dis">
                <div class="left">住宅库存总数</div>
                <div class="right">
                  <el-input
                    size="default"
                    v-model="state.fromInput.resInventoryTotalNum"
                    :prefix-icon="Folder"
                    placeholder="请输入"
                  />
                </div>
              </div>
              <div class="dis">
                <div class="left">住宅库存总面积</div>
                <div class="right">
                  <el-input
                    size="default"
                    v-model="state.fromInput.resInventoryTotalArea"
                    :prefix-icon="Folder"
                    placeholder="请输入"
                  />
                </div>
              </div>
            </div>
            <div class="dis">
              <div class="left"></div>
              <div class="right">
                <el-button
                  class="right"
                  size="default"
                  type="primary"
                  :loading="state.loading"
                  @click="successBtn"
                >
                  提交</el-button
                >
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- <el-card shadow="hover" class="layout-padding-auto">
      <el-row :gutter="20">
        <el-col :span="24">
        </el-col>
      </el-row>
    </el-card> -->
  </div>
</template>

<script setup lang="ts" name="settInve">
import { defineAsyncComponent, ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage, ElNotification, TabsPaneContext } from "element-plus";
import { Folder } from "@element-plus/icons-vue";
import { inventoryApi } from "/@/api/inve/index";
// 定义变量内容
const activeName = ref(0);
const state = reactive<any>({
  search: "",
  loading: false,
  fromInput: {
    areaCode: "", //区县编码
    year: "", //年
    inventoryTotalNum: "", //库存总数
    inventoryTotalArea: "", //库存总面积
    resInventoryTotalNum: "", //住宅库存总数
    resInventoryTotalArea: "", //住宅库存总面积
  },
  paging: {
    total: "",
  },
  tableData: [], //数据列表
});

const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {

};
//标签页点击事件
const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.props.name;
  state.fromInput = state.tableData[tab.props.name];
};
// 初始化数据
const getTableData = async () => {
  let item = await inventoryApi().inven();
  state.tableData = item.data;
  state.fromInput = item.data[activeName.value];
};
const successBtn = async () => {
  state.loading = true;
  var params = {
    areaCode: state.fromInput.areaCode, //区县编码
    year: state.fromInput.year, //年
    inventoryTotalNum: state.fromInput.inventoryTotalNum, //库存总数
    inventoryTotalArea: state.fromInput.inventoryTotalArea, //库存总面积
    resInventoryTotalNum: state.fromInput.resInventoryTotalNum, //住宅库存总数
    resInventoryTotalArea: state.fromInput.resInventoryTotalArea, //住宅库存总面积
  };

  let item = await inventoryApi().invenPut(params);
  if (item.code != 200) {
    ElNotification({
      title: "提示",
      message: item.msg,
      type: "error",
      duration: 3000,
    });
  } else {
    getTableData();
    ElNotification({
      title: "提示",
      message: item.msg,
      type: "success",
      duration: 3000,
    });
  }
  setTimeout(() => {
    state.loading = false;
  }, 500);
};
// 页面加载时
onMounted(() => {
  getTableData();
});
</script>
