<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="resetFunc">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker
            ref="dateRangePicker"
            v-model:value="vdata.searchData['queryDateRange']"
            customDateRangeType="date"
          />
        </a-form-item>
        <jeepay-text-up   v-model:value="vdata.searchData['mchApplyName']"   :placeholder="'商户名称/商户号'"  />
        <jeepay-text-up   v-model:value="vdata.searchData['storeId']"  :placeholder="'门店名称/门店编号'"  />
        <jeepay-text-up   v-model:value="vdata.searchData['ifName']" :placeholder="'支付通道'" />
        <jeepay-text-up  v-model:value="vdata.searchData['isvNo']" :placeholder="'渠道名称/渠道号'"  />
        <jeepay-text-up   v-model:value="vdata.searchData['bindAppIdName']"  :placeholder="'应用名称/应用Id'"  />
        <jeepay-text-up   v-model:value="vdata.searchData['contactPhone']"    :placeholder="'联系人电话'" />
      </JeepaySearchForm>
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="storeId"
        @btnLoadClose="vdata.btnLoading = false"
      >
        <template #topBtnSlot>
          <div>
            <a-button
              v-if="$access('ENT_MCH_STORE_ADD')"
              type="primary"
              class="mg-b-30"
              @click="addFunc"
              ><plus-outlined />新建</a-button
            >
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'defaultFlag'">
            <a-tag v-if="record.defaultFlag === 1" color="green">是</a-tag>
            <a-switch
              v-else
              :checked="record.defaultFlag === 1 ? true : false"
              @change="
                (defaultFlag) => {
                  return updateState(record.storeId, defaultFlag);
                }
              "
            />
          </template>


          <template v-if="column.key === 'bindAppIdName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>应用名称：{{record.bindAppIdName}}</span><br>
                <span>应用ID：{{record.bindAppId}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.bindAppIdName}}</div>
            </a-tooltip>
          </template>


          <template v-if="column.key === 'isvNo'">
            <a-tooltip  overlayClassName="tooltip-box-name">
              <template #title>
                <span>渠道名称：{{record.isvName}}</span><br>
                <span>渠道号：{{record.isvNo}}</span>
              </template>
              <div class="my-tooltip-title-box"> {{record.isvName}}</div>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'mchShortName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>商户名称：{{record.mchApplyName}}</span><br>
                <span>商户号：{{record.mchApplyId}}</span>
              </template>
              <div class="my-tooltip-title-box">
                {{record.mchApplyName}}
              </div>
            </a-tooltip>
          </template>

          <template v-if="column.key === 'storeName'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                <span>门店名称：{{record.storeName}}</span><br>
              </template>
              <div class="my-tooltip-title-box">
                <a @click="detailFunc(record.storeId)" v-if="$access('ENT_MCH_STORE_VIEW')"><b>{{ record.storeName }}</b></a >
                <a  v-if="!$access('ENT_MCH_STORE_VIEW')"><b>{{ record.storeName }}</b></a ></div>
            </a-tooltip>
          </template>



          <template v-if="column.key === 'deviceNumber'">
            <a href="javascript:void(0)" @click="deviceFunc(record.storeId)">{{ record.deviceNumber ? record.deviceNumber : 0 }}</a>
          </template>
          <template v-if="column.key === 'remark'">
            <span @click="editFunc(record.storeId)" class="two-lines"
              ><b>{{ record.remark != "" ? record.remark : "--" }}</b>
              <EditOutlined @click="editFunc(record.storeId)" />
            </span>
          </template>

          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MCH_STORE_EDIT')" type="link" style="padding-right: 10px; padding-left: 10px"  @click="deviceFunc(record.storeId)" >设备管理</a-button >
              <a-button v-if="$access('ENT_MCH_STORE_EDIT')" type="link" style="padding-right: 10px; padding-left: 10px;text-align: center"  @click="editFunc(record.storeId)" >修改</a-button >
              <!-- <a-button
                v-if="$access('ENT_MCH_STORE_APP_DIS')"
                type="link"
                @click="open(record)"
                >应用分配</a-button
              > -->
              <a-button type="link"  v-if="$access('ENT_MCH_STORE_HANDOVER_LOG')" @click="workRecordFunc(record)"
                >交接班记录</a-button
              >
              <a-button type="link" v-if="$access('ENT_MCH_STORE_STAFF')" @click="getOperator()">员工管理</a-button>
              <a-button
                v-if="
                  $access('ENT_MCH_ALIPAY_SHOP_ADD') &&
                  record.alipayShopStatus == '0'
                "
                type="link"
                @click="alipayShopCreateFunc(record.storeId)"
                >创建蚂蚁店铺</a-button
              >
              <a-button
                v-if="
                  $access('ENT_MCH_ALIPAY_SHOP_EDIT') &&
                  record.alipayShopStatus != '0' &&
                  record.alipayShopId
                "
                type="link"
                @click="alipayShopUpdateFunc(record.storeId)"
                >修改蚂蚁店铺</a-button
              >
              <a-button
                v-if="$access('ENT_MCH_STORE_DELETE')"
                type="link"
                style="color: red"
                @click="delFunc(record.storeId)"
                >删除</a-button
              >
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 新增 / 修改 页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
    <!-- 蚂蚁店铺 页面组件  -->
    <AlipayShop ref="alipayShopRef" :callbackFunc="searchFunc" />
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
    <!--    应用分配页面-->
    <AppBind ref="appBind" :callbackFunc="searchFunc" />
    <!-- 交接班记录页面 -->
    <WorkRecord ref="workRecord" :callbackFunc="searchFunc" />
  </page-header-wrapper>

  <a-modal
    v-model:visible="vdata.visibleNotes"
    title="编辑备注"
    :footer="null"
    width="50%"
    @cancel="handleCancel"
  >
    <div style="height: 20vh; overflow: auto">
      <div
        class="code code-layout-item"
        style="display: flex; justify-content: center"
      >
        <a-form-item label="备注" required style="width: 80%">
          <a-textarea
            v-model:value="vdata.notes.value"
            placeholder="请输入备注"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </div>

      <div style="text-align: center; margin-top: 34px">
        <a-button
          type="primary"
          :disabled="vdata.isDisabled"
          @click="sendNotes()"
        >
          确定
        </a-button>
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import {
  API_URL_MCH_STORE_LIST,
  req,
  reqLoad,
  API_ALIPAY_SHOP,
} from "@/api/manage";
import { useUserStore } from "@/store/modules/user";
import {
  onMounted,
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  provide,
  computed,
} from "vue";
import InfoAddOrEdit from "./AddOrEdit.vue";
import AlipayShop from "./AlipayShop.vue";
import InfoDetail from "./Detail.vue";
import WorkRecord from "./WorkRecord.vue";
import AppBind from "./components/AppBind.vue";
import { useRouter, useRoute } from "vue-router";
// 获取全局函数
const { $infoBox, $access } =
  getCurrentInstance()!.appContext.config.globalProperties;

const userStore = useUserStore();
const router = useRouter(); //这是全部路由

// tableColumns 顺序不可随意修改 （关联下方列显示）
const tableColumns = reactive([
  { title: "商户名称", key: "mchShortName", dataIndex: "mchShortName" },
  { title: "门店名称", key: "storeName", dataIndex: "storeName"},
  { title: "门店编号", dataIndex: "storeId"},
  { key: "ifName", title: "支付通道", dataIndex: "ifName" },
  { key: "isvNo", title: "所属渠道", dataIndex: "isvNo" },
  // { title: "是否默认", key: "defaultFlag", align: "center" },
  { title: "所属应用",key: "bindAppIdName", dataIndex: "bindAppIdName" },
  { title: "联系电话", dataIndex: "contactPhone" },
  { title: "备注", key: "remark", dataIndex: "remark"},
  { title: "设备总数", key: "deviceNumber", dataIndex: "deviceNumber", align: "center" },
  // { title: '蚂蚁店铺状态', key: 'alipayShopStatus', dataIndex: 'alipayShopStatus' },
  { title: "创建时间", dataIndex: "createdAt" },
  { key: "op", title: "操作", fixed: "right", align: "center" },
]);

// 如果用户类型为店长、店员时
if (
  userStore.userInfo["userType"] == 11 ||
  userStore.userInfo["userType"] == 12
) {
  // 删除是否默认的列展示
  tableColumns.splice(2, 1);
}
console.log(router, "urltyle");

const infoDetail = ref();
const infoAddOrEdit = ref();
const alipayShopRef = ref();
const infoTable = ref();
const appBind = ref();
const workRecord = ref();
const vdata: any = reactive({
  visibleNotes: false,
  tableColumns: tableColumns,
  searchData: {
    mchApplyName: "",
  },
  btnLoading: false,
  notes: {
    appid: "",
    value: "",
  },
});
var mchApplyId = GetQueryString("applyId"); //北京市
if (mchApplyId) {
  vdata.searchData.mchApplyName = mchApplyId;
}

// 请求table接口数据
function reqTableDataFunc(params) {
  return req.list(API_URL_MCH_STORE_LIST, params);
}
function searchFunc() {
  // 点击【查询】按钮点击事件
  vdata.btnLoading = true; // 打开查询按钮的loading
  infoTable.value.refTable(true);
}
function addFunc() {
  // 业务通用【新增】 函数
  infoAddOrEdit.value.show();
}
function getOperator() {
  router.push({
    path: "/users",
  });
}
function deviceFunc(storeId){
  router.push({
    path: "/qrCodes",
    query:{storeId:storeId}
  });
}
function delFunc(recordId) {
  // 业务通用【删除】 函数

  $infoBox.confirmDanger(
    "确认删除？",
    "",
    () => {
      return req
        .delById(API_URL_MCH_STORE_LIST, recordId)
        .then((res) => {
          $infoBox.message.success("删除成功！");
          infoTable.value.refTable(false);
        })
        .catch((err) => {});
    },
    () => {
      console.log(1111);
    }
  );
}
function editFunc(recordId) {
  // 业务通用【修改】 函数
  infoAddOrEdit.value.show(recordId);
}
function alipayShopCreateFunc(recordId) {
  // 创建蚂蚁店铺
  alipayShopRef.value.show(recordId, true);
}
function alipayShopUpdateFunc(recordId) {
  // 更新蚂蚁店铺
  alipayShopRef.value.show(recordId, false);
}
function detailFunc(recordId: any) {
  // 门店详情页
  infoDetail.value.show(recordId);
}
function open(record: any) {
  // 门店详情页
  appBind.value.open(record);
}
function workRecordFunc(record: any) {
  // 相应门店交接班记录
  workRecord.value.show(record);
}
function updateState(recordId, state) {
  // 【更新状态】
  const title = state === 1 ? "确认[默认]该门店？" : "确认[取消默认]该门店？";
  const content = "开启默认后则默认使用该门店配置，有且只能有一个默认门店。";
  return new Promise<void>((resolve, reject) => {
    $infoBox.confirmDanger(
      title,
      content,
      () => {
        return reqLoad
          .updateById(API_URL_MCH_STORE_LIST, recordId, { defaultFlag: state })
          .then((res) => {
            searchFunc();
            resolve();
          })
          .catch((err) => reject(err));
      },
      () => {
        reject(new Error());
      }
    );
  });
}
function updateAlipayShopStatusFunc(recordId) {
  // 【更新蚂蚁店铺状态】
  return new Promise<void>((resolve, reject) => {
    reqLoad
      .getById(API_ALIPAY_SHOP + "/createResult", recordId, undefined)
      .then((res) => {
        vdata.btnLoading = false;
        searchFunc();
      })
      .catch((valid) => {
        vdata.btnLoading = false;
      });
  });
}
function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return decodeURIComponent(r[2]);
  return null;
}

const resetFunc = () => {
  vdata.searchData = {};
};

function sendNotes() {
  req
    .add("", {
      remark: vdata.notes.value,
      applyId: vdata.notes.appid,
    })
    .then((msg) => {
      console.log(msg, "resresres");
      $infoBox.message.success("编辑成功");
      searchFunc(); // 更新列表
      vdata.visibleNotes = false;
    });
}
function remarkFunc(data) {
  vdata.notes.appid = data.applyId;
  vdata.notes.value = data.remark ?? "";
  vdata.visibleNotes = true;
}
// 弹层取消
function handleCancel(e) {
  vdata.visibleNotes = false;
}
</script>

<style>
.two-lines {
  color: #1965ff;
  max-width: 150px;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.my-tooltip .ant-btn {
  width: 600px !important;
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 4px;
}
.ant-dropdown-menu-item-only-child{
  text-align: center;
}
</style>