<template>
  <div class="q-mt-md q-pa-md CustomerOperation flex">
    <div class="customer-operation-category">
      <q-btn label="保存" @click="setCustomerConfig"></q-btn>
      <div v-for="item in leftList" :key="item.Id" :class="{ active: curItem == item.Id }"
        class="customer-operation-category--item" @click="changeActive(item)">{{ item.Name }}</div>
    </div>
    <div class="customer-operation-content">
      <div v-if="curItem == 1" class="row">
        <div class="collaborator-title">领取公海客户:</div>
        <div class="col-10">
          <div class="flex items-center">
            <q-toggle v-model="data.IsPublicAudit" :true-value="1" :false-value="2" />
            开启后，员工领取公海客户时需要企微端设置的部门上级审批，审批同意后才可领取。
            <n-popover trigger="hover" placement="right-start">
              <template #trigger>
                <q-icon name="help" size="xs" color="grey-4" />
              </template>
              <div class="tipBox">
                <div class="text-center q-mb-xs">部门上级：指在【企业微信后台】-【通讯录】设置的部门上级</div>
                <img src="@/assets/images/tip/dept-superior.png" style="width: 450px" />
              </div>
            </n-popover>
          </div>
          <div class="flex items-center">
            <q-toggle v-model="PublicGetDeptState" @update:model-value="ChangePublicGetDeptState" />以下部门允许领取公海客户
            <q-btn color="primary" :disable="!PublicGetDeptState" unelevated label="修改" size="xs" class="q-ml-lg"
              @click="checkedPublicGetDept" />
          </div>
          <div v-if="PublicGetDeptState">
            <div v-for="(item, index) in PublicGetDeptNameList" :key="index" class="dept-item">
              <div class="flex justify-center items-center">
                <q-icon name="work" color="primary" v-if="item.Type == 1" />
                <q-icon name="person" color="primary" v-if="item.Type == 2" />
                <span class="q-ml-sm">{{ item.DeptName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="curItem == 2">
        <Abandon v-model:AabandonType="data.AbandonType" v-model:AbandonDept="data.AbandonDept"
          v-model:AbandonAudit="data.AbandonAudit" :AbandonReasonList="data.AbandonReasonList"
          v-model:AbandonReason="data.AbandonReason" v-model:AbandonSelectType="data.AbandonSelectType"
          :AbandonEmpList="data.AbandonEmpList" :AbandonDeptList="data.AbandonDeptList" />
      </div>
      <div v-if="curItem == 3" class="row">
        <div class="collaborator-title">申请成为协作人：</div>
        <div class="col-10">
          <div class="flex items-center">
            <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />以下部门允许申请成为协作人
            <q-btn color="primary" label="修改" unelevated size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
          </div>
          <div>
            <!-- <div v-for="item in items" :key="item.id">{{ item }}</div> -->
          </div>
        </div>
      </div>
      <div v-if="curItem == 4" class="row">
        <div class="collaborator-title">添加协作人：</div>
        <div class="col-10">
          <div class="flex items-center">
            <q-toggle v-model="data.AddTeamDept" :true-value="1" :false-value="0" />以下部门允许申请成为协作人
            <q-btn color="primary" label="修改" unelevated size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
          </div>
          <div>
            <!-- <div v-for="item in items" :key="item.id">{{ item }}</div> -->
          </div>
          <div class="flex">
            <q-checkbox v-model="data.AddTeamDept" label="协作人被移除后（若该协作人已添加客户为好友），自动创建新的客户" />
          </div>
        </div>
      </div>
      <div v-if="curItem == 5">
        <div class="row">
          <div class="collaborator-title">转移客户：</div>
          <div class="col-10">
            <div class="flex items-center">
              <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
              以下部门允许转移客户
              <q-btn color="primary" label="修改" unelevated size="xs" class="q-ml-lg" @click="checkedPublicGetDept" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="collaborator-title">转移范围：</div>
          <div class="col-10">
            <div class="flex items-center">
              <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
              转移客户时允许选择的范围
              <q-btn color="primary" label="设置" unelevated size="xs" class="q-ml-lg" />
            </div>
          </div>
        </div>
      </div>
      <div class="row" v-if="curItem == 6">
        <div class="collaborator-title">删除客户跟进记录：</div>
        <div class="col-10">
          <div class="flex items-center">
            <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
            开启后，允许员工删除自己填写的客户跟进记录
          </div>
          <div class="flex items-center">
            <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
            开启后，仅允许添加跟进记录后
            <q-input outlined v-model="data.text" dense type="number" :min="0" style="width: 100px; margin: 0 10px" />
            分钟内删除
          </div>
        </div>
      </div>
      <div v-if="curItem == 7">
        <div class="row">
          <div class="collaborator-title">签到拜访限制：</div>
          <div class="col-10">
            <div class="flex items-center">
              <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
              开启后，仅企业客户允许签到拜访
            </div>
          </div>
        </div>
        <div class="row">
          <div class="collaborator-title">签到拜访拍照：</div>
          <div class="col-10">
            <div class="flex items-center">
              <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
              开启后，签到拜访时必须拍照
            </div>
          </div>
        </div>
      </div>
      <div v-if="curItem == 8">
        <div class="row">
          <div class="collaborator-title" style="min-width: 140px">创建企业时查重方式：</div>
          <div class="col-10">
            <div class="q-gutter-sm">
              <q-radio v-model="data.AbandonType" :val="1" label="模糊查重" />
              <q-radio v-model="data.AbandonType" :val="2" label="精准查重 " />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="collaborator-title" style="min-width: 140px">创建企业客户：</div>
          <div class="col-10">
            <div class="flex items-center">
              <q-toggle v-model="data.ApplyForTeamDept" :true-value="1" :false-value="0" />
              仅支持通过工商信息库来创建企业
            </div>
          </div>
        </div>
      </div>
      <div v-if="curItem == 9">
        <div class="row flex justify-end">
          <q-btn color="primary" label="添加自定义字段" unelevated />
        </div>
      </div>
    </div>
    <departmentStaff v-model="showDptDialog" :defaultArray="DptDataTreeDefault" nodeKey="newId" labelKey="DeptName"
      childrenKey="ChildList" strategy="leaf" :treeData="DptDataTree" @select="getdpt" />
  </div>
</template>
<script lang="ts">
  import {
    ref,
    toRefs,
    reactive,
    defineComponent,
    onMounted,
    provide,
    watch
  } from 'vue'
  import message from '@/utils/message'
  import customerSetService from '@/api/customerSet'
  import customerService from '@/api/customer'
  import departmentStaff from '@/components/common/departmentStaff.vue'
  import Abandon from './CustomerOperationComponents/Abandon.vue'
  interface dataParams {
    data: {
        AbandonReasonList: string[]
          [key: string]: any
      }
      [key: string]: any
  }
  export default defineComponent({
    components: {
      departmentStaff,
      Abandon
    },
    setup() {
      const leftList = ref([{
          Id: 1,
          Name: '领取公海客户'
        },
        {
          Id: 2,
          Name: '放弃到公海'
        },
        {
          Id: 3,
          Name: '申请成为协作人'
        },
        {
          Id: 4,
          Name: '添加协作人'
        },
        {
          Id: 5,
          Name: '转移客户'
        },
        {
          Id: 6,
          Name: '删除客户跟进记录'
        },
        {
          Id: 7,
          Name: '签到拜访设置'
        },
        {
          Id: 8,
          Name: '创建企业'
        },
        {
          Id: 9,
          Name: '写跟进'
        }
      ])
      let curItem = ref(1)
      let DptDataTree = ref < any[] > ([])
      let data = reactive < dataParams > ({
        data: {
          IsPublicAudit: 1,
          PublicGetDept: -1,
          AbandonType: 1,
          AbandonAudit: 0,
          AbandonReasonList: []
        },
        PublicGetDeptState: false, //以下部门允许领取公海客户
        PublicGetDeptNameList: [], //允许领取公海客户列表
        showDptDialog: false,
        DptDataTreeDefault: [] //部门默认值
      })
      provide('DptDataTree', DptDataTree)
      provide('data', data)
      const changeActive = item => {
        curItem.value = item.Id
      }
      //获取客户操作配置
      const getConfig = () => {
        customerSetService.getCustomerConfig({}).then(res => {
          data.data = res.data.Data
          if (data.data.PublicGetDept == -1) {
            data.PublicGetDeptState = false
          } else {
            data.PublicGetDeptState = true
          }
          const PublicGetDeptList = data.data.PublicGetDeptList.map(e => {
            e.Type = 1
            return e
          })
          const PublicGetEmpList = data.data.PublicGetEmpList.map(e => {
            e.Type = 2
            return e
          })
          data.PublicGetDeptNameList = [...PublicGetDeptList, ...PublicGetEmpList]
        })
      }
      const getDptTree = () => {
        customerService.getEmployeeData({}).then(res => {
          DptDataTree.value = res.data.Data
          if (DptDataTree.value.length == 0) return
          DptDataTree.value.forEach(x => {
            x.newId = x.DataType + '-' + x.DeptId
            if (x.ChildList && x.ChildList.length > 0) {
              getChildList(x.ChildList)
            }
          })
        })
      }
      const getChildList = (ChildList: Array < any > ) => {
        ChildList.forEach(x => {
          x.newId = x.DataType + '-' + x.DeptId
          if (x.ChildList && x.ChildList.length > 0) {
            getChildList(x.ChildList)
          }
        })
      }
      //保存客户操作配置
      const setCustomerConfig = () => {
        customerSetService.setCustomerConfig(data.data).then(() => {
          message.successMsg('设置成功')
          getConfig()
        })
      }
      //部门弹窗
      const checkedPublicGetDept = () => {
        data.showDptDialog = true
        if (curItem.value === 1) {
          // data.DptDataTreeDefault = data.data.PublicGetDept.split(',')
        } else if (curItem.value === 2) {
          // data.DptDataTreeDefault = data.data.AbandonDept.split(',')
        }
      }
      const getdpt = val => {
        data.showDptDialog = false
        const ids = val.map(e => e.Id.slice(2)).toString()
        const dept = JSON.parse(JSON.stringify(val))
        if (curItem.value === 1) {
          data.data.PublicGetDept = ids
          data.PublicGetDeptNameList = dept
        }
        if (curItem.value === 2) {
          data.data.AbandonDept = ids
          data.data.AbandonDeptList = dept
        }
      }
      //以下部门允许领取公海客户
      const ChangePublicGetDeptState = val => {
        if (!val) {
          data.data.PublicGetDept = '-1'
        }
      }

      watch(
        () => data.data,
        val => {

        }, {
          deep: true
        }
      )

      onMounted(() => {
        getDptTree()
        getConfig()
      })
      return {
        leftList,
        curItem,
        changeActive,
        ...toRefs(data),
        DptDataTree,
        getdpt,
        checkedPublicGetDept,
        setCustomerConfig,
        ChangePublicGetDeptState
      }
    }
  })
</script>
<style lang="scss" scoped>
  .CustomerOperation {
    background-color: rgb(243, 246, 249);
  }

  .customer-operation-category {
    margin-right: 10px;
    width: 200px;
    flex: none;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 0;
    overflow: auto;

    .customer-operation-category--item {
      padding: 15px 25px;
      cursor: pointer;
      font-weight: 600;
      user-select: none;
      color: #333;
      font-size: 14px;
    }

    .active {
      background-color: #eaf0ff;
      color: #3470ff;
    }
  }

  .customer-operation-content {
    background: #fff;
    flex: 1;
    border-radius: 8px;
    padding: 25px;
    overflow: auto;
  }

  .collaborator-title {
    min-width: 80px;
    line-height: 40px;
    text-align: right;
    margin-right: 10px;
    font-weight: 600;
    white-space: nowrap;
  }

  .dept-item {
    border: 1px solid #e1f3d8;
    background-color: #f0f9eb;
    color: #67c23a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    border-radius: 3px;
    padding: 0 14px;
    margin: 6px;
  }
</style>