<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav :navTitle="'下发指令'" />
    <van-form @submit="onSubmit">
      <van-field v-model="normalForm.zlbt" label="指令标题" placeholder="请输入指令标题" input-align="right" required
        :rules="[{ required: true, message: '请输入指令标题' }]" />
      <van-cell-group>
        <van-cell clickable title="等级" :border="false">
          <template #right-icon>
            <van-radio-group v-model="zldj" direction="horizontal">
              <van-radio :name="item.dm" v-for="item in D_BZ_TYJB" :key="item">{{ item.zdmc }}</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-cell clickable title="接收对象" :border="false">
          <template #right-icon>
            <van-radio-group v-model="jsdx" direction="horizontal">
              <van-radio :name="item.dm" v-for="item in D_BZ_ZLJSDX" :key="item">{{ item.zdmc }}</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell class="mulSelect" title="人员" color="#1989fa" v-if="jsdx == '01'">
        <template #right-icon>
          <van-icon @click.stop="onSelectData('mj')" name="add-o" color="#1989fa" size="22" />
        </template>
        <template #default>
          <div class="selected-box">
            <div class="check-item-tag" v-for="(item, index) in list.mj" :key="index">
              <van-tag color="#7232dd" closeable @close="deleteCheckTag(item, index, 'mj')" plain>{{ item.zxrXm
                }}</van-tag>
            </div>
          </div>
        </template>
      </van-cell>
      <van-field v-model="normalForm.bmName" label="部门" placeholder="请选择部门" input-align="right" readonly is-link
        required :rules="[{ required: true, message: '请选择部门' }]"
        @click="(bmShow = true), (selectType = 'bm'), (showSelect = false)" v-if="jsdx == '02'" />
      <van-cell class="mulSelect" title="巡组" color="#1989fa" v-if="jsdx == '03'">
        <template #right-icon>
          <van-icon @click.stop="onSelectData('xz')" name="add-o" color="#1989fa" size="22" />
        </template>
        <template #default>
          <div class="selected-box">
            <div class="check-item-tag" v-for="(item, index) in list.xz" :key="index">
              <van-tag color="#7232dd" closeable @close="deleteCheckTag(item, index, 'xz')" plain>{{ item.zxrXzmc
                }}</van-tag>
            </div>
          </div>
        </template>
      </van-cell>
      <van-field rows="3" label="内容" type="textarea" label-width="35px" v-model="normalForm.zlnr"
        placeholder="请输入指令内容" />
      <div style="margin: 20vw 0; padding: 0 5vw">
        <van-button :loading="loading" round native-type="submit" block type="primary">
          提交
        </van-button>
      </div>
    </van-form>
    <Select bclx="02" :dwlx="dwlx" :checked="r_checked" :selectType="selectType" :show="showSelect"
      :checkedList="list.checkedList" @update:cancel="showSelect = false" @update:confirm="onComfirm"
      :key="selectIndex" />
    <van-dialog :show="bmShow" title="选择部门" show-cancel-button @confirm="bmShow = false" @cancel="bmShow = false"
      confirmButtonColor="#3e6ee8">
      <van-cascader v-model="normalForm.deptName" :closeable="false" @change="onChangeBm" :show-header="false"
        active-color="#3e6ee8" title="请选择部门" :options="list.options" :field-names="customFieldName"
        @click-tab="onClickTabCascader">
      </van-cascader>
    </van-dialog>
  </div>
</template>

<script setup>
import { selectNextPage } from "../../api/yjxx.js";
import TopNav from "../../components/topNav.vue";
import { getDictList, setDict } from "../../utils/dict";
import { onMounted, ref, reactive } from "vue";
import { addZlData } from "../../api/zlzx.js";
import Select from "../../components/Select.vue";
import { hintToast } from "../../utils/tools.js";
import router from "@/router/index.js";
const { D_BZ_TYJB, D_BZ_ZLJSDX } = getDictList("D_BZ_TYJB", "D_BZ_ZLJSDX"); //字典信息
const zldj = ref("40"); //指令等级 默认蓝色
const jsdx = ref("01"); //接收对象 默认人员
const dwlx = ref("01");
const r_checked = ref(""); //单选框默认选中
const kwd = ref(""); //选择器关键字
const selectIndex = ref(1); //选择器组件KEY
const selectType = ref(""); //选择的类型
const showSelect = ref(false);
const bmShow = ref(false); //部门选择器
const list = reactive({
  checkedList: [],
  mj: [],
  xz: [],
  bm: [],
  options: [],
  tabCascader: [], //选中部门的临时数据
});
//选择器字段
const customFieldName = {
  text: "orgName",
  value: "id",
  children: "childDeptList",
};
//表单数据
const normalForm = ref({
  zlbt: "",
  zlnr: "",
  deptName: "",
  bmName: "",
});
const zxrDtoList = ref([]);
onMounted(() => {
  _selectNextPage();
});
//选中的部门数据
function onChangeBm(val) {
  list.tabCascader = val.selectedOptions;
  let info = val.selectedOptions.find((item) => {
    return item.id == val.value;
  });
  if (info) {
    let { orgName, id } = info;
    normalForm.value.bmName = orgName;
    list.bm = [{ ssbmid: id, ssbmmc: orgName }];
  }
}
//部门选择tabs
function onClickTabCascader(val) {
  let info = list.tabCascader[val];
  if (info) {
    let { orgName, id } = info;
    normalForm.value.bmName = orgName;
    list.bm = [{ ssbmid: id, ssbmmc: orgName }];
  }
}
//查询部门数据
function _selectNextPage() {
  selectNextPage({
    size: 100,
    current: 1,
  }).then((res) => {
    list.options = [res.records[0]];
  });
}
//提交指令
function onSubmit() {
  switch (selectType.value) {
    case "mj":
      zxrDtoList.value = list.mj;
      break;
    case "bm":
      zxrDtoList.value = list.bm;
      break;
    case "xz":
      zxrDtoList.value = list.xz;
      break;
  }
  let data = {
    zlbt: normalForm.value.zlbt,
    zldj: zldj.value,
    zljsdx: jsdx.value,
    zllx: "08",
    zlnr: normalForm.value.zlnr,
    zxrDtoList: zxrDtoList.value,
  };
  addZlData(data).then((res) => {
    hintToast("下发成功！");
    router.replace("/newTwoHome/myZl");
  });
}
//打开弹窗
function onSelectData(val) {
  selectType.value = val;
  showSelect.value = true;
  list.bm = [];
  list.mj = [];
  list.xz = [];
  selectIndex.value++;
}
//确认选择
function onComfirm(val) {
  if (val.length <= 0) return;
  switch (selectType.value) {
    case "mj":
      list.checkedList = [];
      val.forEach((item) => {
        list.checkedList.push(item.key);
        toggle(item);
      });
      break;
    case "xz":
      list.checkedList = [];
      val.forEach((item) => {
        list.checkedList.push(item.key);
        toggle(item);
      });
      break;
  }
}
//设置选中值
const toggle = (item) => {
  switch (selectType.value) {
    case "mj":
      list.mj.push({
        zxrJllx: item.fl,
        zxrLx: "01",
        zxrSfz: item.sfzh,
        jlxm: item.xm,
        sfzh: item.sfzh,
        zxrXm: item.xm,
        zxrId: item.ryid,
      });
      break;
    case "xz":
      list.xz.push({
        zxrXzmc: item.jzMc || item.fzrXm + "组",
        zxrXzid: item.id,
      });
      break;
  }
};
//删除选中数据
function deleteCheckTag(item, index, val) {
  switch (val) {
    case "mj":
      list.mj.splice(index, 1);
      break;
    case "xz":
      list.xz.splice(index, 1);
      break;
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/mixin.scss";

.container {
  margin-top: 2vw;
}

::v-deep .mulSelect .van-cell__title,
.van-cell__value {
  flex: unset;
}

::v-deep .mulSelect .van-cell__value {
  flex: 1;
}

.van-cell:after {
  display: none;
}

.van-cell {
  @include table_item_color($table-item-theme);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 6px;
  margin: 8px 4%;
  width: 92%;
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  line-height: var(--van-cell-line-height);
}

.check-item-tag {
  display: inline-block;
  margin: 0 6px;
}
</style>
