<template>
  <PageLayout>
    <infinite-scroll :load="load" :list="list" ref="scrollRef" empty="" noMore="">
      <template v-slot="{ item,index }">
        <q-item class="bg-white" @click="currentIndex=index" clickable>
          <q-item-section avatar>
            <UserAvatar :src="item.avatar_url||item.avatar" size="lg" color="accent"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ item.nickname || item.name }}</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label class="text-green text-caption" caption>
              {{item.enable_work?'正在接单':''}}
              <q-icon name="arrow_forward_ios" color="grey" size="14px" />
            </q-item-label>
          </q-item-section>
        </q-item>
      </template>
      <template #append>
        <q-btn v-if="list.length<5" to="/shop/worker/add" flat class="bg-white q-py-lg fit q-mt-sm" label="+赶紧添加您的员工账号吧~"/>
        <p class="q-ma-md text-caption text-grey">
          注：<br/>
          1. 您的店铺编号为：{{ store.shop.shop_sn }}<br/>
          2. 当前员工账号上限为5名。
        </p>
      </template>
    </infinite-scroll>
      <q-dialog :model-value="currentIndex!==0 && !currentIndex?false:true"
      position="bottom"
      class="dialog-full-height"
      @update:model-value="currentIndex = ''">
      <q-card>
        <q-form v-if="editWorker" ref="formRef" @submit="onSubmit">
          <div class="q-py-md text-weight-bold text-center">修改员工 [{{ list[currentIndex].name }}] 信息</div>
          <q-input
            v-model="editWorker.name"
            label="员工姓名"
            placeholder="请输入员工姓名"
            class="bg-white q-px-md"
            :rules="[Rules.required]"
          />
          <q-input
            v-model="editWorker.phone"
            label="手机号"
            placeholder="请输入员工手机号"
            class="bg-white q-px-md"
            :rules="[Rules.required,Rules.phone]"
          />
          <q-input
            v-model="editWorker.password"
            label="登录密码"
            :rules="[Rules.required,Rules.password]"
            type="password"
            class="bg-white q-px-md"
          />
          <div class="q-ma-md text-right">
            <q-btn unelevated class="col" type="submit" @click="editWorker=null">取消</q-btn>
            <q-btn unelevated color="primary" class="col" type="submit">确定</q-btn>
          </div>
        </q-form>
        <q-list separator v-else-if="list[currentIndex]">
          <!-- :to="'/shop/worker/'+list[currentIndex].id+'/edit'" -->
          <q-item @click="onClickEditWorker" clickable>
            <q-item-section>
              <q-item-label class="row items-center"><q-icon name="person_outline" class="q-mr-xs" size="20px"/>员工</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-item-label class="text-primary">编辑</q-item-label>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section>
              <q-item-label>员工</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-item-label>
                {{ list[currentIndex].name }}
              <!-- <q-btn icon="edit" label="修改" @click="promptUpdate('name', {title: '修改员工姓名'})"/> -->
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section>
              <q-item-label>手机号</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-item-label>{{ list[currentIndex].phone }}
                <!-- <q-btn icon="edit" label="修改" @click="promptUpdate('name', {title: '修改员工手机号'})"/> -->
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item class="bg-grey-3 q-py-md" dense>
            <q-item-section>
              <q-item-label>员工手机号将作为登录账号使用</q-item-label>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section>
              <q-item-label class="row items-center"><q-icon name="o_lock" class="q-mr-xs" size="18px"/>员工权限</q-item-label>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section>
              <q-item-label>开始接单</q-item-label>
              <q-item-label caption>开启后允许员工接单出票</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-toggle :model-value="list[currentIndex].enable_work==1?1:0"
              :true-value="1"
              :false-value="0"
              @update:model-value="val=>updateWorker({'enable_work':val})"/>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section>
              <q-item-label>加款扣款</q-item-label>
              <q-item-label caption>开启后允许该员工给用户手动加款和扣款</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-toggle :model-value="list[currentIndex].enable_ie==1?1:0"
              :true-value="1"
              :false-value="0"
              @update:model-value="val=>updateWorker({'enable_ie':val})"/>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section>
              <q-item-label>派奖管理</q-item-label>
              <q-item-label caption>开启后可派奖店铺所有中奖订单</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-toggle :model-value="list[currentIndex].enable_send_prize==1?1:0"
              :true-value="1"
              :false-value="0"
              @update:model-value="val=>updateWorker({'enable_send_prize':val})"/>
            </q-item-section>
          </q-item>
          <q-item>
            <q-btn class="fit" color="negative" unelevated @click="deleteWorker">删除</q-btn>
          </q-item>
        </q-list>

        <div class="safe-padding-bottom"></div>
      </q-card>
      </q-dialog>
  </PageLayout>
</template>
<script setup>
import { ref, onMounted, reactive,watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { useInfiniteScroll } from 'src/composables/infiniteScroll';
import { Rules } from "src/utils/tools";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const store = useSelfStore();
const currentIndex = ref('')

const { list, refresh, load,scrollRef } = useInfiniteScroll((page)=>{
  return api.getWorkerList({
    page,
  }).then((res) => {
    return {data:res}
  });
})
// function promptUpdate(key, dialogOptions) {
//   $q.dialog({
//     cancel: true,
//     ...dialogOptions,
//     prompt: {
//       model: "",
//       type: "text", // optional
//       ...dialogOptions.prompt
//     }
//   }).onOk((val) => {
//     updateWorker({[key]:val});
//   });
// }
function updateWorker(data){
  return api.updateWorker({id:list[currentIndex.value].id,...data}).then(res=>{
    list[currentIndex.value] = {
      ...list[currentIndex.value],
      ...data
    }
    if(editWorker.value){
      editWorker.value = null
    }
  }).catch(e=>{
    $q.notify({type: 'negative',message: e.message})
    return Promise.reject(e)
  })
}

const  editWorker  = ref(null)
watch(currentIndex,()=>{
  editWorker.value = null
})
function onClickEditWorker(){
  editWorker.value = {
    name: list[currentIndex.value].name,
    phone: list[currentIndex.value].phone,
    password:''
  }
}
function onSubmit(){
  updateWorker(editWorker.value).then((res)=>{
    $q.notify({type: 'positive',message: res.message || '修改成功'})
  })
}
function deleteWorker(){
  $q.dialog({
    title: '系统提示',
    message: '确定删除该员工么？',
    cancel: true,
  }).onOk(()=>{
    api.deleteWorker({id: list[currentIndex.value].id}).then((res)=>{
      $q.notify({type: 'positive',message: res.message || '删除成功'})
      currentIndex.value = ''
      refresh()
    }).catch(e=>{
      $q.notify({type: 'negative',message: e.message})
    })
  })
}
</script>
<style lang="scss" scoped></style>
