<template>
    <div>

      <el-table v-loading="loading" :data="tagsList" @selection-change="handleSelectionChange">
        <el-table-column label="创建人" align="center" prop="createName" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['shop:tags:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['shop:tags:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改自动打标签主对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
        <el-form v-if="form.type==='2'" ref="form" :model="form" :rules="rules" label-position="left"  label-width="120px">
          <div class="app-container">
            <div>
              <span style="font-size: 15px">规则基础信息</span>
              <el-divider></el-divider>
            </div>
            <el-alert
              title="根据规则，当客户在设定时间段内成为企业微信客户，将自动被打上标签"
              type="warning"
              style="font-size: 15px;margin-bottom: 2%;"
              :closable="false"
              show-icon>
            </el-alert>
            <el-form-item label="规则名称:" prop="ruleName" style="width: 400px">
              <el-input v-model="form.ruleName" placeholder="请输入规则名称(内部可见)" />
            </el-form-item>

            <div style="margin-top: 5%">
              <span style="font-size: 15px">设置打标签的规则</span>
              <el-divider></el-divider>
            </div>
            <div style="background-color: #fbfbfb;padding: 10px;  border: 1px solid #e6e6e6; margin-bottom: 20px;">
              <el-form ref="from"  :rules="rules" :model="form">
                <div style="display: flex; gap: 10px;">
                </div>
              </el-form>
            </div>

          </div>
        </el-form>
        <el-form v-if="form.type==='3'" ref="form" :model="form" :rules="rules" label-width="80px">

          <el-form-item label="规则名称" prop="ruleName">
            <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
          </el-form-item>
          <el-form-item label="生效成员：" prop="applyUsers">
            <div>
              <el-button
                size="mini"
                icon="el-icon-circle-plus-outline"
                plain
                @click="handlelistUser">请选择使用成员</el-button>
            </div>
            <div>
              <el-tag
                style="margin-left: 5px"
                size="medium"
                :key="list.id"
                v-for="list in userSelectList"
                closable
                :disable-transitions="false"
                @close="handleClosegroupUser(list)">
                {{list.nickName}}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="打标签总数" prop="totalNumTags">
            <el-input v-model="form.totalNumTags" placeholder="请输入打标签总数" />
          </el-form-item>
          <el-form-item label="今日打标签数" prop="numTagsTaday">
            <el-input v-model="form.numTagsTaday" placeholder="请输入今日打标签数" />
          </el-form-item>
          <el-form-item label="是否运用规则状态 1启用 2停用" prop="isApply">
            <el-input v-model="form.isApply" placeholder="请输入是否运用规则状态 1启用 2停用" />
          </el-form-item>
          <el-form-item label="公司id" prop="companyId">
            <el-input v-model="form.companyId" placeholder="请输入公司id" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

    <!-- 选择成员账号弹窗   -->
    <el-dialog :title="listUser.title" :visible.sync="listUser.open" style="width: 1600px;height: 100%" append-to-body>
      <qwUserList ref="QwUserList" @selectUserList="selectUserList"></qwUserList>
    </el-dialog>
  </div>

</template>

<script>
import { listTags, getTags, delTags, addTags, updateTags, exportTags } from "@/api/qw/autoTags";
import qwUserList from '@/views/qw/user/qwUserList.vue'

export default {
  name: "autoTags",
  components: { qwUserList },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      activeName:'2',
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 自动打标签主表格数据
      tagsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      //选择成员列表
      listUser:{
        title:"",
        open:false
      },
      //选择成员列表
      userSelectList:[],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        createName: null,
        applyUsers: null,
        ruleName: null,
        rulesTags: null,
        totalNumTags: null,
        numTagsTaday: null,
        isApply: null,
        companyId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        ruleName:[{ required: true, message: "规则名称不能为空", trigger: "blur" }],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //选择的标签页
    handleClick(tab, event) {
      this.queryParams.type=tab.name
      this.getList();
    },

    //选择群发的企业成员账号
    handlelistUser(){
      this.listUser.title="选择企业成员"
      this.listUser.open=true;
    },
    //选择的成员账号列表
    selectUserList(list){

      this.listUser.open=false;
      //用于显示
      this.userSelectList=list;

    },
    //删除一些选择了的账号
    handleClosegroupUser(list){

      // 假设 list 对象具有一个 id 属性
      const index = this.userSelectList.findIndex(t => t.id === list.id);
      if (index !== -1) {
        this.userSelectList.splice(index, 1);
      }
    },

    /** 查询自动打标签主列表 */
    getList() {
      this.loading = true;
      listTags(this.queryParams).then(response => {
        this.tagsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        type: null,
        createName: null,
        applyUsers: null,
        ruleName: null,
        rulesTags: [{rules:[],tags:[]}],
        totalNumTags: null,
        numTagsTaday: null,
        isApply: null,
        createTime: null,
        companyId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset();
      this.form.type=row
      this.open = true;
      this.title = "添加规则";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getTags(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改自动打标签主";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTags(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTags(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除自动打标签主编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delTags(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },

  }
};
</script>
