<script setup lang="ts">
import { ref, reactive, defineAsyncComponent, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { fnMd5 } from '@/utils/common'
import { ElMessageBox, ElMessage } from 'element-plus'
import TableBase from '@/components/TableBase/index.vue'
import { Edit, Delete, Finished, View } from '@element-plus/icons-vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
import { percentage_List, percentage_User_List } from '@/api/percentage/index'
import { useTablePublic, options1} from '@/hooks/useTablePublic'

const router = useRouter()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const { globalStore, searchOnTableList,updateOnTableList  } = useTablePublic()

const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_number', label: '合同编号' },
  { prop: 'T_customer', label: '客户名称' },
  { prop: 'T_contract_money', label: '合同总金额' },
  { prop: 'T_recoveries_money', label: '回款金额' },
  { prop: 'T_type', label: '提成类型', name: 'T_type' },
  { prop: 'T_uuid_name', label: '提成人员' },
  { prop: 'T_money', label: '提成金额' },
  { prop: 'T_send_money', label: '已发提成金额' },
  { prop: 'T_State', label: '状态', name: 'T_State' },
  { prop: 'operation', label: '操作', width: 260, fixed: 'right' }
]

const processContract = (id: string,titles:string) => {
  ContForm.showTable = false
  router.push({ name: 'PercentageDetail', params: { id, type: fnMd5('contract'),titles:titles}})
}

const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_state: '',
  T_uuid: '',
})
const loading = ref(false)
interface ListItem {
  value: string
  label: string
}
const list = ref<ListItem[]>([])
const optionsData = ref<ListItem[]>([])
const remoteMethod = async (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      optionsData.value = list.value.filter((item: any) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    optionsData.value = []
  }
}
const click2 = async () => { optionsData.value = list.value }
onMounted(async () => {
  const result: any = await percentage_User_List({})
  let arr = result.Data.Data || []
  list.value = arr.map((item: any) => {
    return { value: item.T_uuid, label: item.T_user }
  })
})

const ContractFormRef = ref<InstanceType<typeof ContractForm> | null>(null)
const ContForm = reactive({
  id:null,
  showTable:true
})
const openContractFormDrawer = (type: string, row?: any) => {
  ContForm.id = row.Id
  ContractFormRef.value?.openDrawer(type, row)
  ContForm.showTable = true
}
const ContractForm = defineAsyncComponent({
  loader: () => import(/*webpackChunkName: 'ContractForm'*/ './PercentageForm.vue'),
  delay: 500,
  timeout: 3000,
  suspensible: true
})
</script>

<template>
  <div class="contract">
    <TableBase ref="TableRef" :columns="columns" :requestApi="percentage_List" :initParam="initParam">
      <template #table-header>
        <div class="input-suffix">
          <el-row :gutter="20" style="margin-bottom: 0">
            <el-col :xl="5" :md="6">
              <span class="inline-flex items-center">合同编号：</span>
              <el-input v-model="initParam.T_name" type="text" class="w-50 m-2" placeholder="按合同编号搜索" clearable
                @change="searchOnTableList(TableRef)" />
            </el-col>
            <el-col :xl="5" :md="6">
              <span class="inline-flex items-center">员工：</span>
              <el-select v-model="initParam.T_uuid" filterable remote reserve-keyword placeholder="员工"
                :remote-method="remoteMethod" :loading="loading" @click="click2" clearable style="width: 200px;">
                <el-option v-for="item in optionsData" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-col>
            <el-col :xl="5" :md="6">
              <span class="inline-flex items-center">状态：</span>
              <el-select v-model="initParam.T_state" class="w-50" clearable placeholder="请选择状态~">
                <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-col>
            <el-col :xl="6" :md="2" class="btn"> <el-button type="primary"
                @click="searchOnTableList(TableRef)">搜索</el-button></el-col>
          </el-row>
        </div>
      </template>
      <template #T_type="{ row }">
        <el-tag v-if="row.T_type === 1" type="success" effect="dark"> 验证实施 </el-tag>
        <el-tag v-if="row.T_type === 2" type="" effect="dark"> 报告编写 </el-tag>
      </template>
      <template #T_State="{ row }">
        <el-tag v-if="row.T_State === 1" type="info" effect="dark"> 待审核 </el-tag>
        <el-tag v-if="row.T_State === 2" type="success" effect="dark"> 审核通过 </el-tag>
        <el-tag v-if="row.T_State === 3" type="danger" effect="dark"> 审核不通过 </el-tag>
        <el-tag v-if="row.T_State === 4" type="info" effect="dark"> 部分打款 </el-tag>
        <el-tag v-if="row.T_State === 5" type="" effect="dark"> 全部打款 </el-tag>
      </template>
      <template #T_out="{ row }">
        <el-tag v-if="row.T_out === 2 || row.T_out === 3" type="success" effect="dark">
          {{ row.T_out === 2 ? '部分出库' : '已出库' }}
        </el-tag>
        <el-tag v-else-if="row.T_out === 1" type="warning" effect="dark"> 未出库 </el-tag>
        <el-tag v-else type="danger" effect="dark"> --- </el-tag>
      </template>
      <template #right="{ row }"> 
        <el-button link type="warning" :disabled="![1,3].includes(row.T_State)" size="small"  :icon="Finished" @click="processContract(row.Id,'审核')">审核</el-button>
        <el-button link type="primary" :disabled="![2,4,5].includes(row.T_State)" size="small"  :icon="Edit"  @click="openContractFormDrawer('edit', row)">打款明细</el-button>
        <el-button link type="success" size="small"  :icon="View" @click="processContract(row.Id,'详情')">详情</el-button>
      </template>
    </TableBase>
  <ContractForm ref="ContractFormRef" :ContForm="ContForm" @onTableList="updateOnTableList(TableRef)" />
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.contract {
  @include f-direction;

  :deep(.el-drawer__header) {
    margin-bottom: 0;
  }

  .input-suffix {
    width: 100%;

    .inline-flex {
      white-space: nowrap;
    }

    .btn {
      display: flex;
      justify-content: end;
    }

    .w-50 {
      width: 12.5rem;
    }
  }
}
</style>
