<template>
  <el-dialog :close-on-click-modal = "false"
      id="workdialog" v-model="outerVisible" title="校验数据" width="825">


    <h1 style="font-weight: bold;">导入的合同结束时间小于当前时间</h1>
    <span style="color: #F69600;">注：当前导入的以下合同，其最大结束月小于当前时间，会导致下个月开始该服务将无法委托给工厂工作，请确认一下客户是否都已经停止服务，如果未停止服务，需要补传续合同。</span>
    <div style="display:flex; flex-direction: row-reverse;">
      <el-button type="primary" size="small" @click="dataConfirm(1)">
        一键确认
      </el-button> &nbsp;
      <el-button type="primary" size="small" icon="Download" @click="exportExcel('1')" >导出</el-button>
    </div>
    <el-table

        :data="data.endMonth"
        highlight-current-row
        style="width: 100%"
        max-height="250"
        @current-change="handleCurrentChange"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column property="contractNo" label="合同编号" width="120" />
      <el-table-column property="companyName" label="客户名称" width="120" />

      <el-table-column property="taskType" label="服务类型" width="120" />
      <el-table-column property="startMonth" label="开始月" width="120" />
      <el-table-column property="endMonth" label="结束月" width="120" />
      <el-table-column label="操作" min-width="120">
        <template #default="scope">
          <el-button size="small" :disabled="scope.row.disabled" @click="handleClick(scope.$index, scope.row,this)">
            确认
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <h1 style="font-weight: bold;">导入的合同开始时间大于当前时间</h1>
    <span style="color: #F69600;">注：当前导入的以下合同，其最小开始月大于当前时间，会在开始月之前无法将任务委托给工厂进行工作，请确认以下客户开始服务的时间是否正确。</span>
    <div style="display:flex; flex-direction: row-reverse;">
      <el-button type="primary" size="small" @click="dataConfirm(2)">
        一键确认
      </el-button> &nbsp;
      <el-button type="primary" size="small" icon="Download" @click="exportExcel('2')" >导出</el-button>
    </div>
    <el-table
          ref="singleTableRef"
          :data="data.startMonth"
          highlight-current-row
          style="width: 100%"
          max-height="250"
          @current-change="handleCurrentChange"
      >
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column property="contractNo" label="合同编号" width="120" />
        <el-table-column property="companyName" label="客户名称" width="120" />

        <el-table-column property="taskType" label="服务类型" width="120" />
        <el-table-column property="startMonth" label="开始月" width="120" />
        <el-table-column property="endMonth" label="结束月" width="120" />
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button size="small" :disabled="scope.row.disabled" @click="handleClick(scope.$index, scope.row,this)">
              确认
            </el-button>
          </template>
        </el-table-column>
      </el-table>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">取消</el-button>
        <el-button type="primary" @click="sumbit">
          下一步
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {
  exportCheckExcel
} from "@/api/upgrade/contract";
import {getCurrentInstance, reactive, ref, toRefs} from 'vue'
import {ElTable, ElButton, ElMessage} from "element-plus";

import { defineProps,defineEmits } from 'vue';

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const outerVisible = ref(false);
const innerVisible = ref(false);
const currentRow = ref();
const type = ref();
const checkNumber = ref(0);
const { proxy } = getCurrentInstance();
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
// interface Props {
//   inputData?:Map<string, any>
// }
// const prop = defineProps<Props>()
interface input {
 contractNo:string;
 companyName:string;
 taskType:string;
 startMonth:Date;
 endMonth:Date;
 disabled: boolean;
}
const emit = defineEmits(['event','resubmit']);
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  resubmit:{
    type: Function,
    default: () => {},
  }
});
const { data,resubmit } = toRefs(props);


function open() {
  outerVisible.value = true;
}

const dataConfirm = (val:number)=>{
  let count = 0;
  if(data.value.startMonth.length+data.value.endMonth.length===checkNumber.value){
    return;
  }
  if(val==2){
    data.value.startMonth.forEach((val:input)=>{
      val.disabled = true;
      count++;
    })
   // console.log(checkNumber.value)
  //  checkNumber.value = data.value.startMonth.length+checkNumber.value;
  }else{
    data.value.endMonth.forEach((val:input)=>{
      val.disabled = true;
      count++;
    })
    console.log(count)
  //  = data.value.endMonth.length+checkNumber.value;
  }
  checkNumber.value += count;
}

function sumbit() {
  if(data.value.startMonth.length+data.value.endMonth.length===checkNumber.value ||(data.value.startMonth.length ==null && data.value.endMonth.length ==null )){
    emit('event',0)
    emit('resubmit')
    outerVisible.value = false;
  }else{
    proxy.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        "还有未确认数据" +
        "</div>"
        ,
        { dangerouslyUseHTMLString: true }
    );
  }
  checkNumber.value = 0;
}
function exportExcel(type:string){
  let filename;
  if(type === "1"){
    filename = "导入的合同结束时间小于当前时间.xlsx";
  }else {
    filename ="导入的合同开始时间大于当前时间.xlsx";
  }
  exportCheckExcel(data.value,type,filename)
}

const singleTableRef = ref<InstanceType<typeof ElTable>>()

const setCurrent = (row?: any) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val: any | undefined) => {
  currentRow.value = val
}
const handleClick =(index:number ,row:input,ele:ElButton) => {
  checkNumber.value = checkNumber.value+1;
  row.disabled = true;

}
defineExpose({
  open,
});

</script>
<style scoped>
  #workdialog{
    margin-top: auto;
  }
</style>