<template>
  <div class="page-container main-view">
    <el-row :gutter="0" class="page-query-box">
            <DifinCollapse
                :show="dataContainer.showSearch"
                :showBt="true"
                @onClick="dataContainer.showSearch = !dataContainer.showSearch"
            >
                <el-col :span="24" :xs="24">
                    <el-form
                        :model="dataContainer.form"
                        :inline="true"
                        label-width="110px"
                    >
                        <el-row :gutter="0">
                            <el-col class="anchor-point-target" :span="6" :xs="6">
                                <el-form-item label="客户编码" prop="id">
                                    <el-input
                                        v-model="dataContainer.form.id"
                                        placeholder="请输入"
                                        clearable
                                        @clear="handleQuery"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="6">
                                <el-form-item label="联系方式" prop="contact">
                                    <el-input
                                        v-model="dataContainer.form.contact"
                                        placeholder="请输入"
                                        clearable
                                        @clear="handleQuery"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="6">
                                <el-form-item label="weibanID" prop="weibanID">
                                    <el-input
                                        v-model="dataContainer.form.weibanID"
                                        placeholder="请输入"
                                        clearable
                                        @clear="handleQuery"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="6">
                              <el-form-item label="客户状态" prop="status">
                                    <el-select
                                        style="width: 100%"
                                        v-model="dataContainer.form.status"
                                        placeholder="请选择"
                                        clearable
                                        @clear="handleQuery"
                                        @change="handleQuery"
                                    >
                                        <el-option
                                            v-for="item in dataContainer.optionList"
                                            :key="item.id"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="6">
                              <el-form-item label="输入城市" prop="city">
                                    <el-input
                                        v-model="dataContainer.form.city"
                                        placeholder="请输入"
                                        clearable
                                        @clear="handleQuery"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :xs="6">
                                <el-form-item label="选择日期" prop="date">
                                  <el-date-picker
                                      v-model="dataContainer.form.date"
                                      type="date"
                                      placeholder="yyyy/mm/dd"
                                      :size="size"
                                />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :xs="12">
                                <el-form-item label=" ">
                                    <el-button type="primary" @click="handleQuery">
                                        <SvgIcon
                                            :style="'width:15px;height:15px;margin-right:5px;'"
                                            name="svg:search-bt.svg"
                                        ></SvgIcon>
                                        查询
                                    </el-button>
                                    <el-button @click="resetQuery">
                                        <SvgIcon
                                            :style="'width:15px;height:15px;margin-right:5px;'"
                                            name="svg:redo.svg"
                                        ></SvgIcon>
                                        重置
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </DifinCollapse>
        </el-row>
   
      <div class="table-box content-container page-content-box">
        <div class="top-container">
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :auto-upload="false"
          >
            <template #trigger>
                <el-button type="primary">
                  <SvgIcon :style="'width:20px;height:20px;'" name="svg:upload.svg"></SvgIcon>
                    导入客户信息
                </el-button>
            </template>
          </el-upload>
          
          <el-button plain type="primary" @click="downloadBackendTemplate">
            <SvgIcon :style="'width:23px;height:23px;'" name="svg:download.svg"></SvgIcon>
            客户模板
          </el-button>
      
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :auto-upload="false"
          >
              <template #trigger>
                  <el-button type="primary">
                    <SvgIcon :style="'width:20px;height:20px;'" name="svg:upload.svg"></SvgIcon>
                      积分批量导入
                  </el-button>
              </template>
          </el-upload>
          
          <el-button plain type="primary" @click="downloadBackendTemplate">
            <SvgIcon :style="'width:23px;height:23px;'" name="svg:download.svg"></SvgIcon>
            积分模板
          </el-button>
        </div>
        <div class="table-container">
          <el-table :data="tableData" stripe style="width: 100%" border fit v-loading="loading">
            <el-table-column prop="id" width="130" label="客户编码"  />
            <el-table-column prop="username" width="180" label="客户昵称"  />
            <el-table-column prop="contact" width="120" label="联系方式" />
            <el-table-column prop="score" width="100" label="客户积分" />
            <el-table-column prop="weibanId" width="350"  label="微伴ID" />
            <el-table-column prop="city" width="180" label="客户城市" />
            <el-table-column prop="status" width="100" label="客户状态" />
            <el-table-column prop="createTime" width="180" label="创建时间" />
            <el-table-column prop="updateTime" width="180" label="更新时间" />
            <el-table-column label="操作" width = "230">
                  <template #default="scope">
                      <el-button
                          :text="true"
                          type="primary"
                          @click="
                              handleEdit(scope.row, {
                                  isShow: false,
                                  afterTitle: ' - 编辑',
                              })
                          "
                      >
                          编辑
                      </el-button>
                      <el-button
                          :text="true"
                          type="success"
                          @click="
                              handleEdit(scope.row, {
                                  isShow: false,
                                  afterTitle: ' - 编辑',
                              })
                          "
                      >
                          增加积分
                      </el-button>
                      <el-button
                          :text="true"
                          type="danger"
                          @click="
                              handleEdit(scope.row, {
                                  isShow: false,
                                  afterTitle: ' - 编辑',
                              })
                          "
                      >
                          扣减积分
                      </el-button>
                      <el-button
                          :text="true"
                          type="danger"
                          @click="handleDetails([scope.row])"
                      >
                          禁用
                      </el-button>
                  </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
                <el-pagination
                    v-show="true"
                    :total="config.total"
                    :background="true"
                    :current-page="params.pageNum"
                    :page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 30, 50]"
                    :pager-count="7"
                    @size-change="
                        (size) => {
                            params.pageSize = size;
                            getDataList();
                        }
                    "
                    @current-change="
                        (page) => {
                            params.pageNum = page;
                            getDataList();
                        }
                    "
                />
        </div>
      </div>
 </div>
</template>

<script setup>
  import {
      defineComponent,
      onBeforeUnmount,
      ref,
      reactive,
      getCurrentInstance,
      onActivated,
  } from 'vue';
  // import axios from 'axios';
  import { useRouter } from 'vue-router';
import { debounceFn } from '@/common/debounceAndThrottle';
import { messageSuccess } from '@/action/messagePrompt.js';
import { saveAs } from 'file-saver';

const size = ref('default')
const router = useRouter()

function  downloadBackendTemplate() {
      // axios({
      //   method: 'post',
      //   url: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
      //   responseType: 'blob'
      // }).then((response) => {
        let str = "保存字符串的例子！！"
        //const blob = new Blob([response.data], { type: response.headers['content-type'] });
        let strData = new Blob([str], { type: 'text/plain;charset=utf-8' });
        saveAs(strData, '测试文件下载.txt');
        messageSuccess('导出成功！');
      // }).catch((error) => {
      //   console.error('下载出错:', error);
      // });
    }

    const dataContainer = reactive({
            loading: false,
            showSearch: true,
            form: {
              id:"",
              contact:"",
              weibanID:"",
              status:"",
              city:"",
              date:""
            },
            params: {
                //基础参数
                pageNum: 1,
                pageSize: 10,
            },
            config: {
                total: 0,
            },
            list: [], //当前展示的数据列表
            currentRows: [], //当前多选的数据列表
            optionList: [
                { value: true, label: '正常', elTagType: 'danger' },
                { value: false, label: '禁用', elTagType: 'primary' },
            ],
        });

let tableData = reactive([
    {
      id: 'klkh000007511',
      username: '无敌是多么寂寞',
      contact: '13409765432',
      score:0,
      weibanId:"wmgizUDQAAHw1v1iudFfi7JMYgQHDYEQ",
      city:"广州市",
      status:"正常",
      createTime:"2024/12/06 08:44:04",
      updateTime:"2024/12/06 10:42:03"
    },
    {
      id: 'klkh000007511',
      username: '无敌是多么寂寞',
      contact: '13409765432',
      score:0,
      weibanId:"",
      city:"广州市",
      status:"正常",
      createTime:"2024/12/06 08:44:04",
      updateTime:"2024/12/06 10:42:03"
    },
    {
      id: 'klkh000007511',
      username: '无敌是多么寂寞',
      contact: '13409765432',
      score:0,
      weibanId:"",
      city:"广州市",
      status:"正常",
      createTime:"2024/12/06 08:44:04",
      updateTime:"2024/12/06 10:42:03"
    }
  ]) 
  let loading = ref(false);

  const params= reactive({
                  //基础参数
                  pageNum: 1,
                  pageSize: 10,
              }) 
  const config= reactive({
                  total: 38,
              }) 

    /** 获取数据列表 */
    const getDataList = debounceFn(function () {
          if (loading.value) return;
          loading.value = true;
        setTimeout(() => {
            Promise.resolve(tableData.value)
                .then((res) => {
                    tableData.value = res.rows || [];
                    config.value.total = res.total;
                })
                .catch(() => {
                    return;
                })
                .finally(() => {
                      loading.value = false;
                });
        }, 800);
    }, 70);
     getDataList();

    const handleEdit = (rows,list)=>{
      let {username,contact,weibanId, city} = rows
      let row = {username,contact,weibanId, city}
      router.push({
        name:"client-edit",
        query:row
      })
    }
    
    /** 搜索按钮操作 */
    function handleQuery() {
      dataContainer.params.pageNum = 1;
      getDataList();
    }
    
      /** 重置按钮操作 */
      function resetQuery() {
      dataContainer.form = {};
      handleQuery();
  }
</script>

<style scoped lang='scss'>
      .main-view {
      display: flex;
      flex-direction: column;
      > .page-query-box {
          margin: 0 0 10px 0 !important;
          padding: 10px 10px 0px 10px;
          :deep(.el-form-item) {
              margin-bottom: 10px !important;
          }
          :deep(.el-form-item--default) {
              width: 100%;
              margin-right: 0;
          }
      }
      > .content-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 10px 10px;
          box-sizing: border-box;
          background: #fff;
          > .top-container {
              width: 530px;
              display: flex;
              justify-content: space-between;
              // align-items: center;
              margin: 0px 0 10px 0;
          }
          > .qurey-list{
              width: 100%;
              .el-col {
                border-radius: 4px;
              }

              .grid-content {
                border-radius: 4px;
                min-height: 36px;
              }
          }
          > .table-container {
              flex: 1 1 auto;
              height: 0;
              overflow: auto;
          }
          > .pagination-container {
              display: flex;
              justify-content: flex-end;
              padding: 0;
              margin: var(--view-gap) 0 0 0;
          }
      }
      .pagination-container {
          display: flex;
          justify-content: flex-end;
          padding: 0;
          margin: 10px 0 0 0;
      }
  }

  

</style>