<template>
  <el-dialog v-model="show" :width="1200" destroy-on-close>
    <template #header>
      <div style="color: #fff">
        <!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
        <span>设备配置</span>
      </div>
    </template>
    <div>
      <el-row>
        <el-button type="primary" v-if="!props.onlyView" @click="addClcik">添加</el-button>
      </el-row>
      <el-table :data="tabledata" id="bomtable" style="width: 100%;margin: 10px 0px;" size="small" row-key="id"
                border>
        <el-table-column prop="resourceCode" label="设备编码" show-overflow-tooltip="">
        <!-- <template #default="scope">
                <el-input v-model="scope.row.resourceCode" :disabled="props.onlyView"
                    @click="chooseResource(scope.row)" placeholder="请输入资源编码" maxlength="100" clearable />
            </template>-->
        </el-table-column>

        <el-table-column prop="resourceName" label="设备名称" show-overflow-tooltip="">

        </el-table-column>
        <el-table-column prop="isDefault" label="是否默认" width="120" show-overflow-tooltip="">
          <template #default="scope">
            <el-switch v-model="scope.row.isDefault" :disabled="props.onlyView" :active-value="1" @change="e=>onlyOneDefault(scope.$index,e)"
                       :inactive-value="0" />
          </template>
        </el-table-column>
<!--        <el-table-column prop="programFiles" label="程序文件" width="180" show-overflow-tooltip="">-->
<!--          <template #default="scope">-->
<!--            <div v-for="(item, idx) in getFilesCraft(scope.row.programFiles)"><el-link target="_blank"-->
<!--                                                                                       :download="item.url" :href="item.url" type="primary">{{ item.name }}</el-link></div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="remark" label="备注" show-overflow-tooltip="">
          <template #default="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入"></el-input>
          </template>
        </el-table-column>

        <el-table-column prop="" v-if="!props.onlyView" label="操作" width="450">
          <template #default="scope">
<!--            <el-button type="primary" size="small" icon="ele-Files"-->
<!--                       @click="mangerFile(scope.row)">管理程序文件</el-button>-->
<!--            <el-button type="warning" size="small" icon="ele-Connection"-->
<!--                       @click="versionClick(scope.row.id)">变更版本</el-button>-->
<!--            <el-button type="info" size="small" icon="ele-Search"-->
<!--                       @click="histroyClick(scope.row.id)">历史版本查询</el-button>-->
            <el-button type="danger" size="small" icon="ele-Delete"
                       @click="deleteClick(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer v-if="!props.onlyView">
            <span class="dialog-footer">
                <el-button @click="show = false;">取 消</el-button>
                <el-button type="primary" @click="okClick">确 定</el-button>
            </span>
    </template>
  </el-dialog>
  <el-dialog v-model="isShowDialog" :width="800" draggable="">
    <template #header>
      <div style="color: #fff">
        <span>文件上传</span>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
        <el-upload :show-file-list="false" multiple :limit="9" :http-request="uploadFilePathHandle"
                   style="width:100%">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
        <div style="margin-top: 10px;">
          <div v-for="(item, index) in fileList"><el-icon size="14"
                                                          style="margin-right: 5px; display: inline; vertical-align: middle;color:red;cursor: pointer;"
                                                          @click="onDelFile(index)"> <ele-Delete /> </el-icon>{{ item.name }}</div>
        </div>
      </el-col>
    </el-row>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="isShowDialog = false;">取 消</el-button>
                <el-button type="primary" @click="submitClick">确 定</el-button>
            </span>
    </template>
  </el-dialog>
  <el-dialog v-model="histroyShow" :width="1000" destroy-on-close>
    <template #header>
      <div style="color: #fff">
        <!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
        <span>历史版本查询</span>
      </div>
    </template>

    <div>
      <el-select v-model="histroyValue" placeholder="请选择" @change="versionChange" clearable>
        <el-option v-for="item in histroyList" :label="item.verNo" :value="item.id">
        </el-option>
      </el-select>
      <div style="margin-top: 20px;"></div>
      <div v-for="item in linehistroy" style="background-color: #f2f2f2;margin-top: 5px;padding: 4px;">
        <el-link :download="item.url" target="_blank" :href="item.url" type="primary">{{ item.name }}</el-link>
      </div>
    </div>
  </el-dialog>

  <resourceDialog title="选择设备" ref="resourceDialogRef" :isAny="true" @finish="onChooseFinish"></resourceDialog>
</template>
<script setup lang="ts">
import { ref, defineProps, defineExpose, toRefs } from 'vue'
import { deepClone, listToTree } from '/@/utils/other.ts'
import resourceDialog from "/@/businessComponents/chooseEquipment.vue";
import { uploadFilePath, getVerNos, getVerInfo } from '/@/api/mes/mesProduct.ts'
const resourceDialogRef = ref();
const show = ref(false);
const fileList = ref<any[]>([]);
const tabledata = ref<any[]>([]);
const props = defineProps({
  process: {
    type: Object,
    default: () => { },
  },
  onlyView: {
    type: Boolean,
    default: false,
  },
  productCode: {
    type: String,
    default: '',
  }
})

const onlyOneDefault = (i,value)=>{
  console.log(i,value)
  if(value == 1){
    tabledata.value = tabledata.value.map((item)=>({...item,isDefault:0}));
    tabledata.value[i].isDefault = 1;
  }
}

const submitClick = () => {
  let filedata: any[] = [];
  fileList.value.map(item => {
    filedata.push(item)
  })
  initcurrentRow.programFiles = JSON.stringify(filedata);
  isShowDialog.value = false;
}

const onDelFile = (index: number) => {
  fileList.value.splice(index, 1)
}
const isShowDialog = ref(false);
const opendialog = () => {
  var cloneObj = deepClone(props.process.resourceList || []);
  cloneObj.forEach((item:any) => {
    item.resourceName = item?.resource?.equipmentName;
  })
  tabledata.value = cloneObj;
  show.value = true;
}
const uploadFilePathHandle = async (options: UploadRequestOptions) => {
  const res = await uploadFilePath(options);
  fileList.value.push({ name: res.data.result?.fileName + res.data.result?.suffix, url: res.data.result?.url });
};
let initcurrentRow = {};
//打开产品选择页面

const chooseResource = () => {
  // initcurrentRow = currentRow;
  resourceDialogRef.value.openDialog({ codes: [] });
}
const getFilesCraft = (str: string) => {
  if (str) {
    return JSON.parse(str)
  } else {
    return [];
  }
}
const mangerFile = (data: any) => {
  initcurrentRow = data;
  fileList.value = data.programFiles ? JSON.parse(data.programFiles) : [];
  isShowDialog.value = true;
}

const emits = defineEmits(['submit', 'versionClick'])

const okClick = () => {
  emits('submit', tabledata.value);
  show.value = false;
}

const versionClick = (id: any) => {

  emits('versionClick', {
    productCode: '',
    verType: 7,
    ProductBomProcessResourceId: id,
  }, () => {
  })
}

const onChooseFinish = (e: any) => {
  // initcurrentRow.resourceCode = e.resourceCode;
  // initcurrentRow.resource = e;
  console.log(e);
  e.rows.forEach((element: any) => {
    let index = tabledata.value.findIndex((tt: any) => tt.resourceCode == element.equipmentCode);
    if (index < 0) {
      tabledata.value.push({
        resource: element,
        resourceCode: element.equipmentCode,
        resourceName: element.equipmentName,
        isDefault:0
      })
    }
  });
}
const addClcik = () => {
  // tabledata.value.push({
  //   equipmentCode:123,
  //   equipmentName:123,
  //   isDefault:false
  // })
  chooseResource();
}

const deleteClick = (index) => {
  tabledata.value.splice(index, 1)
}



const histroyShow = ref(false);
const histroyList = ref<any[]>([]);
const histroyValue = ref('');
const historySecoundData = ref<any[]>([]);
const linehistroy = ref<any[]>([]);

const histroyClick = (id: any) => {

  getVerNos({
    productCode: props.productCode,
    verType: 7,
    VerNo: 'all',
    ProductBomProcessResourceId: id,
  }).then((res) => {
    linehistroy.value = [];
    histroyList.value = res.data.result || [];
    histroyShow.value = true;
  });
};
const versionChange = (val: any) => {
  historySecoundData.value = [];
  linehistroy.value = [];
  getVerInfo({
    id: val,
  }).then((res) => {
    const data = res.data.result?.dataJson;
    if (data) {
      const bomdata = JSON.parse(data);
      if (bomdata.resource.programFiles) {
        linehistroy.value = JSON.parse(bomdata.resource.programFiles)
      } else {
        linehistroy.value = [];
      }
    } else {
      linehistroy.value = [];
    }

  });
};

defineExpose({
  opendialog,
})
</script>
<style lang="scss"></style>
