<template>
  <div class="q-pa-md customerLib">
    <div class="q-py-md">
      <div class="flex justify-between q-mb-md">
        <div>
          <q-btn color="primary" unelevated label="+新增客户库" class="q-mr-md" @click="jumpPage('/editor/editCustomerLib')"/>
          <n-popover trigger="hover" :width="620" placement="right">
            <template #trigger>
              <span>了解多客户库的好处</span>
            </template>
            <div class="q-pa-md">
              <div class="tip-title">
                有效实现业务独立，提高管理效率，降低客户资源浪费
              </div>
              <div class="tip-content">
                <div class="tip-header">
                  多公海
                </div>
                <div class="tip-text">
                  每个客户库都有自己独立的公海，对本客户库外的数据隔离，有效提高线索流转的效率。
                </div>
                <div class="tip-list-text">
                    <div style="white-space:nowrap">
                      例如：
                    </div>
                    <div>
                      场景一：设置“北京客户库”、“南京客户库” 保持业务的独立性；<br/>
                      场景二：设置“市场客户库”、“电销客户库”、“面销客户库”，区分客户的流转阶段/属性；
                    </div>
                </div>
              </div>
              <div class="tip-content">
                <div class="tip-header">
                  多规则
                </div>
                <div class="tip-text">
                  每个客户库都有自己独立的规则，不同部门之间可能存在不同的规则：
                </div>
                <div class="tip-list-text">
                    <div style="white-space:nowrap">
                      例如：
                    </div>
                    <div>
                      回收客户的规则：不同的部门/员工，可设置不同的客户回收规则，合理利用资源；<br/>
                      员工的客户上限：不同的部门/员工，设置不同的客户上限，降低资源浪费的可能；<br/>
                      录入客户的标准：有的部门支持创建重复客户，有的部门则不支持；
                    </div>
                </div>
              </div>
            </div>
          </n-popover>
        </div>
        <q-btn text-color="accent" outline unelevated label="设置查重规则" @click="showRuleDig=true" />
      </div>
      <q-table class="sticky-right-column-table" :rows="list" flat :columns="columns" hide-bottom row-key="Id">
        <template v-slot:body-cell-range="props">
          <q-td :props="props">
            <div v-for="(item,index) in props.row.DeptList" :key="index">{{item.DeptName}}</div>
          </q-td>
        </template>
        <template v-slot:body-cell-seasRule="props">
          <q-td :props="props">
            <div>查看规则</div>
          </q-td>
        </template>
        <template v-slot:body-cell-libRule="props">
          <q-td :props="props">
            <div>查看规则</div>
          </q-td>
        </template>
        <template v-slot:body-cell-IsAllowRepeat="props">
          <q-td :props="props">
            <div v-if="props.row.IsAllowRepeat===1">是</div>
            <div v-if="props.row.IsAllowRepeat===2">否</div>
          </q-td>
        </template>
        <template v-slot:body-cell-operate="props">
          <q-td :props="props">
            <q-btn color="accent" flat label="编辑" />
            <q-btn color="negative" flat label="删除" />
          </q-td>
        </template>
      </q-table>
    </div>

    <!-- 查重规则弹窗 -->
    <q-dialog v-model="showRuleDig" full-height maximized position="right" transition-show="slide-left">
      <q-card>
        <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-card-section>
          <div style="width:750px">
            <q-item tag="label">
              <q-item-section avatar top>
                <q-radio v-model="LookRepeat" :val="1" color="primary" />
              </q-item-section>
              <q-item-section>
                <div class="ruleset-title" style="color:#858598"><span style="color:#606266">全局查重</span> (一个客户在<span
                    style="color:#f00">整个企业</span>内，只允许被一个员工跟进)</div>

                <div class="ruleset-box">
                  <div class="ruleset-txt">
                    一个客户，在整个企业内查重（整个企业不允许创建重复客户）
                  </div>
                  <div class="ruleset-img">
                    <img src="@/assets/images/customer/customerSet/rule1.jpg" />
                  </div>
                </div>
              </q-item-section>
            </q-item>
            <q-item tag="label">
              <q-item-section avatar top>
                <q-radio v-model="LookRepeat" :val="2" color="primary" />
              </q-item-section>
              <q-item-section>
                <div class="ruleset-title" style="color:#858598"><span style="color:#606266">客户库查重</span> (一个客户在<span
                    style="color:#f00">单个客户库</span>内，只允许被一个员工跟进)</div>

                <div class="ruleset-box">
                  <div class="ruleset-txt">
                    一个客户，在整个企业内查重（整个企业不允许创建重复客户）
                  </div>
                  <div class="ruleset-img">
                    <img src="@/assets/images/customer/customerSet/rule2.jpg" />
                  </div>
                </div>
              </q-item-section>
            </q-item>
          </div>
        </q-card-section>
        <q-card-actions align="left" class="bg-white text-teal">
          <q-btn color="primary" unelevated label="确定" class="q-ml-lg" @click="setLookRepeatRule" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script lang="ts">
  import {

    defineComponent,
    reactive,
    toRefs,
    onMounted
  } from 'vue'
  // import { Dialog } from 'quasar'
  import message from '@/utils/message'
  import customerSetService from '@/api/customerSet';
  import router from '@/router/index'
  export default defineComponent({

    setup() {
      const msg = reactive({
        Name: ""
      })
      const data = reactive({
        list: [],
        columns: [{
          name: 'Name',
          label: '名称',
          field: 'Name',
          align: 'left',
        }, {
          name: 'range',
          label: '适用范围',
          field: 'range',
          align: 'left',
        }, {
          name: 'seasRule',
          label: '公海回收规则',
          field: 'seasRule',
          align: 'left',
        }, {
          name: 'libRule',
          label: '私库限额规则',
          field: 'libRule',
          align: 'left',
        }, {
          name: 'IsAllowRepeat',
          label: '是否允许重复客户',
          field: 'IsAllowRepeat',
          align: 'left',
        }, {
          name: 'UpdateTime',
          label: '创建时间',
          field: 'UpdateTime',
          align: 'left',
        }, {
          name: 'operate',
          label: '操作',
          field: 'operate',
          align: 'left',
          style: 'width: 200px'
        }],
        showRuleDig: false
      })
      const getList = () => {
        customerSetService.getCustomerLibraryList(msg).then(res => {
          data.list = res.data.Data
        })
      }
      const LookRepeatMsg = reactive({ //查重规则 1客户库查重 2全局查重
        LookRepeat: 1
      })
      const getLookRepeatRule = () => {
        customerSetService.getCustomerLibraryLookRepeat({}).then(res => {
          LookRepeatMsg.LookRepeat = res.data.Data
        })
      }
      const setLookRepeatRule = () => {
        customerSetService.setCustomerLibraryLookRepeat(LookRepeatMsg).then(res => {
          message.successMsg(res.data.Message)
          data.showRuleDig = false
        })
      }
       const jumpPage = (url: string, Id = 0) => {
        router.push({
          path: url,
          query: {
            Id
          }
        })
      }
      onMounted(() => {
        getList()
        getLookRepeatRule()
      })
      return {
        ...toRefs(data),
        ...toRefs(LookRepeatMsg),
        setLookRepeatRule,
        jumpPage
      }
    }
  })

</script>
<style lang="scss" scoped>
  .ruleset-title {
    line-height: 40px;
  }

  .ruleset-box {
    width: 606px;
    align-items: center;
    color: #333;
    padding: 30px 0 42px 0;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ccc;

    .ruleset-txt {
      text-align: center;
    }

    .ruleset-img {
      margin-top: 24px;
      display: flex;
      justify-content: center;
    }
  }

  .tip-title {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bolder;
  }

  .tip-content {
    background-color: #f4f4f6;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 15px;
  }

  .tip-header {
    color: var(--q-accent);
    font-size: 18px;
    font-weight: bolder;
    margin-bottom: 15px;
  }

  .tip-text {
    font-size: 14px;
    margin-bottom: 5px;
  }
   .tip-list-text {
    color: var(--q-accent);
    font-size: 12px;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    font-weight: 500;
    line-height:22px;
  }

</style>
