<template>
  <div class="bind-page">
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <div>
        <a-button class="small left" @click="onSetBackShowTable">
          <template #icon>
            <LeftOutlined />
          </template>
        </a-button>
        <a-button class="small right">
          <template #icon>
            <MenuUnfoldOutlined />
          </template>
        </a-button>
      </div>

      <div>
        <a-button
          type="primary"
          block
          @click="showModal"
          v-if="query && query.isShow"
          >新建支付通道</a-button
        >
      </div>
    </div>
    <div style="margin-top: 10px">
      <a-table
        :columns="columns"
        :data-source="list"
        :pagination="false"
        v-if="isShowTable"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <div v-if="record.payname == '1'">支付宝</div>
             <div v-else-if="record.payname == '2'">微信</div>
             <div v-else-if="record.payname == '3'">花呗</div>
             <div v-else-if="record.payname == '4'">京东白条</div>
             <div v-else-if="record.payname == '5'">银联</div>
            <div v-else>~~~</div>
          </template>
          <template v-if="column.key === 'wx'">
            <div v-if="record.paytype == '1'">
              <CheckCircleFilled style="font-size:25px; color:rgb(12, 191, 33);"></CheckCircleFilled>
            </div>
            <div v-else>
              <CloseCircleFilled style="font-size:25px;color: rgb(250, 116, 116);"></CloseCircleFilled>
            </div>
          </template>
          <template v-else-if="column.key === 'zfb'">
            <div v-if="record.paytype == '2'">
              <CheckCircleFilled style="font-size:25px;color:rgb(12, 191, 33);"></CheckCircleFilled>
            </div>
            <div v-else>
              <CloseCircleFilled style="font-size:25px;color: rgb(250, 116, 116);"></CloseCircleFilled>
            </div>
          </template>
          <template v-else-if="column.key === 'tags'">
            <span>
              <a-tag
                v-for="tag in record.tags"
                :key="tag"
                :color="
                  tag === 'loser'
                    ? 'volcano'
                    : tag.length > 5
                    ? 'geekblue'
                    : 'green'
                "
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'status'">
            <div v-if="record.status === 0">
              <span class="ml20" style="color: rgba(12, 191, 33, 1)">良好</span>
            </div>
            <div v-else-if="record.status === 1">
              <span class="ml20" style="color: rgb(250, 116, 116)">预警</span>
            </div>
          </template>
          <template v-else-if="column.key === 'weight'">
            <a-input-number
              id="inputNumber"
              v-model:value="record.weight"
              :min="1"
              :max="10"
              @blur="onChangeWeight(record)"
            />
            <span>1-10</span>
          </template>
          <template v-else-if="column.key === 'ref'">
            <span>
              <a-button danger  @click="onSetShowTable" >配置</a-button>
            </span>
            <span>
              <a-button danger style="margin-left: 10px" @click="onDis(record)">禁用</a-button>
            </span>
          </template>
        </template>
      </a-table>
      <div v-else>
        <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
          <a-form-item
            label="通道名称"
            has-feedback
            labelAlign="left"
            v-bind="validateInfos.name"
          >
            <a-input
              v-model:value="modelRef.name"
              placeholder="请输入通道名称"
            />
          </a-form-item>
          <a-form-item
            label="uid:"
            has-feedback
            labelAlign="left"
            v-bind="validateInfos.uid"
          >
            <a-input v-model:value="modelRef.uid" placeholder="请输入uid" />
          </a-form-item>
          <a-form-item
            label="appid:"
            has-feedback
            labelAlign="left"
            v-bind="validateInfos.appid"
          >
            <a-input v-model:value="modelRef.appid" placeholder="请输入appid" />
          </a-form-item>
          <a-form-item
            label="privatekey:"
            has-feedback
            labelAlign="left"
            v-bind="validateInfos.privatekey"
          >
            <a-input
              v-model:value="modelRef.privatekey"
              placeholder="请输入privatekey"
            />
          </a-form-item>
          <a-form-item
            label="alipaypublickey:"
            has-feedback
            labelAlign="left"
            v-bind="validateInfos.alipaypublickey"
          >
            <a-input
              v-model:value="modelRef.alipaypublickey"
              placeholder="请输入alipaypublickey"
            />
          </a-form-item>
          <a-form-item
            label="域名配置:"
            has-feedback
            labelAlign="left"
            v-bind="validateInfos.serveUrl"
          >
            <a-input
              v-model:value="modelRef.server_url"
              placeholder="请输入域名配置"
            />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="onSubmit">保存</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <a-modal
      v-model:visible="visible"
      title="支付通道名称"
      @ok="handleOk"
      :footer="null"
    >
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="支付通道名称"
          name="name"
          :rules="[{ required: true,  message: '请输入新建支付通道名称' }]"
        >
          <a-input v-model:value="formState.name" />
        </a-form-item>
        <p class="title">建议用该微信商户号主体名称作为通道名称</p>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit" @click="onCreate">确认</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { defineExpose, ref, reactive, computed, toRaw, onMounted } from "vue";
import { useRoute } from "vue-router";
import { Form } from "ant-design-vue";
import {
  LeftOutlined,
  MenuUnfoldOutlined,
  CheckCircleFilled,
  CloseCircleFilled,
} from "@ant-design/icons-vue";
import { onZfbPay, onWxPay, payConfigGetSearch,onUpdate,onUpdateWXrealmName} from "@/api/index";
import { message } from "ant-design-vue";
import router from "@/router";
interface FormState {
  name: String;
}
interface AppFormState {
  uid: String;
  appid: String;
  privatekey: String;
  alipaypublickey: String;
  name: String;
  server_url: String;
}
const useForm = Form.useForm;
const columns = [
  {
    title: "支付通道名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "微信",
    dataIndex: "wx",
    key: "wx",
  },
  {
    title: "支付宝",
    dataIndex: "zfb",
    key: "zfb",
  },
  {
    title: "状态",
    key: "status",
    dataIndex: "status",
  },
  {
    title: "权重",
    key: "weight",
  },
  {
    title: "操作",
    key: "ref",
  },
];

const list = ref([]);
const route = useRoute();

const query:any = computed({
  get: () => {
    return route.query;
  },
  set: () => {
    return route.query;
  },
});
const modelRef = reactive<AppFormState>({
  alipaypublickey: "",
  privatekey: "",
  uid: "",
  appid: "",
  name: "",
  server_url: "",
});
const onChangeWeight =async (record:any)=>{
//   {
//   "appid": "string",
//   "mchid": "string",
//   "mchkey": "string",
//   "name": "string",
//   "paytype": 0,
//   "server_url": "string",
//   "uid": "string"
// }

if(query.paytype === 1){
const data = await onUpdate(JSON.stringify(record))
console.log(data,'data');
}else if(query.paytype === 2){
const data = await onUpdateWXrealmName(JSON.stringify(record))
console.log(data,'data');
}

}
const rulesRef = reactive({
  alipaypublickey: [
    {
      required: true,
      message: "请输入Secretkey",
    },
  ],
  privatekey: [
    {
      required: true,
      message: "请输入Appkey",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入通道名称",
    },
  ],
  uid: [
    {
      required: true,
      message: "请输入uid",
    },
  ],
  appid: [
    {
      required: true,
      message: "请输入appid",
    },
  ],
  serveUrl: [
    {
      required: true,
      message: "请输入server_url",
    },
  ],
});
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
const onSubmit = async () => {
  validate()
    .then(async () => {
      let data:any = {};
      const prarms = {
        paytype: query.value.paytype,
        ...toRaw(modelRef),
      };
      console.log(query.value.paytype);
      if (query.value.paytype == "1") {
        data = await onWxPay(prarms);
      } else if (query.value.paytype == "2") {
        data = await onZfbPay(prarms);
      }
      if (data.state === 1) {
        message.success(data.message, 10);
      } else {
        message.warning(data.message, 10);
      }
    })
    .catch((err) => {
      console.log("error", err);
    });
};
const visible = ref<boolean>(false);
const isShowTable = ref<boolean>(true);
const showModal = () => {
  visible.value = true;
};
const formState = reactive<FormState>({
  name: "",
});

const handleOk = (e: MouseEvent) => {
  console.log(e);
  visible.value = false;
};
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const onSetShowTable = () => {
  isShowTable.value = false;
};
const onSetBackShowTable = () => {
  router.go(-1)
};
const onDis = (data:any)=>{
  console.log(data,'data');
  
}
const onCreate = () => {
   modelRef.name =  formState.name
   visible.value = !visible.value
   onSetShowTable()
}

onMounted(async () => {
  const data: any = await payConfigGetSearch(1);
  list.value = data.data;
  return list;
});
defineExpose({
  list,
  columns,
  visible,
  showModal,
  handleOk,
  formState,
  onFinish,
  onFinishFailed,
  isShowTable,
  onSetShowTable,
  validateInfos,
  resetFields,
  modelRef,
  onSubmit,
  onCreate,
  query,
  onChangeWeight,
  onDis
});
</script>
<style lang="less" scoped>
.bind-page {
  .small {
    border: none;
    height: 30px;
    width: 50px;
  }

  .left {
    border-left: 1px solid rgb(236, 236, 236);
    border-top: 1px solid rgb(236, 236, 236);
    border-bottom: 1px solid rgb(236, 236, 236);
    border-right-width: 80%;
    border-right: 1px solid rgb(236, 236, 236);
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
  }

  .right {
    border-right: 1px solid rgb(236, 236, 236);
    border-top: 1px solid rgb(236, 236, 236);
    border-bottom: 1px solid rgb(236, 236, 236);
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
  }
}
</style>
<style scoped>
.title {
  text-align: center;
  font-family: SourceHanSansSC;
  font-weight: 400;
  font-size: 13px;
  color: rgba(190, 190, 190, 1);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 19px;
  text-decoration: none;
}
</style>