<template>
  <template-page
    v-if="pageShow"
    ref="pageRef"
    :get-list="getList"
    :exportList="exportList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :operation="operation()"
    key="pageType"
  >
    <div class="cartographer_big">
      <el-dialog
        title="商家管理"
        width="100%"
        :modal="false"
        :visible.sync="formDialog"
        :before-close="handleClose"
      >
        <zj-page-container>
          <zj-page-fill>
            <div style="box-sizing: border-box; padding: 20px 20px 0 20px">
              <zj-form-container
                ref="formRef"
                :form-data="formData"
                :form-attributes="{ size: 'mini' }"
              >
                <zj-form-module
                  title="商家管理"
                  label-width="120px"
                  :form-data="formData"
                  :form-items="formItems"
                >
                </zj-form-module>
                <zj-form-module
                  v-if="formData.isOpen == 'YES'"
                  title="云闪付信息"
                  label-width="120px"
                  :form-data="formData"
                  :form-items="ysfFormItems"
                >
                </zj-form-module>
              </zj-form-container>
            </div>
          </zj-page-fill>
          <div
            style="
              text-align: right;
              box-sizing: border-box;
              padding: 16px 20px;
            "
          >
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button
              v-if="!xiangqing"
              size="mini"
              type="primary"
              @click="save"
              >保存</el-button
            >
          </div>
        </zj-page-container>
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from "@/components/template/template-page-1.vue";
import import_mixin from "@/components/template/import_mixin.js";
import operation_mixin from "@/components/template/operation_mixin.js";
import {
  adminWebsitList,
  adminWebsitListExport,
  adminWebsitImport,
  adminWebsitAdd,
  adminWebsitUpdate,
  adminWebsitDetail,
  adminWebsitDelete,
} from "@/api/merchantManagement.js";
import {
  required,
  mobileRequired,
} from "@/components/template/rules_verify.js";
import { adminCompanyMchList, adminCompanyList } from "@/api/payingMerchant.js";
import ImageUpload from "@/components/file-upload";
import { commonTemplateDownload } from "@/api/common.js";
import { lbsAmapRegion } from "@/api/common.js";
import geographicalPosi from "@/components/geographicalPosi/index.vue";
import { getDataDictionary } from "@/api/dataDictionary.js";
export default {
  components: { TemplatePage, ImageUpload },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      pageType: "list",
      pageShow: true,
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false,
      },
      // 表格事件
      tableEvents: {
        "selection-change": this.selectionChange,
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialog: false,
      formData: {
        address: "",
        companyName: "",
        companyId: "",
        corpId: "",
        id: "",
        isOpen: "NO",
        lat: "",
        lng: "",
        mobile: "",
        name: "",
        parentId: "",
        payWorkerCodeId: "",
        payWorkerCodeName: "",
        person: "",
        personMobile: "",
        sortNum: "",
        status: "ON",
        tag: "",
        type: "",
        typeId: "",
        url: [],
        websitId: "",
        websitNumber: "",
        yunAppid: "",
        yunAppkey: "",
        yunCompany: "",
        yunName: "",
        yunNumber: "",
        yunSystem: "",
        yunTax: "",
        yunTwo: "",
      },
      xiangqing: false,
      shangjiwd: [],
      zzdshangji: [],
      WEBSIT_TYPE: [],
      WEBSIT_TAG: [],
    };
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth("add", {
              click: this.openForm,
            }),
          ],
        ],

        [
          [
            this.optionsEvensAuth("download", {
              click: () => {
                commonTemplateDownload(
                  { name: "商家导入.xlsx" },
                  `${this.$route.meta.title}`
                )
                  .then((res) => {
                    this.$message({
                      message: "下载成功",
                      type: "success",
                    });
                  })
                  .catch((err) => {
                    this.$message.error("下载失败");
                  });
              },
            }),
          ],
          [
            this.optionsEvensAuth("import", ({ moduleName }) => {
              return {
                name: moduleName,
                render: () => {
                  return this.importButton(adminWebsitImport, moduleName);
                },
              };
            }),
          ],
        ],
      ];
    },
    // 更多参数
    moreParameters() {
      return [];
    },
    formItems() {
      return [
        {
          isShow: true,
          name: "el-select",
          md: 6,
          options: this.zzdshangji,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请选择",
            clearable: true,
            filterable: true,
          },
          formItemAttributes: {
            label: "上级商户",
            prop: "companyId",
            rules: [...required],
          },
          events: {
            change: (val) => {},
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing || !!this.formData.websitId,
            rows: 3,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "商家编号",
            prop: "websitNumber",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            rows: 3,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "商家名称 ",
            prop: "name",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            rows: 3,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "联系电话",
            prop: "mobile",
            rules: [...mobileRequired],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            rows: 3,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "负责人",
            prop: "person",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            rows: 3,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "负责人电话",
            prop: "personMobile",
            rules: [...mobileRequired],
          },
        },
        {
          md: 6,
          isShow: true,
          name: "el-radio",
          options: [
            { label: "启用", value: "ON" },
            { label: "禁用", value: "OFF" },
          ],
          attributes: {
            disabled: this.xiangqing,
          },
          formItemAttributes: {
            label: "状态",
            prop: "status",
            rules: [...required],
          },
        },
        {
          md: 6,
          isShow: true,
          name: "el-radio",
          options: this.WEBSIT_TYPE,
          attributes: {
            disabled: this.xiangqing,
          },
          formItemAttributes: {
            label: "商家类型",
            prop: "typeId",
            rules: [...required],
          },
          events: {
            change: (v) => {
              this.formData.type = this.WEBSIT_TYPE.find(
                (item) => item.value === v
              )?.label;
            },
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 15,
          formItemAttributes: {
            label: "商家地址",
            prop: "address",
            rules: [...required],
          },
          attributes: { disabled: true, placeholder: "请选择商家地址" },
        },
        {
          isShow: true,
          name: "slot-component",
          md: 3,
          formItemAttributes: {
            "label-width": "0px",
            prop: "",
          },
          render: (h, { props }) => {
            return (
              <geographicalPosi
                disabled={this.xiangqing}
                formData={this.formData}
                onSelectPosi={(data) => {
                  // 获取经纬度
                  this.formData.lng = data.center[0];
                  this.formData.lat = data.center[1];
                  this.formData.address = data.name;
                }}
              />
            );
          },
        },
        {
          isShow: true,
          name: "el-select",
          md: 6,
          options: this.shangjiwd,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请选择",
            clearable: true,
            filterable: true,
          },
          formItemAttributes: {
            label: "收款商户号",
            prop: "payWorkerCodeId",
            rules: [...required],
          },
          events: {
            change: (val) => {},
          },
        },

        {
          md: 24,
          isShow: true,
          name: "el-select",
          options: this.WEBSIT_TAG,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请选择",
            clearable: true,
            filterable: true,
          },
          formItemAttributes: {
            label: "商家标签",
            prop: "tag",
          },
        },
        {
          md: 24,
          isShow: true,
          name: "slot-component",
          formItemAttributes: {
            label: "营业执照",
            prop: "url",
            rules: [...required],
          },
          render: (h, { props, onInput }) => {
            var { value } = props;
            return (
              <ImageUpload
                fileList={this.formData.url}
                uid="imgSrc666_materials_drawing_images"
                limit={1}
                isEdit={!this.xiangqing}
              />
            );
          },
        },
        {
          name: "el-switch",
          md: 24,
          isShow: true,
          attributes: {
            disabled: this.xiangqing,
            "active-value": "YES",
            "inactive-value": "NO",
            "active-color": "#13ce66",
            "inactive-color": "#ff4949",
          },
          formItemAttributes: {
            label: "是否开启云闪付",
            prop: "isOpen",
            rules: [...required],
          },
        },
      ];
    },
    ysfFormItems() {
      return [
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "云闪付appid",
            prop: "yunAppid",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "云闪付appkey",
            prop: "yunAppkey",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "云闪付商户号",
            prop: "yunCompany",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "云闪付系统端号",
            prop: "yunNumber",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "云闪付系统编号",
            prop: "yunSystem",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "税号",
            prop: "yunTax",
            rules: [...required],
          },
        },
        {
          isShow: true,
          name: "el-input",
          md: 6,
          attributes: {
            disabled: this.xiangqing,
            placeholder: "请输入",
          },
          formItemAttributes: {
            label: "企业简称",
            prop: "yunName",
            rules: [...required],
          },
        },
        {
          md: 6,
          isShow: true,
          name: "el-radio",
          options: [
            { label: "是", value: "YES" },
            { label: "否", value: "NO" },
          ],
          attributes: {
            disabled: this.xiangqing,
          },
          formItemAttributes: {
            label: "是否o2o",
            prop: "yunTwo",
            rules: [...required],
          },
        },
      ];
    },
  },
  methods: {
    // 列表请求函数
    getList: adminWebsitList,
    // 列表导出函数
    exportList: adminWebsitListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData;
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data;
    },
    // 打开创建弹窗
    openForm() {
      Promise.all([
        adminCompanyList({
          pageNum: 1,
          pageSize: -1,
          params: [],
        }),
        adminCompanyMchList({
          pageNum: 1,
          pageSize: -1,
          params: [],
        }),
        getDataDictionary({
          pageNum: 1,
          pageSize: -1,
          params: [
            {
              param: "a.dict_type",
              compare: "=",
              value: "WEBSIT_TYPE",
            },
          ],
        }),
        getDataDictionary({
          pageNum: 1,
          pageSize: -1,
          params: [
            {
              param: "a.dict_type",
              compare: "=",
              value: "WEBSIT_TAG",
            },
          ],
        }),
      ]).then(([res1, res2, res3, res4]) => {
        this.formDialog = true;
        this.zzdshangji = res1.data.records.map((item) => ({
          label: item.adminCompanyName,
          value: item.adminCompanyId,
        }));
        this.shangjiwd = res2.data.records.map((item) => ({
          data: item,
          label: item.companyName,
          value: item.companyWechatId,
        }));
        this.WEBSIT_TYPE = res3.data.records.map((item) => ({
          value: item.dictCode,
          label: item.dictValue,
        }));
        this.WEBSIT_TAG = res4.data.records.map((item) => ({
          value: item.dictCode,
          label: item.dictValue,
        }));
      });
    },
    // 打开详情弹窗
    openDetailForm(row, cb) {
      console.log(row);
      Promise.all([
        adminWebsitDetail({ id: row.websitId }),
        adminCompanyList({
          pageNum: 1,
          pageSize: -1,
          params: [],
        }),
        adminCompanyMchList({
          pageNum: 1,
          pageSize: -1,
          params: [{ param: "a.status", compare: "=", value: "true" }],
        }),
        getDataDictionary({
          pageNum: 1,
          pageSize: -1,
          params: [
            {
              param: "a.dict_type",
              compare: "=",
              value: "WEBSIT_TYPE",
            },
          ],
        }),
        getDataDictionary({
          pageNum: 1,
          pageSize: -1,
          params: [
            {
              param: "a.dict_type",
              compare: "=",
              value: "WEBSIT_TAG",
            },
          ],
        }),
      ]).then(([res, res1, res2, res3, res4]) => {
        this.formData = {
          ...res.data,
          url: res.data.url ? [{ url: res.data.url }] : [],
        };
        this.formDialog = true;
        this.zzdshangji = res1.data.records.map((item) => ({
          label: item.adminCompanyName,
          value: item.adminCompanyId,
        }));
        this.shangjiwd = res2.data.records.map((item) => ({
          data: item,
          label: item.companyName,
          value: item.companyWechatId,
        }));

        this.WEBSIT_TYPE = res3.data.records.map((item) => ({
          value: item.dictCode,
          label: item.dictValue,
        }));
        this.WEBSIT_TAG = res4.data.records.map((item) => ({
          value: item.dictCode,
          label: item.dictValue,
        }));
        cb?.();
      });
    },
    handleClose() {
      this.$refs?.formRef?.resetFields();
      this.$data.formData = this.$options.data().formData;
      this.formDialog = false;
      this.xiangqing = false;
    },
    // 操作按钮
    operation() {
      return this.operationBtn({
        edit: {
          click: ({ row, index, column }) => {
            this.openDetailForm(row);
          },
        },
        details: {
          click: ({ row, index, column }) => {
            this.openDetailForm(row, () => {
              this.xiangqing = true;
            });
          },
        },
      });
    },
    // 保存
    save() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          (this.formData?.websitId ? adminWebsitUpdate : adminWebsitAdd)({
            ...this.formData,
            url:
              this.formData.url && this.formData.url.length
                ? this.formData.url?.[0]?.url
                : "",
          }).then((res) => {
            this.$message({
              type: "success",
              message: "保存成功",
            });
            this.handleClose();
            this.$refs.pageRef.refreshList();
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
