<script setup lang="ts">
import {
	Storehouse_VerifyContract_Recover_List,
	Storehouse_VerifyContract_Recover_Export
} from '@/api/storehouse'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ref, reactive, nextTick ,defineAsyncComponent} from 'vue'
import Drawer from '@/components/Drawer/index.vue'
import TableBase from '@/components/TableBase/index.vue'
import {Check, Edit, View} from '@element-plus/icons-vue'
import type { ColumnProps } from '@/components/TableBase/interface'
import type { FormInstance, FormRules } from 'element-plus'
import { useTablePublic } from '@/hooks/useTablePublic'
import { fnMd5 } from '@/utils/common'
const router = useRouter()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const { globalStore, searchOnTableList, updateOnTableList} = useTablePublic()

const customer_id = ref('')

const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_customer', label: '客户名称' , width: 260},
  { prop: 'T_number', label: '合同编号' },
  { prop: 'T_date', label: '签约时间', width: 120 },
  { prop: 'T_recoveries_state', label: '回款状态', name:'T_recoveries_state'},
  { prop: 'T_recoveries_time', label: '回款时间', width: 120},
  { prop: 'T_type', label: '合同类型', name: 'T_type'},
  { prop: 'T_discount', label: '合同金额' },
  { prop: 'T_recoveries_money', label: '回款金额' },
  { prop: 'T_submit_name', label: '提成人员' },
  { prop: 'T_percentage_money', label: '提成金额', name: 'T_percentage_money'},
  { prop: 'T_percentage_state', label: '提成状态', name: 'T_percentage_state'},
]
const options1 = reactive([
  { name: '未回款', id: 1 },
  { name: '部分回款', id: 2 },
  { name: '全部回款', id: 3 },
])

const percentageStateOptions = reactive([
	{ name: '未打款', id: 1 },
	{ name: '已打款', id: 2 },
])

const ContractFormRef = ref<InstanceType<typeof ContractForm> | null>(null)
const VerifyFormRef = ref<InstanceType<typeof VerifyForm> | null>(null)


const ContractForm = defineAsyncComponent({
  loader: () => import(/*webpackChunkName: 'ContractForm'*/ '../sales/ContractForm.vue'),
  delay: 500,
  timeout: 3000,
  suspensible: true
})
const VerifyForm = defineAsyncComponent({
  loader: () => import(/*webpackChunkName: 'ContractForm'*/ '../sales/VerifyForm.vue'),
  delay: 500,
  timeout: 3000,
  suspensible: true
})
// 搜索
const T_date = ref<string[]>([])
const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_percentage_state: '',//提成状态
  T_recoveries_state: '',//回款状态
  T_mine:1
})

const processContract = (id: string) => router.push({ name: 'ContractDetail', params: { id, type: fnMd5('contract') } })

// 导出
const exportPercentageExcel = async () => {
	// initParam.T_end_date = T_date.value ? T_date.value[1] : ''
	// initParam.T_start_date = T_date.value ? T_date.value[0] : ''
	TableRef.value?.searchTable()
	const res: any = await Storehouse_VerifyContract_Recover_Export(initParam)
	if (res.Code === 200) {
		window.open(res.Data)
	}
}
</script>

<template>
  <div class="verify-contract">
    <TableBase
      ref="TableRef"
      :columns="columns"
      :requestApi="Storehouse_VerifyContract_Recover_List"
      :initParam="initParam"
    >

      <template #table-header>
        <el-row :gutter="20" style="margin-bottom: 0" class="input-suffix">
          <el-col :xl="5" :lg="5" :md="5" style="display: flex">
				<span class="inline-flex items-center">回款日期：</span>
				<el-date-picker
					v-model="T_date"
					type="daterange"
					range-separator="~"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
				/>
			</el-col>
          <el-col :xl="5" :lg="5" :md="5" class="d-flex">
            <span class="inline-flex items-center">合同编号：</span>
            <el-input
              v-model="initParam.T_name"
              type="text"
              class="w-50 m-2"
              placeholder="按编号搜索"
              @change="searchOnTableList(TableRef)"
            />
          </el-col>
          <el-col :xl="5" :lg="5" :md="5" class="d-flex">
			<span class="inline-flex items-center">提成状态：</span>
			<el-select v-model="initParam.T_percentage_state" class="w-50" clearable placeholder="请选择">
				<el-option v-for="item in percentageStateOptions" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
          </el-col>
          <el-col :xl="5" :lg="5" :md="5" class="d-flex">
            <span class="inline-flex items-center">回款状态：</span>
            <el-select v-model="initParam.T_recoveries_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-button type="primary" @click="searchOnTableList(TableRef)">搜索</el-button>
          </el-col>
          <el-col :xl="4" :lg="4" :md="4"  class="d-flex">
				<el-button type="primary" @click="exportPercentageExcel">导出表格</el-button>
			</el-col>
        </el-row>
      </template>
		<template #T_recoveries_state="{ row }">
			<el-text v-if="row.T_recoveries_state === '全部回款'" type="success" effect="dark">全部回款</el-text>
			<el-text v-else-if="row.T_recoveries_state === '部分回款'" type="primary" effect="dark">部分回款</el-text>
			<el-text v-else type="info" effect="dark">未回款</el-text>
		</template>
      <template #T_type="{ row }">
        <el-tag :type="row.T_type==1?'':'success'" effect="dark"> {{row.T_type==1?'销售合同':row.T_type==2?'验证合同':'-'}} </el-tag>
      </template>
		<template #T_percentage_money="{ row }">
        {{row.T_discount*0.05}}
      </template>
		<template #T_percentage_state="{ row }">
			<el-text v-if="row.T_percentage_state === 2" type="success" effect="dark">已打款</el-text>
			<el-text v-else type="info" effect="dark">未打款</el-text>
      </template>
      <template #right="{ row }">
         <el-button link type="success" size="small" :icon="View" @click="processContract(row.T_number)">明细</el-button>
      </template>
    </TableBase>
    <ContractForm ref="ContractFormRef" @onTableList="updateOnTableList(TableRef)" />
    <VerifyForm ref="VerifyFormRef" @onTableList="updateOnTableList(TableRef)" :verify_customer_id="customer_id" />
  </div>
</template>

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

.verify-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 {
      flex: 0 0 55%;
    }
  }
}
</style>
