<template>
  <div class="app-list-content">
    <x-crud
      class="liu-crud-wrap"
      @load="onLoad"
    >
      <!-- 粉丝 -->
      <template #table-column-totalFans>

      </template>

      <!-- 客户 -->
      <template #table-column-totalUser="{scope}">
        <span>{{ scope.row.totalUser }}</span>
      </template>

      <!-- 访问量 -->
      <template #table-column-totalVisit="{scope}">
        <span>{{ scope.row.totalView }}</span>
      </template>

      <!-- 平台帐号激活 -->
      <template #slot-activation>
        <div v-if="firstHost == 'huaml.com' || firstHost == 'huahb.cn' ">
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/begin-auth?id=hd&authType=1`)"
          >花店公众号激活</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/begin-auth?id=hd&authType=2`)"
          >花店小程序激活</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/bind-open?id=hd&actId=6`)"
          >花店小程序体验码</el-button>
        </div>
        <div v-else-if="firstHost == 'theflorist.cn' || firstHost == 'zhiguanhua.cn'">
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/begin-auth?id=mall&authType=1`)"
          >商城公众号激活</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/begin-auth?id=mall&authType=2`)"
          >商城小程序激活</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/bind-open?id=mall&actId=6`)"
          >商城小程序体验码</el-button>
        </div>
        <div v-else>
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/begin-auth?id=ghs&authType=1`)"
          >供货商公众号激活</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/begin-auth?id=ghs&authType=2`)"
          >供货商小程序激活</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="bindJump(`/wx-open/bind-open?id=ghs&actId=6`)"
          >供货商小程序体验码</el-button>
        </div>
      </template>

      <template #slot-op-btn="{scope}">
        <el-button
          v-if="scope.row.style == 2"
          size="mini"
          type="text"
          @click="bindGhs(scope.row.id)"
        >绑供货商</el-button>
      </template>

      <template #slot-add-ad-btn>
        <el-button
          type="primary"
          size="mini"
          class="sj_add_button"
          @click="addBtnFn"
        >添加</el-button>
      </template>
    </x-crud>
    <!-- 微信支付 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="wxPayDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <div class="ad-modal-content">
        <el-form
          v-if="plamPayType === 1"
          :model="form"
          :rules="rule"
          ref="form"
          label-width="100px"
          class="demo-form"
        >
          <el-form-item
            label="商户ID"
            prop="status"
          >
            <el-input
              v-model="form.wxPayMerchantId"
              placeholder="请输入商户ID"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密钥"
            prop="remark"
          >
            <el-input
              type="textarea"
              v-model="form.wxPayKey"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-form
          v-if="plamPayType === 2"
          :model="form"
          :rules="rule"
          ref="form"
          label-width="100px"
          class="demo-form"
        >
          <el-form-item
            label="商户ID"
            prop="status"
          >
            <el-input
              v-model="form.alipayPId"
              placeholder="请输入商户ID"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="商户私钥"
            prop="remark"
          >
            <el-input
              type="textarea"
              v-model="form.alipayKey"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="支付宝公钥"
            prop="remark"
          >
            <el-input
              type="textarea"
              v-model="form.alipayPublicKey"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="resetForm('form')"
        >取 消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="setPayConfirm"
        >确认</el-button>
      </div>
    </el-dialog>
    <!-- 支付宝支付 -->

    <!-- 新增弹窗 -->
    <el-dialog
      title="添加"
      :visible.sync="addDialog"
      :close-on-click-modal="false"
      width="600px"
    >
      <div class="ad-modal-content">
        <el-form
          :model="adForm"
          :rules="ruleForm"
          ref="adForm"
          label-width="100px"
          class="demo-form"
        >
          <el-form-item
            label="名称"
            prop="name"
          >
            <el-input
              v-model="adForm.name"
              placeholder="请输入商家名称，将生成昆明供货商"
              size="small"
            ></el-input>
          </el-form-item>
        </el-form>

      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="resetForm('adForm')"
        >取 消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="submitForm('adForm')"
        >确认</el-button>
      </div>
    </el-dialog>

    <sj-list-layer
      :show.sync="ghsModal"
      @confirm="bindGhsConfirmFn"
      @cancel="ghsModal = false"
    ></sj-list-layer>

  </div>
</template>

<script>
import { getFirstHost } from '@/cool/utils';
import MerchantService from '@/service/merchant/index';
import SjService from '@/service/sj/index';
import sjListLayer from '@/components/module/sj-list-layer';
import GhsService from '@/service/ghs/index';

export default {
  name: 'sjList',
  components: {
    sjListLayer
  },
  data () {
    return {
      // x-crud
      app: null,
      wxPayDialog: false,
      dialogTitle: '',
      plamPayType: 1,
      form: {},
      rule: {},
      wxOpen: { wx_mini_base_id: 0, wx_base_id: 0 },
      firstHost: `${getFirstHost()}`,
      addDialog: false,
      adForm: {
        name: '',
      },
      ruleForm: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      ghsModal: false,
      selectSjId: 0
    };
  },
  mounted () {
    this.getWxOpen();
  },
  methods: {
    bindGhsConfirmFn (item) {

      GhsService.bindGhs({ ownSjId: this.selectSjId, sjId: item.id }).then(res => {
        this.$message.success('操作成功!');
        this.ghsModal = false;
      });
    },
    bindGhs (id) {
      this.selectSjId = id;
      this.ghsModal = true;
    },
    wxPayConfigFn () { },
    // 绑定跳转
    bindJump (url) {
      let host = `http://api.pt.${getFirstHost()}`;
      window.open(host + url);
    },
    getWxOpen () {
      this.wxOpen = this.$service.saasWxOpen.getWxOpen();
    },
    selGoodsConfirmFn (val) {
      console.log(val)
    },
    // crud
    onLoad ({ ctx, app }) {
      this.app = app;
		/**姜枫 2021.05.04**/
      ctx.service(this.$service.merchant)
        .set('table', {
          columns: [
            {
              prop: 'id',
              label: 'ID',
              align: 'center'
            },
            {
              prop: 'name',
              label: '名称',
              align: 'center'
            },
            {
              prop: 'currentStyle',
              label: '类型',
              align: 'center'
            },
            {
              prop: 'shopNum',
              label: '门店数',
              align: 'center'
            },
            {
              prop: 'deadline',
              label: '有效期',
              align: 'center'
            },
            {
              prop: 'setName',
              label: '套餐',
              align: 'center'
            },
            {
              prop: 'status',
              label: '状态',
              align: 'center'
            }
          ],
          // 操作列
          op: {
            layout: ['slot-op-btn']
          }
        })
		  .set('dict', {
			  search: {
				  keyWord: 'name'
			  }
		  })
		  .set('search', {
			  key: {
				  placeholder: '商家名称'
			  }
		  })
        .set('layout', [
          ['slot-activation',  'search-key', 'flex1', 'slot-add-ad-btn', 'refresh-btn'],
          ['data-table'],
          ['flex1', 'pagination']
        ])
        .done();
      app.refresh();
    },

    payOption (type, data) {
      this.plamPayType = type;
      this.$service.saasShop.merchantExtend({ id: data.id }).then(res => {
        this.form = { ...res };
        this.wxPayDialog = true;
        switch (type) {
          case 1: //微信
            this.dialogTitle = '微信支付设置';
            break;
          case 2: //支付宝
            this.dialogTitle = '支付宝支付设置';
            break;
        }
      });
    },
    setPayConfirm () {
      let plamPayType = this.plamPayType;
      switch (plamPayType) {
        case 1: //微信
          var data = {
            sjId: this.form.sjId,
            wxPayMerchantId: this.form.wxPayMerchantId,
            wxPayKey: this.form.wxPayKey
          };
          this.$service.saasShop.setWxPay(data).then(res => {
            this.resetForm();
            this.$message('成功');
          });
          break;
        case 2: //支付宝
          var data = {
            sjId: this.form.sjId,
            alipayPId: this.form.alipayPId,
            alipayKey: this.form.alipayKey,
            alipayPublicKey: this.form.alipayPublicKey
          };
          this.$service.saasShop.setAlipa(data).then(res => {
            this.resetForm();
            this.$message('成功');
          });
          break;
      }
    },
    resetForm (formName) {
      let formNamed = formName || 'form';
      this.$refs[formNamed].resetFields();
      this.wxPayDialog = false;
      this.addDialog = false;
    },
    addBtnFn () {
      this.addDialog = true;
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addFn(formName);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addFn (formName) {
      let adForm = JSON.parse(JSON.stringify(this.adForm));
      SjService.add(adForm).then(res => {
        this.$message.success('操作成功!');
        this.app.refresh();
        this.resetForm(formName);
        this.addDialog = false;
      });
    },
  }
};
</script>
<style lang="scss">
.icondagou {
	color: green;
	font-weight: bold;
}
</style>

<style lang="stylus" scoped>
.liu-crud-wrap >>> .el-row--0 {
  top: 0;
  left: 0;
  width: 100% !important;
}

.pay {
  display: flex;
  align-items: center;
  justify-content: center;

  i {
    font-size: 20px;
    margin-right: 5px;
  }

  &.on {
    i {
      color: #67C23A;
    }
  }

  &.off {
    i {
      color: #909399;
    }
  }
}
</style>
