<template>
  <div style="width: 100%;height: 310px;" id="refTableExpression">
    <lt-a-table :show-overflow-tooltip="true" ref="refTableExpression" :searchBox="false" bordered :dataSource="data"
      :highlight-current-row="true" :showToolBar="false" :showEditInDialog="false" :stripe="true" :pagination="false"
      :columns="columns" size="small">
      <template #headerCell="{ column }">
        <template v-if="column.dataIndex === 'operate' && showOperate == true">
          <span>
            <a-button v-if="(funStyle == 22 && data.length > 0) || isEditable == false ||
              (showOperate == true && isEditable == true)" type="text" title="新增" size="small"
              style=" color: dodgerblue;font-weight: bold;margin: 0px;" @click="btnAdd">
              <template #icon>
                <i class="icon icon-plus "></i>
              </template>
            </a-button>
          </span>
        </template>
      </template>
    </lt-a-table>
  </div>
</template>
<script setup lang="tsx">
import { Modal } from "ant-design-vue";
import { formatCols } from "../commonMethods/commonMethods"
import {computed, PropType} from "vue"
import { ColStruct } from "../../../hooks/type";
const props = defineProps({
  isEditable: {
    type: Boolean,
    default: true,
  },
  data: {
    type: Array,
    default() {
      return [];
    },
  },
  EXItemCols: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  funStyle: {
    type: Number,
  },
  showOperate: {
    type: Boolean,
    default: true,
  },
})

const emits = defineEmits(["deleteItem", "addItem"])

const columns = computed(() => {

  let cols = formatCols(props.EXItemCols).filter((item) => {
    return item.Visible == true
  })
  SetComBox(cols)
  setTextColumn(cols) //生成文本列
  if (props.showOperate) {
    let operateColsItem = {
      title: '操作',
      align: 'center',
      dataIndex: 'operate',
      fixed: 'right',
      width: 65,
      customRender: ({ record }:any) => {
        return getDelBtn(record)
      }
    }
    //@ts-ignore
    cols = cols.concat(operateColsItem)      //push(operateColsItem)
  }
  return cols
})

const SetComBox = function (cols:ColStruct[]) {
  let targetCols = cols.filter((item) => {
    return item.Style.toLowerCase() == 'combox'
  })
  if (targetCols.length > 0) {
    if (props.isEditable == true) {
      //如果可以编辑，则生成可编辑框
      if (targetCols[0].isEdit == true) {
        //@ts-ignore
        targetCols[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]
            }
          >
            {GetComboxOptions(currecord, curCols)}
          </a-select>
        }
      } else {
        //@ts-ignore
        targetCols[0].customRender = function (record:any) {
          let currecord = record.record
          let curCols = record.column
          return GetComboxText(currecord, curCols)
        }
      }
    }

  }
}

const GetComboxOptions = function (row:any, col:ColStruct) {
  return col.Option.map((item) => {
    return (
      <a-select-option
      //@ts-ignore
        key={item.ParamValue}
         //@ts-ignore
        value={item.ParamValue}
         
      >
        { //@ts-ignore
          item.ParamName}
      </a-select-option>
    );
  });
}

const setTextColumn = function (cols:ColStruct[]) {
  let targetCols = cols.filter((item) => {
    return item.Style.toLowerCase() == 'textbox'
  })
  if (targetCols.length > 0) {
    if (props.isEditable == true) {
      //如果可以编辑，则生成可编辑框
      if (targetCols[0].isEdit == true) {
        //@ts-ignore
        targetCols[0].customRender = function (record) {
          let currecord = record.record
          let curCols = record.column
          return (
            <a-input
              size="small"
              autofocus={true}
              v-model:value=
              {
                currecord[curCols.dataIndex]
              }
            />
          )
        }
      }
    }
  }
}

const GetComboxText = function (record:any, col:ColStruct) {
  let text=""
  col.Option.some(function (item) {
    //@ts-ignore
    if (item.ParamValue == record[col.dataIndex]) {
      //@ts-ignore
      text = item.ParamName;
      return true;
    }
  });
  return text;
}

const btnDelete = function (row:any) {
  //删除
  emits("deleteItem", row); //删除QC细项
}
const btnAdd = function () {
  if (props.funStyle == 22 && props.data.length > 0) {
    Modal.warning({
      title: "警告",
      content: "自动检测类型，只允许添加一个指标!"
    })
    return;
  }
  emits("addItem");
}


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

</script>
<style scoped>
/* .a-input>>>input[readonly] {
  border: 0px;
} */

.a-input :deep(input[readonly]) {
  border: 0px;
}
</style>
<style>
.a-input.a-input--mini.a-input__suffix {
  margin-top: 10px !important;
}
</style>
