<template>
  <div class="bigBox">
    <PageTitle :title="data.config.title">
      <el-button type="primary" @click="submit()" v-if="data.config.saveBtnShow">保存</el-button>
      <el-button @click="black">关闭</el-button>
    </PageTitle>
    <div class="box_cont">
      <div class="searchBox" ref="searchBox">
        <el-form ref="ruleFormRef" :model="data.fromObj" :rules="rules" :disabled="!data.config.saveBtnShow"
          label-width="130px" class="mosty-from-wrap" status-icon :inline="true">
          <el-form-item label="部门名称" prop="bmmc">
            <el-input v-model="data.fromObj.orgName" placeholder="请输入部门名称" clearable style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="部门全称:" prop="bmqc">
            <el-input v-model="data.fromObj.orgQc" placeholder="请输入部门全称" clearable style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="部门简称:" prop="bmjc">
            <el-input v-model="data.fromObj.orgJc" placeholder="请输入部门全称" clearable style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="部门类型" prop="bmlx">
            <el-select style="width: 250px" v-model="data.fromObj.orgType" placeholder="请选择部门类型">
              <el-option v-for="item in D_ORG_ORGTYPE" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门代码" prop="bmdm">
            <el-input v-model="data.fromObj.orgCode" clearable style="width: 250px" />
          </el-form-item>
          <el-form-item label="部门等级" prop="bmdj">
            <el-select v-model="data.fromObj.orgLevel" disabled clearable style="width: 250px" placeholder="请选择部门等级：">
              <el-option v-for="item in D_ORG_ORGLEVEL" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门顺序号">
            <el-input-number style="width: 250px" v-model="data.fromObj.orgNo" placeholder="请填写部门顺序号" :min="1"
              :max="100" controls-position="right" />
          </el-form-item>
          <el-form-item label="部门电话">
            <el-input v-model="data.fromObj.linkTel" placeholder="请输入部门电话" clearable style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="部门业务类型" prop="pbywlx">
            <el-select style="width: 250px" disabled v-model="data.fromObj.orgBizType" class="m-4"
              placeholder="请选择部门业务类型">
              <el-option v-for="item in D_ORG_ORGBIZTYPE" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门联系人电话">
            <el-input v-model="data.fromObj.azdw" placeholder="请输入部门联系人电话" clearable style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="部门联系人">
            <el-input v-model="data.fromObj.linkMan" clearable placeholder="请输入部门联系人" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="部门邮箱">
            <el-input v-model="data.fromObj.email" clearable placeholder="请输入部门邮箱" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="拼音">
            <el-input v-model="data.fromObj.bmpyszm" clearable placeholder="请填写拼音" style="width: 250px" />
          </el-form-item>
          <el-form-item label="部门主页">
            <el-input v-model="data.fromObj.webUrl" placeholder="请输入部门主页" clearable style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="部门所属行政区划">
            <el-input v-model="data.fromObj.xzqh" placeholder="请输入部门所属行政区划" clearable style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="部门地址">
            <el-input show-word-limit style="width: 1000px" placeholder="请填写部门地址" maxlength="200"
              v-model="data.fromObj.address" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input show-word-limit placeholder="请填写备注" style="width: 1000px" maxlength="200"
              v-model="data.fromObj.bz" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- <el-collapse v-model="activeNames" style="padding-bottom= 50px"> -->
      <el-collapse v-model="activeNames" style="padding-bottom: 50px" v-if="data.config.wbjlShow">
        <el-collapse-item title="年配送量列表" name="1">
          <div>
            <el-button class="addbtn" type="primary" @click="addInfo">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
          <div class="tabbox">
            <el-table :data="data.fromObj.tbTobaccoYearlys" border stripe style="width: 100%" :height="tableHeight"
              :key="keyCount" @current-change="handlecheckChange">
              <el-table-column sortable prop="yealy" align="center" label="年份"></el-table-column>
              <el-table-column sortable prop="deliveryvolume" align="center" label="配送量"></el-table-column>
              <el-table-column sortable prop="username" align="center" label="人员"></el-table-column>
              <el-table-column sortable prop="deptname" align="center" label="部门"></el-table-column>
              <el-table-column sortable align="center" label="操作">
                <template #default="scope">
                  <span class="operate" style="color: yellowgreen" @click="editInfo(scope)">编辑</span>
                  <span class="operate" style="color: yellowgreen" @click="delInfo(scope.row)">删除</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog v-model="dialogVisible" :title="data.title" :close-on-click-modal="false" width="50%"
      :before-close="handleClose">
      <el-form class="mosty-from-wrap" ref="elform" label-width="130px" :model="fromObj" :inline="true" :rules="rules"
        :disabled="!data.config.saveBtnShow">
        <div class="ld_box">
          <el-form-item label="人员:">
            <el-input v-model="fromObj.username" style="width: 250px" />
          </el-form-item>
          <el-button type="primary" @click="ChooesDdld('01')">选择</el-button>
        </div>
        <el-form-item label="配送量:">
          <el-input v-model="fromObj.deliveryvolume" clearable style="width: 250px" />
        </el-form-item>
        <el-form-item label="年份:">
          <el-date-picker v-model="fromObj.yealy" type="year" placeholder="选择年份">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所属部门:">
          <el-input v-model="fromObj.deptname" disabled clearable style="width: 600px" />
        </el-form-item>

        <el-form-item label="备注:">
          <el-input v-model="fromObj.bz" clearable style="width: 600px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitry" v-if="data.config.saveBtnShow"> 保存 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选择带队领导 -->
    <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
      @choosedUsers="getSonValue"></ChooseUser>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  onMounted,
  watch,
  nextTick
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Choosebm from "@/components/MyComponents/ChooseDept/index.vue";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
const { proxy } = getCurrentInstance();
import { useRouter } from "vue-router";
const router = useRouter();
const { D_ORG_ORGTYPE, D_ORG_ORGLEVEL, D_ORG_ORGBIZTYPE } = proxy.$dict(
  "D_ORG_ORGTYPE",
  "D_ORG_ORGLEVEL",
  "D_ORG_ORGBIZTYPE"
);
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  },
  mainobj: {
    type: Object,
    default: () => { }
  }
});
const installoption = reactive([
  { value: "1", label: "已安装" },
  { value: "2", label: "未安装" }
]);
const activeNames = ref(1);
const dialogVisible = ref(false);
const chooseUserVisible = ref(false); //选择领导弹窗
const singleShow = ref(true); //单选多选
const memberList = ref([]); //成员选择的id回显
const leaderid = ref("");
const zzlx = ref(null);
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const data = reactive({
  fromObj: {},
  config: {
    title: "",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  },
  title: '',
});
const fromObj = ref({});
//点击带队领导选择按钮
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = fromObj.value.userid;
    singleShow.value = true;
    chooseUserVisible.value = true;
  }
}
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    fromObj.value.user = value[0].userName;
    fromObj.value.userid = value[0].id;
    fromObj.value.deptcode = value[0].deptId;
    fromObj.value.deptname = value[0].deptName;
  }
};
//新增
function addInfo() {
  fromObj.value = {};
  fromObj.value.user = localStorage.getItem("USERNAME");
  fromObj.value.userid = localStorage.getItem("USERID");
  fromObj.value.deptcode = getItem("deptId").ssbmid;
  fromObj.value.deptname = getItem("deptId").ssbmmc;
  fromObj.value.orgcode = getItem("deptId").ssdwid;
  fromObj.value.orgname = getItem("deptId").ssdwmc;
  dialogVisible.value = true;
  data.title = "年配送量新增";
}
const current = ref();
//修改
function editInfo(row) {
  current.value = row.$index;
  fromObj.value = row.row;
  dialogVisible.value = true;
  data.title = "年配送量修改";
}
//删除
function delInfo(row) {
  postApi(
    { id: row.id },
    "/mosty-jcgl/logisticsDelivery/deleteLogisticsDeliveryOne/"
  ).then((res) => {
    ElMessage.success("删除成功");
    getmain();
  });
}
//新增修改完毕
const submitry = () => {
  if (data.title == "年配送量新增") {
    postApi(fromObj.value, "/mosty-jcgl/logisticsDelivery/addLogisticsDeliveryOne")
      .then((res) => {
        ElMessage.success("新增成功");
        dialogVisible.value = false;
        getmain();
      })
      .catch((err) => {

      });
  }
  if (data.title == "年配送量修改") {
    postApi(fromObj.value, "/mosty-jcgl/logisticsDelivery/updateLogisticsDeliveryOne")
      .then((res) => {
        ElMessage.success("修改成功");
        dialogVisible.value = false;
        getmain();
      })
      .catch((err) => {

      });
  }
};
const rules = reactive({
  bmmc: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
  bmqc: [{ required: true, message: "部门全称不能为空", trigger: "blur" }],
  bmjc: [{ required: true, message: "部门简称不能为空", trigger: "blur" }],
  bmlx: [{ required: true, message: "部门类型不能为空", trigger: "blur" }],
  bmdm: [{ required: true, message: "部门代码不能为空", trigger: "blur" }],
  bmdj: [{ required: true, message: "部门等级不能为空", trigger: "blur" }],
  bmywlx: [{ required: true, message: "部门业务类型不能为空", trigger: "blur" }]
});

// 保存
const submit = () => {
  if (data.fromObj) {
    if (data.config.title == "新增") {
      postApi(data.fromObj, "/mosty-base/sysDept/addSysDept")
        .then((res) => {
          ElMessage.success("新增成功");
          emit("changePage", "Main");
        })
        .catch((err) => {

        });
    } else if (data.config.title == "编辑") {
      postApi(data.fromObj, "/mosty-base/sysDept/updateSysDept")
        .then((res) => {
          ElMessage.success("修改成功");
          emit("changePage", "Main");
        })
        .catch((err) => {

        });
    }
  }
};

const black = () => {
  if (data.config.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emit("changePage", "Main");
      })
      .catch(() => {
        // catch error
      })
  } else {
    emit("changePage", "Main");
  }

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

};

// //获取详情
function getmain() {
  if (props.editObj.id) {
    getApi(
      { id: props.editObj.id },
      "/mosty-base/deptFeign/getOrgById"
    ).then((res) => {
      if (res) {
        data.fromObj = res;
      }
    });
    postApi(
      { deptid: props.editObj.id },
      "/mosty-jcgl/logisticsDelivery/queryLogisticsDelivery"
    ).then((res) => {
      if (res) {
        data.fromObj.tbTobaccoYearlys = res;
      }
    });
  }
}
onMounted(() => {
  activeNames.value = ["1"];
  getmain();
});
watchEffect(() => {
  if (props.editObj) {
    data.config = JSON.parse(JSON.stringify(props.editObj));
    data.fromObj.parentId = data.config.parentId;
    data.fromObj.orgBizType = "05";
    data.fromObj.orgLevel = "40";
  }
  if (props.mainobj) {
    data.fromObj = props.mainobj;
  }
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

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

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

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

.el-form {
  width: 100%;
  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>