<template>
  <div class="page-wrap page-wrap-account">
    <tool-bar
      :text="['name']"
      :label="['公众号名称']"
      v-model:loading="searching"
      @confirm="onSearch"
      @cancel="onCancel"
    ></tool-bar>
    <a-table bordered :loading="loading" :data-source="list" :columns="columns">
      <template #operation="{ record }">
        <a-button @click="showDrawerWxEdit(record)" size="small">编辑</a-button>
        <span style="padding: 10px"></span>
        <a-button type="primary" @click="showDrawerMactch(record)" size="small"
          >回传配置</a-button
        >
        <span style="padding: 10px"></span>
        <a-button @click="showDrawerLog(record)" size="small"
          >回传日志</a-button
        >
      </template>
    </a-table>

    <a-modal
      title="编辑"
      v-model:visible="visibleWxlog"
      centered="true"
      width="40%"
      class="drawer-back-config"
      @ok="comfirmWxEdit"
      @cancel="cancelWxEdit"
    >
      <p style="margin-bottom: 15px; font-size: 12px">
        若公众号信息发生变化请及时在此更新公众号信息
      </p>
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ offset: 1 }"
        :model="wxEditList"
        :rules="rules"
      >
        <a-form-item label=" 公众号名称" :name="[ 'appName']">
          <a-input
            v-model:value="wxEditList.appName" 
          >
          </a-input>
        </a-form-item>
        <a-form-item label="微信号" :name="[ 'alias']">
          <a-input v-model:value="wxEditList.alias"> </a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="回传配置"
      v-model:visible="visibleMatchLog"
      centered="true"
      width="40%"
      class="drawer-back-config"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <OrangeForm
        :formrate="formrate"
        :condition="condition"
        @getShowFlag="getOrangeShowFlag"
        @initOrangeList="initOrangedata"
        @add="add"
        ref="OrForm"
      ></OrangeForm>
    </a-modal>

    <a-drawer
      title="回传日志"
      placement="right"
      :closable="true"
      width="80%"
      v-model:visible="visibleLog"
    >
      <orange-log :Logappflag="Logappflag"></orange-log>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import usePagination from "@/hooks/usePagination";
import { OListItem } from "#/api";
import { TableColumnOfOrange } from "@/views/_pageOptions/table-account";
import { defineComponent, onMounted, reactive, Ref, ref, toRefs } from "vue";
import ToolBar from "@/components/tool-bar/index.vue";
import OrangeForm from "./orangeform.vue";
import {
  //获取列表
  editOrangeWxApi,
  getOrangeProductListApi,
} from "@/api";
import OrangeLog from "./orangelog.vue";
import { message } from "ant-design-vue";

export default defineComponent({
  components: {
    ToolBar,
    OrangeLog,
    OrangeForm,
  },
  setup() {
    const OrForm = ref();
    const state = reactive({
      loading: true,
      list: ref<OListItem[]>([]),
      searching: false,
      query: {
        account_name: "",
        platform: "",
        page: 1,
        report_module: "",
      },
      listlog: {
        guid: "",
        start_state: "",
        end_time: "",
        appflag: "",
        platform: "",
        report_platform: "",
      },
      //修改微信公众号列表
      wxEditList: {
        appName: "",
        alias: "",
        appflag: "",
      },
      appflag: "",
      Logappflag: "",
      formrate: "",
      condition: "",
      columns: TableColumnOfOrange,
      visibleLog: false,
      visibleMatchLog: false,
      visibleWxlog: false,
    });
    let { meta } = usePagination();
    //回传日志抽屉层
    //回传配置抽屉层

    //日志
    const showDrawerLog = async (match: OListItem) => {
      state.visibleLog = true;
      state.Logappflag = match.appflag;
    };

    //点击弹出回传配置
    const showDrawerMactch = (match: any) => {
      state.visibleMatchLog = true;
      state.appflag = match.appflag;
      state.formrate = match.rate.toString();
      localStorage.setItem("OrangeAppflag", state.appflag);
      state.condition = match.condition;
    };

    const initOrangedata = async () => {
      let params = {
        app_name: "",
      };
      const data = await getOrangeProductListApi(params);
      if (data) state.loading = false;
      state.list = data.data.list;
    };
    onMounted(() => {
      initOrangedata();
    });

    //搜索传入的值
    const onLoadOfficials = (name: string) => {
      let params = JSON.parse(JSON.stringify(state.query));
      params.app_name = name;
      state.loading = true;
      getOrangeProductListApi(params).then(({ data }) => {
        meta.value = data.meta;
        state.list = data.list;
        state.searching = false;
        state.loading = false;
      });
    };

    //搜索按钮
    const onSearch = (fields: Record<string, string>) => {
      const name = fields.name;
      //在此处发送搜索请求
      state.loading = false;
      onLoadOfficials(name);
    };
    //取消按钮
    const onCancel = () => {
      state.query.report_module = "";
      onSearch({ name: "" });
    };
    const getOrangeShowFlag = (value: boolean) => {
      state.visibleMatchLog = !value;
    };
    const handleCancel = () => {};
    const handleOk = () => {
      OrForm.value.submit();
    };

    //显示微信公众号编辑的弹窗
    const showDrawerWxEdit = (match: any) => {
      state.wxEditList.appName = match.app_name;
      state.wxEditList.alias = match.alias;
      state.wxEditList.appflag = match.appflag;
      state.visibleWxlog = true;
    };

    const editOrangeWx = async () => {
      const res = await editOrangeWxApi(state.wxEditList);
      if (res.data.result == 1) {
        message.success("保存成功");
        //刷新页面 
        state.visibleWxlog = false;
        initOrangedata();
      }
    };
    //微信确认按钮弹框 提交表单
    const comfirmWxEdit = () => {
     
      //发送请求
      editOrangeWx();
      //刷新页面
    };
    const rules = {
      appName: {
        required: true,
        message: '公众号名称不能为空',
      },
      alias: {
            required: true,
            message: '微信号不能为空',
      },
    };
    return {
      ...toRefs(state),
      onSearch,
      onCancel,
      showDrawerLog,
      showDrawerMactch,
      getOrangeShowFlag,
      handleOk,
      handleCancel,
      OrForm,
      initOrangedata,
      add() {},
      showDrawerWxEdit,
      comfirmWxEdit,
      rules
    };
  },
});
</script>
