<template>
  <div class="customerlabel row">
    <div class="col-5 customer-category-content">
      <div class="row header-box">
        <div style="font-weight: 700;">标签分组</div>
        <q-btn
          color="accent"
          size="sm"
          class="q-mr-md"
          icon="add"
          label="新增分組"
          @click="EditCategory()"
        ></q-btn>
      </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 data.dataList" :key="y">
            <li @click="getSelectlist(x,y)">
              <div class="category-item" :class="{ 'Selectstyle': data.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;">
                  <q-btn flat icon="edit" class="icons" @click="getSelectlist(x,y), getParent(x, 1)" />
                  <q-btn
                    flat
                    icon="delete"
                    class="icons"
                    @click="getSelectlist(x,y), goDetailed(x.Id)"
                  />
                </div>
              </div>
            </li>
          </span>
          <div
            v-if="data.dataList && data.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;">{{ data.groupName }}</span>
        </div>
        <q-btn
          color="accent"
          size="sm"
          class="q-mr-md"
          icon="add"
          label="新增分組"
          @click="getParent({}, 3)"
        ></q-btn>
      </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 data.ChildList" :key="y">
            <li>
              <div class="category-item" :class="{ 'Selectstyle': data.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;">
                  <q-btn flat icon="edit" class="icons" @click="getParent(x, 2)" />
                  <q-btn flat icon="delete" class="icons" @click="goDetailed(x.Id)" />
                </div>
              </div>
            </li>
          </span>
          <div
            v-if="data.ChildList && data.ChildList.length == 0"
            style="width: 100%;height: 50px;line-height: 50px;text-align: center;"
          >暂无数据</div>
        </ul>
      </div>
    </div>

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

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

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

<script lang="ts">
import customerSetService from '@/api/customerSet'
import { useQuasar } from 'quasar'


import {
  defineComponent,
  onMounted,
  reactive,
} from 'vue'

export default defineComponent({
  setup() {
    const $q = useQuasar()
    const data: any = reactive({
      dataList: [],
      SelectID: 0,
      ChildList: [],
      groupName: '',
      isShow: false,
      addMsg: {},
      btnloading: false,
      isName: false,
      issort: false,
      isalladopt: false,
      isParent: false,
      edittype: 1,
      selectindex:0,
    })
    const getList = () => {
      customerSetService.getWeChatLableList({}).then((res) => {
        if (res.data.Code == 1) {
          data.dataList = res.data.Data;
          data.SelectID = data.dataList[data.selectindex].Id
          data.ChildList = data.dataList[data.selectindex].ChildList
          data.groupName = data.dataList[data.selectindex].Name
        }
      })
    }
    const getSelectlist = (x:any,y:number) => {
      data.SelectID = x.Id;
      data.ChildList = x.ChildList;
      data.groupName = x.Name
      data.selectindex = y

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

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

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

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

          }
        })


      });
    }
    const getParent = (row: any, type: number) => {
      if (type == 1) {
        data.addMsg = JSON.parse(JSON.stringify(row))

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

      if (data.edittype == 1) {
        msg = {
          Id: data.addMsg.Id,
          Name: data.addMsg.Name,
          Sort: data.addMsg.Sort,
        }
      } else {
        msg = {
          Name: data.addMsg.Name,
          Sort: data.addMsg.Sort,
          Id: data.addMsg.Id,
          ParentId: data.addMsg.ParentId,
        }
      }
      setlable(msg)
    }
    onMounted(() => {
      getList()
    })
    return {
      onMounted,
      getList,
      EditCategory,
      data,
      getSelectlist,
      addbiaoqian,
      submit,
      isChildList,
      setlable,
      goDetailed,
      getParent,
      submitParent
    }

  }
})

</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>