<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="shopInfo" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="type">
            <el-tooltip
              slot="label"
              class="item"
              effect="dark"
              placement="top-start"
            >
              <div slot="content">
                独立券：本店铺单独代金券，用户领取后只可在本店铺使用<br />
                连锁券：所添加店铺共有，用户在所添加店铺中都可使用该代金券
                <br />
                联合券：与其他店铺联合发布该代金券，用户所添加店铺都可使用该代金券
              </div>
              <span><i class="el-icon-question"></i>代金券类型</span>
            </el-tooltip>

            <el-radio-group v-model="shopInfo.type" :disabled="$route.query.id">
              <el-radio :label="1" :name="1">独立券</el-radio>
              <el-radio :label="2" :name="2">连锁券</el-radio>
              <el-radio :label="3" :name="3">联合券</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="shopInfo.type == 3 || shopInfo.type == 2">
            <template v-if="$route.query.id">
              <el-button type="primary" size="mini" @click="shopDialog = true">
                <span v-if="shopInfo.inviteStoreNum">
                  已选择{{
                    storeNum + parseInt(shopInfo.inviteStoreNum)
                  }}个店铺</span
                >
                <span v-else-if="storeNum && !shopInfo.inviteStoreNum">
                  已选择{{ storeNum }}个店铺</span
                >
                <span v-else> 选择店铺</span>
              </el-button>

              <span style="color: orange; margin-left: 20px">
                <span v-if="shopInfo.agreeStoreNum"
                  >{{ shopInfo.agreeStoreNum }}个店铺已同意,</span
                >
                <span v-else>0个店铺已同意,</span>

                <span v-if="shopInfo.refuseStoreNum"
                  >{{ shopInfo.refuseStoreNum }}个店铺已拒绝,</span
                >
                <span v-else>0个店铺已拒绝,</span>
                等待剩余
                <span v-if="shopInfo.auditStoreNum"
                  >{{
                    storeNum + parseInt(shopInfo.auditStoreNum)
                  }}个店铺审核,</span
                >
                <span v-else>{{ storeNum ? storeNum : 0 }}个店铺审核,</span>
              </span>
            </template>

            <template v-else>
              <el-button type="primary" size="mini" @click="selectshop">
                {{ storeNum ? "已选择" + storeNum + "个店铺" : "选择店铺" }}
              </el-button>
              <span v-if="storeNum" style="color: orange; margin-left: 20px"
                >等待所选店铺审核</span
              >
            </template>
          </el-form-item>

          <el-form-item prop="showType">
            <el-tooltip
              slot="label"
              class="item"
              effect="dark"
              placement="top-start"
            >
              <div slot="content">
                全网自动推出：该代金券在店铺首页透出，用户在店铺中可直接领取代金券，下单抵扣，直到发放的代金券被领取完<br />
                定向渠道推广：以供店铺设置抽奖活动使用，中奖用户奖自动发放该优惠券，其他用户无法领取，且该代金券不在店铺首页进行透出
              </div>
              <span><i class="el-icon-question"></i>推广方式</span>
            </el-tooltip>

            <el-radio-group v-model="shopInfo.showType">
              <el-radio :label="0" :name="0">全网自动推出</el-radio>
              <el-radio :label="1" :name="1">定向渠道推广</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="名称" prop="title">
            <el-input
              type="text"
              style="width: 300px"
              placeholder="请输入代金券名称"
              v-model="shopInfo.title"
              :show-word-limit="true"
              :maxlength="12"
            ></el-input>
          </el-form-item>
          <el-form-item label="代金券金额" prop="sendAmount">
            <el-input-number
              v-model="shopInfo.sendAmount"
              style="width: 300px"
              :controls="false"
              max="9999"
              min=""
              step="1"
              precision="0"
            ></el-input-number>

             元
          </el-form-item>
          <el-form-item label="代金券数量" prop="sendNum">
            <el-input-number
              v-model="shopInfo.sendNum"
              style="width: 300px"
              :controls="false"
              max="9999"
              min=""
            ></el-input-number
            > 张
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          style="margin-top: 30px; text-align: center"
          v-if="$route.query.type != 'look'"
        >
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog
      :visible.sync="shopDialog"
      width="50%"
      :destroy-on-close="true"
      @close="close"
    >
      <div slot="title" style="padding: 0px 20px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="选择店铺" name="1"></el-tab-pane>
          <el-tab-pane label="已选择店铺" name="2"></el-tab-pane>
        </el-tabs>
      </div>
      <unionStore
        v-if="shopInfo.type == 3"
        @tabSelect="tabSelect"
        :type="activeName"
        :data="tabSelects"
        :voucherid="$route.query.id"
        :lookType="$route.query.type"
        :oldShopIds="shopInfo.oldShopIds"
      ></unionStore>

      <chainStore
        v-if="shopInfo.type == 2"
        @tabSelect="tabSelect"
        :type="activeName"
        :data="tabSelects"
        :voucherid="$route.query.id"
        :lookType="$route.query.type"
        :oldShopIds="shopInfo.oldShopIds"
      ></chainStore>
      <span
        slot="footer"
        class="dialog-footer"
        v-if="$route.query.type != 'look'"
      >
        <el-button @click="shopDialog = false">取 消</el-button>
        <el-button type="primary" @click="shopDialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { voucherSave, voucherInfo } from "@/api/marketing/voucher";
import chainStore from "./components/stores-list/index.vue";
import unionStore from "./components/stores-list/union.vue";
export default {
  components: { chainStore, unionStore },
  data() {
    return {
      activeName: "1",
      shopDialog: false,
      shop: {
        key: "",
      },
      rules: {
        type: [{ required: true, message: "请选择券类型", trigger: "blur " }],
        showType: [
          { required: true, message: "请选择推广方式", trigger: "blur " },
        ],
        title: [{ required: true, message: "请输入券名称", trigger: "blur " }],
        sendAmount: [
          { required: true, message: "请输入发放金额", trigger: "blur " },
        ],
        sendNum: [
          { required: true, message: "请输入发放数量", trigger: "blur " },
        ],
      },
      shopInfo: {
        type: 1,
        showType: 0,
      },
      tabSelects: [],
      storeNum: 0,
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.getStoresInfo();
    }
    // this.getInfo();
  },
  methods: {
    close() {
      // this.activeName = "1";
    },
    selectshop() {
      this.shopDialog = true;
    },
    getStoresInfo() {
      voucherInfo(this.$route.query.id).then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
        }
      });
    },
    async shopDialogSubmit() {
      this.storeNum = this.tabSelects.length;
      this.shopDialog = false;
      if (this.$route.query.id) {
        this.getStoresInfo();
      }
    },
    tabSelect(val) {
      this.tabSelects = val;
    },
    submitForm() {
      let a = this.tabSelects;
      const selectedIds = a.map((item) => item.id);
      this.shopInfo.shopIds = selectedIds.toString();
      this.$refs.form.validate((valid) => {
        if (valid) {
          voucherSave(this.shopInfo).then((res) => {
            if (res.code == 200) {
              this.$message.success("保存成功！");
              this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
              this.$router.replace({
                path: "/marketing/marketing/voucher/index",
              });

              this.getInfo();
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getInfo() {
      getStoreInfo().then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
        }
      });
    },
  },
};
</script>

<style>
.el-dialog__body {
  padding: 0px 20px;
}
</style>
