<template>
  <MOSTY.PageTree :pageTitle="'驾驶员培训实施'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <el-divider />
      <section class="button">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </section>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <!-- <template #specialityType="{ row }">
              <dict-tag v-if="row.specialityType" :options="D_TB_YWLX" :value="row.specialityType" :tag="true" />
            </template> -->
          <template #state="{ row }">
            <dict-tag v-if="row.state" :options="D_TB_PXZT" :value="row.state" :tag="true" />
          </template>
          <template #actions="{ row }">
            <el-popconfirm v-if="row.state == '0200' && row.type == '3'" confirm-button-text="是" cancel-button-text="否"
              icon-color="red" title="确定要下发?" @confirm="xiafarow(row)">
              <template #reference>
                <span class="operesee" size="small">
                  <el-icon>
                    <Position />
                  </el-icon>下发</span>
              </template>
            </el-popconfirm>
            <span class="operedit" v-if="row.state == '0200' && row.type == '3'" @click="editInfo(row)">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <el-popconfirm v-if="(row.state == '0200' || row.state == '0001') &&
              row.type == '3'" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handledelete(row)">
              <template #reference>
                <span class="operdel" size="small"><el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="seeInfo(row)">
              <el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <div v-if="addDiaShowjhw" class="dialog-box">
    <Addpxjhssjhw :formData="formData" :type="'3'" @changeAddVi="changeAddVijhw">
    </Addpxjhssjhw>
  </div>
  <!-- 详情 -->
  <div v-if="addDiaShowxq" class="dialog-box">
    <pxssxqdia :formData="formObj" :type="'3'" @changeAddVi="changexqclose">
    </pxssxqdia>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import Pages from "@/components/aboutTable/Pages/index.vue";
import Addpxjhssjhw from "@/views/safety/pxjygl/pxjhcoms/addpxssjhw.vue";
import pxssxqdia from "@/views/safety/pxjygl/pxssxqdia.vue";
import { ElMessage } from "element-plus";
import { filterYear } from "@/utils/auth.js";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_TB_YWLX, D_TB_PXZT } = proxy.$dict("D_TB_YWLX", "D_TB_PXZT");
const formData = ref({
  title: '新增',
  saveBtnShow: true,
  id: null
})
const formObj = ref({})
const addDiaShowxq = ref(false);
const totalHeight = ref()
const addDiaShowjhw = ref(false);
const tableloading = ref(false);
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    options: filterYear(7, true),
    placeholder: "请选择年份"
  }
])
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "开始时间",
      prop: "startDate",
      showOverflowTooltip: true,
    },
    {
      title: "结束时间",
      prop: "finshDate",
      showOverflowTooltip: true,
    },
    {
      title: "培训项目",
      prop: "planName",
    },
    {
      title: "负责人",
      prop: "planChargePersonName",
    },
    {
      title: "联系人",
      prop: "contactorName",
    },
    {
      title: "主办部门",
      prop: "planHostsDeptName",
    },
    {
      title: "业务类型",
      prop: "specialityType"
    },
    {
      title: "状态",
      prop: "state",
      slot: true
    }, {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  pageConfiger: {
    pageSize: 10,
    pageCurrent: 1,
    total: 0
  }
});
// 初始化
onMounted(() => {
  totalHeight.value = `calc(100vh - 380px)`
});
//分页
const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};

const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
const listQuery = reactive({
  year: new Date().getFullYear(),
  type: "3",
  planHostsDeptId: "",
  pageCurrent: 1,
  pageSize: 20
});
//查询
function onSearch(boj) {
  listQuery.year = boj.year;
  listQuery.pageCurrent = 1;
  getTableData();
}
//获取部门数据
const getdeptId = (val) => {
  listQuery.planHostsDeptId = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};
function getTableData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/training/getListPxss`).then((res) => {
    if (res.records) {
      res.records.forEach(it => {

        it.specialityType = it.specialityType.split(',').map(item => {
          return D_TB_YWLX.value.find(v => v.value == item).label
        }).toString()
      });
      data.tableData = res.records;

      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//下发
const xiafarow = (row) => {
  postApi({}, `/mosty-jcgl/training/pxssIssue/${row.id}`).then((res) => {
    ElMessage.success("下发成功");
    getTableData();
  });
};
//新增
const addInfo = () => {
  formData.value.title = '驾驶员培训实施新增'
  formData.value.saveBtnShow = true
  formData.value.id = null
  tableloading.value = false;
  addDiaShowjhw.value = true;
};
//编辑
const editInfo = (row) => {
  formData.value.title = '驾驶员培训实施编辑'
  formData.value.saveBtnShow = true
  formData.value.id = row.id
  tableloading.value = false;
  addDiaShowjhw.value = true;
};
//查看
const seeInfo = (row) => {
  formObj.value.title = '驾驶员培训实施详情'
  formObj.value.sjtype = 'jc'
  formObj.value.id = row.id;
  formObj.value.state = row.state;
  formObj.value.oldejid = row.oldejid;
  formObj.value.type = row.type;
  addDiaShowxq.value = true
};
const changeAddVijhw = (val) => {
  addDiaShowjhw.value = val;
  formData.value.title = ''
  formData.value.saveBtnShow = true
  formData.value.id = null;
  formData.value.planName = null;
  formData.value.types = null;
  getTableData();
};
function changexqclose() {
  formObj.value.id = null;
  formObj.value.type = null;
  addDiaShowxq.value = false
  getTableData();
}
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/training/pxssDelJhn/" + row.id).then(() => {
    ElMessage.success("删除成功");
    getTableData();
  });
};

</script>

<style lang="scss" scoped>
.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}

::v-deep .el-form-item {
  margin: 9px !important;
}
</style>