<template>
  <div class="app-container">
    <page-search
      :searchFormConfig="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
      @queryDataInfo="handleSearchInfo"
    />
    <page-content
      ref="pageContentRef"
      :contentTableConfig="contentTableConfig"
      pageName="/system/customer"
      :buttons="['添加客户', '导出客户']"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
    >
      <template #lableName="{ row }">
        <template v-if="row?.label && row.label !== '0'">
          <el-tag
            style="margin-left: 1px"
            v-for="(item, index) in row.label?.split(',')"
            v-bind:key="index"
          >
            {{ getLableName(item) }}
          </el-tag>
        </template>
        <template v-else>
          <span>-</span>
        </template>
      </template>
      <template #customerType="scope">
        <span>{{ scope.row.type == '1' ? '普通' : scope.row.type == '2' ? '微信' : '官网' }}</span>
      </template>
      <!-- <template #lableName  v-else>
        <span></span>
      </template> -->
    </page-content>

    <page-modal
      :defaultInfo="defaultInfo"
      :searchInfo="searchInfo"
      :title="'添加客户'"
      ref="pageModalRef"
      pageName="/system/customer"
      :dataProcessingFn="handleDealData"
      :modalConfig="modalConfigRef"
    ></page-modal>
  </div>
</template>

<script>
  import { defineComponent } from 'vue';

  import PageSearch from '@/components/page-search';
  import PageContent from '@/components/page-content';
  import PageModal from '@/components/page-modal';

  import { searchFormConfig } from './config/search.config';
  import { contentTableConfig } from './config/content.config';
  import { modalConfig } from './config/modal.config';
  import useSelectStore from '@/store/commonSelect/common';
  import { usePageSearch } from '@/hooks/use-page-search';
  import { usePageModal } from '@/hooks/use-page-modal';

  export default defineComponent({
    name: 'Archives',
    components: {
      PageSearch,
      PageContent,
      PageModal,
    },
    setup() {
      const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch();

      // 1.处理逻辑
      const newCallback = () => {};
      const editCallback = () => {};

      // 2.动态添加部门和角色列表
      const modalConfigRef = computed(() => {
        //  项目
        const processorProjectItem = modalConfig.formItems.find((item) => item.field === 'project');
        if (processorProjectItem) processorProjectItem.options = useSelectStore().dictProjectList;

        const labelProjectItem = modalConfig.formItems.find((item) => item.field === 'label');
        if (labelProjectItem) labelProjectItem.options = useSelectStore().customerLabelList;
        return modalConfig;
      });

      function handleDealData(data) {
        if (data.label && typeof data.label === 'object') {
          data.label = data.label.join();
        }

        return data;
      }

      // 3.调用hook获取公共变量和函数
      const [
        pageModalRef,
        defaultInfo,
        handleNewData,
        handleEditData,
        handleSearchInfo,
        searchInfo,
      ] = usePageModal(newCallback, editCallback);

      function getLableName(key) {
        const labels = useSelectStore().customerLabelList;

        const info = labels?.find((o) => {
          return o.value.toString() === key;
        });
        return info?.title;
      }

      function setDefaultInfo(data) {
        console.log(data, 'setDefaultInfo');
      }

      return {
        setDefaultInfo,
        getLableName,
        handleDealData,
        searchFormConfig,
        contentTableConfig,
        pageContentRef,
        handleResetClick,
        handleSearchInfo,
        handleQueryClick,
        searchInfo,
        modalConfigRef,
        pageModalRef,
        defaultInfo,
        handleNewData,
        handleEditData,
      };
    },
  });
</script>
