<template>
  <div style="width: 100%;height: 310px;" id="refTableQCItem">
    <lt-a-table
        :show-overflow-tooltip="true"
        ref="refTableQCItem"
        :searchBox="false"
        bordered
        :dataSource="data"
        :highlight-current-row="true"
        :showToolBar="false"
        :showEditInDialog="false"
        :stripe="true"
        :scroll="scroll"
        :pagination="false"
        :columns="columns"
        size="small"
        @row-click="handleClick"
        @row-dblclick="handleDblclick"
        @selection-change="handleSelChange">
      <template #headerCell="{ column }">
        <template v-if="column.dataIndex === 'QCName' || column.dataIndex === 'QCStyle'">
          <span style="color: red;">*</span>
          <span>{{ column.title }}</span>
        </template>
        <template v-if="column.dataIndex === 'operate' && showOperate == true">
          <span>
            <a-button type="text" title="新增" size="small" style=" color: dodgerblue;font-weight: bold;margin: 0px;"
              @click="handleAddQCItem">
              <template #icon>
                <i class="icon icon-plus "></i>
              </template>
            </a-button>
            <a-button v-if="showEdit" type="text" title="在弹窗中编辑" size="small"
              style=" color: dodgerblue;font-weight: bold;margin: 0px;" @click="handleEditQCItem">
              <template #icon>
                <i class="icon icon-edit "></i>
              </template>
            </a-button>
          </span>
        </template>
      </template>
    </lt-a-table>
  </div>
</template>

<script setup lang="tsx">
import { ColStruct } from '../../../hooks/type';
import { formatShowCols } from '../commonMethods/commonMethods';
import { watch, ref, onBeforeMount, computed, PropType } from 'vue';
const props = defineProps({
  data: {
    type: Array,
    default() {
      return;
    },
  },
  showOperate: {
    type: Boolean,
    default: true,
  },
  QCItemCols: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  QCItemOptions: {
    type: Array,
    default() {
      return [];
    },
  },
  QCVariable: {
    type: Array,
    default() {
      return [];
    },
  },
  showEdit: {
    type: Boolean,
    default: true
  },
  fullscreen: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(["update:materialData", "row-dbclick", "update:selectionData", "editQCItem", "addQCItem", "delQCItem"])

watch(
  props.data, (value) => {
    if (value) {
      // emits("update:materialData", value);
    }
  }
)

const scroll = computed(() => {
  let targetContent = $('#refTableQCItem')
  let height = 0
  if (targetContent.length > 0) {
    height = targetContent[0].clientHeight
  }
  if (!props.fullscreen) {
    //如果不是全屏的情况下，需要设置滚动条
    if (props.data.length > 15) {
      return {
        y: 425
      }
    } else {
      return undefined
    }
  } else {
    return {
      y: height - 30
    }
  }
})

let columns = ref([])

const SetQCStyleColumn = function (cols:any) {
  let targeTQCStyle = cols.filter((item:any) => {
    return item.dataIndex == 'QCStyle'
  })
  if (targeTQCStyle.length > 0) {
    targeTQCStyle[0].customRender = function (record:any) {
      let currecord = record.record
      let curCols = record.column
      return <a-select
        placeholder=""
        size="small"
        style={"width:'100%'"}
        v-model:value=
        {
          currecord[curCols.dataIndex]
        }
      >
        {_colGetComboxOptions()}
      </a-select>
    }
  }

}

const setUpperColumn=function(cols:any){
  let targeTQCStyle = cols.filter((item:any) => {
    return item.dataIndex == 'UpperLimit'
  })
  if (targeTQCStyle.length > 0) {
    targeTQCStyle[0].customRender = function (record:any) {
      let currecord = record.record
      let curCols = record.column
      if ([2, 4, 6, 7, 8, 9].indexOf(currecord.QCStyle) == -1
    &&['2', '4', '6', '7', '8', '9'].indexOf(currecord.QCStyle) == -1
      ) {
            return ""
          } 
            return (<a-input
        placeholder=""
        size="small"
        style={"width:'100%'"}
        v-model:value=
        {
          currecord[curCols.dataIndex]
        }
      >
      </a-input>)
          }
  }
}

const setLowerColumn=function(cols:any){
  let targeTQCStyle = cols.filter((item:any) => {
    return item.dataIndex == 'LowerLimit'
  })
  if (targeTQCStyle.length > 0) {
    targeTQCStyle[0].customRender = function (record:any) {
      let currecord = record.record
      let curCols = record.column
      if ([1, 3, 5, 6, 7, 8, 9].indexOf(currecord.QCStyle) == -1&&
          ['1', '3', '5', '6', '7', '8', '9'].indexOf(currecord.QCStyle) == -1) {
            return ""
          } 
            return (<a-input
        placeholder=""
        size="small"
        style={"width:'100%'"}
        v-model:value=
        {
          currecord[curCols.dataIndex]
        }
      >
        {_colGetComboxOptions()}
      </a-input>)
          }
  }

}

const _colGetComboxOptions = function () {
  return props.QCItemOptions.map((item:any) => {
    return (
      <a-select-option
        key={item.key.toString()}
        value={item.key.toString()}
      >{item.description}
      </a-select-option>
    );
  });
}

const SetQCSelectedColumn = function (cols:any) {
  let targeTQCStyle = cols.filter((item:any) => {
    return item.dataIndex == 'QCSelected'
  })
  if (targeTQCStyle.length > 0) {
    targeTQCStyle[0].customRender = function (record:any) {
      const curRecord = record.record
      const curCols = record.column
      if (curRecord.QCStyle == 0) {
        return <a-select
          size="small"
          placeholder=""
          v-model:value=
          {
            curRecord[curCols.dataIndex]
          }
        >
          {_colGetSelectOptions()}
        </a-select>
      } else {
        return ""
      }
    }
  }
}

const _colGetSelectOptions = function () {
  return props.QCVariable.map((item:any) => {
    return (
      <a-select-option
        key={item.VariableId}
        value={item.VariableId}
      >
        {item.Description}
      </a-select-option>
    );
  });
}

const setTextColumn = function (cols:any) {
  let targetCols = cols.filter((item:any) => {
    return item.Style.toLowerCase() == 'textbox'
  })
  for (let i = 0; i < targetCols.length; i++) {
    const fieldName = targetCols[i].dataIndex
    targetCols[i].customRender = function (record:any) {
      const curCols = record.column
      const cueRecord = record.record
      if (fieldName == "LowerLimit") {
        if (['1', '3', '5', '6', '7', '8', '9'].indexOf(cueRecord.QCStyle) == -1) {
          return ""
        }
      }
      if (fieldName == "UpperLimit") {
        if (['2', '4', '6', '7', '8', '9'].indexOf(cueRecord.QCStyle) == -1) {
          return ""
        }
      }
      return (
        <a-input
          size="small"
          autofocus={true}
          v-model:value=
          {
            cueRecord[curCols.dataIndex]
          }
        />
      )
    }

  }

}

const getDelBtn = function (record:any) {
  return (
    <a-button type="text"
      title="删除" size="small" style="height: 24px; color: dodgerblue;font-weight: bold;color: #ff4748;"
      onClick={() => {
        delQCItem(record)
      }}
    >
      <i class="icon icon-trash"></i>
    </a-button>
  )
}

const handleDblclick = function (row:any, dataIndex:number, evt:any) {
  emits("row-dbclick", row, dataIndex, evt);
}
const handleSelChange = function (val:any) {
  emits("update:selectionData", val);
}

const handleClick = function (row:any, dataIndex:number, evt:any) {
  //emits("row-click", row, rowIndex, dataIndex, event, column);
}
const handleEditQCItem = function (row:any) {
  emits("editQCItem", row);
}
const handleAddQCItem = function () {
  emits("addQCItem", 1);
}
const delQCItem = function (row:any) {
  emits("delQCItem", row);
}
const initCols = function () {
  // let cols = 
  let cols = formatShowCols(props.QCItemCols)
  //单独处理下拉选项
  SetQCStyleColumn(cols)
  SetQCSelectedColumn(cols)
  setTextColumn(cols) //生成文本列
  setUpperColumn(cols)
  setLowerColumn(cols)
  //单独处理操作列
  if (props.showOperate) {
    let operateColsItem = {
      title: '操作',
      align: 'center',
      dataIndex: 'operate',
      fixed: 'right',
      width: 65,
      customRender: ({ record, rowIndex, column }:any) => {
        return getDelBtn(record)
      }
    }
    //@ts-ignore
    cols = cols.concat(operateColsItem)      //push(operateColsItem)
  }
  //@ts-ignore
  columns.value = cols
}

onBeforeMount(() => {
  initCols()
})

</script>

<style>
#refTableQCItem .ant-select.ant-select-sm.ant-select-single.ant-select-show-arrow {
  width: 100%;
}
</style>
