<template>
  <div>
    <Row class="search-row">
      <i-col span="24" class="search-col">
        <Row class="row-style">
          <i-col span="12" style="text-align: left;padding-right: 20px;">
            <Button type="primary" @click="back()">返回</Button>
          </i-col>
          <i-col span="12" style="text-align: right;padding-right: 20px;">
            <Button type="primary" @click="open(1)">添加推广人员</Button>
          </i-col>
        </Row>
      </i-col>
    </Row>

    <Table
      :columns="columns1"
      :data="data1"
      style="margin-top: 20px;"
      size="small"
    >
      <template slot-scope="{ row }" slot="qrCodeAction">
        <img
          :src="require('../../../static/img/qrCode-init.png')"
          @click="show(row)"
          style="margin-left: 5px;margin-top: 5px;width:30px;height:30px;"
        />
      </template>
      <template slot-scope="{ row, index }" slot="state">
        <i-switch
          size="large"
          :value="row.qrCodeState"
          @on-change="onSwitchChangeLister(row, index)"
        >
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </template>

      <template slot-scope="{ row }" slot="action">
        <Button
          ghost
          type="primary"
          size="small"
          style="border: 0px;color:#2074E2"
          @click="open(2, row)"
          >修改
        </Button>
        <Button
          ghost
          type="error"
          size="small"
          style="border: 0px"
          @click="remove(row)"
          >删除</Button
        >
      </template>
    </Table>

    <!-- 预览二维码 -->
    <Modal
      v-model="isShow"
      :footer-hide="true"
      width="230"
      class-name="vertical-center-modal"
    >
      <div slot="header">
        <p></p>
      </div>
      <p>{{ this.showStoreCode }}</p>
      <p>{{ this.showStoreName }}</p>
      <img :src="qrCodeImage" style="width:200px;height:200px;" />
      <div style="text-align: center;">
        <Button ghost type="primary" @click="download(rowData)">下载</Button>
      </div>
    </Modal>

    <!-- 添加推广人员 -->
    <Modal v-model="isShowAdd" :footer-hide="true">
      <div slot="header">
        <template v-if="flag === 1">
          <span>添加推广人员</span>
        </template>
        <template v-else>
          <span>修改推广人员</span>
        </template>
      </div>

      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <FormItem label="名称" prop="name">
          <i-input
            v-model="formValidate.name"
            placeholder="请输入名字"
          ></i-input>
        </FormItem>
        <FormItem label="手机" prop="phone">
          <i-input
            v-model="formValidate.phone"
            placeholder="成员通过验证该手机号后可加入企业"
            :disabled="flag !== 1 ? true : false"
          >
          </i-input>
        </FormItem>
        <FormItem label="工号" prop="staffCode">
          <i-input
            v-model="formValidate.staffCode"
            placeholder="请输入工号"
            :disabled="flag !== 1 ? true : false"
          ></i-input>
        </FormItem>
        <FormItem label="角色" prop="role">
          <Select
            v-model="formValidate.role"
            placeholder="选择角色"
            :disabled="flag !== 1 ? true : false"
          >
            <Option value="DZ-DIANZHANG">店长</Option>
            <Option value="DG-DAOGOU">导购</Option>
          </Select>
        </FormItem>
        <FormItem v-if="flag === 1" label="" prop="checkbox">
          <CheckboxGroup v-model="formValidate.checkbox">
            <Checkbox label="vail">同步开通账号</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem style="text-align: left;">
          <Row>
            <i-col span="16">
              <Button type="primary" @click="handleSubmit(formValidate)"
                >保存</Button
              >
              <Button
                @click="handleReset('formValidate')"
                style="margin-left: 8px"
                >取消</Button
              >
            </i-col>
          </Row>
        </FormItem>
      </Form>
    </Modal>

    <Modal
      v-model="modal13"
      title="删除提示"
      @on-cancel="cancel"
      align="center"
    >
      <p style="margin-top: 20px;margin-bottom: 20px">
        确定要删除此账户吗？删除后不可恢复
      </p>
      <div
        slot="footer"
        style="text-align: center;margin-bottom: 10px;margin-top: 10px"
      >
        <Button style="width: 100px;" @click="modal13 = false">取消删除</Button>
        <Button
          type="error"
          style="width: 100px;margin-left: 20px"
          @click="deleteStaff"
          >确认删除</Button
        >
      </div>
    </Modal>

    <Page
      :total="total"
      :current="pageNum"
      :page-size="pageSize"
      show-elevator
      show-total
      placement="top"
      @on-change="handlePage"
      class="ks-page"
    ></Page>
  </div>
</template>

<script>
import data from "../../utils/PhoneRegionData";
import http from "../../services/store/IncreaseStoreManager";

import staff from "../../services/staff/staff";

export default {
  name: "IncreaseStaffManager",
  inject: ["setMenuName"],
  data() {
    return {
      modal13: false,
      deleteId: null,
      userId: 13,
      // 标记 1添加 2修改
      flag: 1,
      prefixDefault: data.prefixDefault,
      isShow: false,
      isShowAdd: false,
      showStoreName: "",
      showStoreCode: "",
      qrCodeImage: "",
      loading: true,
      spuLoading: false,
      // 分页
      total: 0,
      pageSize: 10,
      pageNum: 1,
      selectedRegion: null,
      regionList: [],
      selectedStore: this.$route.query.storeId,
      storeList: [],
      shopList: [],
      roleList: [],
      rowData: {},
      rules: { required: false },
      columns1: [
        {
          title: "序号",
          key: "id",
        },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "员工ID",
          key: "staffCode",
        },
        {
          title: "手机号码",
          key: "mobil",
        },
        {
          title: "店铺",
          key: "storeName",
        },
        {
          title: "角色",
          key: "role",
        },
        {
          title: "客户数",
          key: "customerNum",
        },
        {
          title: "推广码",
          slot: "qrCodeAction",
          key: "epWechatQrCode",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      data1: [],
      // 开通企业微信 表单
      formValidate: {
        name: "",
        staffCode: "",
        region: "",
        phone: "",
        role: "",
        store: "",
        userId: "",
        checkbox: ["vail"],
      },
      ruleValidate: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        staffCode: [
          { required: true, message: "工号不能为空", trigger: "blur" },
        ],
        // mail: [
        //     { required: true, message: '邮箱不能为空', trigger: 'blur' },
        //     { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
        // ],
        role: [{ required: true, message: "请选择角色", trigger: "change" }],
        region: [
          {
            required: true,
            type: String,
            message: "请选择区域",
            trigger: "change",
          },
        ],
        store: [
          {
            required: true,
            type: String,
            message: "请选择店铺",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.setMenuName("门店推广", "推广管理", "门店导购管理");
    this.listOfLogistics();
  },
  methods: {
    cancel: function() {},
    listOfLogistics() {
      let that = this;
      let request = {
        shopId: that.selectedStore,
        pageNum: that.pageNum,
        pageSize: that.pageSize,
      };
      staff.getStaffList(request, function(data) {
        data = data.data;
        if (data.code == "0000") {
          that.data1 = [];
          let datas = data.results;
          //总页数
          if (datas.total == null) {
            that.total = 0;
          } else {
            that.total = datas.total;
          }
          if (datas.records == null) {
            datas.records = [];
          }
          that.data1 = datas.records;
        }
      });
    },
    //区域用户下的区域
    downRegionData: function() {
      let that = this;
      that.regionList = [{ id: 0, name: "全部" }];
      let request = { userId: that.userId };
      staff.downRegionData(request, function(data) {
        data = data.data.results;
        if (data) {
          for (let i = 0; i < data.length; i++) {
            let entity = data[i];
            if (entity) {
              that.regionList.push(entity);
            }
          }
        }
      });
    },
    downShopData: function() {
      let that = this;
      that.shopList = [{ id: 0, name: "全部" }];
      let request = {
        userId: that.userId,
        regionId: that.changeData(that.selectedRegion),
      };
      staff.downShopData(request, function(data) {
        data = data.data.results;
        if (data) {
          for (let i = 0; i < data.length; i++) {
            let entity = data[i];
            if (entity) {
              that.shopList.push(entity);
            }
          }
        }
      });
    },
    downRoleData: function() {
      let that = this;
      staff.downRoleData({}, function(data) {
        data = data.data.results;
        if (data) {
          for (let i = 0; i < data.length; i++) {
            let entity = data[i];
            if (entity) {
              that.roleList.push(entity);
            }
          }
        }
      });
    },
    addSattf: function(request) {
      let that = this;
      staff.addSattf(request, function(data) {
        data = data.data;
        if (data.code == "0000") {
          if (data.results == "0001") {
            that.$Message.error("添加失败!");
          } else if (data.results == "0002") {
            that.$Message.error("该工号已经被使用!");
          } else if (data.results == "0003") {
            that.$Message.error("该手机号已经被使用!");
          } else if (data.results == "0004") {
            that.$Message.error("该工号已经被使用!");
          } else if (data.results == "0000") {
            that.$Message.success("添加成功!");
            that.handleAdd(that.formValidate);
            that.listOfLogistics();
          }
        }
      });
    },
    editSattf: function(request) {
      let that = this;
      staff.editSattf(request, function(data) {
        data = data.data;
        if (data.code == "0000") {
          that.$Message.success("修改成功!");
          that.isShowAdd = false;
          that.listOfLogistics();
        }
      });
    },

    searchCustomerDataBtnClick: function() {
      this.listOfLogistics();
    },
    changeData: function(value) {
      if (value == 0) {
        return null;
      }
      return value;
    },
    //切页处理
    handlePage: function(value) {
      this.pageNum = value;
      this.listOfLogistics();
    },
    downRegionChange: function() {
      this.downShopData();
    },
    onChangeDateLister: function() {},
    // 预览二维码
    show: function(index) {
      this.isShow = true;
      this.showStoreName = "姓名:" + index.name;
      this.showStoreCode = "工号:" + index.staffCode;
      this.qrCodeImage = index.epWechatQrCode;
      this.rowData = index;
    },
    // 下载二维码
    download: function(index) {
      let name = index.staffCode + "-" + index.name + "-导购码";
      http.downloadImg(
        {
          url: index.epWechatQrCode,
        },
        name,
        function(/*data*/) {}
      );
    },
    // 添加、修改推广人员
    open: function(flag, row) {
      this.flag = flag;
      this.isShowAdd = true;
      let role;

      if (row && row.type) {
        if (row.type === 1) {
          role = "DZ-DIANZHANG";
        } else {
          role = "DG-DAOGOU";
        }
      }

      if (flag == 2) {
        this.formValidate = {
          name: row.name,
          staffCode: row.staffCode,
          phone: row.mobil,
          role: role,
          store: row.storeId,
          userId: row.userId,
          id: row.id,
        };
      } else {
        this.handleAdd(this.formValidate);
      }
    },
    back: function() {
      this.$router.push({ path: "/shop/increase/manager" });
    },
    // 删除
    remove: function(row) {
      this.modal13 = true;
      this.deleteId = row.id;
    },
    // 删除
    deleteStaff: function() {
      let requset = {
        staffId: this.deleteId,
      };
      let that = this;
      staff.removeStaff(requset, function(data) {
        data = data.data;
        if (data.results) {
          that.$Message.success("删除成功!");
          that.modal13 = false;
          that.listOfLogistics();
        } else {
          that.$Message.success("删除失败!");
        }
      });
    },
    // switch开关
    onSwitchChangeLister: function() {},
    handleSubmit(value) {
      if (value) {
        let request = {};
        if (this.flag == 1) {
          if (value.name == null || value.name == "") {
            this.$Message.success("名称不能为空!");
            return;
          }
          if (value.staffCode == null || value.staffCode == "") {
            this.$Message.success("工号不能为空!");
            return;
          }
          if (value.role == null || value.role == "") {
            this.$Message.success("角色不能为空!");
            return;
          }
          // 调用添加接口
          request = {
            name: value.name,
            storeId: this.selectedStore,
            mobil: value.phone,
            staffCode: value.staffCode,
            role: value.role,
            isOpen: this.formValidate.checkbox[0],
          };
          this.addSattf(request);
        } else {
          let newRole;
          if (value.role === "DZ-DIANZHANG") {
            newRole = 1;
          } else {
            newRole = 4;
          }

          request = {
            name: value.name,
            storeId: this.selectedStore,
            mobil: value.phone,
            staffCode: value.staffCode,
            roleId: newRole,
            userId: this.formValidate.userId,
            id: this.formValidate.id,
          };
          //修改接口
          this.editSattf(request);
        }
      } else {
        this.$Message.error("Fail!");
      }
    },
    handleReset(name) {
      this.$refs[name].resetFields();
      this.isShowAdd = false;
    },
    handleAdd(value) {
      value.name = "";
      value.store = "";
      value.phone = "";
      value.staffCode = "";
      value.role = "";
      value.region = "";
      value.checkbox = ["vail"];
    },
  },
};
</script>

<style scoped>
.table-staff {
  margin-top: 20px !important;
}
</style>
