<template>
  <div class="chooseUser-container">
    <el-dialog v-model="isShowDialog" width="80%" draggable="" :before-close="closeDialog" destroy-on-close :fullscreen="fullScreen">
      <template #header>
        <div style="color: #fff;display: flex;align-items: center;justify-content: space-between;">
          <span>{{ props.title }}</span>
          <el-icon size="16" @click="fullScreen = !fullScreen" style="margin-right: 16px; display: block; vertical-align: middle;cursor: pointer">
            <ele-FullScreen v-if="!fullScreen" />
            <ele-Notification v-else />
          </el-icon>
        </div>
      </template>
      <el-row :gutter="10" style="height: 500px;">
        <el-col :span="4" style="height: 100%;">
          <treeFilter ref="orgTreeRef" @node-click="nodeClick" />
        </el-col>
        <el-col :span="20" style="display: flex;flex-direction: column;">
          <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
              <el-form-item label="模具编码">
                <el-input v-model="queryParams.equipmentCode" placeholder="模具编码" clearable />
              </el-form-item>
              <el-form-item label="模具名称">
                <el-input v-model="queryParams.equipmentName" placeholder="模具名称" clearable />
              </el-form-item>
              <el-form-item label="模具型号">
                <el-input v-model="queryParams.model" placeholder="模具型号" clearable />
              </el-form-item>
<!--              <el-form-item label="设备IP">-->
<!--                <el-input v-model="queryParams.ip" placeholder="设备IP" clearable />-->
<!--              </el-form-item>-->
<!--              <el-form-item label="一保">-->
<!--                <el-select clearable="" v-model="queryParams.guar1" placeholder="请选择一保">-->
<!--                  <el-option v-for="(item,index) in dl('YiBao')" :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`" />-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="二保">-->
<!--                <el-select clearable="" v-model="queryParams.guar2" placeholder="请选择二保">-->
<!--                  <el-option v-for="(item,index) in dl('ErBao')" :key="index" :value="item.code" :label="`[${item.code}] ${item.value}`" />-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item>
                <el-button-group>
                  <el-button type="primary" icon="ele-Search" @click="handleQuery" > 查询
                  </el-button><!--v-auth="'sysUser/page'"-->
                  <el-button icon="ele-Refresh" @click="() => queryParams = {}"> 重置 </el-button>
                </el-button-group>
              </el-form-item>
            </el-form>
          </el-card>
          <el-card class="full-table" shadow="hover" style="margin-top: 8px">
            <el-table :data="tableData" ref="tableRef" style="width: 100%" v-loading="loading"
                      tooltip-effect="light" row-key="id" border="" @selection-change="onSelectionChange">
              <el-table-column type="selection" :reserve-selection="true" v-if="props.isAny" width="55"
                               align="center" />
              <el-table-column type="index" label="序号" width="55" align="center" />
              <el-table-column prop="equipmentCode" label="模具编码"  show-overflow-tooltip="" />
              <el-table-column prop="equipmentName" label="模具名称"  show-overflow-tooltip="" />
              <!-- <el-table-column prop="ip" label="设备IP"  show-overflow-tooltip="" />
              <el-table-column prop="getway" label="设备网关"  show-overflow-tooltip="" /> -->
              <el-table-column prop="equipmentTypeCode" label="模具类别"  show-overflow-tooltip="">
                <template #default="scope">
                  <span>{{scope.row.equipmentTypeCodeEquipmentTypeName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="model" label="设备型号"  show-overflow-tooltip="" />
              <!-- <el-table-column prop="guar1" label="一保"  show-overflow-tooltip="" >
                <template #default="scope">
                  <el-tag > {{mesWorkTeamList.find(item=>item.workTeamCode == scope.row.guar1)?.workTeamName}} </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="guar2" label="二保"  show-overflow-tooltip="" >
                <template #default="scope">
                  <el-tag > {{mesWorkTeamList.find(item=>item.workTeamCode == scope.row.guar2)?.workTeamName}} </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="maker" label="设备制造商"  show-overflow-tooltip="" />
              <el-table-column prop="makeDate" label="制造日期"  show-overflow-tooltip="" />
              <el-table-column prop="useDate" label="使用日期"  show-overflow-tooltip="" />
              <el-table-column prop="isStop" label="是否停用"  show-overflow-tooltip="">
                <template #default="scope">
                  <el-tag v-if="scope.row.isStop"> 是 </el-tag>
                  <el-tag type="danger" v-else> 否 </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="productionLineCode" label="产线编码"  show-overflow-tooltip="">
                <template #default="scope">
                  <span>{{scope.row.productionLineCodeProductionLineName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="isQa" label="是否质保期"  show-overflow-tooltip="">
                <template #default="scope">
                  <el-tag v-if="scope.row.isQa"> 是 </el-tag>
                  <el-tag type="danger" v-else> 否 </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="img" label="设备图片"  show-overflow-tooltip="">
                <template #default="scope">
                  <el-image
                      v-if="scope.row.img"
                      style="width: 60px; height: 60px"
                      :src="scope.row.img"
                      :lazy="true"
                      :hide-on-click-modal="true"
                      :preview-src-list="[scope.row.img]"
                      :initial-index="0"
                      fit="scale-down"
                      preview-teleported=""/>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注"  show-overflow-tooltip="" /> -->
              <el-table-column label="操作" width="140" align="center" fixed="right"
                               show-overflow-tooltip="" v-if="!props.isAny">
                <template #default="scope">
                  <el-button icon="ele-Edit" size="small" text="" type="primary"
                             @click="selectOne(scope.row)"> 选择 </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
                           :total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" small="" background=""
                           @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           layout="total, sizes, prev, pager, next, jumper" />


          </el-card>
        </el-col>
      </el-row>
      <template #footer v-if="props.isAny">
                <span class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="confirm">确 定（{{ selectionNum }}条）</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup="" name="mesMaterial">
import { ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { auth } from '/@/utils/authFunction';
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import treeFilter from './components/equipmentTypeTree.vue'
import {getMesFactoryFactoryCodeDropdown, pageMesWorkShop} from "/@/api/mes/mesWorkShop";
import {pageMesEquipment} from "/@/api/mes/mesEquipment";
import {pageMesProductionLine} from "/@/api/mes/mesProductionLine";
import {pageMesWorkTeam} from "/@/api/mes/mesWorkTeam";

var props = defineProps({
  title: {
    type: String,
    default: "",
  },
  isAny: {
    type: Boolean,
    default: false,
  },
});
let fullScreen = ref(false);
const showAdvanceQueryUI = ref(true);
const loading = ref(false);
const tableData = ref<any>([]);
const queryParams = ref<any>({});
const tableParams = ref({
  page: 1,
  pageSize: 10,
  total: 0
});

const tableRef = ref<any>();
const isShowDialog = ref(false);
const options = ref<any>({});
//已选择的条数
const selectionNum = ref<number>(0);

//父级传递来的函数，用于回调
const emit = defineEmits(["finish"]);

// 打开弹窗
const productionLineCode = ref();
const openDialog = async (_options: any) => {
  if(_options && _options.productionLineCode){
    productionLineCode.value = _options.productionLineCode;
  }else{
    productionLineCode.value = null;
  }
  handleQuery(true);
  isShowDialog.value = true;
};

// 关闭弹窗
const closeDialog = () => {
  isShowDialog.value = false;
  tableRef.value.clearSelection();
};

// 取消
const cancel = () => {
  isShowDialog.value = false;
  tableRef.value.clearSelection();
};

//确定
const confirm = () => {
  emit("finish", { rows: tableRef.value.getSelectionRows() });
  isShowDialog.value = false;
}
// 选择一个
const selectOne = (row: any) => {
  emit("finish", row);
  isShowDialog.value = false;
}

// 选择行变更
const onSelectionChange = () => {
  selectionNum.value = tableRef.value.getSelectionRows().length;
}

const mesWorkTeamList = ref([]);
const GetWorkTeamList = async ()=>{
  let res = await pageMesWorkTeam({
    page: 1,
    pageSize: 99999
  })
  mesWorkTeamList.value = res.data.result?.items ?? []
}
GetWorkTeamList()


// 查询操作
const handleQuery = async (first?: boolean) => {
  loading.value = true;
  if(productionLineCode.value){
    let data = (await pageMesProductionLine({productionLineCode:productionLineCode.value})).data.result?.items ?? [];
    if(data[0]){
      tableData.value = (data[0].equipmentCodes || '')
          .split(',')
          .filter((item) => item)
          .map((item, index) => {
            return {
              equipmentCode: item || '',
              equipmentName: (data[0].equipmentNames || '').split(',').filter((item) => item)?.[index] || '',
            };
          });
      tableParams.value.total = 0;
      loading.value = false;
    }else{
    }
    return
  }
  queryParams.value.IsMj = true;
  let params = Object.assign(Object.assign(queryParams.value, tableParams.value));
  var res = await pageMesEquipment(params);
  tableData.value = res.data.result?.items ?? [];
  tableParams.value.total = <number>res.data.result?.total || 0;
  loading.value = false;
};

// 改变页面容量
const handleSizeChange = (val: number) => {
  tableParams.value.pageSize = val;
  handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val: number) => {
  tableParams.value.page = val;
  handleQuery();
};

// 树组件点击
const nodeClick = async (node: any) => {
  console.log(node)
  queryParams.value.equipmentTypeCode = node.equipmentTypeCode;
  handleQuery();
};

//将属性或者函数暴露给父组件
defineExpose({ openDialog });

</script>
<style scoped>
:deep(.el-ipnut),
:deep(.el-select),
:deep(.el-input-number) {
  width: 100%;
}
:deep(.el-dialog__body){
  height: 100% !important;
}
</style>
