<template>
  <div v-if="pageStatus == 0">配置加载中...</div>
  <div v-else-if="pageStatus == 1">此页面只对站点用户开发</div>
  <div v-else-if="pageStatus == 4">
    <div
      style="
        width: 450px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 60px;
        border: 1px solid red;
        box-sizing: border-box;
        padding: 20px;
      "
    >
      <div style="color: red; font-size: 12px">
        <span style="display: inline-block; width: 20px"> </span>
        1、标签用于对不同用户群体进行区别定价。
      </div>
      <div style="color: red; font-size: 12px">
        <span style="display: inline-block; width: 20px"> </span>
        2、标签的优先级高于营销方案。所以将用户加入标签后，此用户将优先执行标签的优惠规则，不会再执行营销方案。
      </div>
    </div>

    <el-form
      :model="labelForm"
      ref="labelForm"
      label-width="90px"
      style="width: 400px; margin: 0 auto"
      label-position="left"
    >
      <el-form-item
        label="启用标签"
        prop="labelFlag"
        :rules="{
          required: true,
          message: '请选择是否开启标签',
          trigger: 'change',
        }"
      >
        <el-radio-group v-model="labelForm.labelFlag" :disabled="editable">
          <el-radio label="0">关闭</el-radio>
          <el-radio label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <div
        v-if="
          labelForm.labelFlag == 1 && (labelForm.labelArr || []).length == 0
        "
      >
        <el-form-item label=" ">
          您没有添加标签，所以标签功能尚未生效
        </el-form-item>
      </div>
      <div v-if="labelForm.labelFlag == 1">
        <el-form-item
          v-for="(label, index) in labelForm.labelArr"
          :label="'标签' + (index + 1)"
          :key="index"
          :prop="'labelArr.' + index + '.labelName'"
          :rules="{
            required: true,
            message: '标签不能为空,不需要请删除此项',
            trigger: 'blur',
          }"
        >
          <el-input v-model="label.labelName" :disabled="editable"></el-input>
          <el-popconfirm
            title="此标签在用，删除前请仔细检查，是否删除？"
            confirm-button-text="删除"
            @onConfirm="removeLabel(label)"
            v-if="!!label.id"
          >
            <el-button
              slot="reference"
              :disabled="editable"
              :loading="label.loading"
              >删除</el-button
            >
          </el-popconfirm>
          <el-button
            @click="removeLabel(label)"
            :disabled="editable"
            :loading="label.loading"
            v-else
            >删除</el-button
          >
        </el-form-item>
      </div>
      <el-form-item>
        <el-button
          @click="addLabel"
          :disabled="editable"
          v-show="labelForm.labelFlag == 1"
          >新增</el-button
        >
        <el-button type="danger" @click="editLabel">{{
          editable ? "修改标签" : "取消"
        }}</el-button>
        <el-button
          type="primary"
          @click="submitForm('labelForm')"
          :disabled="editable"
          v-show="!editable"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { sysDeptDemoList, addlabel, selectLabel } from "@/api/label/label";

export default {
  name: "Label_AddLabel",
  data() {
    return {
      labelForm: {
        labelFlag: "0",
        labelArr: [
          {
            id: "",
            labelName: "hah",
          },
        ],
        delArr: [],
      },
      editable: true,
      tempForm: undefined,
      pageStatus: 0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.setPageStatus();
      this.getList();
    },
    setPageStatus() {
      this.queryPageStatus([2]).then((res) => {
        this.pageStatus = res;
      });
    },
    test() {},
    getList() {
      return sysDeptDemoList().then((res) => {
        if (res.code == 200) {
          this.labelForm = res.data;
          this.labelForm.delArr = [];
        } else {
          this.msgError("初始化数据失败");
        }
      });
    },
    submitForm(labelForm) {
      this.$refs[labelForm].validate((valid) => {
        if (valid) {
          addlabel(this.labelForm).then((res) => {
            if (res.code == 200) {
              this.getList().then((res) => {
                this.editable = true;
                this.msgSuccess("标签提交成功！");
              });
            } else {
              this.msgError("标签提交时出现错误，请刷新重试！");
            }
          });
        }
      });
    },
    resetForm(labelForm) {
      this.$refs[labelForm].resetFields();
    },
    removeLabel(item) {
      item.loading = true;
      this.labelForm = { ...this.labelForm };
      if (!item.id) {
        var index = this.labelForm.labelArr.indexOf(item);
        if (index !== -1) {
          this.labelForm.labelArr.splice(index, 1);
        }

        item.loading = false;
        this.labelForm = { ...this.labelForm };
        return;
      }
      selectLabel({
        labelId: item.id,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.labelForm.delArr.push(item.id);
            var index = this.labelForm.labelArr.indexOf(item);
            if (index !== -1) {
              this.labelForm.labelArr.splice(index, 1);
            }
            item.loading = false;
            this.labelForm = { ...this.labelForm };
          } else {
            this.msgError("请先清空标签下的成员之后，再来删除标签操作");
            item.loading = false;
            this.labelForm = { ...this.labelForm };
          }
        } else {
          this.msgError("查询标签状态失败，请重试");
          item.loading = false;
          this.labelForm = { ...this.labelForm };
        }
      });
    },
    addLabel() {
      this.labelForm.labelArr.push({
        labelName: "",
        key: Date.now(),
      });
    },
    editLabel() {
      if (!this.editable) {
        if (this.tempForm !== undefined) {
          this.labelForm = JSON.parse(this.tempForm);
          this.labelForm.delArr = [];
        }
      } else {
        this.tempForm = JSON.stringify({ ...this.labelForm });
      }
      this.editable = !this.editable;
    },
  },
};
</script>
<style scoped lang="scss">
</style>