<template>
  <MOSTY.PageTree :pageTitle="'收购责任人配置列表'" :oldTree="true" :searchType="'05'" @getDeptId="getdeptId">
    <template #table>
      <section class="tabsel3">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true">
          <template #ynxzf="{ row }">
            <dict-tag :options="D_TB_CSZT" :value="row.ynxzf" :tag="false" />
          </template>
          <template #actions="{ row }">
            <span class="operesee" @click="configuration(row)">
              <el-icon>
                <EditPen />
              </el-icon>
              设置责任人
            </span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>
  <el-dialog v-model="dialogVisible" title="责任人选择" width="30%" :before-close="handleClose">
    <el-form :model="formQuery" ref="formRef" label-position="left" :rules="rules">
      <div class="ld_box">
        <el-form-item prop="postusername" label="负责人：" @click="chooseUserVisible = true" style="display: flex;">
          <el-input v-model="formQuery.postusername" />
        </el-form-item>
        <el-button type="primary" @click="ChooesDdld('01')">选择</el-button>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">

        <el-button type="primary" @click="submit(formRef)"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>确定</span> </el-button>
        <el-button @click="dialogVisible = false"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </span>
    </template>
  </el-dialog>
  <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :data="memberList" :leaderid="leaderid"
    @choosedUsers="getSonValue" :deptId="deptId">
  </ChooseUser>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
const totalHeight = ref()
// 数据
const tableColumns = reactive([
  {

    title: "收购线名称",
    prop: "placename",
  },
  {
    title: "收购线责任人",
    prop: "postusername",
  },
  {
    title: "状态",
    prop: "ynxzf",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
//查询条件
const { proxy } = getCurrentInstance();
const deptId = ref();
const formQuery = ref({
  postuserid: "",
  postusername: ""
});
const formRef = ref();
// 引用字典列表
const { D_TB_CSZT } = proxy.$dict("D_TB_CSZT");
const dialogVisible = ref(false);
const tableData = ref([]);
const tableloading = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  orgcode: ""
});
//规则校验
const rules = reactive({
  fzr: [
    {
      required: true,
      message: "请选择负责人",
      trigger: "blur"
    }
  ]
});
// 配置
const configuration = (row) => {
  formQuery.value.id = row.id;
  formQuery.value.postusername = row.postusername;
  formQuery.value.postuserid = row.postuserid;
  deptId.value = row.deptid;
  dialogVisible.value = true;
};
//获取列表数据
function getDataList() {
  tableloading.value = true;
  getApi(listQuery, "/mosty-jcgl/deptCheck/sgx/getPageList")
    .then((res) => {
      if (res.records) {
        tableData.value = res.records;
        listQuery.total = res.total;
      }
    })
    .finally((err) => {
      tableloading.value = false;
    });
}
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getDataList();
};
//   确认按钮
const submit = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      getApi(formQuery.value, "/mosty-jcgl/deptCheck/sgx/setPersonal")
        .then((res) => {
          ElMessage.success("设置成功");
          dialogVisible.value = false;
          formQuery.value = {};
          getDataList();
        })
        .catch((err) => {

        });
    } else {
    }
  });
};
const chooseUserVisible = ref(false); //选择领导弹窗
const singleShow = ref(true); //单选多选
const memberList = ref([]); //成员选择的id回显
const leaderid = ref("");
const zzlx = ref(null);
//点击带队领导选择按钮
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = formQuery.value.postuserid;
    singleShow.value = true;
    chooseUserVisible.value = true;
  }
}
const getSonValue = (value) => {
  if (zzlx.value == "01") {
    formQuery.value.postusername = value[0].userName;
    formQuery.value.postuserid = value[0].id;
  }
};

function handleClose() {
  dialogVisible.value = false;
};

//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
</script>

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

.ld_box {
  display: flex;
}
</style>
