<template>
  <PageLayout>
    <template #header-title>{{ store.shop.name }}</template>
    <div class="text-grey q-pa-md q-pb-sm">基本信息</div>
    <q-list separator class="bg-white">
      <q-item to="/my/info">
        <q-item-section>账户管理</q-item-section>
        <q-item-section side>
          <q-item-label>
            <UserAvatar
              :src="store.user.avatar_url"
              size="lg"
              class="q-mr-sm"
              color="accent"
            />
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item to="/shop/auth">
        <q-item-section>店铺认证</q-item-section>
        <q-item-section side>
          <q-item-label caption>
            {{ AUTH_STATE[store.shop.shop_extra?.state??0] }}
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item to="/my/auth">
        <q-item-section>身份认证</q-item-section>
        <q-item-section side>
          <q-item-label caption>
            {{ store.user.real_identity ? "已认证" : "未认证" }}
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item to="/shop/payment/setting">
        <q-item-section>
          <q-item-label>收款管理</q-item-label>
          <q-item-label caption>提供用户更多的充值方式</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-item-label caption>
            去添加
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
    <div class="text-grey q-pa-md q-pb-sm">店铺信息</div>
    <q-list separator class="bg-white">
      <q-item
        clickable
        @click="
          promptUpdate('name', {
            title: '设置店铺名称',
            message: ''
          })
        "
      >
        <q-item-section>
          <q-item-label>店铺名称</q-item-label>
          <!-- <q-item-label caption>方便用户联系店主使用</q-item-label> -->
        </q-item-section>
        <q-item-section side>
          <q-item-label caption>
            {{ store.shop.name || "去填写" }}
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item to="/shop/notice/edit">
        <q-item-section>
          <q-item-label>店铺公告</q-item-label>
          <q-item-label caption :lines="2">{{ store.shop.announcement }}</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-item-label caption>
            去填写
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item
        clickable
        @click="
          promptUpdate('wechat', {
            title: '设置店铺微信',
            message: '方便用户联系店主使用'
          })
        "
      >
        <q-item-section>
          <q-item-label>店铺微信</q-item-label>
          <q-item-label caption>方便用户联系店主使用</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-item-label caption>
            {{ store.shop.seller_wechat || "去填写" }}
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item
        clickable
        @click="
          showEditDialog( {
            key: 'phone',
            title: '设置联系电话',
            message: '方便用户联系店主使用',
            form:{
              phone: store.shop.seller_phone,
              password:''
            }
          })
        "
      >
        <q-item-section>
          <q-item-label>联系电话</q-item-label>
          <q-item-label caption>方便用户联系店主使用</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-item-label caption>
            {{ store.shop.seller_phone || "去填写" }}
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item
        :clickable="!store.shop.addr"
        @click="
          !store.shop.addr && showEditDialog({
            key:'addr',
            title: '设置店铺地址',
            message: '方便用户到店',
            form:{
              province_id: store.shop.province_id,
              city_id:store.shop.city_id,
              addr:store.shop.addr
            }
          })
        "
      >
        <q-item-section>
          <q-item-label>店铺地址</q-item-label>
          <q-item-label caption>方便用户到店</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-item-label caption>
            {{ store.shop.addr || "去填写" }}
            <q-icon :color="store.shop.addr?'grey-5':''" name="arrow_forward_ios" size="14px" />
          </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-item-label caption>
            <q-toggle
              :model-value="store.shop.keep_secret"
              :true-value="1"
              :false-value="0"
              @update:model-value="(val) => updateShopInfo({ keep_secret: val })"
            ></q-toggle>
          </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-item-label caption>
            <q-toggle
              :model-value="store.shop.hide_winpost"
              :true-value="1"
              :false-value="0"
              @update:model-value="(val) => updateShopInfo({ hide_winpost: val })"
            ></q-toggle>
          </q-item-label>
        </q-item-section>
      </q-item>
      <!-- <q-item>
        <q-item-section>
          <q-item-label>加款扣款小额免密</q-item-label>
          <q-item-label caption
            >开启后，店主和员工给用户加款、扣款100元或以下无需输入支付密码</q-item-label
          >
        </q-item-section>
        <q-item-section side>
          <q-item-label caption>
            <q-toggle
              :model-value="store.shop.no_password"
              :true-value="1"
              :false-value="0"
              @update:model-value="
                (val) => updateShopInfo({ no_password: val })
              "
            ></q-toggle>
          </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 caption>
            体彩单体站
            <q-icon name="arrow_forward_ios" size="14px" color="grey-5" />
          </q-item-label>
        </q-item-section>
      </q-item>
      <q-item clickable @click="updateWithdrawalType">
        <q-item-section>
          <q-item-label>选择可用提现方式</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-item-label caption>
            {{ store.shop.withdraw_type?.map((item)=>PAY_TYPES[item].name).join('、')||'去设置'}}
            <q-icon name="arrow_forward_ios" size="14px" />
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
    <q-dialog :model-value="dialogEdit?true:false" @hide="dialogEdit=null">
      <q-card class="full-width">
        <q-card-section class="q-card__section--vert q-dialog__title">
          {{ dialogEdit.title }}
        </q-card-section>
        <q-card-section class="q-pt-none">
          {{ dialogEdit.message }}
        </q-card-section>
        <q-form @submit="onEditDialogSubmit">
          <q-card-section class="q-pt-none">
            <template v-if="dialogEdit.key == 'phone'">
            <q-input label="联系电话" dense v-model="dialogEdit.form.phone" :rules="[Rules.required,Rules.phone]" />
            <q-input label="登录密码" type="password" dense v-model="dialogEdit.form.password" :rules="[Rules.required,Rules.password]" />
            </template>
            <template v-else>
              <AreaCascadeSelect
              class="q-mb-sm"
              v-model:provinceId="dialogEdit.form.province_id"
              v-model:cityId="dialogEdit.form.city_id"
              :level="2" label="省市"
              dense/>
              <q-input label="详细地址" dense v-model="dialogEdit.form.addr" />
            </template>
          </q-card-section>
          <q-card-actions align="right" class="q-pt-none">
            <q-btn flat color="primary" v-close-popup class="q-mr-md">取消</q-btn>
            <q-btn flat color="primary" type="submit">确定</q-btn>
          </q-card-actions>
        </q-form>
      </q-card>
    </q-dialog>
  </PageLayout>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "boot/axios";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import UploadFile from "src/components/UploadFile.vue";
import { useSelfStore } from "src/stores/self";
import { Rules} from 'src/utils/tools'
import { PAY_TYPES } from 'src/utils/const'
import AreaCascadeSelect from "src/components/AreaCascadeSelect.vue";
import { AUTH_STATE } from 'src/utils/const'
const $q = useQuasar();
const router = useRouter();
const store = useSelfStore();
store.refresh();

function updateShopInfo(data, successMsg) {
  return api
    .updateShopInfo(data)
    .then((res) => {
      successMsg &&
        $q.notify({ type: "positive", message: res.message || successMsg });
      store.refresh();
    })
    .catch((e) => {
      $q.notify({ type: "negative", message: e.message });
    });
}
function promptUpdate(key, dialogOptions) {
  $q.dialog({
    cancel: true,
    ...dialogOptions,
    prompt: {
      model: "",
      type: "text", // optional
      ...dialogOptions.prompt
    }
  }).onOk((val) => {
    updateShopInfo({ [key]: val }, dialogOptions.title + "成功!");
  });
}

const payTypesOptions = []
for(let p in PAY_TYPES){
  payTypesOptions.push({label: PAY_TYPES[p].name,value:PAY_TYPES[p].id})
}
function updateWithdrawalType() {
  $q.dialog({
    title: "提现方式",
    message: "选择可用提现方式",
    options: {
      type: "checkbox",
      model: store.shop.withdraw_type || [],
      // inline: true
      items:payTypesOptions
    },
    cancel: true,
    persistent: true
  }).onOk((data) => {
    updateShopInfo({ withdraw_type: data || [] }, "设置提现方式成功！");
  });
}

const dialogEdit = ref(null)
function showEditDialog(options){
  dialogEdit.value = options
}
function onEditDialogSubmit(){
  updateShopInfo(dialogEdit.value.form,dialogEdit.value.title+"成功").then(res=>{
    dialogEdit.value = null
  })
}
</script>
