<template>
  <div>
    <div class="row">
      <div class="collaborator-title">可放弃客户:</div>
      <div class="col-10">
        <div class="q-gutter-sm">
          <q-radio v-model="Type" :val="1" @update:model-value="changeAbandonType" label="全部客户" />
          <q-radio v-model="Type" :val="2" @update:model-value="changeAbandonType" label="部分客户" />
        </div>
        <div v-if="Type == 2">
          <requestGroup v-model:addCondition="SelectType" :defaultData="AbandonKHSelect" @change="getCondition" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="collaborator-title">可操作员工:</div>
      <div class="col-10">
        <div class="flex items-center">
          <q-toggle v-model="AbandonDeptState" @update:model-value="ChangeAbandonDeptState" />以下部门允许将客户放弃到公海
          <q-btn color="primary" :disable="!AbandonDeptState" label="修改" unelevated size="xs" class="q-ml-lg"
            @click="checkedPublicGetDept" />
        </div>
        <div>
          <div v-for="(item, index) in AbandonDeptNameList" :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 class="row">
      <div class="collaborator-title">放弃后审核:</div>
      <div class="col-10">
        <div class="flex items-center">
          <q-toggle v-model="Audit" :true-value="1" :false-value="2" @update:model-value="ChangeAbandonAuditState" />
          开启后，员工放弃客户时需要企微端设置的部门上级审批，审批同意后才可放弃。
          <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>
    </div>
    <div class="row">
      <div class="collaborator-title" style="padding-top: 15px">放弃原因:</div>
      <div class="col-10">
        <draggable v-model="ReasonList" tag="div" item-key="Id">
          <template #item="{ element, index }">
            <div class="flex items-center">
              <i class="iconfont icon-drag" style="font-size: 20px; color: #777"></i>
              <div class="AbandonReasonItem flex items-center">{{ element }}</div>
              <n-popover trigger="hover">
                <template #trigger>
                  <i class="iconfont icon-edit_light" style="font-size: 20px; color: #111"
                    @click="editAbandonReason(element, index)"></i>
                </template>
                <span>编辑</span>
              </n-popover>
              <n-popover trigger="hover">
                <template #trigger>
                  <i class="iconfont icon-delete_light q-ml-md" style="font-size: 20px; color: #111"
                    @click="delAbandonReaso(index)"></i>
                </template>
                <span>删除</span>
              </n-popover>
            </div>
          </template>
        </draggable>
        <div class="flex items-center q-pl-sm q-mt-md">
          <q-btn color="primary" label="添加" unelevated class="q-ml-lg q-mr-md" @click="addAbandonReason" />
          已设/可设上限：{{ ReasonList.length }}/10
        </div>
        <q-dialog v-model="AbandonReasonDialog">
          <q-card>
            <q-card-section class="row items-center q-pb-none">
              <div class="text-h6" v-if="AbandonReasonType == 0">添加</div>
              <div class="text-h6" v-if="AbandonReasonType == 1">编辑</div>
              <q-space />
              <q-btn icon="close" flat round dense v-close-popup />
            </q-card-section>

            <q-card-section class="q-py-lg" style="width: 460px; max-width: 600px">
              <n-input maxlength="10" size="large" v-model:value="AbandonReasonText" show-count clearable
                placeholder="请输入放弃原因" />
            </q-card-section>

            <q-card-actions align="right">
              <q-btn flat label="取消" color="primary" v-close-popup />
              <q-btn unelevated label="确定" color="primary" @click="saveAbandonReason" />
            </q-card-actions>
          </q-card>
        </q-dialog>
      </div>
    </div>
    <departmentStaff v-model="DptDialog" :defaultArray="DptDataDefault" nodeKey="newId" labelKey="DeptName"
      childrenKey="ChildList" strategy="leaf" :treeData="DptDataTree" @select="getAbandonDpt" />
  </div>
</template>

<script lang="ts">
  import {
    ref,
    toRefs,
    reactive,
    defineComponent,
    inject,
  } from 'vue'
  import departmentStaff from '@/components/common/departmentStaff.vue'
  import requestGroup from '@/components/customer/request-group.vue'
  import draggable from 'vuedraggable'
  import message from '@/utils/message'
  interface dataParams {
    AbandonReasonList: string[]
      [key: string]: any
  }
  export default defineComponent({
    components: {
      departmentStaff,
      requestGroup,
      draggable
    },
    props: {
      AabandonType: {
        type: Number,
        default: 1
      },
      AbandonDept: {
        type: String,
        default: "-1"
      },
      AbandonDeptList: {
        type: Array,
        default: () => []
      },
      AbandonEmpList: {
        type: Array,
        default: () => []
      },
      AbandonAudit: {
        type: Number,
        default: 2
      },
      AbandonReason: {
        type: String,
        default: ''
      },
      AbandonReasonList: {
        type: Array,
        default: () => []
      },
      AbandonSelectType: { //可放弃部分客户的查询类型 1并且 2或者
        type: Number,
        default: 1
      },
    },
    setup(props, ctx) {
      const DptDataTree: any = inject('DptDataTree')
      const FaData: any = inject('data')
      let DptDialog = ref(false)
      let DptDataDefault = ref < string[] > ([])
      let data = reactive < dataParams > ({
        AbandonDeptNameList: [], //可放弃到公海的部门
        AbandonReasonDialog: false, //放弃原因弹窗
        AbandonReasonText: '', //放弃原因
        AbandonReasonIndex: 0, //放弃原因index
        AbandonReasonType: 0, //修改类型 0：新增,1：编辑
        AbandonDeptState: false, //以下部门允许将客户放弃到公海
        AbandonReasonList: [],
      })
      const ReasonList = ref(props.AbandonReasonList)

      if (props.AbandonDept == '-1') {
        data.AbandonDeptState = false
      } else {
        data.AbandonDeptState = true
        const dept = props.AbandonDeptList.map((e: any) => '1-' + e.DeptId)
        const deptName = props.AbandonDeptList.map((e: any) => {
          e.Type = 1
          return e
        })
        const emp = props.AbandonEmpList.map((e: any) => '2-' + e.DeptId)
        const empName = props.AbandonEmpList.map((e: any) => {
          e.Type = 2
          return e
        })
        DptDataDefault.value = [...dept, ...emp]
        data.AbandonDeptNameList = [...deptName, ...empName]
      }
      //以下部门允许将客户放弃到公海
      const ChangeAbandonDeptState = (val) => {
        if (!val) {
          ctx.emit("update:AbandonDept", '-1')
        }
      }
      //放弃后是否需要审核
      const ChangeAbandonAuditState = (val) => {
        ctx.emit("update:AbandonAudit", val)
      }
      //部门弹窗
      const checkedPublicGetDept = () => {
        DptDialog.value = true
      }
      const getAbandonDpt = val => {
        DptDialog.value = false
        const ids = val.map(e => e.Id.slice(2)).toString()
        const dept = JSON.parse(JSON.stringify(val))
        data.AbandonDeptNameList = dept
        ctx.emit("update:AbandonDept", ids)
      }
      //新增放弃原因
      const addAbandonReason = () => {
        data.AbandonReasonDialog = true
        data.AbandonReasonText = '',
          data.AbandonReasonIndex = 0
        data.AbandonReasonType = 0
      }
      //修改放弃原因
      const editAbandonReason = (val, index) => {
        data.AbandonReasonDialog = true
        data.AbandonReasonText = val,
          data.AbandonReasonIndex = index
        data.AbandonReasonType = 1
      }
      //保存放弃原因
      const saveAbandonReason = () => {
        if (!data.AbandonReasonText) {
          message.warnMsg('不能为空')
          return
        }
        if (data.AbandonReasonType === 0) {
          ReasonList.value.push(data.AbandonReasonText)
        } else {
          ReasonList.value[data.AbandonReasonIndex] = data.AbandonReasonText
        }
        ctx.emit("update:AbandonReason", ReasonList.value.toString())
        data.AbandonReasonDialog = false
        data.AbandonReasonText = ''
      }
      // 删除放弃原因
      const delAbandonReaso = (index: number) => {
        ReasonList.value.splice(index, 1)
      }
      const changeAbandonType = (val: number) => {
        ctx.emit('update:AabandonType', val)
      }
      const getCondition = (val) => {
        FaData.data.AbandonKHSelect = JSON.parse(JSON.stringify(val))
      }
      return {
        Type: ref(props.AabandonType),
        Audit: ref(props.AbandonAudit),
        SelectType: ref(props.AbandonSelectType),
        AbandonKHSelect: ref(FaData.data.AbandonKHSelect),
        ReasonList,
        DptDataTree,
        ...toRefs(data),
        DptDialog,
        DptDataDefault,
        ChangeAbandonDeptState,
        ChangeAbandonAuditState,
        addAbandonReason,
        editAbandonReason,
        saveAbandonReason,
        delAbandonReaso,
        checkedPublicGetDept,
        getAbandonDpt,
        changeAbandonType,
        getCondition
      }
    }
  })

</script>
<style lang="scss" scoped>
  .collaborator-title {
    min-width: 80px;
    line-height: 40px;
    text-align: right;
    margin-right: 10px;
    font-weight: 600;
    white-space: nowrap;
  }

  .AbandonReasonItem {
    width: 453px;
    height: 50px;
    line-height: 50px;
    padding-left: 22px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #d7d7d7;
    margin: 10px;
  }

  .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;
  }

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

</style>
