<template>
  <div class="item-content">
    <div class="show-content-div" v-if="step == 0">
      <div class="subtitle">
        <div style="border-radius: 20px 20px 0px 0px;" :class="`${selectType == 0? 'active': ''}`" @click="selectType = 0">条件</div>
        <!-- <div  style="border-radius: 0px 20px 0px 0px;" :class="`${selectType == 1? 'active': ''}`" @click="selectType = 1">SQL</div> -->
      </div>
      <div class="condition-div" v-if="selectType == 0">
        <div class="filter-div" v-for="(item, index) in filterList">
          <div class="filter-title">
            <div class="filter-item-title" style="position: relative;">
              字段
              <div class="mark"  
                @mouseenter="showCancel = index"
                @mouseleave="showCancel = null"
                @click="cancelFilterItem(index)"
              >
                {{ showCancel == index? `取消`: `条件${index+1}` }}
              </div>
            </div>
            <div class="filter-item-title">类型</div>
            <div class="filter-item-title">条件</div>
            <div class="filter-item-title">内容</div>
          </div>
          <div class="filter-value">
            <div class="filter-item-value">
              <a-select 
                class="item-value-select"
                v-model:value="item.field"
                :options="props.tableColumn"
                style="width: 190px;height: 43px;"
                placeholder="请选择相关字段"
                @change="getFilterNumber"
              />
            </div>
            <div class="filter-item-value">{{ getTableColumnType(item.field,item) }}</div>
            <div class="filter-item-value">
              <a-select 
                class="item-value-select"
                v-model:value="item.operator"
                :options="item.type == 'numeric'? numberOptions: stringOptions"
                style="width: 190px;height: 43px;"
                placeholder="请选择相关条件"
                @change="getFilterNumber"
              />
            </div>
            <div class="filter-item-value">
              <a-input v-model:value="item.value" placeholder="请输入相关内容" style="width: 300px;height: 43px;" @change="getFilterNumber"/>
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: center;padding-top: 46px;">
          <a-button class="insert-filter-button" :icon="h(PlusOutlined)" @click="insertFilter">添加过滤条件</a-button>
        </div>
      </div>
      <div class="condition-div" v-if="selectType == 1">
        <a-textarea v-model:value="sqlValue" placeholder="请输入SQL" :rows="8" />
      </div>
    </div>
    <div class="show-content-div" v-if="step == 1">
      <BasicTable class="show-content-table" @register="registerTable">
      </BasicTable>
    </div>
    <div class="footer">
      <div class="filter-number" v-if="total">{{`共 ${total} 条数据`}}</div>
      <div class="filter-number" v-else></div>
      <div>
        <a-button class="operation-button" @click="emits('changeBatchProcessingModal',false)">关闭</a-button>
        <a-button type="primary" class="operation-button" @click="nextStep">下一步</a-button>
      </div>
    </div>
  </div>
  <a-modal
    v-model:open="submitModal"
    title="内容替换"
    okText="提交"
    :maskClosable="false"
    @ok="submit"
    :confirm-loading="submitLoading"
  >
    <div style="padding: 30px">
      <div style="display: flex;align-items: center;margin-bottom: 10px;justify-content: center;">
        <div style="width: 100px;">选择字段：</div>
        <a-select
          v-model:value="singleField"
          :options="props.tableColumn"
          style="width: 190px;"
          placeholder="请选择字段"
        />
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 10px;justify-content: center;">
        <div style="width: 100px;">替换内容：</div>
        <a-input
          v-model:value="oldValue"
          style="width: 190px;"
          placeholder="输入内容"
        />
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 10px;justify-content: center;">
        <div style="width: 100px;">新内容：</div>
        <a-input
          v-model:value="newValue"
          style="width: 190px;"
          placeholder="输入内容"
        />
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, h, defineProps, computed, defineEmits } from "vue"
import { PlusOutlined } from '@ant-design/icons-vue';
import { GetDataList, UpdateBatch } from '@/api/demo/BatchProcessingModal'
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { numberOptions, stringOptions } from '@/views/demo/layer/BatchProcessingModal/util'
import { message } from "ant-design-vue";
const props = defineProps(['tableColumn','tableName'])
const emits = defineEmits(['changeBatchProcessingModal'])
const step = ref(0)
const selectType = ref(0)
const submitModal = ref(false)
const sqlValue = ref('')
const filterList:any = ref([])
const singleField = ref('')
const oldValue = ref('')
const newValue = ref('')
const submitLoading = ref(false)
const total = ref()
const getTotalInteval = ref()
const showCancel = ref<number | null>(null)
const columns = computed(() => {
  return props.tableColumn.map(item => {
    return {
      title: item.label.match(/[(（](.*?)[)）]/)[1],
      dataIndex: item.value,
    }
  })
})
const [registerTable, { reload, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
  api: GetDataList,
  columns,
  rowKey: 'Id',
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  handleSearchInfoFn(info) {
    return info;
  },
  beforeFetch: (params) => {
    return {
      ...params,
      tableName: props.tableName,
      filter: filterList.value,
      field: props.tableColumn.map(item => item.value)
    }
  },
  rowSelection: {
    type: 'checkbox',
  },
});
const nextStep = () => {
  if(step.value == 1){
    submitModal.value = true
    return
  }
  step.value ++
}
const insertFilter = () => {
  filterList.value.push({
    field: '',
    operator: '',
    value: '',
    type: '',
  })
}
const getTableColumnType = (id, item) => {
  const found = props.tableColumn.find(columnItem => columnItem.value === id)
  item.type = found?.type
  return found?.type ?? ''
}
const submit = () => {
  submitLoading.value = true
  let params = {
    tableName: props.tableName,
    filter: filterList.value,
    field: props.tableColumn.map(item => item.value),
    singleField: singleField.value,
    oldValue: oldValue.value,
    newValue: newValue.value,
    ids: getSelectRowKeys()
  }
  UpdateBatch(params).then(res => {
    message.success('修改成功')
    reload()
    clearSelectedRowKeys()
    submitModal.value = false
    singleField.value = '',
    oldValue.value = '',
    newValue.value = ''
  }).finally(() => {
    submitLoading.value = false
  })
  console.log('params',params)
}
const getFilterNumber = () => {
  if (getTotalInteval.value) clearTimeout(getTotalInteval.value);
  getTotalInteval.value = setTimeout(() => {
    let params = {
      tableName: props.tableName,
      filter: filterList.value,
      field: props.tableColumn.map(item => item.value)
    }
    GetDataList(params).then(res => {
      total.value = res.total
    })
  },1000)
}
const cancelFilterItem = (index) => {
  filterList.value.splice(index, 1);
  showCancel.value = null
}
</script>

<style lang="scss" scoped>
.item-content{
  width: 100%;
  height: 100%;
  .show-content-div{
    height: 590px;
    padding-top: 24px;
    margin-bottom: 31px;
    .subtitle{
      display: flex;
      height: 79px;
      border-radius: 20px 20px 0px 0px;
      border: 1px solid #CCCCCC;
      border-bottom: 0px;
      div{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 24px;
        color: #2F3033;
        line-height: 33px;
        cursor: pointer;
      }
      .active{
        color: #0464D2;
        background: #EFF0F0;
      }
    }
    .condition-div{
      height: calc(100% - 80px);
      background: #E5E6E6;
      border-left: 1px solid #CCCCCC;
      border-right: 1px solid #CCCCCC;
      border-bottom: 1px solid #CCCCCC;
      padding: 29px;
      overflow: auto;
      ::v-deep(.ant-input) {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 18px;
        color: #2F3033;
        line-height: 25px;
      }
      .filter-div{
        height: 112px;
        background: #FFFFFF;
        border-radius: 11px;
        border: 1px solid #DEDEDE;
        margin-bottom: 13px;
        .filter-title{
          height: 43px;
          border-bottom: 1px solid #CCCCCC;
          display: flex;
          .filter-item-title{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 18px;
            color: #2F3033;
            line-height: 25px;
            border-right: 1px solid #CCCCCC;
            .mark{
              position: absolute;
              top: 0px;
              left: 0px;
              width: 76px;
              height: 43px;
              background: linear-gradient( 226deg, #0464D2 0%, #3932D2 100%);
              border-radius: 11px 0px 11px 0px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              font-size: 18px;
              color: #FFFFFF;
              line-height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
            }
          }
          .filter-item-title:last-child{
            border-right: 0px;
          }
        }
        .filter-value{
          height: 68px;
          display: flex;
          .filter-item-value{
            flex: 1;
            border-right: 1px solid #CCCCCC;
            display: flex;
            align-items: center;
            justify-content: center;
            .item-value-select{
              :deep(.ant-select-selector){
                height: 43px !important;
                align-items: center; /* 垂直居中 */
              }
              :deep(.ant-select-selection-search-input){
                height: 100% !important;
              }
            }
            ::v-deep(.ant-select-selection-placeholder) {
              color: #2F3033;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              font-size: 18px;
            }
            ::v-deep(.ant-input::placeholder) {
              color: #2F3033;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              font-size: 18px;
            }
            
            ::v-deep(.ant-select-selection-item) {
              font-family: PingFangSC-Regular;
              font-weight: 400;
              font-size: 18px;
              color: #2F3033;
              line-height: 25px;
            }
          }
          .filter-item-value:last-child{
            border-right: 0px;
          }
        }
      }
      .insert-filter-button{
        width: 302px;
        height: 64px;
        background: linear-gradient( 270deg, #3338D2 0%, #0563D2 100%);
        border-radius: 10px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 33px;
      }
    }
    .show-content-table{
      :deep(.ant-table-body){
        height: 490px !important;
      }
    }
  }
  .footer{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .filter-number{
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #1E1E20;
      line-height: 20px;
    }
    .operation-button{
      width: 169px;
      height: 60px;
      margin-right: 16px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 24px;
      line-height: 33px;
    }
  }
}
</style>