<template>
  <div style="width:100%">
    <el-card shadow="never" body-class="card_css" class="list-card-follow">
      <template #header>
        <div class="table_area">
          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
            <el-row :gutter="16">
              <el-col :span="4">
                <el-form-item prop="blurry">
                  <el-input
                    v-model="queryParams.blurry"
                    placeholder="搜索关键词"
                    clearable
                    prefix-icon="Search"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item>
                  <el-date-picker
                    v-model="followUpData"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    @change="getDate"
                  />
            </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="followUpMemberId">
                  <SelectUser @onOk="selectsUser" v-model="queryParams.followUpMemberId"></SelectUser>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="resourceType">
                  <SelectDict v-model="queryParams.resourceType" placeholder="所属模块" dictCode="query_work_data_group"></SelectDict>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="followUpTypeValue">
                  <SelectDict v-model="queryParams.followUpTypeValue" placeholder="跟进类型" dictCode="follow_up_type"></SelectDict>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
      <div class="follow_list" style="overflow-y: auto;">
        <Follow :followParams="queryParams" :btnRole="leftBtn" :isPagination='true' ref='followRef'></Follow>
      </div>
    </el-card>
  </div>


</template>

<script setup name="followUp" lang="ts">
import auth from '@/plugins/auth'
import {useDictCache} from '@/hooks/web/useDict'
import { FollowQuery } from '@/api/customer/follow/types';
// import SelectUser from '@/components/SelectOrg/SelectUser.vue'
import Follow from '@/components/Follow/index.vue'
const router = useRouter();
const { queryDictDetailByCodes } = useDictCache(['query_work_data_group', 'follow_up_type',])
queryDictDetailByCodes()



const queryParams:FollowQuery = reactive({
  blurry:'',
  followUpStartDate:'',
  followUpEndDate:'',
  followUpMemberId:'',
  resourceType:'',
    followUpTypeValue: '',
    menuId: router.currentRoute.value?.meta?.menuId,
})


const leftBtn = ref([
    {type: 'detail', hasPermi: `customer:followUp:detail`},
    {type: 'commit', hasPermi: `customer:followUp:commit`},
    {type: 'remove', hasPermi: `customer:followUp:remove`},
    {type: 'edit', hasPermi: `customer:followUp:edit`},

])

const followUpData = ref<[]>([])

const getDate = (val: string[] | null) => {
  queryParams.followUpStartDate = val ? val[0] : ''
  queryParams.followUpEndDate = val ? val[1] : ''
}

const selectsUser = (data: { realName: string }[]) => {
}

const followRef = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
  followRef.value.getData()
}

const queryFormRef = ref<ElFormInstance>();
/** 重置按钮操作 */
const resetQuery = () => {
  followUpData.value=[]
  getDate(null)
  queryFormRef.value?.resetFields();
  handleQuery();
}

onMounted(() => {

});
</script>

<style lang="scss" scoped>
.follow_list{
  padding-left: 3px;
  height:100%;
}
</style>
