<template>
  <div class="customerlabel row">
    <div class="col-5 customer-category-content">
      <div class="row header-box">
        <div style="font-weight: 700;">标签分组</div>
        <el-button
          color="accent"
          size="sm"
          class="q-mr-md"
          icon="add"
          @click="EditCategory()"
        >新增分組</el-button>
      </div>
      <div class="category-header">
        <div style="width: 60px;">ID</div>
        <div style="flex:1;text-align: center;">分組名称</div>
        <div class="w90" style="width: 110px;">操作</div>
      </div>
      <div class="category-list">
        <ul>
          <span v-for="(x,y) in this.dataList" :key="y">
            <li @click="getSelectlist(x,y)">
              <div class="category-item" :class="{ 'Selectstyle': this.SelectID == x.Id }">
                <div style="width: 60px;">{{ x.Id }}</div>
                <div style="display: flex;">{{ x.Name }}</div>
                <div class="w90" style="width: 110px;display: flex;">
                  <el-button flat icon="edit" class="icons" @click="getSelectlist(x,y), getParent(x, 1)" />
                  <el-button
                    flat
                    icon="delete"
                    class="icons"
                    @click="getSelectlist(x,y), goDetailed(x.Id)"
                  />
                </div>
              </div>
            </li>
          </span>
          <div
            v-if="this.dataList && this.dataList.length == 0"
            style="width: 100%;height: 50px;line-height: 50px;text-align: center;"
          >暂无数据</div>
        </ul>
      </div>
    </div>

    <div class="col-7 customer-category-content" style="padding-left: 15px;">
      <div class="row header-box">
        <div style="font-weight: 700;">
          标签分组：
          <span style="color: #606266;">{{ this.groupName }}</span>
        </div>
        <el-button
          color="accent"
          size="sm"
          class="q-mr-md"
          icon="add"
          @click="getParent({}, 3)"
        >新增分組</el-button>
      </div>

      <div class="category-header">
        <div style="width: 60px;">ID</div>
        <div style="flex:1;text-align: center;">标签名称</div>
        <div class="w90">使用客户</div>
        <div class="w90">排序</div>
        <div class="w90" style="width: 110px;">操作</div>
      </div>
      <div class="category-list">
        <ul>
          <span v-for="(x,y) in this.ChildList" :key="y">
            <li>
              <div class="category-item" :class="{ 'Selectstyle': this.SelectID == x.Id }">
                <div style="width: 60px;">{{ x.Id }}</div>
                <div style="flex:1;text-align: center;">{{ x.Name }}</div>
                <div class="w90">0</div>
                <div class="w90">{{ x.Sort }}</div>
                <div class="w90" style="width: 110px;display: flex;">
                  <el-button flat icon="edit" class="icons" @click="getParent(x, 2)" />
                  <el-button flat icon="delete" class="icons" @click="goDetailed(x.Id)" />
                </div>
              </div>
            </li>
          </span>
          <div
            v-if="this.ChildList && this.ChildList.length == 0"
            style="width: 100%;height: 50px;line-height: 50px;text-align: center;"
          >暂无数据</div>
        </ul>
      </div>
    </div>

    <el-dialog :visible.sync="isShow" persistent>
      <el-card style="width: 500px; max-width: 80vw;">
        <el-card-section class="row items-center q-pb-none">
          <div class="text-h6">新增标签组</div>
          <el-space />
          <el-button icon="close" flat round dense v-close-popup />
        </el-card-section>
        <el-separator />
        <el-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
          <el-input
            outlined
            counter
            maxlength="8"
            clearable
            standout="bg-primary text-white"
            v-model="addMsg.Name"
            placeholder="标签组名称"
            :rules="[val => !!val || '请输入分组名称']"
            ref="Name"
          />
          <el-input
            outlined
            clearable
            type="number"
            standout="bg-primary text-white"
            v-model="addMsg.Sort"
            placeholder="标签组排序"
            :rules="[val => !!val || '请输入分组排序']"
            ref="Sort"
          />
          <div style="color: #787878;">*注:标签组/标签,排序值越大,排序越靠前！</div>
          <div
            style="width: 100%;"
            v-if="addMsg.ChildList && addMsg.ChildList.length > 0"
          >
            <div
              class="col row wrap q-mr-lg q-col-gutter-md"
              v-for="(x,y) in addMsg.ChildList"
              :key="y"
              style="margin-top: 0px;"
            >
              <div class="col-7">
                <el-input
                  outlined
                  counter
                  maxlength="15"
                  clearable
                  standout="bg-primary text-white"
                  v-model="x.Name"
                  placeholder="输入标签名称"
                />
              </div>
              <div class="col-3">
                <el-input
                  filled
                  standout="bg-primary text-white"
                  v-model="x.Sort"
                  
                  placeholder="输入排序"
                  maxlength="20"
                  type="number"
                />
              </div>
              <div class="col-2">
                <el-button
                  flat
                  icon="delete"
                  color="negative"
                  class="q-mr-xs"
                  label
                  @click="addMsg.ChildList.splice(y, 1)"
                />
              </div>
            </div>
          </div>
          <el-button
            flat
            size="sm"
            icon="add"
            style="font-weight:400;color: #3FC4FF;margin-top: 10px;"
            label="添加标签"
                        

            @click="addbiaoqian()"
          />
        </el-card-section>
        <el-separator />
        <el-card-actions align="right" class="bg-white">
          <el-button class="q-mr-md" label="取消" @click="isShow = false" />
          <el-button
            color="accent"
            class="q-mr-md"
            label="确定"
            @click="submit()"
            :loading="btnloading"
          />
        </el-card-actions>
      </el-card>
    </el-dialog>
    <!-- 修改标签组名称 -->
    <el-dialog :visible.sync="isParent" persistent>
      <el-card style="width: 500px; max-width: 80vw;">
        <el-card-section class="row items-center q-pb-none">
          <div class="text-h6">修改标签信息</div>
          <el-space />
          <el-button icon="close" flat round dense v-close-popup />
        </el-card-section>
        <el-separator />
        <el-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
          <el-input
            v-if="edittype == 1"
            outlined
            counter
            maxlength="8"
            clearable
            standout="bg-primary text-white"
            v-model="addMsg.Name"
            placeholder="标签组名称"
            :rules="[val => !!val || '请输入分组名称']"
            ref="eName"
          />
          <el-input
            v-if="edittype == 2 || edittype == 3"
            outlined
            counter
            maxlength="15"
            clearable
            standout="bg-primary text-white"
            v-model="addMsg.Name"
            placeholder="标签名称"
            :rules="[val => !!val || '请输入标签名称']"
            ref="eName"
          />
          <el-input
            outlined
            clearable
            standout="bg-primary text-white"
            v-model="addMsg.Sort"
            placeholder="标签组排序"

            :rules="[val => !!val || '请输入分组排序']"
            ref="eSort"
          />
          <div style="color: #787878;">*注:标签组/标签,排序值越大,排序越靠前！</div>
        </el-card-section>
        <el-separator />
        <el-card-actions align="right" class="bg-white">
          <el-button class="q-mr-md" label="取消" @click="isParent = false" />
          <el-button
            color="accent"
            class="q-mr-md"
            label="确定"
            @click="submitParent()"
            :loading="btnloading"
          />
        </el-card-actions>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      SelectID: 0,
      ChildList: [],
      groupName: '',
      isShow: false,
      addMsg: {},
      btnloading: false,
      isName: false,
      issort: false,
      isalladopt: false,
      isParent: false,
      edittype: 1,
      selectindex:0,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.apipost('/QYWeChat/GetWeChatLableList',{},(res) => {
        if (res.data.Code == 1) {
          this.dataList = res.data.Data;
          this.SelectID = this.dataList[this.selectindex].Id
          this.ChildList = this.dataList[this.selectindex].ChildList
          this.groupName = this.dataList[this.selectindex].Name
        }
      })
    },
    getSelectlist(x,y) {
      this.SelectID = x.Id;
      this.ChildList = x.ChildList;
      this.groupName = x.Name
      this.selectindex = y

    },
    EditCategory() {
      this.addMsg = {
        Id: 0,
        ParentId: 0,
        Name: '',
        Sort: 1,
        ChildList: [{ Name: '', Sort: 1, }],
      }
      this.isShow = true
    },
    addbiaoqian() {
      let obj = {
        Name: '',
        Sort: 1,
      }
      this.addMsg.ChildList.push(obj)
    },
    isChildList() {
      if (this.addMsg.Name == '' || this.addMsg.Name == null) {
        this.$message.success({
          type: 'negative',
          message: `请填写标签分组名称`,
          position: 'top'
        })
        this.isalladopt = false
        return
      }
      if (this.addMsg.Sort == '' || this.addMsg.Sort == null) {
        this.$message.success({
          type: 'negative',
          message: `请填写标签分组序号`,
          position: 'top'
        })
        this.isalladopt = false
        return
      }
      this.isName = false;
      this.issort = false;
      if (this.addMsg.ChildList.length > 0) {
        this.addMsg.ChildList.map(x => {
          if (x.Name == '') {
            this.isName = true;
            return
          }
          if (x.Sort == '') {

            this.issort = true;
            return
          }
        })
      }
      if (this.isName == true) {
        this.$message.success({
          type: 'negative',
          message: `请填写标签名称`,
          position: 'top'
        })
        this.isalladopt = false
        return
      }
      if (this.issort == true) {
        this.$message.success({
          type: 'negative',
          message: `请填写标签排序`,
          position: 'top'
        })
        this.isalladopt = false
        return
      }
    },
    setlable(msg) {
      this.apipost('/QYWeChat/SetWeChatLable',msg,(res) => {
        if (res.data.Code == 1) {
          this.$message.success({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: '数据保存成功！',
            position: 'top'
          })
          this.getList()
          this.isShow = false;
          this.isParent = false;
        }
      })
    },
    submit() {
      this.isalladopt = true

      this.isChildList()//表单验证
      if (this.isalladopt == true) {
        this.setlable(this.addMsg)
      }

    },
    goDetailed(Id) {
      this.$confirm({
        title: "提示信息",
        message: '确定删除？',
        cancel: {
          label: "取消",
          flat: true
        },
        ok: {
          label: "确认",
          flat: true,
        }
      }).onOk(() => {
        this.apipost('/QYWeChat/DelWeChatLable',{ LableId: Id },(res) => {
          if (res.data.Code == 1) {
            this.$message.success({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            if(this.selectindex+1 == this.dataList.length){
              this.selectindex--
            }
            this.getList()

          }
        })
      });
    },
    getParent(row, type) {
      if (type == 1) {
        this.addMsg = JSON.parse(JSON.stringify(row))

      } else if (type == 2) {
        this.addMsg = {
          ParentId: row.ParentId,
          Name: row.Name,
          Id: row.Id,
          Sort: row.Sort,
        }
      } else {
        this.addMsg = {
          ParentId: this.SelectID,
          Name: '',
          Id: 0,
          Sort: '1',
        }
      }
      this.isParent = true;
      this.edittype = type
    },
    submitParent() {
      if (this.addMsg.Name == '' || this.addMsg.Name == null) {
        this.$message.success({
          type: 'negative',
          message: `请填写标签分组名称`,
          position: 'top'
        })
        this.isalladopt = false
        return
      }
      if (this.addMsg.Sort == '' || this.addMsg.Sort == null) {
        this.$message.success({
          type: 'negative',
          message: `请填写标签分组序号`,
          position: 'top'
        })
        this.isalladopt = false
        return
      }
        let msg

      if (this.edittype == 1) {
        msg = {
          Id: this.addMsg.Id,
          Name: this.addMsg.Name,
          Sort: this.addMsg.Sort,
        }
      } else {
        msg = {
          Name: this.addMsg.Name,
          Sort: this.addMsg.Sort,
          Id: this.addMsg.Id,
          ParentId: this.addMsg.ParentId,
        }
      }
      this.setlable(msg)
    }}
}
</script>

<style lang="scss">
.customerlabel {
  width: 100%;
  height: calc(100vh - 80px);
  .customer-category-content {
    min-height: 100%;
    max-height: 100%;
    border-right: 1px solid #d7d7d7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-right: 15px;
  }
  .header-box {
    padding: 21px 0 21px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 26px;
    border-radius: 5px;
    background-color: #f5f5fa;
  }
  .category-list {
    flex: 1;
    overflow: auto;
    ul {
      margin: 0;
      padding: 0;
      list-style: none outside none;
      .category-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        border-radius: 5px;
        padding: 0 26px;
        position: relative;
      }
    }
  }

  .w90 {
    width: 90px;
    text-align: center;
  }
  .category-list::-webkit-scrollbar {
    display: none;
  }
  .icons {
    font-size: 12px;
    margin-right: 5px;
  }
  .Selectstyle {
    background: #edf2fd;
    color: #3470ff;
  }
}
</style>