<template>
  <div class="q-pa-md">
    <div class="q-gutter-lg">
      <q-radio v-model="configMsg.ClueType" :val="2" @update:model-value="configChange"> 自动分配
        <n-popover trigger="hover" placement="right-start">
          <template #trigger>
            <q-icon name="help" size="xs" color="grey-4" />
          </template>
          <div class="tipBox">
            场景一：线索认定有效后，流转至待分配客户库，进行自动分配；<br />
            场景二：将客户导入到待分配客户库，进行自动分配；
          </div>
        </n-popover>
      </q-radio>
      <q-radio v-model="configMsg.ClueType" :val="1" @update:model-value="configChange">手动分配
        <n-popover trigger="hover" placement="right-start">
          <template #trigger>
            <q-icon name="help" size="xs" color="grey-4" />
          </template>
          <div class="tipBox">
            在线索库或待分配客户库，可以进行手动分配
          </div>
        </n-popover>
      </q-radio>
    </div>
    <div class="q-pa-md" v-if="configMsg.ClueType === 2">
      <div class="aoto-matic-header">
        若客户满足多条规则，会优先按照编号顺序执行规则
        <q-btn color="primary" label="+新增规则" style="margin-left: 10px;" @click="jumpPage('/editor/editRule')" />
      </div>
      <table class="payTable">
        <thead>
          <tr>
            <th>排序</th>
            <!-- <th>查询类型</th> -->
            <th>规则</th>
            <th>部门列表</th>
            <th>人员列表</th>
            <th>分配方式</th>
            <th width="10%">编辑</th>
            <th width="5%"></th>
          </tr>
        </thead>
        <tr v-if="data.length == 0 && defaultData.length == 0">
          <td :colspan="9" align="center">暂无数据</td>
        </tr>
        <template v-if="defaultData.length > 0">
          <tr v-for="(item,index) in defaultData" :key="index">
            <td></td>
            <!-- <td>
                            <span v-if="item.RuleSelectType === 1">并且</span>
                            <span v-if="item.RuleSelectType === 2">或者</span>
                        </td>-->
            <td>
              <div v-if="item.ConditionStrList.length > 0">
                <div v-for="(e,i) in item.ConditionStrList" :key="i">{{ e }}</div>
              </div>
              <div v-else>未匹配设定规则的客户</div>
            </td>
            <td>
              <div v-if="item.DeptList.length > 0">
                <div v-for="(e) in item.DeptList" :key="e.DeptId">{{ e.DeptName }}</div>
              </div>
              <div v-else>-</div>
            </td>
            <td>
              <div v-if="item.EmpList.length > 0">
                <div v-for="(e) in item.EmpList" :key="e.Id">{{ e.EmployeeName }}</div>
              </div>
              <div v-else>-</div>
            </td>
            <td>
              <span v-if="item.RuleAllotWay === 1">依次轮流</span>
              <span v-if="item.RuleAllotWay === 2">随机分配</span>
            </td>
            <td>
              <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
                @click="jumpPage('/editor/editRule', item.Id)" />
            </td>
            <td></td>
          </tr>
        </template>
        <draggable v-model="data" tag="tbody" item-key="Id" @update="datadragEnd" v-if="data.length > 0"
          :move="getDragId">
          <template #item="{ element, index }">
            <tr>
              <td>
                <span style="color:#606266">{{ index + 1 }}</span>
              </td>
              <!-- <td>
                                <span v-if="element.RuleSelectType === 1">并且</span>
                                <span v-if="element.RuleSelectType === 2">或者</span>
                            </td>-->
              <td>
                <div v-if="element.ConditionStrList.length > 0">
                  <div v-for="(e,i) in element.ConditionStrList" :key="i">{{ e }}</div>
                </div>
                <div v-else>未匹配设定规则的客户</div>
              </td>
              <td>
                <div v-if="element.DeptList.length > 0">
                  <div v-for="(e) in element.DeptList" :key="e.DeptId">{{ e.DeptName }}</div>
                </div>

                <div v-else>-</div>
              </td>
              <td>
                <div v-if="element.EmpList.length > 0">
                  <div v-for="(e) in element.EmpList" :key="e.Id">{{ e.EmployeeName }}</div>
                </div>

                <div v-else>-</div>
              </td>
              <td>
                <span v-if="element.RuleAllotWay === 1">依次轮流</span>
                <span v-if="element.RuleAllotWay === 2">随机分配</span>
              </td>
              <td>
                <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
                  @click="jumpPage('/editor/editRule', element.Id)" />
                <q-btn v-if="element.IsDefault != 1" flat size="xs" icon="delete" color="negative" class="q-mr-xs"
                  label="删除" @click="del(element.Id)" />
              </td>
              <td>
                <i class="iconfont icon-drag" style="font-size: 20px;color: #777;"></i>
              </td>
            </tr>
          </template>
        </draggable>
      </table>
    </div>
    <div class="q-pa-md manual" v-if="configMsg.ClueType === 1">
      <div class="box-manual" :class="{ 'checked-border': configMsg.ClueAllotWay == 1 }"
        @click="configMsg.ClueAllotWay = 1; configChange()">
        <q-icon name="autorenew" size="lg" />
        <div>按已选员工顺序依次轮流分配</div>
        <div class="right" v-if="configMsg.ClueAllotWay == 1">
          <q-icon name="check" class="check-icon" />
        </div>
      </div>
      <div class="box-manual" :class="{ 'checked-border': configMsg.ClueAllotWay == 2 }"
        @click="configMsg.ClueAllotWay = 2; configChange()">
        <q-icon name="shuffle" size="lg" />
        <div>按已选员工随机分配</div>
        <div class="right" v-if="configMsg.ClueAllotWay == 2">
          <q-icon name="check" class="check-icon" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import {
    ref,
    defineComponent,
    reactive,
    onMounted
  } from 'vue'
  import draggable from "vuedraggable";
  import {
    Dialog
  } from 'quasar'
  import message from '@/utils/message'
  import customerSetService from '@/api/customerSet';
  import router from '@/router/index'
  export default defineComponent({
    components: {
      draggable,
    },
    setup() {
      let defaultData = ref < Array < dataType >> ([])
      let data = ref < Array < dataType >> ([])
      let dragId = ref(0)
      const getDragId = (e: any) => {
        dragId.value = e.draggedContext.element.Id
      }
      const datadragEnd = (e: any) => {
        let olddragId = 0
        if (e.newIndex > 0) {
          olddragId = data.value[e.newIndex - 1].Id
        } else {
          olddragId = 0
        }
        let msg = {
          RuleId: dragId.value,
          Type: 1,
          TargetId: olddragId,
        }
        setState(msg)
      }
      const getClueList = () => {
        defaultData.value = []
        data.value = []
        customerSetService.getCustomerClueRuleList({}).then(res => {
          res.data.Data.map((item: dataType) => {
            if (item.IsDefault === 1) {
              defaultData.value.push(item)
            } else {
              data.value.push(item)
            }
          })
        })
      }
      let configMsg = reactive < dataConfigType > ({
        ClueType: 1, // 1手动分配 2自动分配
        ClueAllotWay: 1, // 1依次轮流 2随机分配
      })
      const getCustomerClueRuleConfig = () => {
        customerSetService.getCustomerClueRuleConfig({}).then(res => {
          let data = res.data.Data
          configMsg.ClueType = data.ClueType
          configMsg.ClueAllotWay = data.ClueAllotWay
        })
      }
      const jumpPage = (url: string, Id = 0) => {
        router.push({
          path: url,
          query: {
            Id
          }
        })
      }
      const del = (id) => {
        Dialog.create({
          title: "提示",
          message: "确认删除？",
          cancel: '取消',
          ok: "确认"
        }).onOk(() => {
          let msg = {
            RuleId: id,
            Type: 2,
          }
          setState(msg)
        })
      }
      const configChange = () => {
        customerSetService.setCustomerClueRuleConfig(configMsg).then(res => {
        })
      }
      const setState = (msg) => {
        customerSetService.setCustomerClueRuleState(msg).then(res => {
          message.successMsg(res.data.Message)
          if (msg.Type == 2) {
            getClueList()
          }
        })
      }
      onMounted(() => {
        getClueList();
        getCustomerClueRuleConfig();
      })
      return {
        getDragId,
        configChange,
        defaultData,
        data,
        datadragEnd,
        jumpPage,
        configMsg,
        del
      }
    }
  })

</script>
<style lang="scss" scoped>
  .payTable {
    width: 100%;
    border-collapse: collapse;
  }

  .payTable tr th {
    background: #fff;
    height: 60px;
    font-size: 12px;
    font-weight: bold;
    color: #2d2d2d;
    background: #dddee0;
  }

  .payTable tr {
    background: #fff;
    text-align: center;
    height: 60px;
  }

  .payTable tr td {
    font-size: 13px;
    text-align: center;
    color: #2d2d2d;
    box-sizing: border-box;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;
  }

  .aoto-matic-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-left: 2px;
    color: #858598;
    font-size: 14px;
  }

  .manual {
    height: 100%;
    display: flex;
    margin: 0 auto;
    width: 800px;
    justify-content: space-around;
    margin-top: 191px;

    .box-manual {
      cursor: pointer;
      width: 311px;
      height: 198px;
      background: #f9f9f9;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      position: relative;

      .right {
        position: absolute;
        right: -20px;
        bottom: -20px;
        display: block;
        width: 0;
        height: 0;
        transform: rotate(45deg);
        border: 20px solid transparent;
        border-left: 20px solid #3470ff;

        .check-icon {
          position: absolute;
          top: -8px;
          left: -19px;
          transform: rotate(-45deg);
          font-size: 14px;
          font-weight: 700;
          color: #fff;
        }
      }
    }
  }

  .checked-border {
    background-color: #edf2fd !important;
    border: 2px solid #3470ff !important;
    color: #3470ff;
  }

  .tipBox {
    font-size: 13px;
    line-height: 1.8;
  }

</style>
