<template>
  <ContainerTit>
    <div slot="headr">
      <el-button
        :loading="loading"
        :disabled="!!$route.params.id"
        @click="tempData"
      >
        暂存
      </el-button>
      <el-button type="primary" :loading="loading" @click="submitBrand">
        保存提交
      </el-button>
    </div>
    <el-card class="box-card" style="padding-left: 100px">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <el-form-item label="合伙企业/人头像：" prop="logo">
          <UploadQiniu
            :file-list="img_list"
            @uploadSuccess="uploadSuccess"
            @handleRemove="uploadRemove"
          />
        </el-form-item>
        <el-form-item label="合伙企业/人名称：" prop="name">
          <el-input
            v-model="form.name"
            placeholder="输入合伙企业/人名称"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="经营模式：" prop="model">
          <el-select
            v-model="form.model"
            style="width: 300px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in model_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合伙人地址：" prop="provinceCode">
          <span v-if="custom_id">
            <RegionSelect
              v-if="region.length"
              v-model="region"
              size="medium"
              @change="regionChange"
            />
          </span>
          <span v-else>
            <RegionSelect
              v-model="region"
              size="medium"
              @change="regionChange"
            />
          </span>
        </el-form-item>
        <el-form-item label="详细地址：" prop="address">
          <el-input
            v-model="form.address"
            placeholder="请输入详细地址"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="userCenterId" label="负责人：">
          <el-select
            v-model="form.userCenterId"
            style="width: 300px"
            placeholder="请选择"
            @change="managerChange"
          >
            <el-option
              v-for="item in ManagerList"
              :key="item.id"
              :label="item.name"
              :value="item.userCenterId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="mobile" label="负责人电话：">
          <el-input
            v-model="form.mobile"
            placeholder="请输入有效电话"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item prop="shopId" label="选择管理的商铺：">
          <el-tag
            v-for="(tag, index) in selShopList"
            :key="index"
            closable
            :type="tag.type"
            @close="shopClose(index)"
          >
            {{ tag.name }}
          </el-tag>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="show_shop = true"
          >
            选择
          </el-button>
          <!--          <el-input-->
          <!--            placeholder="选择商铺"-->
          <!--            v-model="shopName"-->
          <!--            readonly-->
          <!--            style="width: 350px"-->
          <!--            @change="selShop"-->
          <!--          >-->
          <!--            <i-->
          <!--              @click="show_shop=true"-->
          <!--              slot="suffix"-->
          <!--              class="el-input__icon el-icon-search"-->
          <!--            ></i>-->
          <!--          </el-input>-->
        </el-form-item>
      </el-form>
    </el-card>
    <GoodsChooseShop
      v-if="show_shop"
      :dialog-visible="show_shop"
      :enable="true"
      @close="show_shop = false"
      @confirm="selShop"
    />
  </ContainerTit>
</template>

<script>
  import RegionSelect from "@/component/common/RegionSelectJSON";
  import GoodsChooseShop from "@/component/goods/GoodsChooseShop";
  import UploadQiniu from "@/component/common/UploadQiniu.vue";
  import {
    getManagerList,
    addShopPartner,
    updateShopPartner,
    getShopPartnerInfo,
  } from "@/api/Shop";
  import { addPauseSave, delPauseSave, getPauseSave } from "@/api/common";

  export default {
    name: "AddPartnership",
    components: {
      RegionSelect,
      GoodsChooseShop,
      UploadQiniu,
    },
    data() {
      const validatePhone = (rule, value, callback) => {
        const re = /^1[3456789]\d{9}$/; // 正则表达式
        if (value === "") {
          callback(new Error("请输入手机号!"));
        } else if (!re.test(value)) {
          callback(new Error("手机号格式有误，请重新输入!"));
        } else {
          callback();
        }
      };
      return {
        selShopList: [],
        loading: false,
        show_shop: false,
        region: [],
        img_list: [],
        ManagerList: [], // 员工列表
        custom_id: "",
        shopName: "",
        form: {
          name: "",
          logo: "",
          districtCode: "",
          provinceCode: "",
          cityCode: "",
          model: 1,
          userCenterId: "",
          address: "",
          mobile: "",
          shopId: 0,
          managerName: "",
        },
        rules: {
          logo: [
            { required: true, message: "请上传企业LOGO", trigger: "change" },
          ],
          name: [
            {
              required: true,
              message: "请输入合伙企业/人名称",
              trigger: "blur",
            },
          ],
          provinceCode: [
            { required: true, message: "请选择合伙人地址", trigger: "change" },
          ],
          model: [
            { required: true, message: "请选择经营模式", trigger: "change" },
          ],
          address: [
            { required: true, message: "请输入详细地址", trigger: "blur" },
          ],
          userCenterId: [
            { required: true, message: "请输入负责人名称", trigger: "blur" },
          ],
          mobile: [
            { required: true, message: "请输入负责人电话", trigger: "blur" },
            { validator: validatePhone, trigger: "blur" },
          ],
        },
        classfy_show: false,
        tree_data: [],
        model_options: [
          { value: 1, label: "直营" },
          { value: 2, label: "加盟" },
        ],
        pageName: "",
        shopNames: [],
      };
    },
    created() {
      this.pageName = this.$route.name;
      if (this.$route.params.id) {
        //  进入客户详情
        this.custom_id = this.$route.params.id;
        this.getShopPartnerInfo();
      } else {
        this.getPauseSave();
      }
      this.getManagerList();
    },
    methods: {
      // 选择图片
      uploadSuccess(val, res, file, fileList) {
        this.form.logo = val;
      },
      uploadRemove() {
        this.form.logo = "";
      },
      managerChange(val) {
        this.form.managerName = this.ManagerList.find((item) => {
          return item.userCenterId === val;
        }).name;
      },
      // 选择店铺
      selShop(val) {
        if (this.selShopList.length) {
          this.selShopList = this.$_common.unique(
            this.selShopList.concat(val),
            ["id"]
          );
        } else {
          this.selShopList = val;
        }
        this.form.shopId = this.selShopList
          .map((item) => {
            return item.id;
          })
          .join(",");
        this.shopNames = this.selShopList.map((item) => {
          return item.name;
        });
      },
      shopClose(index) {
        this.selShopList.splice(index, 1);
      },
      // 客户选择区域
      regionChange(val) {
        this.form.provinceCode = val[0];
        this.form.cityCode = val[1];
        this.form.districtCode = val[2];
      },
      //  获取企业下的管理员(添加合伙人页面下拉列表)
      async getManagerList() {
        const data = await getManagerList();

        this.ManagerList = data.data;
      },
      // 新增暂存
      async tempData() {
        this.loading = true;
        const data = await addPauseSave({
          key: this.pageName,
          data: {
            ...this.form,
            shopNames: this.shopNames,
          },
        });
        this.loading = false;

        this.$message({
          message: "暂存成功",
          type: "success",
        });
        this.$closeCurrentGoEdit("/SystemSettings/liansuoguanli/Partnership");
      },
      // 删除暂存信息
      async delPauseSave() {
        const data = delPauseSave({
          key: this.pageName,
        });
      },
      //  商铺合作添加
      async addShopPartner() {
        this.loading = true;
        const data = await addShopPartner(this.form);
        this.loading = false;

        this.$message({
          message: "提交成功",
          type: "success",
        });
        this.delPauseSave();
        this.$closeCurrentGoEdit("/SystemSettings/liansuoguanli/Partnership");
      },
      //  编辑合作 updateShopPartner
      async updateShopPartner() {
        this.loading = true;
        const data = await updateShopPartner(this.$route.params.id, this.form);
        this.loading = false;

        this.$message({
          message: "编辑成功",
          type: "success",
        });
        this.$closeCurrentGoEdit("/SystemSettings/liansuoguanli/Partnership");
      },
      // 获得暂存详情
      async getPauseSave() {
        const { data } = await getPauseSave({
          key: this.pageName,
        });

        if (JSON.stringify(data) === "{}") return;
        this.form = data;
        if (data.logo !== "") {
          this.img_list = [
            {
              name: "",
              url: data.logo,
            },
          ];
        }

        this.region = [data.provinceCode, data.cityCode, data.districtCode].map(
          (item) => {
            return parseInt(item);
          }
        );
        if (data.shopId) {
          this.selShopList = data.shopNames.map((item) => {
            return {
              name: item,
            };
          });
        }
      },
      //  商铺合作详情 getShopPartnerInfo
      async getShopPartnerInfo() {
        const data = await getShopPartnerInfo(this.$route.params.id);

        this.form = data.data;
        this.img_list = [
          {
            name: "",
            url: data.data.logo,
          },
        ];
        this.region = [
          data.data.provinceCode,
          data.data.cityCode,
          data.data.districtCode,
        ].map((item) => {
          return parseInt(item);
        });
        let shop = [];
        if (data.data.shopId) {
          const arr = data.data.shopId.split(",");
          const arrName = data.data.shopName.split(",");
          for (let i in arr) {
            let item = arr[i];
            shop.push({
              id: item,
              name: arrName[i],
            });
          }
        }
        this.selShopList = shop;
      },
      submitBrand() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.$route.params.id) {
              //    调用编辑
              this.updateShopPartner();
            } else {
              // 创建提交
              this.addShopPartner();
            }
          }
        });
      },
    },
  };
</script>

<style>
  .logoTip {
    font-size: 12px;
    color: #fb6638;
  }
  .yc-upload .el-upload--picture-card {
    display: none;
  }
  /*.yc-upload .el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{*/
  /*  display: none;*/
  /*}*/
</style>
